I intend to complete this game very soon. I confess I’ve got a little carried away adding some special effects with sprites. The shards of metal that fly away from the damaged vehicles when struck with a missile or gun fire were just too tempting to resist.
I spawn them in the game with random trajectory, speed and spin rate. The effect is pretty neat. For the most part the metal shards whizz off the screen but occasionally you get a slower shard that just ambles off screen with a slow spin. It really adds to the impression of blasting everything to pieces. Hope to have the game completed over the Christmas break in time for new year.

Some screenshots from my forthcoming arcade, driving, shooter, explosion-fest Road Rage. There’s some obvious rendering glitches and tiling to address but hopefully you can still get a feel for what the game is all about.

Here is the single sentence that I have guiding me through the game’s design:

So you stole the military’s top secret armoured stealth buggy and they want it back. But you’re having too much fun just to hand it over! Tanks, armoured cars, choppers, missiles… surely it’ll take more than that for you to surrender :)

I had a handful of images from Capcom’s Loop Master arcade game as visual reference whilst I was drawing the sprites and background art.
I think the Capcom colour scheme and striking explosion style has come out well.

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

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

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

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 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.

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.

Further to my previous post about the potential for a zombie / mutant shooter in which the player moves between locations via a pre-rendered sequence, I have knocked up an extremely rough concept.

Flipping through these frames (320×240) and overlaying a weapon in the lower right corner runs very smoothly on the devices I tested on.
Note: I drew that bio-weapon for a ditched Gameboy Advance project about 12 years ago! I’ve been dying to use it ever since :)

The execution needs some tweaking but I think it’s on the right lines just now. I’d like to render some decoration on the walls and ideally texture the walls.
What would follow then is a case of sitting down to figure out every situation and therefore every frame to render.

Like this:

I’ve been working hard to create the visuals for Distant Orbit this last week. I know how much I enjoy looking over other developer’s workstations so I thought I’d capture mine and post them up here.

Developing the home screen and some as-yet-unused alien motherships

Designing the alien worlds and their inhabitants

I’m still undecided on the use of cartoon aliens. I like them but I’m not sure if it’s right for this game.

The 2nd alien world in action with a half completed “monument valley” style backdrop. I use a Wacom tablet and Photoshop to create the artwork. Initially I use a broad pencil – 5px in width – and then I go dotting with a 1px pencil to create the finer details.

An early rendering of the energy tower on Tranquis – planet #1. I wanted each planet to have its own theme and style. This is the first planet and I wanted it to feel quite welcoming with the blue hues. The snow-capped mountains seemed to work well here and I love the completely alien tower as it rises from the horizon.

Like this:

Creating games using HTML5 and the Canvas isn’t always all about using drawImage(). For the most part it is of course because we want to display our lovingly drawn sprites and environments but there are plenty of legitimate cases where we might opt for using the primitive drawing methods such as fillRect().

I use fillRect and fillText consistently in my games and have never found it to be a performance killer. At least not using the canvas dimensions 320 x 480 which I use for mobile gaming. But you should be careful. The more you ask the API to do the more of a load you place on it and at some point something has to give. Namely your framerate !
But with a bit of planning and some consideration for what you are actually presenting it can be very visually rewarding.

Distant Orbit

In Distant Orbit I’m actually using rectangles to construct the pseudo 3D tumbling landscape. It’s a very old and well-used method of creating a moving terrain.
The theory is quite simple in that the lower half of the game screen is first filled with a solid colour and the striped terrain is then a series of rectangular ‘sprites’ that scale upwards as they fall down the screen. The effect is quite nice and I save on having to draw two sets of stripes by having the underlying layer as the alternate colour.
So the underlying layer is drawn in the lighter shade and then the striped layers are drawn over the top.

I refer to the stripes as sprites since they are derived from my base sprite class. That is they inherit specific behaviours and attributes that allow me to position and present them on the screen.
It’s just that when I get to actually drawing them I’m using fillRect instead of drawImage.

(You can see that I store the canvas context within the global namespace g)
So g.ctx.fillStyle has a hex colour value assigned to it and the following draw instruction honours it.
When I draw the rectangle I have already passed through a move() function to return the new position and dimensions of the stripe.
It is also important to note that the fillRect method uses width and height as opposed to locations in terms of scaling your shape.

Example

g.ctx.fillRect(20,20,30,30);

produces a 30×30 square with its origin at 20,20 NOT as you might expect a 10×10 square that starts at 20,20 and finishes at 30,30.

To achieve the scaling terrain effect in Distant Orbit I initialise each stripe with a height attribute of 1 pixel. As it falls down the canvas it scales until by the time it falls off the bottom it’s around 48 pixels deep.
Rather than scale the stripes by a fixed number of pixels each time (e.g. 2px) I use a modifier. This stops the stripes looking horribly uniform. By incrementing the height attribute by a modifier that itself increments with smaller numbers I get the effect that the stripe remains quite narrow for a while as if it where lost toward the horizon:

o.modifier += 0.1;
o.h += o.modifier;

So the height of the stripe would change something like this:

0.1
0.3
0.6
1.0
1.5

