Pixel art for an HTML based adventure game.

adinolfi

Hey all,

I'm diving head first into learning pixel art for a project I have in mind, and I'm looking to get as much help with the process as possible.

Here's a character I created the other day, what can I do to improve this?

Crybaby

Oh, she's cute, and I love the attitude in her expression and pose! As for what you can do to make it better... This is just my personal take on it, but - the eyes don't read as clearly as they could. Likewise, the hair isn't looking much like hair right now. As far as the eyes, I'd suggest a bit of clever, conscientious antialiasing - like an even darker shade of her skin-tone around her eyes to make it pop more.

For the hair, the most helpful thing I can offer you is a link to the tutorial that helped me figure out pixel hair! http://www.deviantart.com/art/The-Shou-s-Way-To-Pixel-Hair-113706673

Valerien

To me, you just need to practice a bit more. To study other pixel art masters maybe. To me, the character feels a bit flat, and the colors too dull: to me, you need more color and value contrast in your piece overall. The light hits the clothing from the front, but it hits the body from the right side. The edge of the character as well feels quite jagged, due to the irregularities you left in the curves. If you study the work of experienced pixel artists, you'll see that they almost calculate the succession of pixels they use in order to produce very round curves (2 px right, 1 down, 2 px right, 1 down, 1 px right, 1 down, 1 px right, 2 down, etc.).

Here's a quick overpaint. I don't do much pixel art. but it should convey a few points. I tried to stay close to the shape and style you've chosen (yet I stylized it a bit):

Muzzoid

Agreed with everything that nathan just said.

Seeing as i do pixelart for a living i might be able to help out a bit more.

I'd say your biggest issue is that you are working at waaaaay too high a resolution. 200px high for a character is rediculous for anything short of a pixelart game. Pixelart is all about being fast to produce and low resources for computers. You are going to go through hell trying to animate this.

What i would suggest is to do a fullscreen mockup of a game. Choose the final resolution and try and make the mockup look as close to your final vision as possible. it's going to inform all the choices you make going forwards. Including character size and so on.

I've also thrown together a quick version myself, but I've jumped down in resolution to 80 px high, which is still pretty high.
Now one thing i absolutley need to stress. You also need to work on your design. I've done a bit of work here to update it. I added stockings to add a bit of design interest, added a yellow belt, and made the dress and hair a bit more harmonious.



Of course this is rough, and this is heavily biased towards my tastes.

But here is some essential reading .

http://androidarts.com/pixtut/pixelart.htm
http://www.petesqbsite.com/sections/tutorials/tuts/tsugumo/

adinolfi

Thanks a lot everyone, I really appreciate the help. I'm gonna check out these resources but I think I'm starting to get a better idea of how to go about this. Will definitely continue to practice and post updates.

Muzz wrote: »

I'd say your biggest issue is that you are working at waaaaay too high a resolution.

^ This is one of the biggest issues I've been having. I don't really know how to decide on a resolution or scale. Like, if I want to develop for multiple screen sizes, how do I create art in this style that scales appropriately, and at what size do I start? The goal here is to create a point and click adventure game, like Beneath A Steel Sky or Monkey Island, if that helps.

Muzzoid

Rad .

As i said i would recommend doing a fullscreen mockup. But i guess to be more specific. For multi-resolution, i like to think about the game screen in terms of having bleed. So if you are using the base resolution of 512x384 (half of 1024x768), that is where all the gameplay needs to fit in, and then you have are that is a bleed around the edges, so that at different aspect ratios you still have art going to the edges of the screen. It's easier if your game has a dynamic camera than static screens mind you.

Now you need to scale your pixelart in increments of 100%, and so for a higher resolution, you would scale the entire game up by that multiple and then the bleed will take care of the rest that doesn't fit in neatly.

If you want to truly make it multiresolution without this scaling stuff however, pixelart isn't the solution you are looking for .