Framer for Games: Guitar Hero Knock-off

Part 3 of Framer for Games series

Core mechanic: Using conditions to determine and reward the player’s timing

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

The core gameplay mechanic in most rhythm simulation games is to press a button at the exact moment that a moving shape is fully contained within a non-moving target area on the game board. Let’s begin!

Setting up the game environment

This prototype contains the following elements (a.k.a. layers):

• Rules: locked to screen top
• Score: scaling layer fixed to screen right. Scales vertically from 0 to 1 with iterating variable.
• Button: locked to screen bottom so it is easily tappable
• Target area: locked to top of button near screen bottom to allow ample time for notes to fall into place
• Notes: Group of 3 notes aligned horizontally, only 1 is visible at a time
• Game-over Screen: Hidden until player wins game

Dropping notes

A parent layer, notes, is created that is the width and height of the screen.

Each second:

• variable ‘correct’ is set to some number between 0 and 2
• A loop runs thrice, eventually creating three equidistant notes aligned horizontally; one of the three is visible and given the name, ‘neo’, the others invisible; an animation is attached to each note that moves them from screen top to screen bottom; each note is destroyed when the animation ends

notes = new Layer
 width: Screen.width
 height: Screen.height
 backgroundColor: “transparent”
Utils.interval 1, ->
 correct = Utils.round Utils.randomNumber(0,2)
 for i in [0…3]
   note = new Layer
     parent: notes
     x: Align.center(200 * -(i — 1))
     y: Align.top(100)
     width: 150
     height: 50
     backgroundColor: “transparent”
   if i == correct
     note.backgroundColor = “white”
     note.name = “neo”
   drop = new Animation
     layer: note
     properties: 
       y: Align.bottom(50)
     curve: “linear”
     time: 1
   drop.start()
   note.onAnimationEnd ->
     this.destroy()

Did the player press the button at the perfect time?

When the player taps the button:

• If the first child in ‘notes’ (since all three children remain at the same height when dropping, it doesn’t matter which one we use as comparison) is exactly in the middle of the target area: increment the score, scale up the meter, and indicate a successful tap by switching the target area’s state
• Else (meaning the notes are not perfectly aligned in the target area): indicate a failed tap by switching the target area’s state

button.on Events.Tap, ->
 if notes.children[0].midY > bar.minY && notes.children[0].midY < bar.maxY
   points += 1
   meter.scaleY = points / 10
   bar.states.switchInstant “success”
   bar.states.switch “default” 
 else
   bar.states.switchInstant “wrong”
   bar.states.switch “default”

Winning the game

The game over screen is triggered only when the meter indicating score returns to a scaleY of 1 from its original state of 0 (each point increments it by 1/10).

meter.on “change:scaleY”, ->
 if @.scaleY == 1
 gameOver.visible = yes

Framer/CoffeeScript mechanics highlighted here

• Event listeners
• Layer states
• Global variables
• Utility methods
• Control flow
• Loops