Since the release of Zombieville USA for iPhone, MikaMobile has made quite a name for themselves in iPhone gaming with their Unity-powered apps. With a combination of smooth animation, a goofy art style and addicting gameplay, I’ve always wondered how they set themselves apart from the rest of the 300,000+ iPhone apps out there. Do they use a sprite manager class, orthographic camera, character controllers or is there a hidden secret? That secret is utilizing an out-of-the-box, creative method with Unity, a 3D game development program.

MikaMobile was kind enough to share with us the secrets to creating some of the best mobile games of all time. Now, experienced and new iPhone developers can use their tips and follow in their footsteps. Here is what they said:

We didn’t use sprite manager, we used mostly skinned meshes and cutout alpha shaders (with the occasional alpha blended element like the HUD or drop shadows beneath characters. Animation is achieved by sliding/rotating body parts around like paper dolls in our 3d app, like Zombieville. This affords us with a high degree of fluidity without the need for enormous memory-hogging sprite sheets. However, when we need a character to strike a pose that cannot be achieved simply by rotating parts of a single drawing, we re-drew the character, cut them up again, and swap to that texture at runtime. The player uses over a dozen such distinct drawings (poses) which we can swap to as needed, and then apply further animation from there. The end result is a smooth and lively style which we’re pretty proud of.

Orthographic cameras were not used, but rather a perspective camera positioned very very far away with a narrow FOV. This gives a nearly orthographic look, but with a subtle parallax effect on foreground/background elements that we get “for free” simply by positioning things on different depths within unity. Its pretty much a more elaborate version of how we achieved the style in Zombieville.

This blew my mind when I realized their perfectionist optimization techniques and they developed an entirely 2D game through a 3D development platform. Their games even run smoothly on first-gen Apple devices! Here is a screenshot that sums up the explanation from MikaMobile. A picture really is worth 1000 words.

This ninja is using a character controller (the pill-shaped wireframe). Here is a more in-depth explanation to their fluid animation process:

We change textures on the same mesh, although you could do an entire model swap if you wanted (we do this only for when enemies are killed). When we built the main character, I laid out the texture’s UV in such a way that each body part had a fair amount of empty space to work with – so the “leg” polygon was big enough to accomodate a bent leg, an extended leg, etc.

We then set up a link in our 3D app between the X-scale of an empty node, and the current texture being displayed (you can do this with set-driven-keys in maya). So if the X-scale of this node was 1, we’d see texture 1, 2 would display texture 2, etc. This allowed us to animate our texture swaps within maya, rather than having to hard-code each transition, or use hundreds of animation events.

Once the relationship was set up in maya, it was simply a matter of setting up a similar relationship within unity (if transform.scale.x == 1….), placed in a LateUpdate function so it would be applied after any animation, but before the frame is rendered.

For deaths we chose to do a full model swap because the character is suddenly made up of more pieces than they started with, so it was just easier to make that a different model instead of trying to stuff all of those individual pieces into the same textures they use when they’re alive.

And finally, a few more tips on animation refinement:

The rig and most everything else do use skeletons, primarily because this project was started before automagic batching was introduced to Unity iPhone, so it was a necessity to keep draw calls down.

There are a few things that can cause animations to be messed up when importing them. If you’re segmenting up a single file into multiple clips, be sure to give those clips some breathing room on the edges. For instance, if you have a clip that starts on frame 21, and frame 20 has a wildly different pose from frame 21, it can “bleed into” the start of your clip. I always bookend my clips with duplicate poses to avoid this issue.

For extremely fast moving objects, like single-frame jumps from position to position, you can do a few things, like scale the animation to be slower in maya, and then speed it up in Unity, so you can add more fidelity to the curves. If you want a change to be truly instantaneous, its better to break an animation up into multiple clips – if you tell an animation to just play, it will cut instantly to the first frame with no interpolation, which is sometimes desirable (we did this for basically every pose change).

These are definitely some revolutionary development techniques from revolutionary developers, and those who can understand this lingo have some new cards to play. For those who have no idea what this means, I highly recommend you do some research and try some of this on your own. Who knows, maybe you can make the next Zombieville USA app and be on the App Store Top 10 list…