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.

HTML5 game tutorial – or not

I have been desperately trying to piece together the fragmented sections of a tutorial for making your own HTML5 games. Despite what you might think (and you’d be forgiven for thinking it given the amount of publicity that they get) you don’t need a library or framework or some other fancy tool to write your own games. You just need a basic understanding of JavaScript and the desire to learn.

Anyway, whilst I finalise said tutorial I’ve placed a bunch of links to some cool books on the subject down the side of this blog. I recommend them all since they all offer a slightly different angle on the same thing. If the budget is tight then Google the author’s names – they will direct you to some cool stuff.

HTML5 Game Development Tutorial

html5 game development

I have wanted to create a simple HTML5 game development tutorial for a long time. It always frustrates me when people (web developer people) tell me they would love to make games but just can’t get their head around it or figure out where to start.

There are so many myths and misconceptions with JavaScript and HTML5 that I figured a few pages offering my own (rather straight forward and by no means complicated) approach to game design and development might benefit someone else.

I am not (and never have been) an expert. I write my JavaScript in a style that hasn’t changed too much in the last 10 years. You may like it and find it refreshingly readable (I hope so), or you may hate it and deplore its apparent amateurishness. I guess at this stage I should add that I intend to aim this series at the absolute beginner. The complete novice. If you are a JavaScript cadet, maybe written a few document.getElementById methods and done some nice stuff, then you are probably going to be my target audience. If you are a hardcore JavaScripter and get all frothed up at the idea of writing in one of several patterns then I’d suggest you’re not going to be moving forward reading this. If however you have half an interest in making a simple arcade game…

Above all I want to illustrate just how easy it is to craft a simple game using HTML5, JavaScript and CSS. Several things are beyond the scope of this tutorial series but you can find all of that using this wonderful resource that is the internet. I will where possible point you in the right direction.

For the purposes of this tutorial HTML5 pretty much boils down to the use of the CANVAS API. We will draw to the canvas, slap some text on there and generally get a feel for working with its 2D context. We will also handle other game elements such as key/mouse/touchscreen input, sprite movement & animation, collision and scoring. I will use a simple space shooter to illustrate the process not least because I adore space shooters. They also as it happens provide everything you need to get a convincing game up and running.

At the top of each page I will present (within an iFrame) the game as represented by the code we are discussing. I will present any relevant or important code snippets below. Finally I will provide a link to the code where necessary beneath the accompanying code.

I LOVE making games. I’m sure I will enjoy writing this tutorial. I hope that you enjoy the journey with and gain something from it. If you have anything to offer please do get in touch or offer some comments.

Finally please email me if you feel I have missed something crucial. If necessary I will expand on something and offer a bit more of my limited knowledge :)