Welcome back to the last part of the Corona SDK tutorial series. You might want to consider reading part one, part two, and part three first.

In this part of the programming tutorial we will add the game logic, a menu, and the sound.

The Code and Assets

Before we go through the code, download the complete Fat Freddy Corona SDK Tutorial Project. This bundle includes the following assets:

• Sound files pickup.wav, powerup.wav, failed.wav
• Source files build.settings, config.lua and main.lua
• Adobe Fireworks file FatFreddyLogoFireworks.png[1]
• Icon files in various sizes. 512×512, 57×57, and 114×114.

Unpack the zip file somewhere on your hard disk. To start the game, just open the main.lua file in your Corona SDK Simulator.

A word of caution. In a real project you would do a lot of things differently from what I have done in this tutorial. For example, for simplicity we only have one code file. In a bigger project this will bring trouble. It is much better to have different source files for various parts of the project. Have a look at the Director Class for the Corona SDK by Ricardo Rauber, to get a good start on structuring your next Corona SDK project.

You can do whatever you like with the project and the included files. Tweak it and learn. Let me know your achievements.

In the code you will find strange comments surrounding the function bodies: ---{{{ and ---}}}. These comments are there to support code folding for the Vim editor. If you use a different editor you can ignore these tags.

The Game Logic

The objective of the game is to collect the black squares and avoid touching the blue squares. The rotating square is our player – fat freddy. Freddy needs to collect the black squares and at the same time he needs to avoid touching the blue squares. This gets increasingly difficult as freddy will get bigger while eating the black squares. For each square freddy eats, he will get one point.

To add more fun to the game we will add rewards and penalties. Rewards will be triggered when fat freddy eats one of the black circles. These are the possible rewards:

• All You Can Eat As long as the timer runs you can also eat blue squares.
• Traffic Jam This will slow down the game. It is much easier to avoid the blue squares.
• Weight Loss This will minify the player. Which is good as it will be easier to avoid the blue squares.

The penalties will be triggered when fat freddy eats a blue circle. The following penalties are supported:

• Rush Hour This will speed up the game for a limited time. It is hard to avoid the blue squares.
• Food Contaminated You are not allowed to eat any square. Try to avoid black and blue squares as long as the timer runs.
• Weight Gain This will increase the size of fat freddy and hence makes it harder to avoid the blue squares.

Watch the video and you will get a good impression of a typical game session.

Code Annotations

After reading the first three parts of the Corona SDK tutorial you should be able to easily understand the code. There is only one minor code construct I have not explained in one of the previous tutorials: closures

Closures are very useful. You can learn about closures in the book Programming in Lua. Closures are blocks of code which can refer to its declaration context. Normally the code blocks are functions, which do not have a name[2]. You can spot these in the project where they are assigned to a variable called closure. In fat freddy these functions are used to reset variables after a transition has been completed.

For those of you who are familiar with closures you will notice that I discard the best part of closures by referencing the variables which would be in scope anyways and not the declaration context. This is another thing you would want to do differently in a real project.

Sound

Playing sound with Corona SDK is simple. Just preload a sound like this:

powerUpSound = audio.loadSound("powerup.wav")

Then play the sound with the following code:

audio.play ( powerUpSound  )

The game sounds have been created with the free audio effects tool cfxr. This is a Mac port of the Windows tool sfxr. It is really fun to use. Give it a try.

Conclusion

This completes the game tutorial series. It has become much longer than I planned. So forgive me for not being concise.

Please spread the word about the tutorial and leave your feedback in the comments.

I would be glad to have you as a reader of my RSS feed or as a follower on Twitter. You can also find me on Google+.

Happy coding.

Share

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:1

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,
Joe

Share

As promised, here is the first tutorial on developing with Corona SDK. Corona by Ansca Mobile is a cross platform development kit. It is easy to target different devices, as long as these are iOS or Android based. In this tutorial you will learn how to set up the basic structure for a Corona app.

The Fat Freddy Tutorial Series

This is the first post of a whole series of articles on developing with Corona SDK. It is meant for beginners, but hopefully even advanced Corona users can pick up something useful by following these tutorials.

We will build a clone of a flash game I played some years ago. The original game has been developed by Gavin Shapiro and is called Squares2. In this game you move a small rotating square across the screen to collect black squares moving randomly on the screen. For each collected square you will gain one point. You can consider these squares as food. There are also blue squares, which you need to avoid. Consider these as contaminated food. If you eat one of the blue squares the game will be over. To add extra spice to the game we will add special modes like changing the speed of the squares. I will explain these modes later when we write the code.

