Trying to teach myself pixel art

Any suggestions?

Looks pretty good!

The dirty is a little boring with nothing but dots. It'd probably benefit from a less realistic design, like the green platforms, which have a cute wavy pattern.

The green platforms and the bushes could have more volume, seeing as there's hardly any shading on them.

The steps on the ladder look a little weird lit from below, considering that the light source in an open area like this would be the sun. Light generally comes from above in pixel art.

The character looks pretty cute, but since it uses 4 colors, you're gonna need overlays or two similar palettes (black, white and green + black, white and blue) to be able to draw it like that.

It looks like the character is already using two palettes, green for the top half and blue for the bottom half, so it'd work just fine on the NES.

The ground looks great, the green platforms should be shaded a little more because they look too flat right now. I'd argue that the bushes look fine how they are, because they're background scenery and don't need to be as emphasized as the obstacles.

From a theming point of view, the ladder is ok, but doesn't seem to fit as well as some other climbable things would. If you had brick platforms and walls or other manmade things along with what you have now, then the ladder would be fine there, but since everything else is organic, maybe try having vines instead?

Everything else looks nice.

Looks like an alteration of Super Mario 2, a little too close for comfort.

It's a mock-up, so there's nothing concrete about palettes or sprites in this picture, so I pointed out that the implementation would need 2 palettes, like you said. It may sound silly, but many starter NES artists take the "4 colors" rule very literally, ignoring the fact that sprites need transparency and that the background color is shared among all palettes.

Thanks for all the feedback!

The ground is almost identical to the start of Gimmick level 4. Definitely too close for comfort. I tried several times to make it more cartoony, but it ended up looking awful every time. I'll be giving it another shot for sure.

The ladder was based on free art by surt, which is in fact lit the same way. It looks like the front of a flat step to me. But Drag is right, it doesn't really fit the theme in the first place. I wanted to avoid vines, but I can't think of anything else I could use instead. I do plan on adding more man-made structures eventually.

The bushes, platforms and clouds are entirely my fault. I kind of like the bushes, personally, but every time I look at the platforms I see the watermelon block from Minecraft. I don't even know what they're supposed to be, I just needed a one-way platform that's visually distinct from the ground.


It's the latter. I spent four days getting the head and body neatly split into different sprites, just so I could get four colors with only two sprites per scanline. As a bonus, I can also shear the sprite horizontally to make her lean forward while running, without spending any extra tiles.

The colors shown here are pretty much random - the idea was to pick palettes that could be shared with enemies. Except I don't have any ideas for enemies yet.

I'm a programmer, not an artist, by the way. The technical restrictions are what got me interested in the first place.


That's actually the look I was aiming for, within reason. That said, I didn't use any SMB2 art for reference, so I guess my subconscious knows something I don't.

I replaced the copycat tiles, reduced the tile count (to around 40 unique 8x8 tiles), eased up on the hair dye and added some water.

I also managed to make a GIF of the runcycle I'm using in my prototype. It uses surprisingly few tiles, but still probably too many for an NROM game.

The new scene looks much better on all counts.

I forgot, consistency is pretty important too. In your new mockup, the ground more closely matches the style of the other things in the scene, so that was a good change to make.

Just to throw another suggestion out there, it doesn't have to be a SMB2 style vine, it can be a really thick beanstalk, or it can be a tree that happens to grow into a ladder-like shape, or naturally grows ladder handles or something. That'd be pretty cartoony too. You can also just leave it as a plain ladder, I have no complaint with that. Regardless, it does look better with the new shading.

I think the running animation's fine. You can give the player character more frames of animation or more detail than the rest of the sprites, because that's what the player's going to be seeing the most of in your game. And even if you need some more tiles, that running animation can be cut down without losing the idea too much.

If the hands and foot are individual tiles, I think you could do that with just 6 tiles in CHR. It'd be 7 tiles in the metasprite, i.e. 2x2 for the main body, 1 for the foot, 2 for the hands (one behind, one in front). The big disadvantage though is you'd be eating up 4 sprites on the scanlines where the hands appear.

