Framer for Games: Raid HQ Character Selection Menu

Part 1 of Series: Framer for Games

Upcoming games and/or game mechanics in this series

Tune in Thursday mornings for a new entry in this series. I’d love to read your suggestions in the comments.

  1. Raid HQ Character Selection [Thursday, June 23]
  2. Endless Runner [Thursday, June 30]
  3. Guitar Hero [Thursday, July 7]
  4. Card Match [Thursday, July 14]
  5. Snake [Thursday, July 21]
  6. Dropping Ball Catcher [Thursday, July 28]
  7. Arcade Joystick [Thursday, August 4]
  8. Sliding Blocks [Thursday, August 11]
  9. Vertical Platformer [Thursday, August 18]
  10. Pong [Thursday, August 25]
  11. Tempest [Thursday, September 1]

Link to the Framer project

In the recently released mobile game, Raid HQ, the player is capable of performing one of three primary actions during combat:

  • Tap to shoot
  • Drag to move
  • Release to select character (and slow time)

In this article, I’ll highlight the snippets of code from the larger project that enable this functionality, albeit at a rudimentary level.

Drag to move the player

With the player layer created, making it draggable to the confines of the screen only requires two lines of code:

player.draggable.enabled = yes
player.draggable.constraints = Screen.frame


  • Enable the layer’s draggable property by setting draggable.enabled to true using a CoffeeScript keyword, yes
  • Configure the draggable.constraints object to match the frame of the Screen object made available by Framer

Tap to shoot

In Framer, the MouseDown event only fires once — when the mouse is pressed down. Thus, in order to constantly generate bullets while the mouse is pressed down, I chose the DragMove event.

The only tradeoff with using DragMove is that bullets will not fire when the player is stationary — as opposed to in Raid HQ where the player will fire bullets as long as the screen remains tapped.

player.on Events.DragMove, ->
bullet = new Layer
midX: player.midX
midY: player.minY
width: 20, height: 20
borderRadius: “50%”
backgroundColor: player.backgroundColor
shoot = new Animation
layer: bullet
y: Screen.height / 2
opacity: 0
time: 0.5

Code Breakdown

  • Add an event listener to the player layer’s DragMove event handle
  • Each time player is moved/dragged
     — Create a new layer, bullet
     — Move bullet to the center of player
     — Reduce its size significantly
     — Round its corners so it appears circular
     — Set its backgroundColor to match that of player
     — Create a new animation, shoot
     — Attached this animation to bullet
     — Move bullet to the middle of the screen, vertically
     — Make bullet disapper
     — Do all of this in 500ms (or half a second)
     — Start shoot

Select different character

This core mechanic is triggered anytime the player lifts their finger from the screen. Doing so toggles the visibility of a character selection menu, where the player can tap to select a new character. Tapping the screen again hides the character selection menu and resumes the bullet barrage.

To recreate this effect in Framer, I elected to target two layers and trigger state changes on one when the player interacts with the other.

Create and configure selection menu

selectChar = new Layer
parent: player
width: 400
y: -100
visible: no
backgroundColor: “transparent”
width = selectChar.width / colors.length
for color in colors
char = new Layer
parent: selectChar
width: width
height: width
borderRadius: “50%”
x: width * colors.indexOf color
backgroundColor: color
char.on Events.MouseOver, ->
player.backgroundColor = this.backgroundColor
visible: yes


  • Create new layer selectChar
     — Set its parent for placement purposes
     — Hide it
     — Remove the default backgroundColor
  • Declare a global variable, width, for use in the upcoming loop
  • Iterate over an array containing four strings — each a color — each time:
     — Create a new layer char
     — Set its parent
     — Size it dynamically
     — Position it dynamically
     — Add an event listener for the MouseOver event
     — Change player layer’s backgroundColor to this layer’s backgroundColor
  • Add state to selectChar that sets layer to visible

Toggle Selection Menu state through interaction with player layer

player.on Events.MouseDown, ->
selectChar.states.switch “default”
player.on Events.MouseUp, ->
selectChar.states.switch “visible”


  • Add an event listener for the player layer’s MouseDown event
     — When triggered
     — Switch selectChar’s state to it’s default (not visible)
  • Add an event listener for the player layer’s MouseUp event
     — When triggered
     — Switch selectChar’s state to visible

Framer/CoffeeScript mechanics highlighted here

  • Event listeners
  • Layer states
  • Loops
  • Global variables
  • Dynamic values