What You Will Learn

The game is fairly easy to code, but it should be enough to show you some Corona goodies. By following (coding) along you will learn how to

• set up the basic structure for a Corona Project.
• use labels to show scores and other information.
• use labels to make animated buttons.
• use natively drawn objects.
• use the built-in physics simulation software box2d.
• use animations.
• use the Lua programming language.

But now, without further ado, let’s get started.

Install Corona and Set up Your Development Environment

Download Corona SDK for Mac OS X or Microsoft Windows and install it on your computer. I will show you how to install the SDK on a Mac. For Windows please refer to the Installation and Setup Guide for Windows.

To install the SDK on your Mac just open the file you just downloaded. The file name has a .dmg extension, which means it is a disk image. When you open the file by clicking on it in your download folder a pop up will appear and you need to agree to the Ansca Mobile Software License Agreement. The disk image will be mounted automatically and a pop up will appear.

Now just drag and drop the Corona SDK icon on to the Applications folder icon. That’s it. You can now start the Corona Simulator and run the sample applications which come with the SDK. The Corona Simulator is installed in /Applications/CoronaSDK/. You can find the example projects in the folder /Applications/CoronaSDK/SampleCode/.

The Corona Project Structure

To follow me along in this tutorial, create the following folder structure in your home directory.

CoronaProjects/
CoronaProjects/FatFreddyProject/
CoronaProjects/FatFreddyProject/FatFreddy/
CoronaProjects/FatFreddyProject/Assets/

Also create a file called main.lua like this:

CoronaProjects/FatFreddyProject/FatFreddy/main.lua

The main.lua file is the entry point for every app built with Corona. This is where the execution of your code starts, as we will see in a few minutes.

Your first Lua Program

Add the following lines to your main.lua file:

-- Add a score label
local scoreLabel = display.newText( 42, 50, 60, native.systemFontBold, 120 )
scoreLabel:setTextColor( 0, 255, 0 )

In Lua a comment starts with two dashes. So the first line is only a comment in the code to explain what we are doing.

The second line shows a label on the screen. The text is 42. The x position of the label is 50 and the y position is 60. The origin of the coordinate system is in the top left of the screen. So specifying 50 for the x position will move the label 50 points to the right. Giving 60 for the y position will move the label down by 60 points.

The last two parameters passed to the function display.newText specify the font we want to use and the font size.

In the third line of the code sample we set the label’s color. Color values are passed in as RGB values. So setTextColor( 0, 255, 0 )will set the color to green. Allowed values range from 0 to 255.

Run the Corona Simulator and choose Open a Project from the menu. In the file dialog navigate to the file main.lua you just edited and saved. Please notice that you can select the device you want to simulate. Currently you can choose from the following devices:

• iPhone
• iPhone4
• iPad
• Droid
• Nexus One
• myTouch
• Galaxy Tab

Now you should see the simulator popping up and running your program. The result should look something like this:

Fast Development Cycles

One of the best things about Corona is that you can make changes to your code and see the result instantly. Let me show you.

Open the Corona Simulator. In the simulator open the menu item Corona Simulator > Preferences.... Make sure your settings are the same as these:

Run your project in the simulator. You should see the 42 in green as before. Now change the line in the main.lua file from

scoreLabel:setTextColor( 0, 255, 0 )

to line

scoreLabel:setTextColor( 255, 0, 0 )

Make sure you see the simulator window while saving the main.lua file. You should see how the simulator automatically reloads the project. The 42 should now be red. No compile times. This will save us a ton of time in the future. Great.

Troubleshooting

If something goes wrong you usually just see an empty simulator window with a black background. This is not very helpful. When you start the simulator as described above you will not see the error messages which will be output to the console. Corona comes with a bash shell script /Applications/CoronaSDK/Corona Terminal. Execute this script and a terminal window will pop up and the Corona Simulator will be started from within the terminal session. This will give you the chance to see the console output. You should be able to see any runtime errors and stack traces. Even the source file name and the line number will be given. This will help you in finding and fixing errors.

Getting Help

• Corona If you are stuck it is always helpful to browse the forums. There are lots of nice developers hanging around, ready to help you. You will see also the Ansca Mobile staff answering questions once in a while. However, before you ask any questions on the forum, make sure that they haven’t been answered before.
• Lua The official site for Lua is a good starting point to dive into Lua. There is also a live demo of Lua available. Here you can test Lua code online in an interactive shell. You can find an introduction to Lua, tutorials, and code samples on the Lua Directory.

