Sprite creation for mobile web games – some thoughts on colour and composition

Back in my day as a Gameboy Advance artist we used to have some key rules for asset creation. Generally much of the design was handled externally via the client and we simply adapted any work for presentation on the small screen. But occasionally we were given some free reign to create new art. To achieve optimal presentation on the GBA screen – which don’t forget was not back lit! – we needed to use the brighter end of the spectrum. Few games on the GBA got away with using the darker palettes. I always thought that the Castlevania games let themselves down in this respect. Fine games in many respects but a dog to play without any additional light on the screen.
By contrast a game like Mario with its brighter colours obviously lends itself to the console’s display limitations.

Castlevania (left) and Super Mario Advance

Castlevania (left) and Super Mario Advance

In defining the graphics for my HTML5 arcade games I try to keep this simple rule in mind. I don’t need to. My target platforms are mobile and of course the world of mobile displays has improved no end. We now have elaborate screens in which each pixel is infact its own light source. Powerful stuff and extremely rich for the game experience. I could in theory get away with much darker palettes but there’s something about vibrant colours that I think is more attractive and more appealing to the gamer. It’s engrained in to me to use rich colour in games and it’s not something I want to turn my back on.

I remember as a young bedroom coder back in the early 1980s reading a copy of C&VG. In it gaming legend Jeff Minter wrote paragraphs about the importance of colour in games. He argued that people respond to colour in a far more powerful way than they do muddy or darker colours. Certainly for arcade games (which is of course Jeff’s forte) this is true and back then on systems like the C64 and Atari 800 range rich colours were a key feature.

So much like the GBA days I start out by defining a palette. For this I use Photoshop. It’s not the best palette tool in the world but it allows for a selection of colours that can be used across the game’s assets.
I start out by using the colour picker and heading for the top right corner for the brighter colours.

Photoshop colour picker

Photoshop colour picker

I try to visualise in my mind how the colours will separate across the game screen.
I am trying to picture the player’s on-screen character sat on top of the game’s backdrop and sitting alongside the other key game elements. This helps to define the colours that I will add to the palette – or swatch in Photoshop parlance.

Photoshop swatch

Photoshop swatch

Dropping new colours in to the swatch is simple and you can quickly build up a bunch of saved colours.
I skip down the spectrum in the colour picker and pick out the colours that I think will best suit the sprites, backdrop and effects. I also try to bear in mind additional colours that could be used as highlights or shadows.
For example, if I want a shiny glass ball sprite it’s useful to have colours nearer to white to add as a highlight.
I try to keep the palette to no more than 16 colours. It’s not always such an easy thing to achieve but it’s a good discipline to aim for.

For my current platform game project colour selection is quite simple. The main character is a squirrel and I’ve coloured him a nice vibrant orange with some light brown. It makes sense to me to have him sat on top of a blue hue since blue and orange compliment one another and always look appealing. But rather than have the blue sat in the same luminance range as the squirrel’s oranges I tone it down a bit. Something a bit more pastel-like.

squirrel sprite

Squirrel against two blues

I try to ensure that there is a clear visual separation between these “layers”. The foreground “active” layer if you like and the background layer.
For every other active game element (or sprite) I try to adopt the same rule. It helps to identify to the gamer which items in the game are important. There are countless other ways to achieve this but this is a good start.

html5 game screenshot

Platform game dev screenshot

Lately I’ve taken to adding a dark key line around the game’s sprites. In fact with the platform game I deliberately designed the game to use cute cartoon characters so that I could achieve this. It really lifts the sprites up from the background layer and for me is a neat style for mobile arcade games.

Within each sprite I also like to define key areas with a darker colour.
So for example with the squirrel you can see that I’ve separated visually his eye, arms, nappy and feet. This is important as it helps to create the illusion of movement and animation. If I’d merely used variations on the oranges and browns it’d be less easy to pick out the swinging arm and walking feet.

I adopt the same approach to any special effects that I use. Things like puffs of smoke and explosions. These are all foreground elements and need to be separated from the background. Again the explosions use the red / orange / yellow end of the spectrum which sits on top of blue nicely. Similarly yellow stars and white smoke will be clearly visible to the gamer and act more as visual rewards than anything else. Much like the character sprites I’ve taken to adding a key line to help separate them.
I’m a seasoned cartoonist so being able to pixel cartoons for these casual games is a huge thrill!

Hopefully that gives a quick insight in to my thought processes for creating the colour palettes in my HTML5 games.
In future posts I’d like to discuss sprite composition and scale in more detail and will also touch on how to create simple animation effects.

Some thoughts on a context based HTML5 platform adventure

I’ve been toying with the idea of an arcade game in which the player controls a character that must escape from a dark and creepy tower. In fact being extremely inventive with my naming I’m calling the game The Dark Tower !
The premise is simple; your character is stood on the uppermost platform of a series of seemingly endless platforms and must decide what action to take to get off that particular platform.
If successful the character will drop down to the next platform where he is presented with another challenge. So on and so forth until the player guides his character out of the creepy tower.

The challenge in the game centres around the timing of tapping the screen to perform the character’s action. Depending upon the context of the platform the action will vary from jump, walk, run, duck or shoot. At least that’s what I have for now ! I guess it’s a kind of Temple Run concept.

