Page 7 – First Steps – Tap Input

Introduction to Mobile Game Development

Written July, 2015, by Rachel J. Morris

Creative Commons License Introduction to Mobile Game Development by Rachel J. Morris is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License. Based on a work at http://www.moosader.com/learn/ccckc/introduction-to-mobile-game-development/.

Return to the main page


With Gideros, we can detect different types of input that might occur on either an iOS and/or an Android device.  This might be touch-screen related, like a single tap or holding a tap. Some devices have buttons and some do not, like Android’s back button. You can even detect the device’s movement via the accelerometer!

For now, we’re just going to look at detecting simple taps so we can have our app react to the player’s input.

We’ve already added Bitmap and TextField items to the game screen via the stage:

stage:addChild( text )

But, the stage can also detect whether we’re getting input from the user. The stage needs to know what event to listen for, and what function to call if the screen is tapped.

We are going to need to write a callback function to handle our tap event. Within the function, we will be provided with the event itself, and we can get the tap (x, y) coordinates from that.

function HandleClick( event )
    player:setPosition( event.x, event.y )
end

That is our function, where we’re setting the player Bitmap’s position from the event’s x and y coordinates.  To actually have the stage listen for taps and call our HandleClick function in response, we need to use the addEventListener function:

stage:addEventListener( Event.MOUSE_DOWN, HandleClick, self )

Each of the items within the parenthesis and separated by commas are called arguments.

The first argument, Event.MOUSE_DOWN, is the type of event that we’re listening for.  MOUSE_DOWN will double as both a mouse-click and a screen-tap.

The second argument, HandleClick, is the name of our callback function, which handles what to do if there is an input event.

The third argument, self, is passing additional information to HandleClick (which will be received as event).

With a simple program like this, we now have a character that follows on-screen taps:

player = Bitmap.new( Texture.new( "content/girl4.png" ) )
player:setPosition( 320/2, 480/2 )
stage:addChild( player )

function HandleClick( event )
    player:setPosition( event.x, event.y )
end

stage:addEventListener( Event.MOUSE_DOWN, HandleClick, self )

followmouse

So, what could we end up doing with just tap controls? Here are some gameplay ideas:

  • Wack-a-mole – tap where a mole is visible to wack it.
  • Click to move – Click a “goal” location, and have the player AI try to get to that point.
  • Click buttons – Click command buttons, or even arrow buttons, in order to send commands to the game.
  • Click-and-drag – Drag your character around the screen to move them around.

Do you have an idea for a game yet?


On the class GitHub page, there are two projects with sample code for text:

Also check out the related Gideros documentation:

Print Friendly