Tiny wings is the casual game phenomenon sweeping the iPhone gaming landscape at the moment, which features a rather interesting procedural terrain generation system giving the game a different look each day. From what I can see the topology of the terrain remains pretty much constant, it’s just the texturing that changes on a daily basis.
Being a graphics geek with a speciality in procedural content generation, the procedural terrain feature secured my purchase and like a geeky kid with a new toy I just wanted to take it apart and find out what made it tick. The engine creates beautifully textured undulating 2D landscapes like illustrations straight out of a Dr Suess book; indeed the entire frame seems to have a paper like texture applied which further hints at the illustration motif.
The profile of each mountain seems to follow a simple sine wave curve with varying sized vegetation/rock sprites underlaid perpendicular to the surface normal, however it was the texturing itself that intrigued me. It turns out that the renderer uses an elegantly simple approach, which is to simply displace a reasonably densely tessellated rectangle by the curve and just let the texture mapping perform its magic.
To illustrate this, here’s the same image as above but with the inverse transformation applied to turn it back into a flat rectangle. This can be accomplished in Adobe Photoshop using the distort filter and an appropriately generated cosine gradient curve.
(The small mountain in the distance is on a different paralax plane to the foreground mountains, and also appears to use the same texture and technique.)
From this perspective it’s easy to see what the underlying texture is up to, and a simple brightness gradient towards the top of the mountain finishes off the effect. It also appears that the paper texture is applied to the mountain at this stage and therefore is also distorted with the curve profile, as can be seen by the texture stretching in the red channel of the original image.
To further demonstrate this, a similar effect can be achieved in Photoshop by generating the original striped rectangle and applying the distort effect using an inverted copy of the original distort map.
Here a simple diagonal striped pattern is defined, then a brightness gradient and paper texture is applied over the top of that, and finally the striped layer is distorted using a sine wave curve.
The distortion map is effectively a gradient, but using a sine wave profile for the interpolation curve. Unfortunately this isn’t possible using Photoshop’s in-built gradient tool (at least not to my knowledge), however you can pretty easily generate your own. The map defines the mountain peaks in white, and the valleys in black – you could think of it as a depth map rendered from the sky.
So it turns out that those wonderfully organic curves are just the interference pattern between a diagonal stripe and sine functions. A cute technique to compliment a simple yet addictive little game; if you haven’t already check it out on the App Store.
Leave a comment