Pixelation

Critique => Pixel Art => Topic started by: zinnfandel on June 09, 2013, 11:02:00 am

Title: Sidescroll screen attempt (WIP)
Post by: zinnfandel on June 09, 2013, 11:02:00 am
Hello everyone,

I've just last week discovered this community and I was very happy to. I'm only getting started with pixel art, I come from a stop motion background but I got the bug and I just love it.
Been doing a lot of tutorials and trying to get a screen mock up of a rocky/grassy level, but I got so much to learn.
So any C+C would be much appreciated.

(http://zinnfandel.files.wordpress.com/2009/09/screentest2.png)

Thanks a bunch!
Title: Re: Sidescroll screen attempt (WIP)
Post by: Decroded on June 09, 2013, 11:25:52 am
Welcome.
Try using a mid-grey background instead of white, its more visible and will help you get balanced colors.
I reckon your grass has a cool simple look, though its weird how it grows on the left wall and seemingly defies gravity on the right ledge.

At this resolution, don't worry about texturing rocks as you've attempted.
Was it inspired by something you saw?
Anyway just block in the main values first.
What you've done here is added noise which flattens the shapes and makes it look like fossils or the ends of logs.
Try having a big of a shadow under the grass too.
Title: Re: Sidescroll screen attempt (WIP)
Post by: zinnfandel on June 09, 2013, 02:23:40 pm
These are solid tips, thank you very much! You're right about the connection to the wall at the left. I will get on to it.

Yes I was inspired by two games:
(http://2g1g.thepodkast.com/wp-content/uploads/2011/04/theiconoclasts.png)
Iconclasts

And
(http://screens.latestscreens.com/iphoneipad/screenshots/aceofblades/AOBScreenshot1.png)
Ace of Blades.

I started by trying to make individual items and later connecting them, but that surely didn't work:
(http://zinnfandel.files.wordpress.com/2009/09/collection1.png)

So then I moved to making a full mock-up before breaking it down to tiles.
Title: Re: Sidescroll screen attempt (WIP)
Post by: Decroded on June 10, 2013, 04:44:43 am
Yeah I asked because I thought I saw a bit of kiwinutpuo's style showing there.
My opinion though is not to emulate that style too closely.
Sure learn from it but push urself to do something similar in ur own style.
It might take time but if u mock up a whole screen with background layer etc then u should get some great feedback here to help u.
Some experienced artists can draw bits and pieces and have them all match at the end but doing a whole screen is a better way to go.
Title: [Update] Sidescroll screen attempt (WIP)
Post by: zinnfandel on June 11, 2013, 10:08:48 am
Okay so I tried to work with the gray background, it does help. And I've tried many rock arrangement and rendering but kept getting back to the simplest...
I think it's a little better but still feels bland.

(http://zinnfandel.files.wordpress.com/2009/09/screentest5.png)

Thanks for looking!

What do you think?

You're right that I was emulating kiwinutpuo's style (good eye!), but then again I've been following his tutorials so it's a big part of what I know at the moment.
I think personal style can only come with mastery and by first being humble and learning from the best. Once you've got control, you can experiment and find your own style.
right now I'm still feeling pretty lost   :)
Title: Re: Sidescroll screen attempt (WIP)
Post by: Decroded on June 12, 2013, 02:46:28 pm
Well I had some ideas for you:

(http://zinnfandel.files.wordpress.com/2009/09/screentest5.png)-->(http://i1126.photobucket.com/albums/l615/Decrosion/sidescrolleredit_zps3d8b7870.png)

Progress:
(http://i1126.photobucket.com/albums/l615/Decrosion/sidescroller-edit_zps5427e8d1.gif)

1) Your image (removed the tree coz it was distracting me)
2) Used Photoshop (cheating! :o) to adjust the levels, then increased the saturation a bit.
3) Most ppl tend to avoid using random 1 pixel noise at this resolution. So I smoothed out the rocks and tried to give them some planar form (I suck at this >.<). Notice much stronger shadow on below grass.
4) A style of grass that seems popular these days. The basic principal from what I can see is to make the blades of grass larger than life, such that you can draw each one at this resolution. The result is a toony look you may not like but its handy to know you can do something similar with all sorts of textures for a smoother finish, rather than high contrast 1 pixel noise. There are plenty of other styles though, this is just one idea.
5) Started a small section of more defined rock shapes, more for my own practice than anything else. You may not like this kind of rocks or find it easier to stick with rounded shapes for now, and there's nothing wrong with that.
6) Tweaked colours and time for some highlights. TRYING to be selective with the highlights is always a challenge for me >.<
7) Some rough attempt at blending rocks into the darkness that is the middle tiles, reducing highlights along the way.

Much of the changes is targeted at communicating better to the player.
For example, squint your eyes and/or look NEAR the images but not directly at them, now notice how hard your platform is to see compared to my edit?
The bright yellow-green is a distinctive line that is visible in the heat of action without having to move your eyes all over the screen all the time.
To a lesser degree (intentionally), the highlights on the rocks also help mark the edge of the playable area.
Communicating in this way helps create a sense of trust with the player, and improves gameplay.
Sprites of course should take higher priority.
Using a chunk of unique, stand-out colour on your hero is a good idea to differentiate from all the enemy sprites (notice the yellow hair in Iconoclasts?).
Title: Re: Sidescroll screen attempt (WIP)
Post by: zinnfandel on June 13, 2013, 10:39:27 am
Wow thank you so much for working over this!
It's like you turned the lights on.

I admit I don't like the cartoony look and am more looking for an illustrated style BUT:
I love what you did with the rocks, especially the last ones looks very good.
The grass looks fun and clear now, I'll have to experiment with different looks.
I entirely understand what you mean with the platform being more clear and sharp.

I think I was trying to avoid saturated colors to keep the attention on the sprites but this was overdone. Also, I think that because I was using 1-pixel texturing the sharp color contrasts felt harsh which is why I stuck with colors too similar to one another.

You've given me a lot to think about and try out. I'll try it and update.  Thanks again  ;D
Title: Re: Sidescroll screen attempt (WIP)
Post by: Decroded on June 13, 2013, 12:16:01 pm
Yes you are correct, so I didn't completely saturate mostly for the reasons you say.
You can always fully saturate a part or all of any sprites to help them pop.

Another common style of foliage is to keep it smooth but simply blocking in the clumps as puffy blobs with little or very selective texturing, and let the colours make it pretty.
Here's some examples where this done effectively by jnkboy, though some of these might not look good at higher resolutions:
(http://fc04.deviantart.net/fs71/f/2012/005/4/b/gothic_ghoul_grappling_by_jnkboy-d4ldmgk.png)
(http://fc07.deviantart.net/fs71/f/2010/235/0/8/Brave_Guy_vs_Drill_Crue_by_jnkboy.png)
on the trees more than the grass:
(http://fc09.deviantart.net/fs70/f/2010/227/4/0/Yet_another_RPG_battle_by_jnkboy.png)

Also, maybe you should decide on a game resolution, decide roughly how big your main sprite will be, and work on a mockup at that size.
This can help you get everything in the right scale early on.
Title: Re: Sidescroll screen attempt (WIP)
Post by: Decroded on June 14, 2013, 01:48:33 am
Also check out this article explains better what I was trying to say about defining playable and non-playable space - http://www.gamasutra.com/blogs/AdamSaltsman/20090716/2403/Sexy_Tiles_Sidescrollers.php (http://www.gamasutra.com/blogs/AdamSaltsman/20090716/2403/Sexy_Tiles_Sidescrollers.php)

And here is just a few examples of some amazing work by legend Henk Neiborg that is sure to inspire you, especially his clever balance of saturations - http://www.henknieborg.nl/

(http://www.henknieborg.nl/gfx/pixels/wild01.gif)
(http://www.henknieborg.nl/gfx/pixels/thor04.png)
(http://www.henknieborg.nl/gfx/pixels/wild06.gif)
(http://www.henknieborg.nl/gfx/pixels/wild03.gif)
(http://www.henknieborg.nl/gfx/pixels/shantae02.gif)

So if you're going to emulate a style in particular, you can't go wrong with this guy.
Just don't cry (like I do!!:'() if you can't get your ideas and tiles to look that good  :lol:
Title: Re: Sidescroll screen attempt (WIP)
Post by: Pix3M on June 14, 2013, 02:12:47 am
So if you're going to emulate a style in particular, you can't go wrong with this guy.
Just don't cry (like I do!!:'() if you can't get your ideas and tiles to look that good  :lol:

Henk Nieborg? There's a lot to learn to be able to pixel at his level, though I'm not there myself.

Understanding shading lighting and forms is easily a big part of Henk's style, and easily one of Kiwinuptuo's weaker points. Just look at Nieborg's rocks, you can just feel the third dimension despite being 2D art.

Biggest thing to really look out for to be able to do Henk's style is to look at how he mostly does not bother with pixel-dot detailing. He draws relatively simple blobs of color and he creates some really good rocks. You generally do not want to detail with single pixel dots since it will make your work look messy and they will not do you much favors for readability.
Title: Re: Sidescroll screen attempt (WIP)
Post by: zinnfandel on June 16, 2013, 01:20:25 pm
Wow those images are just gorgeous. I did not know Henk Neiborg and this gives me more stuff to look into and learn.

Here's a little update:
I worked up the rocks trying your method then played with them a little bit. Redid the grass and started experimenting with background, just blocking in values first.
(http://gamegoneknut.files.wordpress.com/2013/06/screentest9.png)
It's still very rough of course so don't worry with C C, I'll work it up more then will be glad for more advice.


And while looking around, I thought of looking back to an old favorite of mine.
(http://gamegoneknut.files.wordpress.com/2013/06/joemac_14.jpg)

Even then, there's hardly any pixel noise but the cracks and lights make these rocks look fantastic. Well, off to more experimenting :)