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.

Crossfire – an HTML5 vertical shoot ’em up – development update

Just a quick update as work on Crossfire (previously Stargun) is moving at pace just now.

I’m very keen to use the project as an exercise in broadening the featureset of my game framework.
Currently I’m focusing on creating the kind of vertical shoot ’em up that was popular around the late 80’s and early 90’s. The sort of game that you might have played on an Atari ST or Commodore Amiga. I didn’t personally own either machine as this was a period in my life when I didn’t do much with computers – parties, playing in a rock band and girls were far more important :) – so this is very much an exercise in researching the games of the day via YouTube & VGMuseum, buying a few old magazines and firing up emulators.

It’s a huge amount of fun and the results are proving to be very exciting.
I’m still using a 2 pixel brush as a hang over from the previous game. I rather like the pixellated style of the artwork that is produced and may continue the theme through a few more games. Drawing with a bigger brush in Photoshop is a lot of fun !
I guess the irony is that the artists of the day were probably desperate to work with greater palettes and increased resolutions. They would probably look in horror at how I adoringly craft these retro-inspired spaceships and effects :)

Crossfire fighter graphic

So the features of the game are pretty established.
The in-game level editor / structure allows me to define a JSON map of the level and then iterate through based on a pre-defined delay. As the code ticks through the level row by row a new set of obstacles / bonuses / enemies / power-ups is spawned just off the top of the screen and moves slowly in to view and off down the screen.
Based on the sprite’s type and class it will then animate, glide, blink on and off, shift left and right, rotate, be destroyable or simply shoot at the player.  The combinations available to the level’s designer are huge !

I also took the decision to have the player’s fighter move instantly with the touch.
In River Raider I implemented a kind of drag effect. As you slid your finger across the screen the plane drifted in to position. A kind of drag effect. I think it worked for that game and gave you a little more to think about. But in Crossfire I wanted the movement to be instant.
It’s a mobile game so to enable this functionality and still be able to see the fighter sprite I register the first touch on the screen and move the fighter relative to subsequent touch co-ordinates. This really is the correct way to control your on-screen fighter / character. Too many times we see a virtual joypad and it really doesn’t work.

So currently I’m designing the enemy and toying with the idea of using a pre-rendered scrolling backdrop rather than just the trenchlines that I detailed in an earlier post. The game has a distinct feel and character which I think (hope) the retro shooter enthusiasts will enjoy.
It also has some cool sound effects courtesy of the Buzz JS Audio Library. Getting this to work across the board on mobile is flaky so ultimately I think the audio will be a desktop feature. But big things in mobile audio are on the horizon so watch this space.

Hoping to complete the game within a couple of weeks and push it to PlayStar (mobile only) shortly after. As always the game will be available for licencing on a non-exclusive basis.

Artwork and development for Distant Orbit

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

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

Designing the alien worlds

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

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

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.

Castle Quest concept art – the Wizard

I enjoy sketching out ideas quite quickly and throwing them in to Photoshop to explore colours and various other details surrounding the game’s final appearance. I’m a huge believer in having plenty of inspirational material to hand.

Merlin - The Sword in the Stone

Merlin from Disney's The Sword in the Stone

For Castle Quest I started off by scanning a few Milt Kahl sketches of the wizard Merlin from The Sword in the Stone.
I have always adored Kahl’s drawing so this proved to be hugely inspirational in setting the scene and mood for creating my game.

The more I played with the game’s design the more I figured it ought to be about fighting back. I’d always considered Castle Quest as something of a Pac-Man romp in a Gauntlet style setting. So combat could very well slot in to the design since the appearance would lend itself to it.

Wizard Sheet for Castle Quest

So I reimagined the wizard. As a kid I wanted to draw like the Disney artists and devoured countless books and magazines in my pursuit of their unique style. When I could afford it I bought The Illusion of Life – a wonderfully detailed guide to the Disney process of creating animated cartoons through the eyes of two of it’s original 9 old men. Milt Kahl’s drawings featured heavily in this book and have been a great source of reference to me for years.

