Hello Everyone! My name is Brendan and I’m an artist at Mega Cat Studios. I’m currently trying to learn how to make NES graphics, and I had to look no further than our very own blog written by other artists and people at the studio!

Normally I would just blitz them with messages and annoy them until they told me what I wanted to know, but this time around I thought it would be best to just check our blog out as well as a couple of videos on YouTube that discuss some specifics on working with the limitations of the NES or other machines around that generation, as well as videos about how the NES works. So here goes! I’m scared, but in a healthy, non-anxiety inducing way! Yay!

First off, I wanted to figure out what color palette was available to me to work with when creating a potential NES background (BG) graphic for an upcoming game that we’ll be launching. Luckily, the blog has this sweet .jpeg for me to use so I don’t have to do a search or just like, guess.

NEVER JUST GUESS AND DO WHAT “LOOKS GOOD” THAT’S STUPID AND WRONG. *Ahem* Sorry about that outburst, but when working with these retro system graphics, there are some very specific specifics that you have to adhere to so that your beautiful drawings work.

The resolution on the NES works on 256x240 pixels, so that’s the size of the mockup that I’m going to create. There are several programs that you can use for NES graphics, like Gimp, Aseperite, and Photoshop (PS). Now, for me, I prefer to use PS for a couple of reasons. First off, it’s my jam and I’ve been using it for a long time. Secondly, I’m currently paying for it month to month, so jumping to another program to do what I can do in PS just doesn't seem very logical. I know that the other programs have specific things you can do, but for what I’d like to do, it will work.

Above is an image from Justice Duel, a super sweet cyborg eagle combat game some cats from Mega Cat made. I pulled it up to look at for reference before I get rolling on my own stuff. Now I already know that the NES loves to work with tiles that are 8x8 pixels, and if you pull this up in PS and throw an 8x8 grid on there, you can see that things line up quite well.

But wait. I’m making a BG... Don’t the tiles do something different there? Yes, yes they do.

They load in a 16x16 grid, so I’m going to have to change the 8x8 grid I’m currently working into a 16x16 one so that I can properly keep track of how my tiles are going to fit together on-screen! That’s just the way it is. Accept it.

I’m really eager to jump into making this BG, but I still have some questions as to how I’m supposed to *properly* do this before I draw a bunch of beautiful but useless pixel art.

The NES can only have 8 total palettes visible on the screen at the same time at any given time. Many developers over the years have come up with clever workarounds for these limitations, and some of those are discussed as well as some of the tricks that were used in this video. Check it out because it is really good at explaining some of these ideas to new like myself.

So we have a total of 8 palettes loaded on the screen but a total of four are committed to the BG and the sprites. Now we know how many total palettes we’re working with here for the BG, and knowing these restrictions and keeping them in mind will save you a TON of grief in the future. For this stage of my process, I decided to grab a few random colors from the provided NES palette to mess around with ->

You can see that I have that fabulous black everywhere, and I’m throwing the other three colors on top of it. This pipe is nothing to write home about. It’s pretty confusing to look at and you don’t get a real read on what the shapes are doing, but this is my process. I make a lot of nonsense before something good actually emerges. It’s time to do some refining...

Okay, so, after some more messing around I came up with a new green pipe thing. If you haven’t caught on to the reference yet, I really can’t help you and you should turn off your computer now. Anyway, here is the new green pipe :0

A clear and focused improvement if I do say so myself. Not a finished product by any means, but it’s getting there. Here I did a lot of copying and pasting, and when it came to the pasting part I for sure transformed them and just mirrored them. The reason I did this stuff is to get in the habit so that the tiles fit together better and I’m keeping in mind some of the limitations of the NES :)

It’s always good when working on these kinds of games to KEEP THE LIMITATIONS IN MIND. Even a lot of old hand-drawn concept sketches would do that. In Mega Man, the old drawings would come with a key with all of the colors for the programmer so that they could easily translate the sprites into the game from the drawing. As for now, however, I have to go to bed because I work very early in my day job. Cheers!

zzzzZZZzzz...

So I’m back and I’m going to continue my work from where I left off here...ah yes.

With fresh eyes, I have another look at this pipe and this is a good time to bring up “dithering”. Dithering is basically the checkerboard pattern that you’ll see in a lot of older games to create shadows, make different shades of color either darker or lighter, and also create gradients and blend colors together without having to use any more colors than what is available to you within the limitations. In the picture above, I started dithering a bit where the darkest green meets the black and I’m going to continue the pattern a bit more.

I watched a very good video by an artist who has been in the business for a really long time, and in it, he speaks to an audience at the Game Developers Conference all about working within limitations as well as techniques like dithering and color shifting. Really amazing video by a really amazing artist, Mark Ferrari.

So here I did some dithering to add one more shade of green to give the pipe some more shape without having to employ another color (which I couldn’t do anyway). I’m ready to move on to some BG elements for an upcoming game! I’m gonna attempt to apply all the junk I’ve been talking about.

In the picture below, you can now see that each 16x16 pixel tile only has one palette of 4 colors (three different colors, and then one black color, shared by all tiles in the BG).

This represents three different palettes, and from here I have to make sure I don’t start too many more palettes. Since I’m going to be making a lot of other assets, these may change so that I can have more variety in the other assets that I create. That being said, I only have one more palette that I can create and use, and since I have a lot of other ideas for assets, this pillar is most likely going to change.

Above you can see that I indeed had to change the palettes because I wanted more dynamic palettes to break up the BG and make things more interesting. I really like working this way because it’s forcing me to be a lot more creative with my color choices. At first, this kind of stuff was really intimidating, but working with them now it’s actually a lot of fun and I’m learning a lot both about NES graphics and how to be more creative artistically.

So with all these things in mind, I continued drawing and drawing, trial and error, and finally came up with some assets and put them together here. The tiles for the dirt pathway are the same as those for the sky, but the palette just swapped to the blue one but ends up looking like a sky.

Not sure yet if this is the final mock-up, but I’m pretty happy with it. I tried to mesh a subtle cyberpunk influence with some traditional Japanese fixtures and architecture. I haven’t added the sprite to this yet to show the player and some possible enemies yet, so I’m going to do that now and see how it looks.

Real quick tho—notice how much black there is? That is the common color in all of the palettes held in the BG. That’s the first color in all of the palettes!

Below we have the “final” product, but of course, it’s just a mock-up and it’s subject to further scrutiny. I’d already shown it to some fellow MCs and they gave me a few pointers to make it better to play in and also fit in the specs which I will share here now!

First off, I had to count my unique tiles to make sure it fits that spec. After I showed it to Andy, he told me that at first glance it looked like it fit all the specs, however, my tile count might be a little high. So I popped it into Pyxel Edit (4.4) and sure enough I had 265 unique tiles on there. It was an easy fix tho for me. Lemme tell ya what I did:

 

 

 

 

 

 

 

I made the “Robo-bonsai” (above left) as just an extra little decoration for the BG, so whether it’s there or not doesn’t matter. It’s made up of 23 unique 8x8 tiles, so I knew if I took it out it would immediately drop the total down a bunch, so I replaced it with some tiles that are already in the image in other places (above right)

So that’s solved, and it was pretty easy to fix. I may need to alter the BG further to compensate for the HUD as well, so further editing may be necessary because the HUD is likely part of the BG and it will have its own unique tiles that will be part of the count for whatever BG the player is on.

You can kind of think of it as a background on a stage for a play. The sets will be minimal and the actors get a lot of use out of them. Some plays use only one set, and that set is kind of like the HUD. It doesn’t change even though everything around it does.

I also received some feedback about some of my color choices for the BG that might make some things hard to read or might make it hard for the player to look at the screen because the colors are a bit too bright. Addressing the first issue, the floor in the foreground where the player is going to be moving around the most is a little bright, so staring at it while you play is going to be a pain so let’s change that first. Here’s the before (left) and the change (right).

Much better/easier to look at. However, when you throw the sprite on there the player gets a little obscured by the black lines on the floor, so I’m just gonna throw some dark blue on there.

Sweet things are looking a lot better, and the mock-up is looking like something I would enjoy playing. That’s the point you want to get to. You never want to submit something you’re not proud of or wouldn’t want to play. That’s why this process is so important and taking feedback is great. You also want to take advice and spend the time on whatever you’re working on to both improve as an artist/programmer. This stuff may seem like a pain at the moment, but down the road, you’re going to be much happier you did it.

Above is the final mock-up with the changes, but minus the HUD. It’s mostly a demonstration of what I’ve learned, and it’s serving that purpose. If I wanted to take it further and implement it into a game, I can make the changes needed.

So there you go! I just learned how to make some NES graphics, and it was accomplished by following the advice of the blog, by watching a couple of very educational videos, and by doing some research on my own (mostly searching for very specific things). I won’t say it’s easy to make these kinds of graphics, but I will say that it was a lot of fun and things moved along pretty smoothly. Patience and persistence will definitely pay off!

THE MORE YOU KNOW

 

Thanks for checking us out! Want to find out more about how to create graphics for other retro consoles? Check out our guide on Sega Genesis/Mega Drive graphics or the SNES graphics guide! 

If you're interested in more guidance for art on the NES, we have an in-depth look at Creating NES Graphics. and a cool trick for making huge boss sprites here.