Instead of overlaid hands, though, it looks like you only have 3 positions, so that'd really just be 2 CHR tiles for the top half, 6 tiles for the bottom half (3 hand positions, 2 tiles wide), and then 1 more tile for the foot? 9 total? (The foot is fine on its own, since it appears only below the rest of the body it doesn't have to share a scanline with any of those sprites).

I think you've got plenty of room there anyway. Just look at how many tiles Mario uses in SMB. You're flyin'.

The head is ten pixels tall thanks to the ribbon, so it takes 4 sprites. There's only three versions, though, so it's only 12 tiles.

The body is only eight pixels tall, so I can't seperate the feet without overlapping more than two sprites on a scanline somewhere. I'll have to see if I can stretch it up to ten pixels, so I can shift the feet onto their own tiles. But even then, the bottom of the dress overlaps it, so I can't just use one tile and slide it around... lots more tweaking needed. Or I could just live with it eating up 24 tiles.

I also just coded ladders into my SDL2 prototype, so now I have an entire climbing animation to draw.

A couple notes that I keep in mind whenever I am pixeling or revising a piece:

1. Reduce/remove one pixel noise (which you already did a lot from your first to second iteration).

2. Experiment with "unorthodox" colors for objects. For example, non-blue sky, non-green grass, etc. This can really give character and depth.

