AuthorTopic: [Wip] Art Style Test Platformer Game  (Read 7077 times)

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

[Wip] Art Style Test Platformer Game

on: August 16, 2010, 03:26:08 am
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

« Last Edit: August 16, 2010, 03:55:44 am by seanz5 »

Offline Corinthian Baby

  • 0010
  • *
  • Posts: 223
  • Karma: +1/-0
  • Meditating Pixel Placement
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #1 on: August 16, 2010, 08:40:40 am
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.

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #2 on: August 16, 2010, 03:40:16 pm
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

Offline voidSkipper

  • 0001
  • *
  • Posts: 17
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #3 on: August 16, 2010, 06:18:22 pm
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.

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #4 on: August 16, 2010, 06:54:23 pm
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
« Last Edit: August 16, 2010, 06:56:53 pm by seanz5 »

Offline Organ_House

  • 0001
  • *
  • Posts: 45
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #5 on: August 16, 2010, 08:47:23 pm
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.
« Last Edit: August 16, 2010, 08:49:00 pm by Organ_House »

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #6 on: August 17, 2010, 08:02:43 pm
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

Offline RushJet1

  • 0001
  • *
  • Posts: 5
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #7 on: August 19, 2010, 06:18:20 pm
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.

Offline StarRaven

  • 0010
  • *
  • Posts: 108
  • Karma: +0/-0
  • Threadkiller
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #8 on: August 20, 2010, 12:22:51 am
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~

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #9 on: August 21, 2010, 03:16:54 am
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!

« Last Edit: August 21, 2010, 03:27:42 am by seanz5 »

Offline PypeBros

  • 0100
  • ***
  • Posts: 1220
  • Karma: +2/-0
  • Pixel Padawan
    • PypeBros
    • View Profile
    • Bilou Homebrew's Blog.

Re: [Wip] Art Style Test Platformer Game

Reply #10 on: August 21, 2010, 07:55:05 am
<- vs ->
A small edit to help you identifying/tackling your picture weaknesses.

1) be consistent with lightning. This is blatant on the ladder where the extremities are both lit. Assuming a cylindrical shape for the vertical staffs, both staffs should have their higlight on the same side, and their shadow on the same side, because they receive light from the same place. Watch out when flipping things, thus, because you might end up with contradictory light sources. This is the case with your flowers.

2) shading convey volume. look at your flower and at your character's hair. The way you placed highlight and shadow says "think of me as of a cut-out cookie : I'm an extruded flat thing". I tried to alter your leftmost flower to show how you can place the highlight at the part of the object that receive most of the light.

3) organic stuffs don't have straight color ramps. Only plastic will have shadow that have the same hue for mid-tones, highlight and shadows. Leaves, Hairs, flowers, etc. tend to introduce a hue shift in the color they reproduce, for various reasons (ambient lightning, etc.) The sun is yellow, the sky is blue -- that's an ulitmate application of those principles. As a basic guideline, you can almost always tweak your highlights towards yellow and your shadows towards purple/blue. It will require trials to find the proper tone, though. I overdid it a bit.
4) exploit contrast to enhance readability of your game: the face of your character is the most important thing in your game. It needs to pop out. pale blue eyes reaaly don't help on this. I also toned down the hihlight of your ground, which are heavily geometric and could therefore attract undue attention on them. I also gave your character's belly some volume with additional shading, but it's still bleeding to much into the tree. My edit suffers a problem with the new shadows for bushes and tree here : they should be toned down (most likely, the saturation should be reduced) as they are now the most contrasted things.

5) take care of your lines Sometimes it's called banding, sometimes it's called jagginess. the fact is, on a computer screen, a single misplaced pixel can ruin the smoothness of a curve. And properly placed AA pixels can greatly improve it. The mouth, and the hair of your character suffer alot of it. I'd suggest you focus on that first, and keep working only on your character until you've got something satisfying. Observe tool-rendered circles, and the progression they use. If necessary, draw your character on a millimeter-sheet and hatch the squares where your pencil has crossed the square.

HTH.

Oh, and btw, the grass doesn't stick out like that. I suggest you drop the vertical lines altogether and only add some bumps of pale green for now.
I'd also suggest that you look for something else than tetris blocks for your ground: the rest of your art is strongly curved and that introduces a mismatch in the styles that breaks the "believability" of your world. I.E. people can accept Yoshi's Island art because it looks like all the world is made of crayon strokes. Bring in a SGI-rendered barrel from Donkey Kong Country there, and the magic stops working.

edit I realise afterwards that I've overlooked your previous posts: your lightsource is obviously on the right, and I edited the flower and the ladder as if it was coming from the left :-[
« Last Edit: August 21, 2010, 06:30:30 pm by PypeBros »

Offline seanz5

  • 0001
  • *
  • Posts: 22
  • Karma: +0/-0
    • View Profile

Re: [Wip] Art Style Test Platformer Game

Reply #11 on: August 26, 2010, 09:26:34 pm


Uploaded with ImageShack.us

Ok this is trial #5

I fooled around with texture and made the tree less like paper.  There was a comment about the ground texture being too busy so I think I made it easier to read.  Fixed lighting so its a fixed light source *top right*.

Comments and crits welcome


SeanZ
« Last Edit: August 26, 2010, 09:31:34 pm by seanz5 »