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.
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.
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
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
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:
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.
Add the following lines to your
-- 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:
Now you should see the simulator popping up and running your program. The result should look something like this:
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 )
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.
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.
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 am looking forward to your feedback.
Have fun, Jo
Posted on CuteMachine.