[Wip] Art Style Test Platformer Game

[seanz5]

So I am new here and new to pixel art.  This is my first serious project made completely out of pixel art.  I am currently in development of a XNA platformer game.  This is no representation of what the final product will look like but I would love crits on my pixel work, character design, color choices, etc.  I put this scene together using random sprites I have made thus far but before I continue any further I want to know how people interpret the style and look of the game. Give it to me guys I am eager to learn and fix things.



Uploaded with ImageShack.us


Thanks so much

SeanZ

[Corinthian Baby]

Lot of unsmooth/jaggedy lines on the hills/tree foilage. Also, what's up with the gradients? The hills have a lot of banding issues that could be solved with dithering or maybe some smoother shades. The gradient on the sky is smooth as because it's npa. (non-pixel art) so that juxtaposition is jarring. This piece would overall benefit from some palette switching, so instead of dark green, medium green, light green, you could have dark blue, medium green, light yellow, something like that to boost contrast and make the colors more interesting to give it depth. The sprite blends into the background a lot because it has the same general value as the rest of the image. For platformers it is especially important to be able to immediately visually distinguish the sprite from the background/foreground so the player knows where they are and what they're looking at. Also some general AA would help a lot.

A lot of stuff to hit you all at once but hopefully, that should get you started. Good luck.

[seanz5]

Thank you so much for your crits but now I have some questions:

1. I made sure not to use any anti aliasing because to me it always looks fuzzy.  At least when I use it in photoshop it always seems to make halos around everything.  How would you go around that? 

2. You are right that is a gradient in the sky, I wasn't sure if it was that jarring to people.  I have never made a sky before in pixel art.  Is it one giant use of dithering to create what I want?

3. I agree that there is some contrast issues and that I need to go back and choose different color schemes so it doesn't blend as much.

4. Don't hate me please but the banding on the hills is actually a style choice.  I use that type of banding all the time, especially in my vector artwork.  However if you think its crap then I will change it, no biggie.  The whole point of this project is to put myself outside of my comfort zone. 

Thanks for the tips I hope I make you guys proud on round 2 of this.

SeanZ

[voidSkipper]

Not meaning to speak for Corinthian Baby, but I believe the "banding" he is referring to is not your stylistic shading choice, but rather the pixel art term "banding". This term basically describes areas of outlines or shading in which poor individual pixel placement destroys the intended illusion of a curve and instead appears blocky or jagged. There are some extensive discussions on what it is and how to avoid it which can be found with the search feature.

Personally - and as a consumer, because I have next to no artistic experience - I find your colour choice and style quite pleasant. I think that the shade of the tree's canopy needs to be slightly more vibrant to match the scene. The junction between the trunk and the tree is also garishly average in comparison with the rest of the mockup, the trunk and canopy need to "interact" more, if you get my meaning.

Functionally, however, I think you will need to tone down the brightness/contrast/saturation of the background elements a lot. The scene appears busy and slightly flat due to all of the colours in the foreground, midground and background all having the same level of the aforementioned. In a game situation, this would make the character and interactive elements somewhat hard to distinguish, and would probably become quite irritating to look at in short order.

I hope this is of some help to you.

[seanz5]

Ok this is some of the changes I made after Corinthian Baby's critique.  



Uploaded with ImageShack.us

I redid the hills changed their color and shading, toned down the saturation and made them darker.  I also tried to make sure that the tree looked like its branches were platforms.  Changed the sky into a banded sky so it was authentic pixel art and not npa.  I didn't know how to go back and add aliasing like I said before so I decided to use a blur brush (don't kill me ><) at a very low intensity and softened up edges to make them look a bit smoother.  I also blurred the hills in the background to further push it away from the foreground.

VoidSkipper I will go back later tonight and see what I can do about that tree trunk.

Thanks everyone let me know what you think of the new changes.

SeanZ

[Organ_House]

Since you're having trouble with AA (anti-aliasing) here's a quick sample using the hearts to illustrate how it works.



Changed the colors a bit, but both use only three colors. By adding darker or lighter pixels along the edges of your art at specific points you can give the allusion of smoothness without the puffy fluffy look of photoshops auto-AA.

quick edit: if you don't know already, you can click on images on this board to magnify them allowing you to see where certain pixels are specifically, and ctrl+click to shrink them.

[seanz5]

Lost the composition file so I had to rebuild it again which is fine because practice is always a good thing.



Uploaded with ImageShack.us

Third time is a charm, I really tried to alias some of the things you mentioned.  Let me know what you think.

SeanZ

[RushJet1]

When they were talking about antialising, they were talking about this:



notice how the edited one on the left has a much smoother stem / leaf.  I don't really know the best way to antialias the flower itself, as the colors don't really lend themselves to blending with the background too well.

[StarRaven]

Why is it so big? Did you blow it up? I'd much rather see it at actual pixel size. Try to keep all the pixels the same size (the clouds look like they've been scaled up.)

In general, the pixels just look kind of sloppy. Some of the lines look like they need to be straightened up a bit. The quality of this could be improved a lot by just reading a couple of basic pixelling tutorials. (This one is a good start, and addresses some of the things I think you might not be familiar with, since you're new to pixel art.)

Other than that, though, you've got a cute style and some pretty decent color choices. I think you'd benefit a lot from trying something smaller - if you're used to working with vector graphics, you're probably used to working at whatever size you want and then resizing. With pixel art, you want to pick the size you want to work at and stick to it. If you want to work this big, I'd recommend splitting up the picture into smaller pieces so that you can focus on the pixels.

Hope you find some of this helpful! Good luck and happy pixelling~

[seanz5]

1. The picture was only big because the pixels were twice the size.  The reasons for this is because you have to have hd graphics for an xna game but I wanted to make something low res.  I cut 1080x720 directly in half and create all art in this format.  The engine my programmer has made just upscales twice the size.

2. I agree I am very amateur when it comes to pixel art, I have been studying tons of tutorials and studying all the usual pixel art sites (pixeljoint) (various japanese blogs).  I also look at old video game sprites at spriters resource everyday to draw inspiration and try to figure out the construction of them.

3. The clouds were not scaled but was the product of an experiment of screwing around with a lot of options in photoshop.  I thought the outcoome was kind of cool looking but obviously not.  I dropped their design.  
Here is my 4th attempt at this scene, I tried going back and smoothing out a lot of the lines and come out with a more cohesive design.



Uploaded with ImageShack.us

All in original size glory


SeanZ

Im trying guys, and StarRaven I'm checking out that site you linked and realize I could really use some dithering techniques used, I think that will be my next task!