I've been working on a graphic for a game's controller configuration screen to show visually which buttons on an idealized controller (belonging to the game's imaginary 8-bit console) correspond to what is currently being pressed on the keyboard/gamepad.

I have something I'm reasonably happy with now, but it's a little boring and I'd like some ideas about making it more visually interesting. On the other hand, I don't want to lose the clarity of the graphic or blow my tile budget in the process.

This is what I have so far:



http://www.rydia.net/~mental/pixeljoint/controller-animation.gif

As far as technical constraints -- the game engine uses a tile-based renderer which uses 8x8-pixel tiles; for this particular graphic, I have eight colors (including background) available and a budget of maybe 64 tiles. The engine can flip tiles horizontally and vertically, which I have taken advantage of to reduce the number of unique tiles required.


Edited by mental - 31 July 2009 at 3:15am

Or if you're going for a deliberately monochromatic look, try Anti Aliasing the jabby edges.

The maroon/brown buttons highlight, but the red does not?

The indentation around the select button is nice! How does it look if you spread the buttons enough to put them into indentations as well? Or even have the fire and action buttons share indentation?


Quick and ugly edit. But I think it gets the gist of what I'm saying.




Edited by Iron - 31 July 2009 at 7:49am

I agree, that was what I was experiencing with my quick edit as well. The action button is fairly dark, so I don't know if, even though it looks cool, the shading is going to work. I'm liking so far, let's wait for someone more experienced to give some critique?