Framer for Games: Arcade Joystick

Part 7 of Framer for Games series

Core mechanic: Mapping layer positions with Utils.Modulate

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 Framer Prototype

This prototype is not so much of a game, but rather a simulation of a physical game controller: the arcade joystick. Grabbing it by its handle and dragging in any direction controls an element on the screen.

A simulation of the arcade joystick prototype

Game elements

  • Joystick component
  • Object controlled by the player object
  • [Optional] button to toggle right- and left-handedness

Joystick component

# Joystick Components# Area at large to encompass both positions for joystick
joystickArea = new Layer
x: Screen.width / 2
y: 901
width: 300, height: 300
backgroundColor: "transparent"
borderColor: "maroon"
borderWidth: 10
borderRadius: "50%"
joystickArea.states.animationOptions = time: 0.2
x: Screen.width / 2
maxX: Screen.width / 2
# Layer acting as visual joint for joystick handle [Grey shape under joystick]
joystickHandle = new Layer
parent: joystickArea
width: 150, height: 150
borderRadius: "50%"
# Draggable joystick object
joystick = new Layer
parent: joystickArea
width: 200, height: 200
borderRadius: 100
backgroundColor: "red"
joystick.draggable.enabled = yes
joystick.draggable.overdrag = no
joystick.draggable.constraints =
x: 0, y: 0
width: joystickArea.width
height: joystickArea.height

Switch Hands button

# Switch Hands Button
handToggle = new Layer
y: Align.bottom
width: 750
height: 100
Utils.labelLayer(handToggle, "Switch Hands") = fontSize: "48px"
# When button is clicked, it toggles state on joystickArea
handToggle.on Events.Click, -> "left", "right"

Object controlled by joystick

# Joystick-controlled Object
player = new Layer
rotation: 45
borderRadius: "25%"
# Using color to denote whether object is activated by joystick
backgroundColor: "white"
backgroundColor: "gray"

Where the magic happens

# Joystick Mapping Logic# Whenever the joystick is being dragged [i.e. it's position changes]
joystick.on "change:point", ->
player.states.switch "moving"
# Update x and y position of game object by amount between 0 and 4 units
# depending on how far from the center the joystick is dragged
player.x = player.x + Utils.modulate(joystick.x, [0,100], [-4,4])
player.y = player.y + Utils.modulate(joystick.y, [0,100], [-4,4])

# Restrict boundary for player object so it never goes beyond screen
if player.x < 0
player.x = 0
if player.maxX > Screen.width
player.maxX = Screen.width
if player.y < rules.height
player.y = rules.height
if player.maxY > Screen.height - handToggle.height
player.maxY = Screen.height - handToggle.height
# When joystick is no longer activated, return it to its original position
joystick.on Events.DragEnd, ->
player.states.switch "notMoving"

Framer/CoffeeScript mechanics highlighted here

  • Event listeners
  • Layer states
  • Utility methods
  • Control flow




Designer, Developer, DataViz, Dad •

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Robert Mion

Robert Mion

Designer, Developer, DataViz, Dad •

More from Medium


Create a Three.js loading component with Nuxt.js

Developing a glyph system: Part III- Application

Your first scene