Conclusion

Setting up a Corona Project is easy. You have learnt to set up a simple Corona Project and you learnt to write your first program in Lua. You should be able to spot errors on the console now. I have left out a lot of stuff intentionally. I haven’t said a word about configuration files for example. But I will explain these if the need arises.

In the next module I will show you how to create fat freddy, the hero of our action game. You will be able to move freddy around on the screen after completing the tutorial. You will learn how to do basic animations and how to process touch events.

Thanks for following along. I’m looking forward to your feedback.

If you liked the article please subscribe my RSS feed and follow me on Twitter.

Have fun,
Joe

Q89582HPKFY8

Share

Ansca Mobile offers a cross platform SDK for iOS and Android. Using the SDK the last couple of weeks I really can say that it is fantastic, especially for beginners who want to write their first game or utility app. I would also dare to say that it might be the right tool for somebody who has never written an application before.

Advantages of using Corona

Since Apple made the SDK for iOS available for third party developers in 2008, I developed over thirty apps for iOS. Most of these have been published. Have a look at my latest app on the AppStore. Therefore, it is easy for me to evaluate the pros and cons of the Corona SDK compared to the iOS SDK.

The Corona SDK is a powerful tool, which has many advantages over the traditional way of building apps for iOS and Android. The main advantages I see are the following:

• You can publish your apps for iOS and Android devices without changing your code base.
• You can rapidly develop software with the Lua programming language. Did you know that Lua is now in the top 10 of the TIOBE Programming Community Index? The article also states that Angry Birds has been programmed in Lua.
• You can cut down turn around cycles during development dramatically. There is no need to compile your app. Make changes in the code and hit refresh on the simulator to see your changes instantly.
• You can use Windows to develop apps, though you would still need a Mac to publish your apps to the App Store. This is a constraint retained by Apple.

Disadvantages of using Corona

There are some limitations inherent to the Corona SDK. You need to carefully consider these, as it can be a show stopper for some of your projects.

• Most of the well known third party libs and frameworks cannot be used with Corona SDK.
• Some of the features offered by the underlying operating systems cannot be used.
• Features available on iOS are not available on Android. For example, at the time of this writing, there are no in-app-purchases (IAP) available on Android.

For example, if you want to develop a utility app which needs lots of native UI controls and where you want to use the AdWhirl framework to support different ad networks, you should not try to build it with Corona. Since Corona targets iOS and Android devices, the support for native controls is limited. You can certainly develop utility apps with Corona, but you might go through the pain of developing your own custom UI controls. And because Corona does not allow you to use third party libs you cannot use AdWhirl to monetize your app. You need to follow a different strategy to earn money with your app.

When you do client work, you really need to make sure that the Corona SDK is the right tool. It is very likely that the client will come to you and ask for additional features for the MightyTool app you built for him. For example, when the client asks to add local notifications you will be in big trouble. There is no support for local notifications built into the Corona SDK. So, know your tools and be sure about what tool can be used for each specific case.

Learning Corona

After developing some apps for iOS I decided it might be worth looking at Android as well. Being an Ansca Mobile forum member since August 2009, I knew that you can target Android devices with the Corona SDK. I decided to download the Corona SDK. 1 It is free for personal use. You need to buy the license only if you want to publish your app on one of the app stores. After looking at the example code which comes with the SDK and spending two days developing with it, I was hooked. It is such a fun way to develop apps. Try it yourself.

The best way to learn a new programming language or SDK is to build something with it. When I learn something new I try to make as many errors as possible in the shortest possible time. In the last few days I developed a complete clone of a flash game I played some years ago. It is a pretty simple but fun game. It is called Squares2 and has been developed by Gavin Shapiro. Play it, but promise to come back afterwards.

If you are interested in how to build a clone of Squares2 with the Corona SDK, follow my tutorial. I will publish the tutorial series starting next week. Among other things you will learn how to

• build a complete game, which can be deployed on the iPhone, iPod, iPad and on Android devices.
• control a player.
• draw objects on screen.
• use the box2d physics engine for collision detection.
• use some Lua goodies like closures and tables.

Please subscribe to the RSS feed or follow me on Twitter.

Yours jewly,
Joe

Share

Article on PCWorld by Ric Broida.

Share