Cry me a river

I’ve always given special attention to water effects in games. It’s something that usually has no impact on gameplay (exceptions are games that use water as its core mechanic, such as Sprinkle), but it makes all the difference in truly bringing an environment to life. In the “programmable pipeline” and “shader” era, water effects are more amazing and life-like than ever, but in the good old days all we had was a 256 color palette and a lot of creativity.

When Project A had its first incarnation, 10 years ago, 16-bit color graphics were already pretty common, but in general screen mode 13h (320×200, 256 colors) was all the rage amongst indie developers (at least in the BASIC scene). In that screen mode, and actually in any mode with indexed colors, there’s a neat trick you can use to simulate effects of flow (water, smoke, etc.) called palette rotation or cycling, where the pixels in the image itself remain static, but a range of colors from the palette is cycled in an interval, giving the image a really smooth sense of movement. This web application (requires a canvas enabled browser) shows how effective and beautiful the technique can be when allied to great artistic skill.

So 10 years ago we already wanted the water effects in the game to have a special place, and with the revival of Project A I found myself again experimenting a lot trying to create a cool water animation. 8-bit color modes can be a bit restrictive, so the effect should work on true color modes. Being an iPad app, our options were shaders, standard sprite animation or particle effects. I wanted to avoid shaders since the framework we are using (cocos2d) does not support them (at least yet, support for OpenGL ES2 is already available on test releases) and sprite animations can take a ton of work to look smooth and tileable. So I began experimenting with particle systems.

My first attempt was a full-screen particle system which would stay on a layer with lower z-order than the tilemap, and would move in sync with the camera. While it worked, the performance was dreadful, the water could only flow in one direction and it seemed like such a waste to have a full-screen particle system when it would be obscured by the tilemap most of the time. So I tried a new approach, having smaller particle systems along the water path with various flow directions, and that worked pretty well. After a lot of tweaking to find the balance between number of particles and performance, I added a blue gradient beneath the water layer that stays locked in relation to the camera (a trick I first saw used on the world map in Suikoden 2) and arrived at the effect you can see in the video below (watch it in HD if you can).

There are still problems such as the intersection between the shore and the water (right now things are still a bit “floaty”), but overall I am very pleased with the result. Combined with the positional audio tricks I mentioned in a previous post, the river brings a lot more character to the main village in the game and helps bring it to life, which is always good :)

This entry was posted in Art, Development diary, Programming and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*


eight × = 64

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>