So as an example the character stands waiting at the far left or far right of the platform and spins to face the direction he needs to move to get off the platform. At the far end a strange object periodically spits out a poisoned dart. You have a second to consider this and realise that the height at which the dart is travelling means that tapping the screen will result in your character jumping.
You tap the screen and sure enough he jumps over the dart and starts to walk forward. Another dart comes, you tap, the character jumps and continues to move forward. A health icon is overhead. You tap to jump collect the icon and moments later you tap again to leap over a dart. At the end of the platform the character drops down and spins to face the next challenge. This time he starts to walk on his own. From above a boulder smashes down. You tap the screen and your character stops. Tap again and he starts to walk. Another boulder crashes down before you. Tap and tap again and you’re on your way… So on and so forth.

It’s either a challenge of escaping from a predefined number of platforms or simply seeing how many platforms you can complete.

My plan is to randomise the platforms with the simpler stuff at the start and the more demanding platforms later on.

Impossible Mission screenshot C64

Impossible Mission – Commodore 64

The key for me in all of this is the animation of the game’s central character. Much like Impossible Mission from the 1980’s golden age of gaming I want the player to engage with the game based upon the silky smooth animation of their on-screen avatar.
Update: Play a Desktop JavaScript version of Impossible Mission at http://impossible-mission.krissz.hu/

More as I have it.

New HTML5 game – Crossfire

My latest project – the Commodore 64 inspired Crossfire – is complete.

game banner

I used the project to refine my HTML5 game framework and to also try out some new functionality.
I’m thrilled at the resulting game and look forward to adding to the framework with subsequent games.

screenshot screenshotscreenshot screenshot

Crossfire is set to a scrolling landscape that (loosely, very loosely) resembles a Death Star style trench as viewed from above.
You control 3 fighters and are tasked with blasting countless formations of alien fighters whilst dodging numerous obstacles, bombs and cannon blasts. (Extra lives are available with progress)
The game is played at a fairly slow speed to allow for some fine-tuned movement and to also add to the amount of on-screen action.
Every couple of waves you get to challenge your reflexes with a challenge stage. These stages are played at a much faster speed and are very very tricky !
If you survive the challenge you will be met with a much harder stage the next time around.

For the super starfighter there is the opportunity to have your name in lights as Crossfire stores high scores locally to your device.
Note: Currently on mobile I could only find support for the high score table (courtesy of IndexedDB) on Firefox for Android. But I am sure that this will be supported across the board very soon.

The game will be available to play shortly on PlayStar.mobi and also Mozilla’s MarketPlace.

If you are interested in licencing the game and would like a closer look please don’t hesitate to drop me a line at wilcom1970@gmail.com

Crossfire progress update

My current project, the C64 shooter inspired Crossfire, is nearing completion.

All features are in place and the code is pretty stable just now.  I’m hoping to finish testing in the next two days and spend the following couple of days creating all the marketing materials.

I play through my games a heck of a lot. Last night I was blasting away when it occurred to me that the game needs just something extra. A stage that gives the player a break from the normal trench blasting and avoiding objects. So I created a Challenge Stage.

The challenge stage runs the trench at 4x its normal speed.
It’s automatically hellishly difficult to perform the usual blast and collect but is by no means impossible.
I set the challenge stage to appear every couple of waves and right now it looks and feels amazing.

Very excited to be finishing this soon and will of course be presenting it on playstar.mobi once its done.

HTML5 game framework, web audio and a new (old) game

I’ve spent a good amount of time lately working on my HTML5 game framework. It’s starting to pay dividends.

I think the thing I am most thrilled about is the support for Web Audio. Thanks to a bunch of great sites and their articles getting up to speed with producing sounds for the games has been a breeze.

I heartily recommend this site for a great introduction to the API: http://www.html5rocks.com/en/tutorials/webaudio/intro/

I currently support 3 files types: OGG, WAV and MP3. OGG files are generally larger than the other two. Generally speaking I aim to get the game code and assets in to 500k. For all audio I aim to use no more than another 500k such that the game fits in to 1Mb. Downloading a 1Mb game outside of WiFi isn’t a problem in 2012.

For the soundtracks that run through the game I use a very fine composer and old school buddy. You can find his work on SoundCloud. We grew up listening to the awesome music of Rob Hubbard on classics such as Sanxion. I can’t tell you what it means to us to be able to reproduce the arcade thrills and wonderful game music from almost 30 years ago.

Audacity logo

For the creation of sound effects I use Audacity. A wonderfully simple tool to use yet extremely versatile and rich with features. You will need a couple of plug-ins to export to different formats but the application will guide you through this.

As a source for my sound effects I fire up MAME and record the audio of a few games. Armed with a WAV file I launch Audacity and start to tweak the sounds until I’m happy that a) it sounds nothing like the original and b) it fits the game.

This is probably copyright hell but just now I’ve not used the work commercially. Most likely by the time I get to use production quality sound effects I will have commissioned them.

Adding sound and music to games is in many respects the final hurdle. Mobile web games have been largely mute this last couple of years. It’s just awesome to be able to offer rich multimedia gaming experiences.

I look forward to presenting my next project, Crossfire, in the next couple of weeks.

%d bloggers like this: