Trying to teach myself pixel art

A place for your artistic side. Discuss techniques and tools for pixel art on the NES, GBC, or similar platforms.

Moderator: Moderators

Drag
Posts: 1615
Joined: Mon Sep 27, 2004 2:57 pm
Contact:

Re: Trying to teach myself pixel art

Post by Drag »

ClayAnderson wrote:Essay writing service reviews
What a nice post you made just now.
User avatar
DragonDePlatino
Posts: 94
Joined: Mon Oct 20, 2014 1:50 pm

Re: Trying to teach myself pixel art

Post by DragonDePlatino »

If you want a good animation program, I'd second ASEprite. I've used it for months and I actually have it open right now working on some character animations. The paid version is a lot more feature-rich, but free version has some benefits like a more beginner-friendly interface and better onion-skinning. It even has some features useful for NES developers, like indexed palette support so you have your NES palette on-hand.
User avatar
Marscaleb
Posts: 240
Joined: Fri Sep 11, 2015 10:39 am
Contact:

Re: Trying to teach myself pixel art

Post by Marscaleb »

Looking at the scene mock-up, I like the first one you posted better, except for the hills (the presumably one-way platforms) which I think look better in your second incarnation.

For such a simple and cartoony design, I would admonish you to avoid using black inside the tiles; only keep it as an outline; don't use it inside an object. The reason being, you want to establish a set of clearly-identifiable rules for how to read a scene. Everything that can block your path or that you can jump on ought to be instantly known just by looking at it.

To that end, I suggest a slight revision to those bushes, which I would *assume* the player cannot stand on. Have their outline use the dark green (except maybe near the bottom) so that they don't "pop" out as much; make the background look different from the foreground.
If you were able to swim, I would suggest having the top of the water have a black outline as well.

A game ought to have some clearly-different edges; the top of those hills ought to look noticeably different than the middles so that the top edge is clearly identifiable. The edge of the walls need to look clearly different so that they look like walls. This is a universal piece of advice for all games.
Since you are using an outline in your art style, you have a natural tool to use to distinguish boundaries for what the player can touch. As such, I would say to only use a black outline on objects the player can touch, and ALWAYS use it for objects the player can touch.
But you can achieve the same goal through other methods; you could use a distinct pattern on the edges you can touch, you could keep separate palettes for objects depending on if you can touch them, etc. There is a lot that you can do, but I advise you to pick something and keep to it.

