Tutorial - Sprite User Input

This tutorial follows Sprite Collision Tutorial in which we learned how to detect and react to collisions between sprites
We will now extend the code of the previous tutorial to make the paddle react to user input and get a little playable ball-breaker game. Feel free to enhance it into a real Arkanoid game !

Setting the scene : mapping key handlers and a touch handler

To detect the key events and allow to move paddle using keyboard, we will map an handler on two keys : left and right arrows. this can be done easily using input.getKey(string key) function.
We do that in OnInit method after having defined leftKey and rightKey objects in the global section. That way we can use those objects in OnUpdate() method without having to redefines them each frame (remember local variables don't retain their values between calls)
Then in order to capture touch screen events on mobile or mouse click events on desktop, we define a touch handler using input.getTouch() same way

rightKey=input.getKey("right") // map the left and right arrows keys leftKey=input.getKey("left") touch=input.getTouch() // map the finger touch on mobile, mouse on desktop

Creating the scene : the start button

In order to allow the user to start the game when ready, we will create now a start button. We could use renderer.createButton() method that takes two or 3 images for buttons states normal, hover and pressed on desktop, or normal and pressed on mobile
We can also use any sprite or text to do the same by making it touchable, which allow to read its 'state' property. This gives us states 'up' (not pressed), 'over' (hoover) or 'down' (pressed)
Here we will use a bitmap font that renders an bitmapText.

start=renderer.drawBitmapText("Click to Start!","BMFonts/HealineA_1.fnt",width/2-100,height*.65,200,30) // draw a bitmap font, ancho for text is at 0,0 so screen.width/2 - text.width/2 to center start.makeTouchable() // make the bitmapText respond to touch, like a button. Could do that on any sprite

The OnUpdate loop : start game

As we have set ball.vx and ball.vy to zero in OnInit, ball is not currently moving. We then check the state of the start button we just created and if start.state='down' we set initial speed to the ball
we ask renderer to remove the button and set the object to null so we don't check its state anymore thanks to an if condition

if start!=null if start.state="down" // if button is press ball.vx=-2 // ball will start moving ball.vy=-2 renderer.remove(start) // remove button and set it to null so we don`t do that check anymore start=null endif endif

The OnUpdate loop : moving paddle according to keys and touch events

First we record the position of the paddle into px and py local variables
Then we test if any key has the 'isDown' property set to true, and move paddle accordingly on the x-axis, without omitting to check if the paddle doesn't go off the screen
Same operation is made if there has been a touch in the last frame, moving paddle left if the event is on left of screen, right otherwise
Paddle is moved by setting its position with updated px and py values

number px=paddle.getPositionX() // store current positions number py=paddle.getPositionY() if rightKey.isDown // if right arrow pressed px=px+3 // move paddle right if px>width // check bounds limit px=width endif endif if leftKey.isDown px=px-3 if px<0 px=0 endif endif if touch.isDown // if touch screen or mobile or mouse click if touch.x < width / 2 // if on left of screen px=px-3 if px<0 px=0 endif else px=px+3 if px>width px=width endif endif endif paddle.setPosition(px,py) // move paddle

You can try the code in TUTO-USER-INPUT project on the Guest Account
You can find reference of the functions used in the Documentation