Weekend Updates - Indexing and Graphics

A hodge-podge of generally undirected game updates took place over the weekend which I wanted to write about.  Now that the in-game menu functionality is working I'm getting close to having nothing but a handful of random details to cleanup before the engine and game are actually playable entities.

Indexing

One thing I found that I overlooked in my originally programming of the engine was the fact that, since the player is movable, the player may at some points be in front of an object while at other points might be behind an object.  The problem came in when I realized I was not re-ordering the array of on screen objects, so when a player walked behind an object, the entire player sprite was still drawn on top of the sprite for the object which they were supposed to be behind.

On the surface this isn't a major problem and I was able to write up a sorting function to pass to Array.sort which ... sorted things out.  Writing up the function however brought a larger issue to light.  In order to get objects which were literally on top of other objects (ie, a coffee cup on top of a table), I had to introduce a gameHeight property to each game object.  This property I used to indicate how far off the ground something was assumed to be and my sorting function could take this into account when calculating an objects relative position.

This may end up being sufficient for this game, but I feel like the engine in the end needs to more robustly handle the fact that I'm essentially working in a 3d environment but drawing in a 2d context.  For instance, I may end up reworking the object positioning mechanisms so that their position is defined in 3d space and the engine does the work of calculating where to map those objects to in 2d space for presentation purposes.

Graphic Work

I've been putting off drawing more sprites, largely, because I got so sick of it after making all the sprites for the room itself.  This weekend however I decided to hunker down and start work on the panda walk cycles again.  It was as much of a pain as I expected it to be, but I got the forward walk cycle done and am now moving onto the left walk cycle (which will be repeated as the right walk cycle).

All of this graphic work has led me to the conclusion that, for my next game, I need to just pay someone to do this for me.

I still have some cleaning to do, but here's the general idea of what the final walk cycle will look like

So, what is left to be done?  I'll try to get a list together for a future post, if for no other reason than to provide myself with a checklist of sorts.

DnL8Tar

First Look at the Panda Facing Left

I took some time this afternoon to draw up the template image of the panda facing left ... or ... right I suppose from his perspective.  

Looking left

The black outline will serve as the frame of reference for the animation of the panda walking left (or right, I'm going to cheat and just flip the image, making any minor corrections for the rotation necessary.

First Animation Effort

I preface this post by saying that I am in no way an animator.  In fact, I can only say that I dabble in the art of drawing in general.  Being that I am the only person working on this game, I am forced to develop, among other things, the sprite animation for all elements of the game.

The most robust animation in this particular game is going to be the walk cycles, specifically the walk cycle for the main character (and for the maid (spoiler!!!)).  Drawing these animations is something I've been dreading due to the inherent tedium though I'm at the point now that I'm getting annoyed by testing with a static image.  Said annoyance has escalated to the point necessary to raise my motivation to the level necessary to delve into the walk cycle. So here we go:

First attempt at a walk cycle

This is the forward walk cycle.  It ended up being eight frames which seems excessive looking at old NES walk cycles, but it looks decent.  I will most likely get annoyed drawing eight frames per direction (8*4=32).  To draw the animation I'm working off a base image and tracing in vellum so I can see the frames progress as I draw along.  Looking at the animation now I seem to tend downward in my drawing, though that may just be a consequence of the paper folding and I can probably clean that during digital inking. 

Before making this final I am going to tinker with the prospect of a lower frame count, though eight may just end up being what I leave it at, which may be fine since there's only one thing I really need to animate to this extent. 

Panda Town Sprite Development

Since this is my first official post about the Panda Town project, for those not yet familiar with the project, it's probably also the first you're hearing about it.  To give you the brief intro, Panda Town is a game I'm working on, the engine of which is entirely Javascript (though the game definition is housed in a tripple-store and delivered asynchronously to the game engine upon request).  Graphics are courtesy of HTML5's canvas element (which is an element with a LOT of potential for those of you who haven't played with it yet).  I'll post more about the engine itself in the future but right now we're talkin' graphics.

Being my first venture into Sprite Graphics (I don't know why I capitalized those words), I'm having to draw and re-draw a lot of the work, but some of the elements are starting to coming together.  I want a bit of a retro feel to my work, something maybe reminiscent of Zak McKracken or Monkey Island (the early Monkey Island, not the newer stuff (which is also solid work) ).  My primary tool thus far has been Photoshop and my best friend in Photoshop has been the 1px pencil tool which gives the image the blocky feel that I'm looking for.

A Panda and his coffee

Working with the constraints of individual pixels and the constraints of a particular feel has been a great exercise thus far.  The medium, while challenging, is also somewhat rewarding, especially for someone who still loves the classic feel of Maniac Mansion or Lolo. Just changing a couple pixels can have a huge effect on the way the image is perceived since you're dealing outside of realism and have to trick the eye into seeing some degree of continuity.  

As I get further into the drawing I'll probably post some more teasers.  At the moment I'm waiting until I figure out what I want the floors and walls to look like (and by that I mean waiting until I have the patience to draw the floors and walls) to post any full rooms.  I also hope to talk a little more about the engine soon since it's close to being done.