Emanuele Feronato

Talking about Game development and iOS.

Today I’ll start to use a new tool to develop iPhone games: Corona SDK.

Built on top of OpenGL, OpenAL, Box2D, and Lua, Corona lets you develop games which run run at native speeds using native iOS features like multitouch, GPS, accelerometer, gyroscope, camera, Google Maps, WebKit and software keyboards.

Moreover, Corona supports an huge list of APIs which will let you add to your games a lot of interesting features like ads, virtual currency, databases and so on.

In this first step, I’ll try to port my old Flash game Red Flowers to iPhone, handling the retina display of iPhone 4 models.

We will deal with two different screen sizes: 320×480 and 640×960. So the first thing to do is to design two different splash pages, one for normal iPhones and one for retina-powered.

On the left, the 480×320 splash screen for normal iPhones, on the right, the 960×640 HD splash for retina displays.

I saved them in a folder, calling them respectively splash.png and splash_hd.png.

Note the HD image has the same name as the normal image, just with an _hd suffix.

Now, the very basic Corona project has three files: build.settings which includes duild-time properties, config.lua which contains runtime properties, and main.lua which is the main file itself.

As you can see looking at lua extensions, Corona SDK uses Lua as programming language. Probably some of you already met it when playing with World of Warcraft macros and interfaces. Anyway, it’s not that hard and not that different than AS3.

Let’s look at build.settings file:

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

Here I just set the orientation as landscape, as the game is meant to be played in landscape mode.

This is config.lua file:

application =
{
	content =
	{
		width = 320,
		height = 480,
		scale = "letterbox",
		imageSuffix =
		{
			["_hd"] = 2,
		},
	},
}

Another easy and intuitive settings: I am defining game width and height, and setting scale mode as “letterbox”.

These are the possible dynamic scale settings:

* none – turns off dynamic content scaling

* letterbox – uniformly scales up content as much as possible, while still showing all content on the screen. This is similar to watching a widescreen DVD on a non-widescreen TV set, except that you can use offstage content to fill the “bleed” areas rather than displaying black bars.

* zoomEven – uniformly scales up content to fill the screen, while preserving aspect ratio. Some content may appear offscreen, if the new screen has a different aspect ratio

* zoomStretch – non-uniformly scales up content to fill the screen. All content will remain onscreen, but it may be stretched vertically or horizontally.

Then, we defined on imageSuffix the suffix to be used when the images need to be multiplied by 2 to match device resolution. Do you remember the _hd suffix we added to our HD splash screen? Here it is.

Finally, let’s code main.lua:

display.setStatusBar(display.HiddenStatusBar)
local bg = display.newImageRect("splash.png",480,320)
bg.x = bg.contentWidth/2
bg.y = bg.contentHeight/2

Line 1: hides the status bar

Line 2: defines a variable called bg assigning it the path of the low resolution splash screen, along with its size. At this time the image is automatically shown, with its origin (the center) aligned with the top left corner of the device.

Line 3: centers horizontally the splash according to its width

Line 4: same thing with the height.

Notice how x and y properties work the same way as AS3, while contentWidth and contentHeight work like AS3 width and height.

Once all files are saved in the same folder, it’s time to run the simulator in iPhone and iPhone 4 mode

And finally we have our splash screen up and working. Next time, I’ll add interactivity.