You are on page 1of 43

Building iPhone Apps:

From Flash Lite to Ansca Corona


Evan Kirchhoff, Comrade Software
September 30, 2009

(Notes are exported here)


- Comrade Software - founded in 2002, doing mobile Flash since Summer 2002 (PocketPC)
- Contract Web games, internal mobile games
- Also games released on Verizon (USA) and Softbank (Japan) via publisher Smashing Ideas
- But mobile Flash is difficult to monetize...
(First example to be discussed)
(Second example)
Flash Lite to Corona:
The Developer Case
‣ Uses the Lua language: easy lateral shift from
Actionscript

‣ Existing Flash assets and program logic can


often be re-used, or ported rapidly

‣ Development time comparable to Flash,


shorter than iPhone SDK, much shorter than
OpenGL
Flash Lite to Corona:
The Business Case
Problem #1: Carriers

- To develop Flash for Verizon, we had to join the BREW developer program at $400/yr to
code-sign on test phones
- NSTL testing fees were $800 per application per device model (14 phones total) = $11,000,
paid by publisher
- Testing process much more finicky than Apple’s; some games from other developers failed
at least once and publisher had to pay test fees again
- Standard breakdown: carrier takes 50% of revenues, publisher takes 50% of remainder
Problem #2: Fragmentation

- Flash addresses the fragmentation problem with rescaling (much better than the 6-figure
porting costs for wide-released mobile Java games), but you still end up compromising
design to ship a unified binary, due to the range of target devices
- Apple avoids this problem by only making one device, more or less
iPhone users buy stuff.

(enough said)
When to use Corona?

‣ 2-D games

‣ Graphically-oriented utilities

- Good for apps with “immersive” interfaces


(Examples of popular graphically-oriented utilities)
- This is a Comrade-built native SDK app (because we needed MapKit), but note how most of
the onscreen elements are still custom bitmap graphics, including all buttons and picker
wheel “highlight” bar
- As it happens, most of the graphics were created in Flash
When to use Corona?

‣ 2-D games

‣ Graphically-oriented utilities

‣ Rapid prototyping

‣ Adware, presentations, promotional items

(cont’d from previous slide)


(Example of adware in the App Store)
- Currently not for apps with Apple-style UI controls, although UI features have been
requested
- Currently no 3-D (or Flash-style “2.5-D”) support; also requested
The Corona Development
Environment

‣ All application code in “main.lua”


‣ All assets in directory are compiled into app
‣ Good (free) text editor:
www.barebones.com/products/textwrangler

(URLs will be repeated on last slide)


Lua/Corona for
Flash Developers
www.lua.org/pil
(Other Lua books -- note that Lua tends to be used as a game-development language)
Basic Lua Syntax in 60 Seconds

Actionscript:

Lua:

- Will feel similar to Actionscript, but adds “do”, “then”, “end”, etc.
- Semicolons at ends of lines are optional
- Need to break the habit of using curly braces for code blocks
Tables are Fundamental

- Curly brackets are reserved for declaring tables


- Tables are the fundamental object in Lua; tables = associative arrays (or dictionaries)
- Functions are first-class variables, and you can redefine any function anytime (including
sin(x))
- Lua is not heavily object-oriented by default, and the PIL book discourages encapsulation.
However, it is possible to build your own classes and objects -- see PIL, and brief discussion
at end of this talk
Think Locally

Bad: Good:

(30% performance difference)

- A major Lua optimization is using local variables (and functions) only


- Declaring a local copy of the sin function means that it doesn’t require a lookup from the
global “math” table
More Familiar Objects
Flash:

Corona:

- Other similar elements include event listeners and transition libraries


- Notice less code coloring in the 2nd example; this is because TextWrangler doesn’t know
how to color the Corona framework objects (this would be a nice-to-have feature)
Our Friend, the Button

- Corona example code includes a robust button object (handles rollout correctly, etc.)
Flash Lite Conversion #1:
Poker Arcade

- A collection of 6 popular video poker games; Flash version completed in 2007


- Game originally developed in FlashLite 1.1 (no functions, no arrays, etc.) for maximum
device compatibility
- Card assets (the most time-consuming to create) taken directly from Flash to Corona, using
PNG export
- Main program logic (dominated by lengthy scoring routines, especially in Deuces Wild)
ported with very few changes; new code mostly involved the UI.
- Game was playable within a couple of days; total coding time was less than a week
- The single biggest step was the creation of new background and UI assets to take
advantage of the large screen (graphical production time exceeded coding time)
- Making the higher-res graphics took another week, so total development time was about 2
weeks
(asset comparison)
- Note change from 3 to 5 hands in game
(asset comparison)
- Final build has about 2000 lines of code
- Particle effect added for win animation: a burst of stars falling under “gravity”
- Surprising number of stars could be animated, compared to many mobile Flash devices (I
was hoping for 3-5)
- The game came out well, but the source code is another matter...
The Poker Arcade Design Pattern:

We’re happy with how the game turned out, but I would organize the code much differently if
doing it again...
Poker Arcade: Lessons Learned

‣ The Flash timeline had hidden the spaghetti


logic of the original program

‣ But Lua functions and variables declared


“local” are sensitive to code-ordering...

‣ ...which led to declaring everything as global...

‣ ...which caused memory management issues.

‣ Eventually, brute force was used: load all assets


at once; never deallocate or reallocate
anything ever.
(This approach is not recommended!)
Flash Lite Conversion #2:
Core Damage

- Flash version also completed in 2007


(This slide is a 60-second embedded video demo)
- Flash version completed in 2007
- Based on Breakout (1976), but using polar coordinates rather than (x,y), and circular
wraparound
150 kb limit,
8-10 fps on Motorola RAZR

- Limited to 150k by Verizon


- Lowest-common-denominator device (and most common) was Motorola RAZR.
- Performance in Flash on RAZR was 8-10 frames per second
- All assets had to have simple vector shapes (optimized repeatedly in Flash)
- On low-end phones, bitmaps are faster than vector, but this uses up the filesize limit
rapidly
- For iPhone version, since the screen is much bigger (and user expectations higher), much
more graphical detail was added
- Some Flash assets resized and re-used; others redrawn
- We also decided to make it a tilt-controlled game, and went to a landscape orientation
- In score field, “LED” style replaced with “Nixie tube” style
(Detail comparison)
- Since all assets on iPhone are bitmaps, and there’s lots of memory, there is no reason not
to use subtle shading, shadows, glow effects, and other details
- Same level designs ported directly from Flash version
Now Featuring Tilt!

(This is a 60-second video demo, showing accelerometer controls)


Core Damage: Lessons Learned

‣ Use object-oriented principles for code


organization

‣ Most importantly: forward declaration allows


sensible code ordering while maintaining local
scope throughout

‣ Better use of reusable objects

‣ “Movieclip”-like objects created to replicate


advantages of Flash

‣ With fully-bitmapped assets, detailed visuals


are “free”
My Corona Wish List

‣ A mechanism for “includes” or external


libraries

‣ Specialized game-dev support (e.g., physics


engine?)

‣ Tethering iPhone to simulator for


accelerometer testing

‣ Local peer-to-peer networking support

‣ 3-D support

‣ Keyboard and other UI controls


Demos & URLs

developer.anscamobile.com

www.barebones.com/products/textwrangler

www.lua.org/pil

You might also like