Evoking retro memories with box art

We’re huge fans of the golden days of Atari. The box art was a huge inspiration and that wonderful feeling of being transported away from real life is something that we’re keen to evoke with our own games.

Take a look at this concept piece for some promotional artwork for our forthcoming arcade game Thundergun.

The art department are nerds for Atari box art and artists such as Steve Hendricks.

What do you think?

Playing with a Star Wars arcade game idea, again

I’m not updating this blog often enough so I thought I’d just share some thoughts on a new game idea. The game is a straight forward arcade game though for me it’s a little odd as the primary focus isn’t on blasting and explosions. At least it isn’t yet! There’s time for that to change.

To get an idea for the style head over to my Playstar Arcade and play Night Bomber.
I’m loving getting back in to the pixel art style and sci-fi games like this lend themselves to it.

Jumpin’ Jasper – HTML5 SNES style platform game – development update

A considerable amount of work has gone in to Jumpin’ Jasper this last few days. I’m thrilled by the results of some intense pixelling. As always it’s the colour choices that end up defining the game and I think I got this one just right. Time will tell of course but I’m pretty sure this is the most complete game I’ve made yet using HTML5 tech.

I’ve made a conscious decision to shift towards a SNES art style. This is not a casual decision, it’s very much a direction I want to take my games in going forward. I think the market for HTML5 games is maturing quickly and in order to compete it’s vital that I step up the quality of my output. I enjoy the art as much as the coding and crafting these sprite-based retro games is very much a part of the thrill. Of course the research that goes in to coming up with the art style isn’t so bad either!

Jumpin' Jasper screenshot

So I’m definitely in to the closing stages with the game and am looking to tie up a few loose ends before I begin the lengthy testing process.
I have a few more features that have definitely crept in but they’re not huge and I’m happy to let them slip through the back door :)

Hopefully Jasper will prove to be a hit for me and I can build upon his character for future titles.

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.

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.

Distant Orbit – some new screenshots

I’m still working on the art for this game but sometimes when I make a breakthrough with something I like to share it :)

Today’s breakthrough is the neat haze effect over the horizon that gives me some depth. Better still thanks to a bit of reshuffling of the draw order I can sit the distant saucers in the mist. Very satisfying.
Still a fair bit to be doing with this game but it’s going well.

Fun with box art

Lunch times are a great opportunity for me to relax with Photoshop and knock together stuff that I just wouldn’t normally consider. Earlier today I was looking at a retro gaming site and admiring some of the fantastic paintings that adorned the Atari cartridge boxes 30 years ago.

So I had a dabble with creating such a box cover for Hypergunner.

Hypergunner box art

The space ship comes courtesy of the Terran Trade Authority handbook. I actually have this book and owned an original back in 1980 – or there abouts. The paintings within were and still are inspirational.

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

%d bloggers like this: