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

User avatar
Marscaleb
Posts: 240
Joined: Fri Sep 11, 2015 10:39 am
Contact:

Re: Trying to teach myself pixel art

Post by Marscaleb »

Rahsennor wrote: 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.
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.
Rahsennor wrote: 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.
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.
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 »

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

This is my half-assed attempted. As you can see, I didn't get very far at all.
Waterfall.png
Waterfall.png (2.52 KiB) Viewed 6729 times
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:

Image
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 »

Espozo wrote: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.
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).
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

Espozo wrote:Grr... :evil:
:shock:
Espozo wrote:Why not just use Drag's or my rocks?
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.
Espozo wrote: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.
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.
Espozo wrote: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.
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.
Sik wrote:Reducing the contrast would help a lot.
tokumaru wrote:Spreading out the vertical details so it doesn't appear to repeat so soon should help too.
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.
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:mildly insulting.
Speaking of mildly insulting...
Rahsennor wrote:Check the thread title.
Rahsennor wrote: 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.
Yeah, I'm honestly not sure what I'm doing here.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

Espozo wrote:Speaking of mildly insulting...
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. :oops: Would you like me to delete it?
mockup-4b.gif
mockup-4b.gif (9.01 KiB) Viewed 6672 times
mockup-4c.gif
mockup-4c.gif (11.34 KiB) Viewed 6672 times
I went over the waterfall again. Am I headed in the right direction?
User avatar
DragonDePlatino
Posts: 94
Joined: Mon Oct 20, 2014 1:50 pm

Re: Trying to teach myself pixel art

Post by DragonDePlatino »

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.
Waterfall Example.gif
Waterfall Example.gif (1.15 KiB) Viewed 6672 times
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. ;)
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:Would you like me to delete it?
No. There's no point. Are you a schoolteacher though? :lol:
Rahsennor wrote:Am I headed in the right direction?
Yes. I wouldn't use as "green" of a light blue though. Try color $32.
DragonDePlatino wrote:Cycle the palette of a 16x16 tile instead! It'll look a lot nicer.
I agree.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

My waterfall pattern is actually three tiles high, but widening it is definitely a good idea.
DragonDePlatino wrote:It's a shame you passed on ASEprite because it has very nice support for cycling palettes and previewing animated tiles. ;)
Is there any way to stop it messing with my cursor configuration? It's hard to draw without a mouse. :?
Espozo wrote:Are you a schoolteacher though? :lol:
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.
User avatar
DragonDePlatino
Posts: 94
Joined: Mon Oct 20, 2014 1:50 pm

Re: Trying to teach myself pixel art

Post by DragonDePlatino »

Rahsennor wrote:Is there any way to stop it messing with my cursor configuration? It's hard to draw without a mouse. :?
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.
User avatar
Alp
Posts: 223
Joined: Mon Oct 06, 2014 12:37 am

Re: Trying to teach myself pixel art

Post by Alp »

DragonDePlatino wrote: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.
Waterfall Example.gif
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. ;)
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):
Image

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.
Rahsennor wrote: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.
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:
Image
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 »

Rahsennor wrote: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?)
Interesting. Here's the gist of the algorithm to generate an M by N pixel dither pattern:

Code: Select all

Fill a binary pattern one tile in size with random pixels at 1/8 density.
The 'tightest cluster' is the maximum of a blurred copy of the binary pattern that is still 1 in the binary pattern.
The 'largest void' is the minimum of a blurred copy of the binary pattern that is still 0 in the binary pattern.
Repeat until converged:
    Move the pixel from the tightest cluster to the largest void.
Save the pattern as Initial Binary Pattern.
Repeat until binary pattern is empty:
    Find and remove the tightest cluster.
    Add the number of remaining 1 bits to the same position in the dither pattern.
Reload the pattern from Initial Binary Pattern.
Repeat until binary pattern is full:
    Find the tightest void.
    Add the number of 1 bits to the same position in the dither pattern.
    Fill this void.
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.
NROM can still animate tiles if it's NROM with CHR RAM.
lidnariq
Posts: 11430
Joined: Sun Apr 13, 2008 11:12 am

Re: Trying to teach myself pixel art

Post by lidnariq »

tepples wrote:Interesting. Here's the gist of the algorithm to generate an M by N pixel dither pattern:
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.
User avatar
DragonDePlatino
Posts: 94
Joined: Mon Oct 20, 2014 1:50 pm

Re: Trying to teach myself pixel art

Post by DragonDePlatino »

Alp wrote: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.
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.
Rahsennor
Posts: 479
Joined: Thu Aug 20, 2015 3:09 am

Re: Trying to teach myself pixel art

Post by Rahsennor »

I think I've successfully derailed my own thread...
DragonDePlatino wrote: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.
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?
tepples wrote:NROM can still animate tiles if it's NROM with CHR RAM.
Only if you have enough free PRG.
Post Reply