which gives a far nicer effect than a uniform increment such as 1, 2, 3 etc.

The beauty of this approach to drawing on screen is that it is reflected in other forms of presentation such as writing text. Instead of fillRect you just use fillText but the style is set in the exact same way.

The basic rectangle drawing is there along with a slightly different version that allows us to provide an alpha value. This alpha range is from 0 (100% transparency, i.e. non-existant) to 1 (opaque). So for example if you provided a value of 0.5 you’d see a 50/50 blend of the background colour and your rectangle’s colour.
The key thing to remember here is that for rgba values you must specify your colours numerically.
So for White rather than #ffffff you’d specify 255,255,255.
For White with 50% alpha opacity you’d use rgba(255,255,255,0.5);

You can see that the text also has the standard CSS attributes of alignment, font-size, font-family and font-weight. This is extremely useful when you consider that you can pull fonts from Google’s web font repository for use in your games.

By simply adding the following line to my markup I can use the “Bangers” web font family in my game.

You can see that in my code the order in which the items are drawn is important.
Starting with the blue background is important since it allows subsequent items to be drawn over the top. If the blue background were drawn last it would simply overlay everything else.
That said there is an instance where you may wish to present a solid block of colour over your content and that’s when you wish to fade your content in and/or out.
To do this we simply draw a rectangle with progressive alpha opacity as the last draw item in our draw order.

Very straight forward. You can see that I set a variable called fade and have it increment slowly from zero to 1. By assigning this value to the new text writing function I achieve the effect of the background fading out whilst the foreground text fades in.

This was only ever intended to be a basic introduction to using shapes and text. I’d like to elaborate on it a bit in a future post and cover gradients and arcs. Anyone familiar with my games will have seen me use gradients for sky transitions in a couple of cases. I am a big fan of them as I think they offer a useful programmatic solution to something that is typically controlled by the artist.

When Distant Orbit is complete I hope to offer a bit more of an insight in to the game’s structure with regard to the drawing.

Like this:

I’ve been asked to provide some promotional material for my handful of HTML5 games.
I don’t actually have anything like this so the challenge of creating them appeals. Especially since I’ve been spending a lot of time knee-deep in code of late. It’s nice to switch focus to the other side of my brain for a while.

As an arcade gaming nerd this also greatly appealed to my retro side.
I instantly recalled promotional advertising for games like Spy Hunter, Gauntlet, Galaxians and Pac-man. A quick bit of Googling returned the following and an excellent site called Roger’s Arcade Collection.

The marquees above are good but I’m not sure they’re going to work in today’s arcades. The market that I’m in is mobile gaming and it’s horribly competitive. The marquees that you see on the mobile web portals are really rather hit and miss. Some are stunning, most are dreadful. I set myself the goal of simply avoiding dreadful. I wanted to borrow from the simplicity of yesteryear and use a good range of colours but I didn’t necessarily feel the need to emulate the feel.

So I fired up Photoshop, dusted off the Wacom tablet and started sketching out some ideas. I love this phase. The blank canvas, the headful of ideas and a bunch of inspirational artwork. It doesn’t get much better.

So I started off with Wizard Wars (above). My first HTML5 game and something that I’ve always been rather proud of.
The game premise is quite simple – a wizard is forced in to warding off enchanted spirits whilst protecting his magical power stars. To help him a golden powerup falls in to the arena every once in a while. The evil wizard Zoltar meanwhile is after trying to steal all of the power stars for himself.

So I figured a cartoon wizard was in order and I thought of Milt Kahl’s awesome Merlin from the Disney film Sword in the Stone. The initial sketch you can see below.

I wanted to show the wizard battling something rather than just playing safe with two wizards standing off against one another. I figured it would be more fun to draw some kind of a ghost.
There are various stages that I went through to create the final image in Photoshop using Paths for the initial outlines and then some freehand pen work to complete the details.

Adding paths in Photoshop

For the most part this is a process of adding path points to the document using the Pen tool (P). Simply click the position on the document that you wish the path to appear. You’re not working in layers here. ( To view your path panel click Window > Paths ) Simply click around the drawing and then re-click your initial path point to close the path.
From there it’s a case of holding down CTRL to click and highlight a path point, moving it if necessary and then holding down ALT to define your curves. Each path has its own set of handles that you can drag out to help you perform this bit. It’s incredibly powerful and easy / fun to use.

I’m really not much of a teacher of this sort of thing but I’ll show you a few more screenshots that I took as I assembled the finished piece.

Once I’d bent the path in to shape to form the Wizard’s main body I selected a suitable green and then used the Path Fill tool to fill in the solid colour.

Slowly building up the picture I repeat the process to add things like hat, face, beard and hands.

By repositioning layers above and below each body part I can hide unwanted shapes. I also draw the eyes in a little more detail without using paths. The shape tool (U) in Photoshop is perfectly good at ellipses. One or two of those overlayed on to one another creates a perfectly good cartoon eye.

I’m now using freehand to define the extra shapes and lines. The Wizard’s arms and sleeves are better defined as well as picking out a couple of the fingers that overlap. Finally I flatten the layers and put a simple stroke around the entire layer.

