The VG Resource

Created this thread because I'll probably do more with it eventually.

For now I'll post this...I'll be doing a lot more with this base so if there are any problems I'd like to know before I start making others!


Shading crits welcome though I already intend to increase shading, contrast and such to remove the flatness. Feel free to give shading crits either way, not that there is much shading yet. More interested in hearing about any other suggestions anyone has to offer.

This is now the most recent version. I made some changes that fixed details I wasn't happy with, mostly anatomy.

Does anyone have any suggestions on this interface layout? Does it seem too cramped? (please ignore the flat looking flower petals)



The space on the bottom right is reserved for a button. It kind of bothers me how busy everything is. I need to try and highlight the important UI elements...

EDIT: Here is a mockup of a second version which I like a bit better but there are still changes I will make for instance the battery icon in the top left which is completely pointless where it is right now.

What is the second screen? A puzzle board? Inventory?

Basically a puzzle board yeah. On some future levels that larger square area will be filled with the smaller squares hence the larger size allowance for it.

Other element details:

Top of screen: level name and (eventually) score in the W: area.
Top right: Target pane for that level, for max of 6 targets and 1 boss.
Top left: battery power and player (battery is also represented by time).
Top center: Current target, life bar below.

Center: puzzle board

Bottom: shield and time bars. (the shield bar is on the top left in the first image)

I think the grid area looks pretty good. Not boring, but not busy. It's exactly what it needs to be. The hummingbird in your first post looks a LITTLE too long, though. Don't they have a little belly to them? Yours kind of looks like it's the same width through the whole body.

It depends on the species involved, but even in the species they are very good at contorting their proportions...If anything I believe it should be longer not shorter to better match real life proportions.

When in flight it depends on how they are moving, if they are still and up-right they can look pretty flat on the front, for instance:

http://www.allaboutbirds.org/guide/PHOTO...bird_3.jpg
http://www.birdsandblooms.com/wp-content...Morgan.jpg
http://gallery.photo.net/photo/1641325-md.jpg

I did purposely try and make that first hummingbird look skinnier since that is a notable difference between it and other species in real life. I still might shorten it though.


Thanks for the comments so far.

Is it distracting to have this life bar overlap the combo box? (Also any other comments/concerns appreciated)




...And yes I know the name tag is wrong.

The BOSS text is more distracting than the bar, haha.

About the interface, almost everything has their own background and they are gap between them, so it look "square"-ish  and it doesnt seem to be integrated together. 
Heres what i mean:


The combo panel doesnt really need its own background since it displays only one information and theres not always a combo ( i guess). The others panels should be put nearer to each other so they feel like they make a whole.  Also, the teal borders of the puzzle board look out of place and they reinforce the square-ish feel. 
But yeah, just my humble opinion. Looks completely fine otherwise.

The combo box doesn't show when there is no combo. The blue borders to the icons are a combo feature. When you activate a combo all icons that will continue that combo will be outlined in blue.

I think that is a fair comment about everything being separated. But I must say I didn't like how it looked without borders, it just seemed like text and numbers were jumbled around and not clearly delineated from everything else. Solid colour backing was trying to prevent things from blending into the background.

I'll certainly play with the layout a bit more though. Thanks for comments. Ah yes nothing more distracting than some text saying BOSS all over the interface.

*shoos away tumbleweeds*

I was bored and played with a colour palette. I'm undecided if it looks good or not...does it work?
(It isn't for the hummingbird project)

(08-03-2015, 09:46 PM)Silversea Wrote: [ -> ]*shoos away tumbleweeds*

I was bored and played with a colour palette. I'm undecided if it looks good or not...does it work?
(It isn't for the hummingbird project)

It's a nice design, but the palette itself needs some work. To help you understand what I'm saying, I made a palette and used it on the V design you had:




Besides the changes in "dithering"/color form, only the colors themselves were changed.

The reason the palette needs work is because there are excess colors. Not only this, but the colors are bit muddy and bland for such a piece. To really point out what I mean, I'll zoom in on some of the parts of your V and show you what I mean.



If you look closely, you can see there are actually four yellows used. You don't even have to look to know this due to the palette on the side, but imagine if one were not given the palette and only had their eyes to distinguish between the colors. To be honest, most of the yellows would merge together at first glance. This is something you want to avoid at all costs as a pixel artist because color conservation not only preserves the style of pixel art, but it unites your piece. Two of those yellows could be removed and the V itself would barely look any different. That is a good sign that those colors can be removed and is something you should be testing regularly while you create pixel art.

If you look closely at mine you can see I only had to use one yellow, and there is a good reason for this. Instead of using a darker yellow, I used orange as not only its own color, but a darker yellow itself. As you may already know, this is a technique called hue-shifting in which you change the hue as well as the darkness/saturation of your color. I can see you attempted to use it in some of your palette but it is not very pronounced due to the fact that it only exists at the very end of the grayscale (whites, grays, blacks, etc.) and somewhat between the main colors. If you plan on hueshifting, I also recommend you learn to build you palettes in a more color-friendly way, instead of one that accentuates flat inclines in color. There are a few ways to do this, but I personally like connecting my colors by branches. A few examples:



You need to understand the interrelations of colors and how they can be used.

Another note that can be made is that I changed your style of color on the V from muddier, less saturated colors to more vibrant colors. Generally, only darker colors should have lesser saturation. The darker a color gets, the less the saturation. In a spoiler below you can see the stats of the colors in my palette, outing the grays. You can see how the brighter or higher up the color in the palette, the more saturation there will be (the more to the right it is.)

It is important you understand this fundamental part of choosing colors.

Finally, I would like to point out that the style of pixel groups I used made the V seem more as if it were made of a rainbow metal, instead of a melting rainbow. This was purely stylistic, but the reason I did this was not to make it look metallic, but rather to blend the colors better in a way that didn't end up make it look sort of droopy. Metallic materials are noteworthy for their extreme changes in color and brightness, which is why the lines bleeding into each other may give it that look. Other than that, there were purely color changes.

Sorry about the incredibly long post, I just wanted you to understand why colors play an incredibly important part in pixel art. Good luck on whatever you're working on, and you're free to use the design/palette/colors/whatever from my V if you would like.

Yay! You're back!

Yes I'm completely guilty of horrible palette choices, and I know it. I've been hanging on this weird "smoothing" style for a long time. As funny as it may sound I try to avoid the "lined" appearance that you ended up with as I'd rather go for a smoother blended style in this particular situation. My "solution" ends up being a mash of more colours pasted all over Perfectly aware of hue-shifting just not very good at using it!

The palette advice is sound...I've not seen anything besides the standard line of colours in a palette before, also its the first time I've actually put a palette together, which you might have determined by the fact I forgot some colours...

Thanks for the post! No worries on length.

Erm so this is one of those times where I do something random that I haven't tried doing before, and know there is work that could be done, but have no idea what that would be. Advice? (except for the motion blur, those are just temporary lines)




I have not tried to improve colour choice recently so I imagine the palette issue continues from before.