Develop iPhone games with Corona SDK – handling normal and retina display

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.

Get the most popular Phaser 3 book

Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way.

Get the book

214 GAME PROTOTYPES EXPLAINED WITH SOURCE CODE
// 1+2=3
// 100 rounds
// 10000000
// 2 Cars
// 2048
// A Blocky Christmas
// A Jumping Block
// A Life of Logic
// Angry Birds
// Angry Birds Space
// Artillery
// Astro-PANIC!
// Avoider
// Back to Square One
// Ball Game
// Ball vs Ball
// Ball: Revamped
// Balloon Invasion
// BallPusher
// Ballz
// Bar Balance
// Bejeweled
// Biggification
// Block it
// Blockage
// Bloons
// Boids
// Bombuzal
// Boom Dots
// Bouncing Ball
// Bouncing Ball 2
// Bouncy Light
// BoxHead
// Breakout
// Bricks
// Bubble Chaos
// Bubbles 2
// Card Game
// Castle Ramble
// Chronotron
// Circle Chain
// Circle Path
// Circle Race
// Circular endless runner
// Cirplosion
// CLOCKS - The Game
// Color Hit
// Color Jump
// ColorFill
// Columns
// Concentration
// Crossy Road
// Crush the Castle
// Cube Jump
// CubesOut
// Dash N Blast
// Dashy Panda
// Deflection
// Diamond Digger Saga
// Don't touch the spikes
// Dots
// Down The Mountain
// Drag and Match
// Draw Game
// Drop Wizard
// DROP'd
// Dudeski
// Dungeon Raid
// Educational Game
// Elasticity
// Endless Runner
// Erase Box
// Eskiv
// Farm Heroes Saga
// Filler
// Flappy Bird
// Fling
// Flipping Legend
// Floaty Light
// Fuse Ballz
// GearTaker
// Gem Sweeper
// Globe
// Goat Rider
// Gold Miner
// Grindstone
// GuessNext
// Helicopter
// Hero Emblems
// Hero Slide
// Hexagonal Tiles
// HookPod
// Hop Hop Hop Underwater
// Horizontal Endless Runner
// Hundreds
// Hungry Hero
// Hurry it's Christmas
// InkTd
// Iromeku
// Jet Set Willy
// Jigsaw Game
// Knife Hit
// Knightfall
// Legends of Runeterra
// Lep's World
// Line Rider
// Lumines
// Magick
// MagOrMin
// Mass Attack
// Math Game
// Maze
// Meeblings
// Memdot
// Metro Siberia Underground
// Mike Dangers
// Mikey Hooks
// Nano War
// Nodes
// o:anquan
// One Button Game
// One Tap RPG
// Ononmin
// Pacco
// Perfect Square!
// Perfectionism
// Phyballs
// Pixel Purge
// PixelField
// Planet Revenge
// Plants Vs Zombies
// Platform
// Platform game
// Plus+Plus
// Pocket Snap
// Poker
// Pool
// Pop the Lock
// Pop to Save
// Poux
// Pudi
// Pumpkin Story
// Puppet Bird
// Pyramids of Ra
// qomp
// Quick Switch
// Racing
// Radical
// Rebuild Chile
// Renju
// Rise Above
// Risky Road
// Roguelike
// Roly Poly
// Run Around
// Rush Hour
// SameGame
// SamePhysics
// Save the Totem
// Security
// Serious Scramblers
// Shrink it
// Sling
// Slingy
// Snowflakes
// Sokoban
// Space Checkers
// Space is Key
// Spellfall
// Spinny Gun
// Splitter
// Spring Ninja
// Sproing
// Stabilize!
// Stack
// Stick Hero
// String Avoider
// Stringy
// Sudoku
// Super Mario Bros
// Surfingers
// Survival Horror
// Talesworth Adventure
// Tetris
// The Impossible Line
// The Moops - Combos of Joy
// The Next Arrow
// Threes
// Tic Tac Toe
// Timberman
// Tiny Wings
// Tipsy Tower
// Toony
// Totem Destroyer
// Tower Defense
// Trick Shot
// Tunnelball
// Turn
// Turnellio
// TwinSpin
// vvvvvv
// Warp Shift
// Way of an Idea
// Whack a Creep
// Wheel of Fortune
// Where's my Water
// Wish Upon a Star
// Word Game
// Wordle
// Worms
// Yanga
// Yeah Bunny
// Zhed
// zNumbers