Print Page | Close Window

Need Ideas for Improvement

Printed From: Pixel Joint
Category: Pixel Art
Forum Name: WIP (Work In Progress)
Forum Discription: Get crits and comments on your pixel WIPs and other art too!
URL: https://pixeljoint.com/forum/forum_posts.asp?TID=8874
Printed Date: 13 June 2026 at 6:20am


Topic: Need Ideas for Improvement
Posted By: mental
Subject: Need Ideas for Improvement
Date Posted: 31 July 2009 at 3:13am
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.



Replies:
Posted By: PulkoMandy
Date Posted: 31 July 2009 at 3:49am
I'd fill the pad with white (or light grey/cream) and color the buttons.
Also your buttons look smaller when they are active because the outline is removed.

Some real references:

And if you don't like my favorite gamepad, here are some others:
http://www.thosewerethedays.de/joystick_galerie.htm - http://www.thosewerethedays.de/joystick_galerie.htm


Posted By: jeremy
Date Posted: 31 July 2009 at 4:40am
Or if you're going for a deliberately monochromatic look, try Anti Aliasing the jabby edges.


Posted By: mental
Date Posted: 31 July 2009 at 6:34am
How's this look?


http://www.rydia.net/~mental/pixeljoint/controllers2.gif

(Not animated yet.  Also, did anyone else have trouble with the GIF in the original post showing up on the board?  It is there in an img and showed up for me in the preview, but not the actual post.)


Posted By: Iron
Date Posted: 31 July 2009 at 7:36am
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.




Posted By: mental
Date Posted: 31 July 2009 at 2:17pm
I can't really move the buttons since they need to align with the tile grid so I can animate them individually.  But that did give me an idea for emphasizing them more, inspired in part by the SNES controller:


http://www.rydia.net/~mental/pixeljoint/controller3.gif

I also antialiased the edges a bit more (maybe too much?), and did a bit more with shading.  I am a little worried that maybe the action button is getting lost against the dark background though.

Edit:

Here is an animated version:

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


Posted By: Iron
Date Posted: 31 July 2009 at 10:51pm
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?



Print Page | Close Window