I like the dirt with the dots in it. It looks more interesting. The hills have this wavy pattern, the clouds have this curly pattern, the grass has a nice shaggy pattern, the bushes have a cresting pattern, but then the dirt is just a solid color? No-no-no-no, keep your art consistent. If you use just a solid color, use solid colors everywhere. If you put in little patterns, but in patterns everywhere. And the patterns look better IMO; more distinct and unique. The dirt and the water ought to have a pattern in them. (You can get away with the sky being a solid color though, because that's what sky looks like in real life.)
I like the simple dot pattern you were using; it is effective, makes it look like dirt, and matches the rest of your style. But if you don't like the simple dots, trade them up for something else. You could make a sharp zig-zag pattern or another waving pattern, and it could still look consistent with the rest of the style.

i like the more natural-looking grass pattern you use in the first picture, but the the more stylized-grass in the second one is okay too. As for which one looks better, that is really going to depend on how everything else looks. We're only staring at one screen. What does the rest of the level look like? If we come across a building what will that building look like? What about the inside? What about the next level?
If you want to split hairs about which looks better, the question is really going to be, which will better match the rest of the game's style. For my vote, I like the style indicated by the first image, but if it doesn't match everything else, then it won't work.
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Trying to teach myself pixel art

Post by tokumaru »

One thing I've recently started to consider very important is aspect ratio correction. Whenever you have things rotate, you need to see the graphics in the correct aspect ratio to be able to draw them consistently at different angles.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

Thanks for all the editor suggestions. I probably should've mentioned I only have Linux, hence the preference for free software (so I can compile it myself if need be).

Re ASEprite: programs that make permanent changes to system settings without my permission have no place on my hard drive. And making my mouse unusable isn't very helpful to begin with. I could probably use it with my laptop trackpad, but that's a special kind of torture all by itself.

It's a shame, too, because it looks like a great tool.
Marscaleb wrote:For such a simple and cartoony design, I would admonish you to avoid using black inside the tiles; only keep it as an outline; don't use it inside an object. The reason being, you want to establish a set of clearly-identifiable rules for how to read a scene. Everything that can block your path or that you can jump on ought to be instantly known just by looking at it.
Marscaleb wrote:A game ought to have some clearly-different edges; the top of those hills ought to look noticeably different than the middles so that the top edge is clearly identifiable. The edge of the walls need to look clearly different so that they look like walls. This is a universal piece of advice for all games.
Since you are using an outline in your art style, you have a natural tool to use to distinguish boundaries for what the player can touch. As such, I would say to only use a black outline on objects the player can touch, and ALWAYS use it for objects the player can touch.
But you can achieve the same goal through other methods; you could use a distinct pattern on the edges you can touch, you could keep separate palettes for objects depending on if you can touch them, etc. There is a lot that you can do, but I advise you to pick something and keep to it.
I get what you're saying, and I've already taken some steps in that direction - that's why I took the black out of the hill pattern, and realigned it so the tops of hills are all light while the base is always dark - but I think removing the outlines entirely is a little extreme. More to the point, I don't think I could pull it off. Black outlines are my bread and butter, they're the first thing I draw and they make the colors play nice with each other.

Take a look at Super Mario Bros. 3; it has a "simple and cartoony design" yet outlines absolutely everything. What rules would you say it uses? Serious question - whatever it does, it works, and I want to steal it. :P All I can tell is that background objects all seem to be rounded and interactive objects all seem to be angular.
Marscaleb wrote:To that end, I suggest a slight revision to those bushes, which I would *assume* the player cannot stand on. Have their outline use the dark green (except maybe near the bottom) so that they don't "pop" out as much; make the background look different from the foreground.
Like this?
mockup-2b.png
mockup-2b.png (1.31 KiB) Viewed 6387 times
It doesn't really look that great to me. The green only looks dark elsewhere because of context; next to the pale sky it doesn't really work as an outline.
Marscaleb wrote:If you were able to swim, I would suggest having the top of the water have a black outline as well.
You can indeed swim, though my water physics are pretty awful. But the top of the water isn't solid, and every other long, horizontal black line indicates something you can walk on. So I used white instead; it's a boundary, but not an obstacle.
Marscaleb wrote:I like the dirt with the dots in it. It looks more interesting. The hills have this wavy pattern, the clouds have this curly pattern, the grass has a nice shaggy pattern, the bushes have a cresting pattern, but then the dirt is just a solid color? No-no-no-no, keep your art consistent. If you use just a solid color, use solid colors everywhere. If you put in little patterns, but in patterns everywhere. And the patterns look better IMO; more distinct and unique. The dirt and the water ought to have a pattern in them. (You can get away with the sky being a solid color though, because that's what sky looks like in real life.)
I like the simple dot pattern you were using; it is effective, makes it look like dirt, and matches the rest of your style. But if you don't like the simple dots, trade them up for something else. You could make a sharp zig-zag pattern or another waving pattern, and it could still look consistent with the rest of the style.
I don't lke the original dirt and grass, to be honest. The noisy look clashes with the rest of the style. And I tried putting patterns in the dirt but it looked even worse, so I just gave up and flood-filled it. Which doesn't look great either, but it works. There's nothing interesting in the dirt anyway, gameplay-wise.

Now that I think about it, I could try some larger circles as a stratified "bubble" pattern. That might work, for both the ground and the water.
Marscaleb wrote:i like the more natural-looking grass pattern you use in the first picture, but the the more stylized-grass in the second one is okay too. As for which one looks better, that is really going to depend on how everything else looks. We're only staring at one screen. What does the rest of the level look like? If we come across a building what will that building look like? What about the inside? What about the next level?
If you want to split hairs about which looks better, the question is really going to be, which will better match the rest of the game's style. For my vote, I like the style indicated by the first image, but if it doesn't match everything else, then it won't work.
I didn't really have much of a style in mind when I started, and it shows. But the bold outlines, flat colors and stylised patterns I gravitated towards reminded me of Ukiyo-e, which I think would suit my apparently animé-esque character design tendencies.

But the bottom line is I really have no idea what I'm doing. I ditched the noisy, natural look because I'm bad at drawing it. Those dots aren't even random; they're placed in a regular pattern of triangles. One thing I really want to do is make some good waterfront cliffs. Rocky background, grassy surface on top, water at the bottom, and the odd waterfall in the background. Maybe a cave tileset to go with it. But I just can't get a decent looking rock pattern. Or anything that isn't geometric, really. Any suggestions? How would you go about doing stylized rocks?
tokumaru wrote:One thing I've recently started to consider very important is aspect ratio correction. Whenever you have things rotate, you need to see the graphics in the correct aspect ratio to be able to draw them consistently at different angles.
I don't have any ambitions of rotating things, but I've been meaning to check on that anyway. NTSC artifacts too. Maybe I should code an NTSC filter into my prototype. Or just hurry up and finish coding the NES version...
User avatar
Drew Sebastino
Formerly Espozo
Posts: 3496
Joined: Mon Sep 15, 2014 4:35 pm
Location: Richmond, Virginia

Re: Trying to teach myself pixel art

Post by Drew Sebastino »

Rahsennor wrote:Like this?
Agreed, that looks terrible. I'm sure you could keep the outside black but change the black on the inside to dark green and it would look better.
Rahsennor wrote:If you were able to swim, I would suggest having the top of the water have a black outline as well.
Why does everything need to be so formulaic?
Rahsennor wrote:But the bottom line is I really have no idea what I'm doing.
You said it, not me. :lol:
Rahsennor wrote:One thing I really want to do is make some good waterfront cliffs. Rocky background, grassy surface on top, water at the bottom, and the odd waterfall in the background.
So would it be like this except with water at the bottom?

Image
You know, I don't know if it's just because you're having trouble drawing, but I've never been for having BGs look "totally 2D" in that you never see the top or sides of anything. This is problematic when you're trying to portray depth and ultimately to me kind of looks weird in many cases. That's why I generally prefer the looks of something like DKC or Metal Slug over Super Mario Bros. The problem is though that it generally eats up more tiles and takes more palettes for the same amount of color.
Rahsennor wrote:I just can't get a decent looking rock pattern. Or anything that isn't geometric, really. Any suggestions? How would you go about doing stylized rocks?
What are you shooting for in terms of the number of tiles? Good lucking rocks become very easy the more tiles you have.
Drag
Posts: 1615
Joined: Mon Sep 27, 2004 2:57 pm
Contact:

Re: Trying to teach myself pixel art

Post by Drag »

Just to throw an idea out there, here's an example of some textured grass that's stylized but not noisy. The rocky dirt in this example is just an idea for stylized dirt, it may not go with the scene. In either case, to draw rocky dirt, you can start with the light color and draw the outlines, but you can also start with the dark color, and draw rock-shaped blobs using the lighter color. Shadowing can be done by making lines in one direction really thick, and lines in the other directions really thin. In this case, the lines are all pretty thin, but diagonal down-right lines are erased.
groundhelp.png
groundhelp.png (1.09 KiB) Viewed 6330 times
I think those bushes are fine with the same black outlines everything else has. You don't need visual cues for everything; in this case, context is what'll tell the players that the bushes aren't something you can stand on. After all, when do you ever stand on bushes? :P

If you need to convey that water is interactable and not just background scenery, the easiest way is to put something in the water. You can have enemy fish swimming around in it, you can put a collectible in it, but probably the safest way to introduce players to the water is to have the level design (the ground and obstacles) continue into the water, so that players will naturally jump into it and learn that water is something you interact with. Be careful that players can't just jump over the water and avoid its introduction entirely.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

Espozo wrote:Agreed, that looks terrible. I'm sure you could keep the outside black but change the black on the inside to dark green and it would look better.
I was just thinking of that.
mockup-2c.png
mockup-2c.png (1.31 KiB) Viewed 6302 times
Better?
Espozo wrote:Why does everything need to be so formulaic?
Marscaleb said that, not me. You put my name in your quote tags.
Espozo wrote:So would it be like this except with water at the bottom?
I was thinking something along the lines of this:
crop-2.png
crop-2.png (2.09 KiB) Viewed 6302 times
Although given the NES palette limitations, the rocks would probably have to look more like this:
crop-1.png
crop-1.png (2.1 KiB) Viewed 6302 times
(Excuse me posting crops of someone else's artwork; if that's not kosher let me know and I'll take them out.)
Espozo wrote:What are you shooting for in terms of the number of tiles? Good lucking rocks become very easy the more tiles you have.
I'm looking at NROM, so 256 tiles for the whole game. I'd like to have at least four different regions (plains, forest, coast, cave; that sort of thing), which would leave around 64 unique tiles per region. In other words, not many. Not that I'm going to be running out of tiles any time soon at this rate.
Drag wrote:Just to throw an idea out there, here's an example of some textured grass that's stylized but not noisy. The rocky dirt in this example is just an idea for stylized dirt, it may not go with the scene. In either case, to draw rocky dirt, you can start with the light color and draw the outlines, but you can also start with the dark color, and draw rock-shaped blobs using the lighter color. Shadowing can be done by making lines in one direction really thick, and lines in the other directions really thin. In this case, the lines are all pretty thin, but diagonal down-right lines are erased.
I like how you have just enough black to cover the attribute boundary. Excuse me while I take notes. :)

Is there some kind of trick to placing good looking "random" lines? Wallpaper groups or something? Every time I've tried to draw rocks, either by filling or by outlining, I get a mass of scribble that looks nothing like rocks at all. Then I spend a couple of hours making it tile, and wind up with tiled scribble.
Drag wrote:I think those bushes are fine with the same black outlines everything else has. You don't need visual cues for everything; in this case, context is what'll tell the players that the bushes aren't something you can stand on. After all, when do you ever stand on bushes? :P
You could hide an easter egg that way. :P
User avatar
tokumaru
Posts: 12427
Joined: Sat Feb 12, 2005 9:43 pm
Location: Rio de Janeiro - Brazil

Re: Trying to teach myself pixel art

Post by tokumaru »

Rahsennor wrote:I don't have any ambitions of rotating things, but I've been meaning to check on that anyway.
I don't necessarily mean programmatical rotation, but even the length of a sword being held vertically should be adjusted when it's held horizontally. Being able to draw in the correct aspect ratio really helps with that. Preferably, the software should support proper rotation for aspect ratios other than 1:1 (Photoshop for example does), so you can rotate automatically to get the proper dimensions and clean up the result for the final sprite.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Re: Trying to teach myself pixel art

Post by tepples »

My Rotpixels tool supports rotation while both preserving pixel aspect ratio and minimizing nearest-neighbor artifacts, but I think I need to update it for Python 3.
User avatar
Drew Sebastino
Formerly Espozo
Posts: 3496
Joined: Mon Sep 15, 2014 4:35 pm
Location: Richmond, Virginia

Re: Trying to teach myself pixel art

Post by Drew Sebastino »

Marscaleb said that, not me. You put my name in your quote tags.
Oops... Yeah, that was an accident.
I was thinking something along the lines of this:
I don't get that picure, is th rock wall a separate plane in front of the waterfall, or is it like an extension of the cliff side the waterfall is going down? If so, then water should be splashing up and poring down in places.

Just thinking though, why do you want it to be NROM? It's just that I'm wondering if it's for stylistic choices, because it's very limiting.
Drag
Posts: 1615
Joined: Mon Sep 27, 2004 2:57 pm
Contact:

Re: Trying to teach myself pixel art

Post by Drag »

Sorry, I noticed the grass tiles don't quite adhere to the attribute boundary, but with a slight tweak, it'll conform.

Here, this illustrates the rock pattern a little better:
rockhelp.png
rockhelp.png (4.78 KiB) Viewed 6255 times
It starts with the negative space, and you draw the rock-shaped blobs onto it. It'll usually look ugly when you tile it, so go through and tweak it until it looks more uniform. From there, you can go straight to the shading, or you can expand your blobs so they touch, tweaking the shape where necessary, and add the shading to that. To convey the idea of rocks, keep your edges angular, rather than circular. A little rounding is ok, because rocks get weathered in real life which smoothes them out a bit.
User avatar
Drew Sebastino
Formerly Espozo
Posts: 3496
Joined: Mon Sep 15, 2014 4:35 pm
Location: Richmond, Virginia

Re: Trying to teach myself pixel art

Post by Drew Sebastino »

This is my take on your rock wall:
Rock Wall.png
Rock Wall.png (289 Bytes) Viewed 6228 times
Honestly, for the side of a waterfall, these rocks look way too small, but using larger rocks would use more tiles.
User avatar
Marscaleb
Posts: 240
Joined: Fri Sep 11, 2015 10:39 am
Contact:

Re: Trying to teach myself pixel art

Post by Marscaleb »

Hmm; I guess the non-black outlines would be hard to pull off on the NES. I've seen some SNES and GBA games do a great job with them, though.
I think the problem is that all you have that isn't something the player can touch are those two bushes. If you had more background elements it could work a lot better. If you had more foliage in the background, maybe some little houses or something... Altogether if there was more background then it would work well to use the black outlines only on player-collidable objects.
Rahsennor wrote: Take a look at Super Mario Bros. 3; it has a "simple and cartoony design" yet outlines absolutely everything. What rules would you say it uses? Serious question - whatever it does, it works, and I want to steal it.
Mario 3 uses a couple things.
First and foremost is shape. Everything the player can touch is square. Not just angular, but outright square; flat edges on four sides. (Plus a little rounding on most corners.) Everything else usually has complex shapes. The bushes have rather complex rounded and irregular shapes, the distant hills (or are they big bushes?) have rounded tops, the hills in some levels are angled, plus they have round tops.
It is worth noting that one of the reasons this works well is because Mario is a very block-centric game. All the power-ups are hidden in blocks. There are brick blocks that you can destroy. The block format isn't just decoration nor an artifact of technical limitations; it is in fact part of the gameplay.
And when a level has slopes, those chunks of land are completely unbroken. The part of the land that slopes up is part of the same flat land that the player starts on. Plus those lines are *slightly* thicker, and they usually don't have background hills in those levels, except for tiny rounded bushes.

The second thing Mario 3 did (as well as Mario 2) is it forced the connections to be manifested before the player had an opportunity to make a misguided assumption about the objects. When you first start the first level, you are already in front of one of the large bushes. There's no opportunity to wonder if you can touch them because you start the game inside one. In fact, most of the levels in Mario 3 do this, and certainly it is done for every new background element.
When you first come across a cloud that you can walk on (excluding some bonuses, so the first time you are forced to walk on a cloud) there is an enemy walking on it, so you will see that they can be walked on before you ever have an opportunity to guess if it is something you can stand on. If I am not mistaken, this is also the case for the first large colored boxes.

Also, when you first see the large colored boxes in 1-1, note that the very first ones are narrower than most of them, AND that they are placed so one is partially in front of the other. Before you can touch these boxes, you will clearly see them in their entirety. And because they are "stacked" with one in front of the other, they naturally look like they exist in a world of depth, which makes them not look like solid walls. That stacking effect naturally leads the player to believe that they can walk in front of them.
Next, note the question blocks. The first pair is relatively low, so the player can hit them from the ground, thus are able to explore them and understand how they work. But the next two are too high to reach from the ground. This naturally leads the player to want to stand on something. And there just so happens to be those first large colored boxes. (The first one of which is also the same color as the ground, which suggests that maybe it is solid too.) This leads the player to want to explore the solidity of the boxes. And if they were to try to just jump straight from the ground to hit the high blocks, they would likely land on the large colored box.

The first time the player ever encounters water, (1-5,) they are dropped into it without a real opportunity to avoid it. There is also a slope for them to walk out of the water, and clearly visible ground beneath the water, so there is no need to fear the water. The first stage where the player really needs to swim, they start the level already inside the water.

So, the two things that Mario 3 does to properly convey how the player interacts with the world are 1) the player only interacts with square shapes and 2) everything is shown in an example before the player has a chance to ask how they can interact with it.
User avatar
Drew Sebastino
Formerly Espozo
Posts: 3496
Joined: Mon Sep 15, 2014 4:35 pm
Location: Richmond, Virginia

Re: Trying to teach myself pixel art

Post by Drew Sebastino »

I'm such a freak, I just wanted to touch up the rock wall I made because it was bugging me. I tried to kind of use black to make it look like the dark side of some of the rocks, but it just looked like there were giant voids in the wall. I'm used to having more colors to work with to where the dark sides of the rocks could be a different color than the gaps in between.
Rock Wall.png
Rock Wall.png (300 Bytes) Viewed 6208 times
Actually, now I'm not to sure which one I like better... :lol:
Post Reply