From this point forward I build the rest of the image using similar techniques. The ghost is a large path filled in with a blueish / white and then blurred with the blur tool (R) around the edges. To add to the effect I apply some outer glow using the blending options on the layer ( Right click the layer and select Blending Options )

I then add the eyes and once again use the blur tool to fade the edges in keeping with the style of the ghost. I opted not to include a toothy mouth as per the sketch. I figured it just didn’t need it.

I’m almost there. From the outset I’d decided I didn’t want to overdo this but I did want to add enough to entice the player in. I almost wanted the player to think “hmm, so I get to player a wizard battling monsters..“

The stars are important in the game and I figured should feature in here. They’re all sat on one layer with a simple orange / yellow gradient fill applied.
Finally I add some text, remove the sketch layer, add a small magical glowing orb to the Wizard’s hands and the image is complete.

Alternatively..

I had some real fun making this. It’s by no means glossy but I feel that it fits the purpose of promoting my game on a busy game portal.
The important thing for me is to have my games stand out from the crowd. I’ve done my best to use colour and composition to plant the seeds of intrigue in to the prospective player’s mind.
Whether it works of course, remains to be seen.

Like this:

I love messing around with new ideas.
Sometime last year I had the idea of trying to recreate a game that I adored as a youngster; Lucasfilm’s future sports classic Ballblazer.
It actually started to go very well in that I’d successfully managed to manipulate the “scanlines” such that they shifted left and right in proportion to the overall floor. The code for this isn’t complex and didn’t take long to implement. However, taking it to the next step – moving forward and backwards – highlighted a bit of a problem with my hasty coding.

I appear to have completely left myself with no options for shifting the grid in all directions and as such left myself with a problem. I’m sure I could have persevered but to be honest I’d become preoccupied with the idea of presenting a shoot ’em up over the top of this shifting grid.

What I thought would be cool was to have aliens above dropping their bombs and aliens in the distance waiting to slide forward once the current wave of aliens had been exterminated.
I also quite liked the idea of the saucer being implemented some way off in the distance and firing its missiles down the grid toward the player.
So from a gaming perspective the player had to slide left and right to avoid bombs falling down the screen as well as avoiding missiles coming at him from way off in the distance.
As you can see I didn’t get too far down that line of thought but I’ll certainly pick it up again once I’ve got the current batch of arcade games off the shelf and in to the portfolio.

Happiness is an uninterrupted hour or so in the company of Photoshop, a Wacom pen and a coffee. Today I’ve managed to find some time to put some more work in to Space Bug Racer my soon to be finished HTML5 game. I’m enjoying it all so much I thought I’d share the view from this chair right now :)

There really is no finer way to spend an hour than this. Poring over my daughters alien sketches and drawing them in to Photoshop then simply hitting F5 on the keyboard to see them in game.
I really am loving HTML5 game development just now. It’s rare to feel such a high level of control over a development.

Like this:

I’ve always loved to see colour in games.
Back in the hazy days of the video game arcades it was always the colourful cabinets that drew me and for the most part the colourful games that took my last coin.
I think this is the key to much of the success in casual gaming.

When we make games we really need to consider the potential audience. What do they want to see to give our games a chance ?
With an increasing number of portal sites for HTML5 games and more games emerging from the community we need to ensure that our games stand out in the crowd.

I remember as a 14 year old reading Jeff Minter‘s view on the subject in the popular British magazine Computer and Video Games. In it he basically argued that gamers love colour. They respond to colour far more enthusiastically than they do any other form of presentation. You just have to look at some of Jeff’s games to see that he means what he says.

Comparing colour to black & white courtesy of www.html5games.com

Introducing colour in to your games doesn’t necessarily mean that you need to be a wizz with graphics. If your graphic skills are limited then just rethink how you wish to apply the style and objects to your game. By default it seems a programmer thinks in terms of black and white. if your graphic skills extend to using primitive shapes then draw them in yellow against a complimentary background – purple or dark blue, for example. Instead of dropping white shapes on to the screen spawn multiple coloured shapes. If your game involves explosions don’t just assume a yellow circle will suffice, figure out how to throw a few multi-coloured circles around.

Colourful games are fun to watch. If in food we argue that we eat with our eyes before we eat with our mouths then I would suggest that in games we play with our eyes before we so much as commit to playing.
A game that involves a small white object against a sea of black might have worked when arcade capabilities were severely limited but they won’t kick the player in to taking on your game quite so much in 2011.

Finally, I’ve always believed that the best games are “screenshotable”. That is you can be at any point in the game and capturing the screen to the clipboard would give you something to share amongst your mates and be proud of. Better still it would give you something to hand over to a web site that says “this is an accurate representation of my game.”

Good use of screen composition and rich colours helps to paint a picture to the player. It helps him to conjur up a view of the game before he’s dropped his coin in to the slot. That’s the target in my opinion. We have to assume that our audience has just one coin in their pocket and you are basically answering the question “why should I spend my last coin on your game ?”

As designers we must think not just of the game and its challenges but of the player and his difficult decision on which game to commit to with his last coin.