Gideros Mobile Tutorial 6: Fun with Events

This is a continuation of a previous tutorial. We will add some more effects in this one and we will also learn how to use some existing libraries. The entire lesson with all needed files can be downloaded here. You can use your existing main.lua file from previous tutorial or you can start new one.

Ok, so we have a rotating ball that listens to ENTER_FRAME (rotates the ball every frame) and MOUSE_DOWN (changes rotation) events. Now lets add two more events to make this “game” more interactive. We will add MOUSE_UP and MOUSE_MOVE. MOUSE_MOVE will be used when we move the ball (by holding down the finger on screen) and MOUSE_UP will be used (triggered) when we let the ball go (lift the finger off the screen). We will also use another (Lua) library called GTWeen and the easing effects.

Instead of just dumping entire code I will be pasting part by part. These parts form main.lua file.

Part one: Everything is the same like before except that we load another soundfile that will be used as a ball bouncing when we release it.

-- you can apply some settings to your entire application
application:setKeepAwake(true)
application:setScaleMode("letterbox") --proper "full screen" scaling for most devices

-- global direction variable,rotate counterclockwise -3
direction = 3

-- load the textures and create bitmap objects
--2nd texture parameter can be set to true to get anti-aliasing
local field = Bitmap.new(Texture.new("gfx/field.png",true))
local ball = Bitmap.new(Texture.new("gfx/ball5.png",true))

-- load sound that will be played when we press on ball
local soundJump = Sound.new("snd/jump.mp3")
local soundBounce = Sound.new("snd/bounce.mp3")

-- set the anchor point in the center of ball so we can rotate it
ball:setPosition(120,150)
ball:setAnchorPoint(0.5,0.5)

part 2: First, we added a GTween tween to changeBallDirection function.If you used Flash then you know what tweens are but basically it is an animation that is generated between 2 frames we specify.The term tween comes from the words “in between”. Example: We give GTween starting and ending frame of a object and GTween will create a transition. It can be moved from/to, it can be scaled from/to etc.

GTween.new(ball, 0.3, {scaleX = 2, scaleY = 2}, {ease = easing.linear})

What this does is it takes the ball object and scales both x and y times 2 in 0.3 seconds and using the easing.linear effect. Second, we create a new function that will move the ball as we slide the finger on the screen while still holding it. I’m not going to explain the mathematics of this except that we get ball coordinates with getX() & getY() and we set them with setX() & setY().

Here is the full code of part 2:

-- function rotating ball - executed every frame
function rotateBall(event)
	ball:setRotation(ball:getRotation()+direction)
end

-- function scale ball - executed every mouse press
-- it is not actually mouse,it means no multi touch
function changeBallDirection(event)
	if ball:hitTestPoint(event.x, event.y) then
		GTween.new(ball, 0.3, {scaleX = 2, scaleY = 2}, {ease = easing.linear})
		soundJump:play()
		direction = math.random(-20,20) --random rotation speed(left or right)
	end
end
--move the ball
function moveBall(event)

	if ball:hitTestPoint(event.x, event.y) then
		local dx = event.x - ball:getX()
		local dy = event.y - ball:getY()

		ball:setX(ball:getX() + dx)
		ball:setY(ball:getY() + dy)
		ball.x0 = event.x
		ball.y0 = event.y

		event:stopPropagation()
	end
end

Part 3: here will just attach event listeners that will call specific functions.

-- rotateBall function will be called on every frame change
ball:addEventListener(Event.ENTER_FRAME, rotateBall)
-- when we click on the ball it will change rotation and "jump" up
ball:addEventListener(Event.MOUSE_DOWN, changeBallDirection)
-- when we move the mouse then ball also moves
ball:addEventListener(Event.MOUSE_MOVE, moveBall)

Part 4: As you see the way we always create event is that we first write a function that does what we want and then pass it as a second argument to addEventListener function. You can also do it with anonymous function, especially if what the function does is in one or two lines so you don’t end up creating tons of strange named functions. Below we add Event.MOUSE_UP to ball:addEventListener but instead of passing function name as second parameter we create anonymous function and put the entire code there. In our case we use another GTween effect that returns the ball to starting scale 1 in 1.5 seconds but this time it uses outBounce easing effects so it looks like the ball is bouncing.

ball:addEventListener(Event.MOUSE_UP, function(event)
if ball:hitTestPoint(event.x, event.y) then
	soundBounce:play(30)
	GTween.new(ball, 1.5, {scaleX = 1, scaleY = 1}, {ease = easing.outBounce})
	end
end
)
stage:addChild(field)
stage:addChild(ball)

Try this and if you did everything correctly you should see a spinning ball. Now press AND hold the ball with your finger and the ball will scale to 2 times size in 0.3s .Drag it around and the ball will follow you. Now release it and it will fall down in 1.5s using outBounce effects 🙂 Isn’t that great? We can almost call it a game (if the goal of the game is to die of boredom moving the ball around ;).

Play with it a little, change GTween easing effects, maybe change graphics,sound effects..

Note: You can read more about GTween and it’s easing effects here. There are few “glitches” in the code – I used some random sound for bounce so it is not synchronized and also if you tap the ball too fast then the effect will fail because it will try to start new tween before it finished old one. Just ignore it for now.