Thursday, May 10, 2012

Decade goes Mobile

The development of Decade in its original form (Desktop application, mainly developed in Visual Studio on Windows) is pretty much dead. Perhaps, like in the recent popularity of zombies, it will come back to life some day, but for now the source is sitting in an online repository gathering dust.

I have started to play around with graphics on mobile devices and OpenGL ES 2.0. I remember many years ago, when I first started Decade Engine, how much motivation I received from writing blog posts especially when comments were left. Hope to receive the same motivation this time I am going to repeat the blogging process and can hopefully write some interesting and informative posts.

Staying true to my ever existing believe that C++ is the best game development language means that I can reuse allot of Decade Engine code which will hopefully speed things up a little. Does this limit which mobile devices I can develop for? Not really.
  • On IOS (iPhone and iPad) one can easily mix C or C++ into Objective C. To make an Objective C file compile as C++ instead of C, you simply rename its extension from .m to .mm.
  • On Android I am going to use the exact same C++ code that I write for the IOS game. There is an Eclipse plugin called "Sequoyah" which allows you to compile and debug native code however the Android emulator does not support OpenGL ES 2.0 therefore pretty much anything I write will not work. Because of this, the IOS version will take priority until I purchase an Android device.
I do not want to give too much away about the game I plan on making, firstly because I think its a nice idea and secondly because I haven't actually figured it all out yet. In basic terms, it will be a 2D puzzle game with a slight emphasis on physics. The closest comparisons I can think would be "Feed me Oil" or "Wheres my water" but that is a very distant connection.

Now to the technology.... My first foray into mobile development was to implement a plasma shader. I thought that a fragment shader implementation of, good old, Perlin Noise would be perfect for a plasma effect. Not yet familiar with loading resources on a mobile device, I decided to use a self contained noise implementation which did not require a permutations texture. An excellent and interactive example of such a shader can be found here,

The screenshot is taken from the demo running on an iPad3. The frame rate is terrible on the emulator therefore taking a video isn't an option. I have tried to take video from my iPad, but given that I use my phone camera it is very jerky and poor quality. Is there any good way video capture an iPad screen?

There is nothing really special about this. It runs very poorly on an iPhone 3GS and runs OK, but not great, on an iPad2 and an iPad3. I am also unsure why there are obvious gradient levels instead of smooth blending between colors. The color of a given pixel is calculated as

float n = noise(vec3(position, time));   

//Red and Yellow
vec3 col1    = vec3(n, 0.0, 0.0);
vec3 col2 = vec3(1.0 - n, 1.0 - n,   0.0);

gl_FragColor = vec4((col1 + col2) / 2.0, 1.0);

Any obvious bug here?

The next stage will be to add the permutations texture to the shader. I believe that this method is a little more work upfront, but should be faster as the permutation data (or at least an approximation of the permutation data) does not need to be calculated each time the shader is run. (iPad3 retina display is 2048x1536 pixels. The fragment shader is run for each pixel which is rendered. My plasma is full screen therefore the fragment shader is run 3145728 times per frame. That is a lot of potential calculations which can be avoided).

That's pretty much all for now. Its good to be back, and I hope to post more than once or twice a year.



  1. I am going to take a guess that the bug is the fact that "noise" can return a value between [-1.0,1.0].

    1. Hi MrFurland

      Thank you for your comment. I've had a look at what you suggested and see that noise will return a value from [0.0, 1.0]. The underlying noise algorithm indeed returns [-1.0, 1.0] however the shader returns the absolute value.

      float surface3 ( vec3 coord ) {

      float frequency = 4.0;
      float n = 0.0;

      n += 1.0 * abs( cnoise( coord * frequency ) );
      n += 0.5 * abs( cnoise( coord * frequency * 2.0 ) );

      return n;

      The full shader code used in this demo can be seen at



    Professional trading signals sent to your cell phone every day.

    Start following our trades NOW and gain up to 270% per day.