3. Remove banding. For example, the grass tiles. (http://pixeljoint.com/forum/forum_posts ... 322#139322)

Overall, I like it. I think you should revisit the shading for the grass, bushes, and clouds. Either add more to create interesting detail or ditch the extra shading hues, use black instead, and then grab a warmer tone for fun details.

Also, I wouldn't worry about how similar your art is to existing stuff especially if that was your study and you are learning. Lastly, I recommend daily pixel art challenges like Pixel Dailies on twitter. You can see some of my attempts on twitter too https://twitter.com/cacciatc

It's roughly the same process you learn when doing conventional illustration or painting: start with a loose line drawing, fill in shapes of color, add detail. Derek gives a great outline of the overall process.
Going deeper, there are much more specific challenges in pixel art like isometric perspectives and sprite animation. This site has links to a bunch of different tutorials that cover topics like these, You'll discover all sorts of weird quirks to doing pixel art. Lines won't quite connect the way you hope, colors will have unexpected effects on each other. The great pixel artists have solutions for these problems, especially in the older games where they were working in very tight graphical constraints.

[Off-topic external link removed --MOD]

Thank you for all the suggestions, and the link, even if most of it went right over my head.

Comparing pixel art to "conventional illustration" is rather meaningless to me, unfortunately. As I said before, I'm a programmer, not an artist. I'm only trying my hand at pixel art because it's a small enough search space to brute-force.

Since I'm here, I may as well post this.
Making GIFs in the GIMP is an exercise in masochism, so no animated walkcycle this time. Is there a better free-software tool for doing this stuff?

I use a licensed version of PyxelEdit (http://pyxeledit.com/) which also has a free version, but it is older and not as feature rich. JPixel (https://emad.itch.io/jpixel) can be downloaded for free; although, I haven't tried it yet.

I'm a big fan of Aseprite, which is an animation tool designed for pixel stuff.

It's open source, and sort of free. Old versions are available for free on its website, but the author asks for $15 for the latest version binaries. (It's open source though, so you could build them yourself, or get these binaries elsewhere for free if you want.) I used it a lot, so I thought the $15 was well worth it, though.


Just in case you don't know about it, in GIMP there is "Filters > Animation > Playback" which opens a very rudimentary animation preview. It's not much, but it's a big step above trying to preview the motion by turning on and off layers.

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.

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.

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.

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.


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. All I can tell is that background objects all seem to be rounded and interactive objects all seem to be angular.


Like this?
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.


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.


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.


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?


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...

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.


Why does everything need to be so formulaic?


You said it, not me.


So would it be like this except with water at the bottom?


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.


What are you shooting for in terms of the number of tiles? Good lucking rocks become very easy the more tiles you have.

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 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?

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.

I was just thinking of that.
Better?


Marscaleb said that, not me. You put my name in your quote tags.


I was thinking something along the lines of this:Although given the NES palette limitations, the rocks would probably have to look more like this:(Excuse me posting crops of someone else's artwork; if that's not kosher let me know and I'll take them out.)


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.


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.


You could hide an easter egg that way.

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.

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.

Oops... Yeah, that was an accident.


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.

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:
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.

This is my take on your rock wall:


Honestly, for the side of a waterfall, these rocks look way too small, but using larger rocks would use more tiles.

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.



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.

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.


Actually, now I'm not to sure which one I like better...

They're both pretty good, it just comes down to which style you prefer.

The rocks are in front of the waterfall. It was the best example of what I meant by "rocky waterfall tileset" that I had on hand, sorry.


It's to stop me getting carried away. If it won't fit, needs a scanline interrupt or involves 2 MiB of bankswitched PRG-RAM then it gets the chop. I've found I need to set hard limits on these things or I'll never get any actual work done.


Another excellent explanation; thank you very much. Have you considered writing a tutorial (or have you written one already)?


I want to add more background elements - many more background elements - but I'm having a hard time learning to draw them all. Hopefully the bushes won't be so out-of-place when I have trees, mountains and buildings all over the place.


So visually I was on the right track: simple blocky shapes are interactive, complex curvy shapes are in the background. That's still not quite perfect though; look at the airships. It's a lot more complex than "black outline means solid". I think the player can be trusted to infer that my two bushes are purely decorative, provided they're introduced in the right way.

As far as teaching the player through gameplay goes, I read an entire essay on the design of the first two levels of SMB3 alone. They covered pretty much the same things you just did, plus stuff like animation cues and the sound the P-meter makes. If only modern games were so subtle...


I could arrange for a three-shade palette. I was hoping to try some sprite-based parallax tricks, which would require the sky as the background color, but that might be a bit much for a first try. And I could change the background color anyway if the two areas didn't share tiles to begin with, which might actually be practical for a cave tileset.

On a solid waterfall background?


So how I'm imagining it is that there's a body of water between the waterfall and the foreground? (and you could possibly draw water in front of the foreground) The platforms really should be made of much larger rocks then, even if it takes up more tiles. I respect your opinion on using NROM, but I don't agree. However, this isn't my project.


The main problem is how many colors there are total, but I suppose you could use brown as the shade between dark gray and black.

No, in a different area. But if one tile uses the background color as the sky and another uses it for black, they can't appear together. EIther the three-shade rock palette must only appear in areas with no sky, or a seperate set of sky tiles must be created, which could be numerous if rounded corners and slopes are involved. If I want to fit in NROM, I need to recycle tiles, doubly so if I want to budget extra tiles for extra-nice rocks.


Yes. The gameplay layer is in and over a body of water, be it a lake, river or the sea, into which the waterfall flows. There are rock platforms jutting out of the water or 'hanging' off the background, and possibly wooden bridges between them.

I'll see if I can post a mockup of the layout in another day or two, with flat gray for rocks if need be.

You're welcome. I haven't written any tutorials because I'm not a professional and usually just figure stuff out as I go. Pixel art is almost identical to traditional art, and lots of techniques from there (such as painting, perspective, lighting, composition, palette selection) carry over to pixel art. When starting out, pixel art is often treated like sketching stuff on paper with a pencil, and then coloring it in with a marker later, and although that's a good technique, it's not the only technique available to you. The rock example is actually more like a painterly way to do rocks, rather than a sketch-and-color way.For another example, this tree was done similarly to the rocks, it started with a tree-shaped blob of the darkest green color, and on top of that went the medium green, drawn like brush strokes with the center of the tree mostly filled in, and then the lightest green went last using the same brush stroke idea as the medium green. In between each step was pixel-tweaking to break up large regions of color, refine the shape of the branches, etc. Grass can be done the exact same way, just all the lines point upwards. This is just one of thousands of ways you can draw this.

Pixel tweaking is really the only thing unique to pixel art which distinguishes it from more traditional art. All stardard art lessons apply to pixel art otherwise, including how to draw trees and rocks.

This was the tree that I made and then was tweaked by darryl.revok to use less tiles:


It probably still takes up way too many tiles though. Just comparing it to Drag's, I have to say I think mine is to bright for a black background. I could always fix it up if you want to actually use it. As for trying to learn to draw, I don't know how you do it, you just kind of do it. I don't really have any method to my drawing, which could be why it takes forever.

Yeah, like Drag said, there's a million and one stylized and tile-friendly ways to make trees. Surt's OGA Gallery has a ton of examples. You could even use them in your game since they're creative commons.

I just always feel like people seem to think there's some sort of formula to drawing. There may be, but I couldn't tell you it because I don't know it, or at least not consciously.

The games I generally look at to try and get an idea of how to draw something from are usually Metal Slug. I'm not super enthusiastic about the "cartoonier" looking things in the game, but the other stuff looks awesome:



Of course, another good looking game is GunForce 2. It might not be quite as clean looking, but I like the art direction better (especially the sprites. I don't think a lot of the sprites in Metal Slug really match the background artistically, as they're much more ridiculous looking and have greater outlines. I don't know if this was done to make them stand out or what though.)



One thing I really want to see though is an NES game that has highly varying backgrounds, (kind of more like a picture than what you'd expect from a tiled system) like Metal Slug. This isn't really suited for something like a platformer though that has a ton of levels.

You sound like David Crane. Try Haunted: Halloween '85.

I'm aware of the fact that the NES uses tiled graphics. I'm just saying that you could make artwork that varied looking if you used something like the MMC5. The largest problem is palette limitations (even if you were using the MMC5 with 8x8 attributes).


From what I've seen of the game, it definitely looks better than most.

It's funny you'd mention that, Espozo, because the Pixelation forums recently began a Commercial Critique of Castlevania. And so far the results have been stunning. Since Castlevania had 16x16 attributes, it seems a lot of artists have been keeping black the dominant color to "break the grid". The topic might be worth a read since you seem to like that aesthetic.

So everyone keeps telling me. In fact, every tutorial on pixel art I've found so far assumes the reader is already an artist, which makes them more or less useless to me. The fact that you're not a professional is a good thing, in my book - you explain things in terms anyone can understand.

Back on topic, my first attempt at rocks and waterfalls came out pretty awful. The waterfall is eyeblasting, the rocks are way too regular and I can't shade worth crap. Have at it.

I also threw this together.
I'm not happy with that mountain, but I can't figure out how to make it look better without using more tiles. I should probably just go for normal mountains.

The foliage could use some shading, too.

Grr...


Why not just use Drag's or my rocks?

Anyway, I was bored, so I made some water that's more abstract. This isn't useful for your game, but I feel like making a sort of mockup to see how more abstract graphics would look on the NES (in that if the MMC5 was used correctly, although I'll try and avoid 8x8 color attributes unless I absolutely have to.)


How much fun you'd have trying to animate that...

Reducing the contrast would help a lot.

Spreading out the vertical details so it doesn't appear to repeat so soon should help too.

Well when you have them, try the non-black outlines again. See if it makes a difference.

It is easy to infer that the bushes cannot be stood on when there is little more than just bushes. The problem becomes when you have a lot going on in the scene. It is just generally easier to set your standards early and build within them, than to take a complex scene and try to find ways to convey things properly. When your game grows and you have more going on in the background, identifying something by context becomes harder.

I personally am a fan of what Mega Man games do; they keep the palettes separate between solid objects and background. But that would not work in the scene you drew because you have one-way platforms; the hills that are both background and solid. Unless you had more colors to work with, it is hard to use palettes to separate things when you have that kind of level design. Four sets of three colors is a harsh master.



For my opinion, I think you ought to make the bushes look more organic and rough if you are going to adhere to a rule of using shape to indicate what is solid and what is not. That straight sides rub against the rule a bit. Not a lot, but it might look better with rough sides anyway.

The airships (1) never appear until far in the game when the player already has a strong grasp on things, (2) still retain solid tops and only have curved surfaces in the areas where the player isn't *really* supposed to go, and (3) are used in levels completely devoid of background.

I heard someone once say "You can only break the rules when you understand them completely." He was referring to writing (or maybe it was art; it was at a panel at some convention) but it applies to a lot of things. And understanding the rules also means understanding why they are there. You need to take that into context when you try to bend around an established standard.
For example, the palette rule I mentioned Mega Man uses. In Mega Man 6's Tomahawk Man stage, they break it; they have a fence that uses the same palette as the ground. BUT the portions of those colors are so vastly different than how they are used in the ground that at first glance it almost looks like a different palette.
That's the same principal with how Mario 3 broke their own rules. It was done in such a manner that they still covered their butts and adhered to the founding principles of their rules.
Establish your rules, but don't break them until you have them completely covered.

Really, I'm serious though and I'm sure most people won't want to hear it, but I don't really try and do anything like "outline objects in the foreground but not in the background" or especially smooth objects vs rough objects, because that's highly limiting. The player should be smart enough to determine what's the background vs what's the foreground based on what makes sense, and the background is often a little darker or smaller looking and stuff like that.

I was actually trying to draw a waterfall, but I felt it was too difficult and I got bored and realized the only reason I was doing it in the first place is to get out of debugging my program.

This is my half-assed attempted. As you can see, I didn't get very far at all.


Honestly though, I think many people's biggest problem (including yours, Rahsennor,) is that you try and make everything way to "neat", like putting dots in triangles. Half of the time, like with the tree I posted earlier and part of the waterfall I made, I just kind of randomly place down pixels. For the waterfall, (the part that I completed anyway) I literally just got a spray can spray stamp and changed the sizes and put it all over and then tweaked it afterword (like the bottom of the waterfall, I only did the top left side where I made it look more like mist). All I can say is, use your brain to try and make stuff look good, and look at pictures of the real object you're trying to draw and also look at artwork from games you think look good for ideas of how to draw what you're trying to draw.

As I said about you trying to draw everything so ornately, I'd suggest drawing something more "mechanical". In my opinion, drawing something like a waterfall is one of the hardest things you can attempt, but that's also because I'm doing it a lot differently than you. I would suggest making your waterfall a lot less "neat" in not using perfect patterns and also not use way to high contrast but making it very bright.

Here's a very good picture in looking how to draw a waterfall:

That really depends on the style you're going for. Making things look like plastic is a perfectly valid aesthetical decision when it comes to pixel art, there's no need to model things after real world stuff all the time. You do need to convey the right ideas to the players though, to make it obvious what is solid and what isn't, what's harmful and what isn't, and so on.

One thing you can do to improve the graphics is to be less stingy with the tiles. Make repetitive patterns less repetitive, create some variations of textures that you can apply randomly to otherwise boring areas (like missing rocks, mossy spots, cracks on a wall, differently colored bricks, stuff like that).

Because it doesn't help me learn how to draw rocks. Check the thread title.

Your rocks are very good, by the way. If I was looking for an artist, instead of looking to become an artist, you'd be pretty high on my list.


It may surprise you to learn that making things look random is hard. There are whole algorithms devoted to making things look more random by making them less random. (Scroll down to figure 4. The pattern on the left is actually random, the pattern on the right is not. Which looks better?) My triangle pattern is one such algorithm, inspired by the results of whatever algorithm Nintendo applied to get the green hills in SMB3.


If I already knew how to "use my brain to try and make stuff look good", would I be asking all these dumb questions? My brain isn't wired up for drawing. Yours probably isn't wired up for teaching schoolchildren. We all have activities we're good at, and have to study the ones we aren't. Telling me to "use my brain" is unhelpful and mildly insulting.

The rest of your post is all good advice. I will point out that I'm shooting for an intentionally cartoony look, which you seem to be taking great pains to avoid, so if I seem to be ignoring you it's not because I'm not listening.


Noted. I arrived at that particular pattern by studying other NES waterfalls and attempting to make them work with palette cycling, so I could animate the result on NROM. That may have been a bad idea to begin with.

Speaking of mildly insulting...



Yeah, I'm honestly not sure what I'm doing here.

I apologize for my tone in that post; you touched on a personal sore spot and I overracted. I'm also not particularly good at expressing myself, and tend to come off as blunt and rude to pretty much everyone.

So. Yeah. Sorry. Would you like me to delete it?

I went over the waterfall again. Am I headed in the right direction?

Your new waterfall looks better but I think you could improve it even more. The problem with your waterfall is that you're looping the same 8x8 tile over and over. I understand the need for stylization but that feels a bit extreme. Cycle the palette of a 16x16 tile instead! It'll look a lot nicer.



Obviously, this is just one of many styles of waterfalls you can draw. The basic idea is to draw a series of wavy horizontal stripes then add in some random details like vertical lines, dithering or noise. Alternatively, you can make some zig-zag horizontal stripes like you already have. It's a shame you passed on ASEprite because it has very nice support for cycling palettes and previewing animated tiles.

No. There's no point. Are you a schoolteacher though?


Yes. I wouldn't use as "green" of a light blue though. Try color $32.


I agree.

My waterfall pattern is actually three tiles high, but widening it is definitely a good idea.


Is there any way to stop it messing with my cursor configuration? It's hard to draw without a mouse.


Technically no; I'm a martial arts instructor. But the classes are invariably dominated by grade schoolers, and I have taught at actual schools on a few occasions.

Hmm...I'm afraid not. From my experience with the Windows version, you have to use the cursor the program provides. I don't mind it anymore but I remember struggling with it a bit at first.

However, if you really want to change it, you can go to aseprite-0.9.5-win32\data\skins\default and edit sheet.png to change the cursor. The program's pretty customizable in that respect, even moreso in the newer versions.

ASEprite has an AWFUL interface, so I don't blame him.
The pixel art program I still use today, was made 17 years ago, and sports many of the same features, minus onion-skinning, which is useless, so long as the toolset is sufficient enough.

A screenshot of my average work-space (cancelled art, included):


For the waterfall-cycling, a similar effect can be had, by checker-boarding 2 separate 8x8 tiles.
For NROM it can be worth it, if you're trying to save the odd tiles for something fancier.



That's a pretty good start on a mountain backdrop. You can manage some fairly nice mountains with few tiles, with some clever tile-working (I recommend drawing at the 8x8 level). Example:

Interesting. Here's the gist of the algorithm to generate an M by N pixel dither pattern:



NROM can still animate tiles if it's NROM with CHR RAM.

The Libcaca authors have a nice writeup, too: http://caca.zoy.org/study/part2.html

The associated python they wrote to generate all the examples generates the dither matrices by counting the number of neighbors in a 7x7 neighborhood ... which is the same as using a 7x7 all-1s blur kernel.

Eh, different strokes for different folks. As different as our programs are, the one thing they have in common is that each of us has been using them for a long time. In the end, how long you've used a program is more important than the toolset.

So the bottom line is, Espozo, there are a lot of options out there but as long as you're using something that's meant for pixel art and supports animation (Graphics Gale, Pro Motion, Character Maker 1999, ASEprite) it will suffice.

I think I've successfully derailed my own thread...


I don't care what it looks like, I want to stop it rocketing around like a Wiimote at thirty paces. Which it continues to do after I close ASEprite and reboot. Does the Windows version do that too?


Only if you have enough free PRG.

I have no earthly idea what you're talking about. Sounds like an issue with mouse sensitivity to me. Try setting ScreenScale to 1 in aseprite.ini and if that doesn't work, I'd give Espozo's tool a shot. If that's not to your liking, the free version of Pro Motion running in Wine sounds like your next best bet. From what I understand, it was used in the development of Shovel Knight so it's fitting for NES graphics.

I know the mouse stuff you're talking about. I don't have a mac myself, but it was marked fixed by the developer a while ago. You can try the free demo (saving disabled one, not the older version one) to see if you get the same problem. As well, if it's the mouse image you don't like, you can have the program use your native mouse cursor as an experimental option. (I cannot confirm if that option works well on mac. I do know it has some issues on linux still.)

Edit: Actually it may be ongoing: https://github.com/aseprite/aseprite/issues/926 If it's that. This is the issue I was thinking of that has been fixed. Even though... it's not marked fixed. I remember reading a commit for it.

I actually really, really like Aseprite and its interface, and I've tried most things out there. Even more obscure stuff like Moai. I'm always on the look out for new software, but Aseprite's my favorite of everything I've used. (And it's a long list.)