Basic Animations and Player Control with Corona SDK - Tutorial Part 2

This is the second post on the Corona SDK tutorial series. You will learn how to draw objects on screen and how to move these around by processing touch events. Furthermore, you will learn how to add listeners for certain events. Make sure to read the first part, if you you haven’t done so already.

Changing the project configuration

Before we begin, we need to make some changes to our project environment. We want to play the game in the landscape mode. This can be set up in a file called build.settings. Create this file in the project folder CoronaProjects/FatFreddyProject/FatFreddy/ and add the following lines to it:

settings = {
    orientation =
    {
        default = "landscapeRight",
    }
}

When you restart the project, you should see that the simulator starts in the landscape mode.

Changing the score label and adding the player

In the last tutorial we added a score label. Let us change it a little. Replace the code in main.lua with this code:

    -- Hide the status bar.  
    display.setStatusBar( display.HiddenStatusBar )  

    -- Set the background color to white  
    local background = display.newRect( 0, 0, 480, 320 )  
    background:setFillColor( 255, 255, 255 )  

    -- Add a score label  
    local score = 0  
    local scoreLabel = display.newText( score, 0, 0, native.systemFontBold, 120 )  
    scoreLabel.x = display.viewableContentWidth / 2  
    scoreLabel.y = display.viewableContentHeight / 2  
    scoreLabel:setTextColor( 0, 0, 0, 10 )

Line 2 will hide the default status bar. The iPhone’s status bar usually shows the carrier, time, and battery status. We do not need this information while playing the game; we want to be lost in time.

Lines 5 and 6 change the background color by adding a new rectangle with color white (RBG 255, 255, 255).

The remaining lines will change the score label, which we added in the first part of this tutorial. The difference is that we introduce the variable score to hold our current score. We center the label by getting the viewable content width and height and dividing it by 2. On an old iPhone this will give you the coordinates 240 x 160. The center of the screen. Furthermore, we change the color of the label to black and set its opacity to 10. Notice that the call to setTextColor has four arguments!

Now run the project. The status bar should be hidden and you should see a grey 0 on a white background. Boring.

Adding Fat Freddy

Let’s add our player fat freddy. He will be a rotating square. Add the following lines at the bottom of your main.lua file:

    -- Creates and returns a new player.
    local function createPlayer( x, y, width, height, rotation )
        --  Player is a black square.
        local p = display.newRect( x, y, width, height )
        p:setFillColor( 0, 0, 0 )
        p.rotation = rotation

        return p
    end

    local player = createPlayer( display.viewableContentWidth / 2, display.viewableContentHeight / 2, 20, 20, 0 )

Run the code. You should see a black square on the screen. Corona uses the painter’s model, which means that all things you draw on the canvas will be painted on top of the already painted objects. For example, if you would move the code for adding the background to the bottom of main.lua you will not be able to see the black player square anymore. It is there, but covered by the background object. You can see this, if you change the opacity of the background and change the color of the player to red, like so:

    background.alpha = 0.5
    player:setFillColor ( 255, 0, 0 )

OK. We have a player now. To make it stand out when we add the other objects on the screen we want the square to rotate. This can be done easily.

Rotating Fat Freddy

Display objects have a rotation property. To make the square rotate we just increment the rotation property. We do this in the new function playerRotation. We will register this function as a listener to a runtime event called enterFrame. This event will be triggered by Corona each time a new frame gets entered. You can read more about events in the Corona docs.

    local playerRotation = function()
        player.rotation = player.rotation + 1
    end

    Runtime:addEventListener( "enterFrame", playerRotation )

Once again, run your code. The player square is rotating. Magic. This is our first animation. But we still can’t move the player. That’s because our code does not process touch events yet.

Getting in touch

Processing touch events is basically the same as processing enterFrame events. We create a listener function and then register this listener through the function addEventListener. Now, each time the event occurs the listener will be called and our code gets executed. Add the following code to the bottom of main.lua.

    local function onTouch( event )
        if "began" == event.phase then
            player.isFocus = true

            player.x0 = event.x - player.x
            player.y0 = event.y - player.y
        elseif player.isFocus then
            if "moved" == event.phase then
                player.x = event.x - player.x0
                player.y = event.y - player.y0
            elseif "ended" == phase or "cancelled" == phase then
                player.isFocus = false
            end
        end

        -- Return true if the touch event has been handled.
        return true
    end

    -- Only the background receives touches. 
    background:addEventListener( "touch", onTouch)

When you run the code you will be able to drag the rotating square by touching and dragging on the background of the screen. Notice that the listener has been added to the background object, because we want to move the black square by touching the background, not the player. This will give a better game play, as we need to see our player while playing. We do not want the player to be covered by a finger during game play.

Conclusion

We learnt a lot this time. We know how to animate objects and how to process touch events and enterFrame events.

In the next part of the Corona SDK tutorial series I will show you how to prevent the player from moving off screen, how to add our player to a physics simulation, and how to detect collisions between the player and other objects.

If you liked this article please subscribe to my RSS feed or contact me on Twitter. You can also find me on Google+ by following my vanity URL: cutemachine.com/+

Till next time,
Jo


Jo's Profile ImageWritten by Jo Meenen who lives and works in Frankfurt building digital doodah. Stalk him on Twitter

ImpressumDatenschutz