Sunday, March 27, 2011

Tinting images in ImpactJs

For Creatures and Castles, I make a lot of use of tinting, as mentioned in the previous post. Now, I could take the lazy way out and just create a bunch of pre-tinted assets for the HTML5/Javascript version, but that's probably not the best way to go.

Instead I decided to dig into the way ImpactJS works and create a plugin that allows the developer to specify a tint color and alpha value on load.

To cut a long story short, I overrode the prototypes of init, load, and reload on the ig.Image class to allow me to specify an initial tint. At first I thought that overriding the init would be sufficient (I added optional tintColor and tintAlpha parameters). However, ImpactJs has inbuilt image caching that uses the path to the image file as the cache key. Consequently, the overrides of load and reload were also required to make sure that tinted images did not use the same cache key (I simply appended the tint color and alpha to the path to construct a new cache key).

The last piece of the puzzle was to override the ig.Loader end function to apply all of the specified tints to the image as they were loaded. Note that I used someone else's color conversion code; I left their attribution intact, of course.

The plugin code is as follows. Save this javascript file [UPDATED: See this post] in the lib/plugins directory. It's not quite perfect yet, but I'll come up with tweaks and usage examples next time.

Thursday, March 24, 2011

New Things, Old Things, and Old Things Made New

In late September, I started writing an iPhone/iPad game called Creatures & Castles using Monotouch. I decided not to use Objective C for two reasons. One of these was that I wasn't a fan of the syntax and design; it felt archaic and semi-obsolete. The second reason was that by using C#, I had the potential to port it to more platforms with fewer changes, should I feel the need.

My wife recommended that I put it forward for the 2010 Best App Ever awards, and so I did, resulting in a satisfactory second place in the iPad category to Mobigame's excellent Edge. Up until that point, sales had been a fairly flat five sales per day. Following the award, sales peaked for a few days at over one hundred copies per day. Not super, but fairly pleasing.

Anyway, an HTML5/Javascript conversion was suggested to me. I thought that it might be fun to give it a try. The ImpactJS javascript library was recommended as a potential framework for an HTML5/Javascript conversion of the game so I took a look. My Javascript is a little rusty these days, so it took me a while to get my head round it, but so far it's been a dream to use. As long as one stays within the boundaries of what it supports, development is a dream. For some aspects of Creatures & Castles, I'm going to have to step outside those boundaries. I'm not sure how easy that will be, but I suspect any difficulties will be due to be rustiness rather than any defects in ImpactJS.

Anyway, after only three days, I've already got levels with baddies moving around in the correct formations showing up in a browser. No user interactivity as of yet, but that's coming. I made a fortunate choice to store all my level information in xml, so conversion to the ImpactJS Weltmeister level format was as simple as adapting my C# level loading classes to spit out correctly formed JSON level files that load right into Weltmeister. I did have to add some code to my javascript entities to handle features such as waypoints (that define the entities paths), but that was a fairly trivial process.

More tricky will be the tinting. In order to create graphical variety in the original C# version, I used OpenGL to tint levels with different shades. There's no clean and simple way to do that in the ImpactJS library, so over the next day or so I'll be implemented a custom image loader that will tint images as they are loaded. Once this is done, I'll submit it as a ImpactJS plugin for others to use (assuming it's not a total hack).

Creatures & Castles in HTML5 glory.


Wednesday, March 23, 2011

Hello World

Funny thing about contracts. They sneak little things in without you noticing...

I'm apparently contractually obligated to maintain a blog about my super-secret project which obviously will no longer be super-secret when I reveal all....

But that can wait until tomorrow.

Ooh. Tingly anticipation... Can you feel it?