Pixel graphics... That whole retro vibe...

Thought I'd just post up a few snippets of info on the current 'NES'-ish style graphics from this project.  Its been interesting to think about making this feel less 'flat' and give it some pseudo-3D-ish style.  The concepts are all pretty simple, so I figure why not blog about it... :)

Pixel graphics

I'm still tossing up on final graphics once this proof-of-concept version is done (graphics of course are just the visuals on top of the game itself).  I kinda like the idea that an arcade theme have an old arcade style.

The sprites are all 16x16 pixel images.  For drawing them, I used GraphicsGale - its a Japanese tool.  There's a free edition, and it works very well.  I exported all of them out to transparent png's - and for making any edits I've been bringing the png's into Photoshop...

Design and style

I had run through a few different designs, and I actually did like the test one I started with (that my brother had drawn up on the ZX Spectrum).

However I wanted more an old-school arcade style, with smaller less detailed sprites.  The closest way to describe the design would be that it reminds me of very old NES style sprites...

Generic 16x16 guy...  4 frames per direction.

I like simple, though I'm also throwing about the idea of even lower-res graphics (maybe 8x8?) as well as slightly higher (64x64)...

A few random 'muck around' ideas...

To be honest, like everything to do with development the visual representation is a layer on top of the game code, so final look can be tweaked when things are closer to complete.  On the other hand, a lot of the python code I've written is related to the graphics - lol!

That less-2D feel

To get a little depth to the graphics, I drew the machines with a semi 'top down' feel.  Each machine was built up graphically in two tiles (though the machine 'tile' in the game is just one - sounds confusing, but its not really).

Dependent upon the direction of the machine, most of them had an extra 'upper section' that got drawn on top of the screen after the characters were drawn, covering the characters so they appear to walk behind the machines.

The down-facing machine on the other hand was the opposite.  I wanted the characters to walk in front of the machine, hence the tile below this machine I drew the front view of the machine before I drew the characters.

The basic 101 of drawing the arcade

The effect is fairly nice and feels much better then small arcade machine graphics in a single tile (they look way too small, as well as flat 2D).

Code-wise, it was fairly straightforward, however I did need some more logic when it came to machine direction - what was above, below and to each side - to test if I was supposed to draw an upper or lower half.  When there were side-facing machines next to each other, I created a top-of-machine sprite to represent the top of the next arcade machine (ie. rather than just drawing 2-tiles of a machine, and overlaying them (that's messy and wasting processing time)).

To optimize the drawing process for the top 'overlay' tiles and lower tiles, they were stored in a simple look-up tuple/list of (x,y) locations.  The basic arcade was drawn in a quick initial pass to blank out the place (including the characters), and only what was needed from the tuple/list was drawn on top/underneath.

So yup - its all go.  Once graphics are up and working, the motivation to keep moving forward with the game itself is refreshed.  Lots of fun, and plenty more stuff to do.

More soon.