So here you see my own battling wizard. Granted he probably turned out to be a little too much like Roy Wood than Merlin but the general feel of the character is pretty much what I’m after.

I’m looking forward to designing the game’s creatures and ghouls next. Then it’s down to work to tighten up the controls and design a few levels !

A sprite in the making

I love dabbling with sprites in Photoshop.
Give me some good music, a supply of caffiene and enough time for some pixelling and I’m in my element.

My “Castle Adventure” game is taking shape nicely. I have some cool features implemented and a neat goal for the game.

Commando sprite

To move things along a bit I started to create my player sprite (up until now I’ve been using square coloured blocks).
It is my intention to have the player stalking the endless corridors of some creepy castle. I rather like the Nazi obsession with the occult and science fiction so right now I’m playing with the idea of a British commando sneaking through an eerie Bavarian castle on a mission to locate evidence of something suitably weird :)

Anyway, above is a rough screenshot from my last Photoshop session.

Creating promotional marquees for my games

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.

Galaxian Marquee

Pac-Man marquee

Spy Hunter Marquee
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.

Wizard Wars

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.

Wizard cartoon sketch

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

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.

Fill path in PhotoshopOnce 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.

path fill

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

filling in the wizard image

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.

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

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

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

wizard wars banner
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.

Wizard wars promotional banner

Alternatively..

Wizard Wars alternative banner

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.

Here’s a few more:

GalactiansDanger RangerGalactians2

Pixelling the characters in Space Bug Racer

Space Bug Racer Photoshop screenshot

Space Bug Racer Photoshop session

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.

 

New art direction for my HTML5 shooter Area 51

I’ve had this game in development forever and I want it finished.
After spending some time this weekend playing the game I decided to give it a lick of paint.
One of the images that I use to help me paint pixels is a screen shot of the Atari 8-bit palette. The colours are just stunning. I simply use a single pixel brush in Photoshop and hit the ALT key to select a new colour with the dropper.
Pixeling is pretty much where it’s at for me. Sunday evenings were made for it ;)

I love cartoon and I love drawing cartoons so the style I’ve gone for is very much a colourful, outlined cartoon style. I just can’t do realism. Besides the weapons ( which I drew 10 years ago ) are of a toon style so it made perfect sense.
In terms of my colour usage I’m staying faithful to my love of Atari’s arcade games.
To try and illustrate the palette choice I took this snap of Vindicators from Mame. It’s not identical but it’s fairly close :)

Vindicators - Atari Games

I’ve almost finished the static floor monsters ( i.e. the ones that walk ) and will soon start on the floaty ones. The floaty ones are the ones that will hurl magic and energy at the player. The walking ones don’t have such an attack just yet. They simply reach the player and the player is “hit” ( i.e. the screen flashes red )

I’ve got a lot going on in this game and it’s designed for mobile use only. I really need to test it across devices.

In the meantime here’s some screens.

Area 51 screenshotArea 51 screenshotArea 51 screenshotArea 51 screenshot

Playing with colours

I enjoy nothing more than opening up Photoshop and messing with the colours in my sprites and general game elements.

Galactians 2

The screenshot above is the original image of the game before I came up with another couple of alien sprite characters. Somehow the black sky and Dropzone inspired moon base didn’t quite work for me. So I messed around with it a bit and came up with a purple sky and (what I think is a) beautiful sunsetting gradient. I also coloured the moonbase setting.
Although the moonbase isn’t finished yet (I intend to add some setting sunlight to certain areas) I think it gives a pretty good idea of where I’m heading with it.

Galactians 2

Initially the aliens were green and I “splatted” them with mini particle-like effects. The green dots in the left hand image reflect this. But I later thought about changing the aliens to be a little less green and splodgy.
So the exploding effect needed to change.
I scratched my head a little and decided to have the spawned dots pass through a colour phase from bright yellow through orange and then to red. The effect is quite neat in that it looks for all intents and purposes like an explosion that rains down and settles to cool on the moon’s surface.

The main benefit to this new approach is that you stand a much better chance of separating out falling debris from falling alien bombs !

 

%d bloggers like this: