Graphic design of NES games

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

Moderator: Moderators

UncleSporky
Posts: 388
Joined: Sat Nov 17, 2007 8:44 pm

Graphic design of NES games

Post by UncleSporky »

I thought I would make a thread where I can look at different games and examine their graphics in some detail, maybe see what makes them tick, and why they might be appealing or not. I don't know how often I'll be doing this, or whether I'll be doing it more than once, but I thought it might be interesting/helpful.

Tonight I am going to look at Castlevania 3, because I found a page full of handy screenshots, and while they may not be pixel/color perfect they highlight the game's graphic design very well.

I always thought that Castlevania as a series on the NES looked very "busy," graphically crowded. They tried to cram in as much detail as possible with very limited graphical capabilities, and didn't always succeed.

Image

In the above screenshot you can quickly see some of their methods: for one, they generally highlighted walkable areas using blocks with a lot of contrast to everything else. This way they could fill in the rest of the background with whatever detail they wanted, in contrast to many platformers, where the walkable area connects to the ground and extends downwards. Castlevania's blocks are technically hovering in the air, but the background can show them as part of anything they want. It's as if there are foreground and background layers of architecture, as desired by the artist.

They also had no qualms about using tiles in the "wrong" way - that is, using an incomplete part of a graphic in order to give an overall affect they desired. Notice in the screen above that the left part of the arch only fully completes right behind Trevor (and in one other spot). Everywhere else, the arch just sort of ends next to the wall. This sort of thing always looked sloppy to me, but it is effective in making smaller arches and/or simplifying the necessary metagraphics.

Image

Similarly, notice how the higher bridge arches just end and don't look braced up too well, but it provides a great negative shape overall. Again, the bright salmon blocks clash with the rest of the scene, but give players necessary information about what is solid.

Image

The stained glass windows are pretty nice, although the top half looks rather messy. The tiny stained glass windows however are really ugly (in my opinion). They're just small parts of the larger ones, which is logical for saving space but they have clearly been chopped up.

You will also notice the theme of using a black background color, which of course many NES games use for outlines and shadow. It may seem an obvious choice, but it's important to keep in mind other options - this is just one way to do it.

Image

Hm, I guess they didn't always use blocks to show ground. Anyway, I really dislike this rocky wall/stalagtites. While it portrays a natural sort of chaos you might expect in a cavern, it's obviously made up of many small blocks with straight edges. Castlevania attempts too much realism without the capability to do it effectively.

Though to be honest, I don't notice a lot of this while playing. It's recognizable as what they intended it to be, and only really hard to look at on close examination.

Image

Speaking of close examination, this is the sort of scene I don't fully appreciate unless I'm looking at it like this. The pillars are quite striking and nicely aged, and the colors are well-chosen. I really like the water. I don't think I ever noticed the temples in the background before, they're easy to miss when it doesn't scroll on an independent layer and monsters are attacking you.

Image

It's interesting how different NES games do the "waterfall in the background" graphic. Notice how they used a light blue in one of the background palettes to make the water appear to reflect off the pillars.

And look at how the pillars fade out under the platforms to show a deep shadow. It's not hard to use a technique like this in your own graphics to save on detailed tiles and give a scene more depth.

Image

This scene is very busy (and a little too complicated for a clock tower) but it looks very impressive animated in the game. It's well worth seeing how it's put together by watching the PPU data. It's the second level, top path, I believe.

Also notice how the large gear is highlighted using a lot of smaller bits, that even make it seem to have a gritty metal texture.

Image

I always liked the design on the name entry screen. Good choice of colors, nice effect with the partly ruined brick wall and the vines. And it doesn't look too badly chopped up due to the tiles, either.

Image

The haunted ship is nicely aged, though not too colorful. I was never a big fan of this part.

Image

The remake of CV1's first level. Look at that first curtain - they just repeated the top part twice! And yet somehow, it doesn't look that terrible, if I squint I can buy that as folds in cloth...sort of. And the area of missing paint is repeated in the same way. It breaks the monotony of seeming the same pattern every time, but still sticks out to me as repeated data.

Image

The intro has some nice use of graphics. You can see repeated data but none of it breaks against other graphics, everything fits. The highlighted castle looks especially cool, reminds me of a comic book.

Image

One of the first things you see when starting a game. I still think this is one of the better images you will see in a NES game. Composed like a work of art, balanced, and well-colored. From the shadows of the ruins, to the cross, to the moss and vines, it's a striking scene. If you look at it closely you can see how it was crafted carefully to also use repetition to save space as well. I don't know if I could do something like this, I would sooner go the easy stylized route of something like Mario 3 than attempt this. :)

Image

The moss is a bit too glowy but I like the dead tree graphics a lot. The mud doesn't fit well though, it reminds me of earlier generation games. The mountains look good until that strange split point where again we see graphics have been chopped.

Image

I always liked the look of the woods. I haven't said anything about the character/enemy graphics, but those owls are really well designed. The blue and red go together well to show both wood and darkness lit by the moon. Shadows are put to good use on the vines that just fade into darkness. The ground is a nice change from bright cubes. But again we see some straight edges up in the branches, and the green at the top sticks out a bit too much for me.

Well that was really long, I don't expect a detailed reply or anything, I just felt like looking over CV3 for fun. I think it would be quite difficult to design a game with graphics like this. It uses a complicated mapper and a lot of ROM to store all this data, and even then they had to cut a lot of corners. As I said, they decided to give us more of an overall impression of objects, even if it meant some graphics tiled strangely at times. Lots of dark images, lots of scratches and crumbling stone and aging. Hard to pull off on the NES, but they mostly succeeded.
MatthewCallis
Posts: 82
Joined: Sat Sep 22, 2007 8:32 am
Location: Seattle, WA
Contact:

Post by MatthewCallis »

That's a really in-depth look, and a fun read.

I always found the whole Mega Man series, particularly Mega Man 5 had a very nice balance of not being too plain like the early Famicom games and not too busy like some side scrollers.
User avatar
Dwedit
Posts: 4922
Joined: Fri Nov 19, 2004 7:35 pm
Contact:

Post by Dwedit »

It seems like you'd really need to turn on the NTSC filter to see what they would really look like.
Here come the fortune cookies! Here come the fortune cookies! They're wearing paper hats!
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Post by Bregalad »

Wow this is a very interesting topic. I love CV3, and I admire some of it's graphics.

Like you said, they obviously put a lot of trought in the backgrounds, and designed it to be as if there was multiple layers. This is especially seeable when there is the acid rain that melts the blocks and that background show up behind the melting blocks.
The trick to highlight the solid platforms should be remembered off. I remember that in some games (can't remember exactly) it wasn't clear which tiles are background, and which are solid.

I've also noted those weird patterns, but surprisingly most of the time it looks good. The incomplete arches looks ok, it gives a natural randomness to it. Same goes with all the other stuff you mentionned, I also like the random mud in the cave you said it looks terrible, and I find it looks fine.

The only thing that looks real bad is this "highlight" on the clockwork wheels. It looks like a cloud or something like that, not like a highlight.

I also love the name entry screen. With the statues, the vines, and the gothic font I was blown away the first time I've seen it. Now I'm used to see it very regularly :wink:

EDIT : One last thing, have you noted how some of the sprites looks really lame as compared with the BG ? More specifically Trevor looks really lame - he's a barely affected Simon sprite from CV1. Sypha looks terrible too - I think Grant looks better.

I wanted to say that, in first level, right after the crurch, there is somewhere in the background there is a block that looks really ugly - they should have selected the wrong palette for it or something.
Also note how there is ofther either attribute clashes or black blocks arround the stairs :)
Last edited by Bregalad on Fri Jan 29, 2010 2:34 am, edited 1 time in total.
Useless, lumbering half-wits don't scare us.
User avatar
miau
Posts: 188
Joined: Mon Nov 06, 2006 9:34 am
Location: Potsdam, Germany
Contact:

Post by miau »

Nice!
Your review opened my eyes for details I've never noticed before. I love the use of the blue highlight in the waterfall scene.
Mind if others (me) post their own graphics reviews here as well? Can't promise anything, but I'd like to take apart Gimmick! some time.
Dwedit wrote:It seems like you'd really need to turn on the NTSC filter to
see what they would really look like.
I agree. I think it'd be cool if each scene had two screenshots: one with NTSC filter enabled and one without it. It'd be interesting to see what the filter does to the graphics.
UncleSporky
Posts: 388
Joined: Sat Nov 17, 2007 8:44 pm

Post by UncleSporky »

miau wrote:Nice!
Your review opened my eyes for details I've never noticed before. I love the use of the blue highlight in the waterfall scene.
Mind if others (me) post their own graphics reviews here as well? Can't promise anything, but I'd like to take apart Gimmick! some time.
Of course, that would be fine. :) I like to see the styles of different games which I may have not played or looked at closely. Partly analysis for personal use, and partly just admiration of what they accomplished.
Dwedit wrote:It seems like you'd really need to turn on the NTSC filter to
see what they would really look like.
I agree. I think it'd be cool if each scene had two screenshots: one with NTSC filter enabled and one without it. It'd be interesting to see what the filter does to the graphics.
I suppose so. There are a couple reasons why I might not: first, I am lazy, and don't want to play through an entire game when there are hundreds of screens available online and complete maps found here. (If there is a standalone NTSC filter that applies it to any picture, that might work.)

Second, it can be advantageous to be able to copy a picture into an editor and count out the pixels by hand to see how their graphics fit together.

Third, my NTSC Nestopia screenshots come out like this:

Image

Although I can correct them in Photoshop, but I'm not sure if it looks quite like it should.

Image
Bregalad wrote:EDIT : One last thing, have you noted how some of the sprites looks really lame as compared with the BG ? More specifically Trevor looks really lame - he's a barely affected Simon sprite from CV1. Sypha looks terrible too - I think Grant looks better.
I agree, they don't always look that good. Who stands like Trevor does, anyway?

Sypha looks ok to me, since she is supposed to be a ghostly mage. I never liked Grant's face, his nose sticks out too much. In fact it seems like they had different people working on the sprites, some enemies have no outlines (zombies) and others do (bats).
I wanted to say that, in first level, right after the crurch, there is somewhere in the background there is a block that looks really ugly - they should have selected the wrong palette for it or something.
Also note how there is ofther either attribute clashes or black blocks arround the stairs :)
Image

Yeah, it looks kind of messed up. The whole rest of the area is viny and grey, and there's just this weird yellow part that doesn't seem to fit.

Another thing I didn't notice earlier, these houses are really cool:

Image

Lots of solid black is used to save on tiles but the diagonal wall still makes it look like a three dimensional building.

The highlights on the roofs and walls are done well too, the scene has a well defined light source at the top left. A lot of games don't try to portray this, and just lighten things that pop out and darken things in the background.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Post by Bregalad »

Well, I've noticed that sometimes it makes things easier to have light at topleft and shadow at bottomright - but for other objects (sprites) it's easier to have a "front light" where you light things that are supposed to be "close" and dark what is supposed to be "far away".

I'll just do light effects that are the easier to come with - and won't worry about the whole scene. Since the game is in 2D it won't look too weird I think.

I think objects looks very poorly when not outlined. Just look at games like SMB, Zelda, Metroid, Kid Icarus : I think they look cheap because Nintendo didn't seem to understand what an outline was back then. Black outlines are often the way to go - but non-black outlines can work as well in some cases - as in Gimmick because it's kinda cartoony - or bats in Castlevania because they're black themselves.
Useless, lumbering half-wits don't scare us.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Post by tepples »

UncleSporky wrote:Although I can correct them in Photoshop, but I'm not sure if it looks quite like it should.
Nestopia images come out at 602x240. For comparisons, you can use GIMP or PS to resize them to 294x240.*
UncleSporky wrote:the scene has a well defined light source at the top left. A lot of games don't try to portray this, and just lighten things that pop out and darken things in the background.
Tengen's pirate-original version of Tetris portrays a light source from the top right, as does Tetris 2 + Bombliss (J). But I think the reason that more games don't try to portray light coming from the left or the right is that they flip sprits. In order for sprite lighting to be consistent, they'd have to store twice as many sprite cels.


* The NTSC NES pixel aspect ratio is exactly 8:7, or about 1.143. Nestopia is set a tad wide at 1.175.
UncleSporky
Posts: 388
Joined: Sat Nov 17, 2007 8:44 pm

Post by UncleSporky »

Bregalad wrote:I think objects looks very poorly when not outlined. Just look at games like SMB, Zelda, Metroid, Kid Icarus : I think they look cheap because Nintendo didn't seem to understand what an outline was back then. Black outlines are often the way to go - but non-black outlines can work as well in some cases - as in Gimmick because it's kinda cartoony - or bats in Castlevania because they're black themselves.
It's difficult on the NES where you have limited pixels to work with. Outlines mean taking up valuable space, when simply having colors next to each other might be just as effective. Sprites can't rely on the background color to do their outlines for them (because it's transparent), so you also need to decide if you can make it look better with black or some other dark color.

Image

The top left is original Megaman. Notice how some parts of him are outlined and some aren't. It's balanced carefully to make him a cartoon character without wasting too many pixels.

Notice how he looks different against a light or dark background. He loses a bit of his volume and definition against black, his bent foot is just awkward.

To the right of the first Megaman is what he might look like if you outlined everything. Not terrible, but not as good, I think. This shows that you have to think about what you're doing and not just outline everything. Megaman's spandex underwear looks just fine right next to his shirt!

And below you have what he might look like with no outlines. That looks pretty terrible, but it's also only using two colors which you generally wouldn't do. It's just for illustration. I do think it looks a lot like earlier Nintendo games like Kid Icarus. :)

In the other corner is what Megaman might look like with a third color besides black, a dark blue. I also added highlights with his medium blue where I could (on his arm and helmet). I don't think I've built a better Megaman necessarily, but notice how you can still see his entire outline against black. His face is also more different than the surrounding color because it does use black. This is just something to think about when designing sprites.

It should also be noted that Megaman's black outline enabled his artists to make him flash when charging his beam without changing his entire color scheme. That's one potentially useful aspect of outlines.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Post by tepples »

UncleSporky wrote:In the other corner is what Megaman might look like with a third color besides black, a dark blue. I also added highlights with his medium blue where I could (on his arm and helmet).
It reminds me of the "selective outlining" that Capcom used in 16-bit fighting games.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Post by Bregalad »

It's hard to tell because I got used to see Mega Man so much it's hard to remain objective about how he looks. But I think the version where you added outlines actually look better than the original - exept his underwear which looks weird.
Again it's hard to say beacuse I'm used to much to see Mega Man against a black BG that it don't seem weird any longer to me, but it's true the version with the dark blue outline looks better against a black background - but it would look terrible against a dark blue background.

Ideally you would do what some SNES games do - that is pick the darkest gray (but not black) for sprite outlines, so they still look OK against a black BG. But the darkest legal gray on the NES is $00 which is already a medium gray who would look terrible for outlines. So you have to go with black or dark blue - depenging on how much black backgrounds you have in the game.
Useless, lumbering half-wits don't scare us.
UncleSporky
Posts: 388
Joined: Sat Nov 17, 2007 8:44 pm

Post by UncleSporky »

After Castlevania 3, let's look at Faxanadu!

In case you don't know, Faxanadu is a side scrolling RPG like Zelda II. It is liked by many though I never really enjoyed its physics - you fall way too quickly and there is no run button, you simply move faster after walking for a second. Kind of odd.

These first set of pics have the NTSC filter.

Image

Dithering is the name of the game in Faxanadu. Everything is heavily dotted and textured. It makes stone blocks and columns look very nice, but the patterns are really obvious. I don't think it looks that bad here, though.

This is near the start of the game. We are looking at the roots of the giant world tree which has been corrupted. The enemy sprites in this game are pretty well done, creepy and freakish.

Image

This is the intro scene. Wow, that first tree has some messed up colors. It looks like they mostly made a lot of random speckled patterns and put them together to form a scene. I think that's supposed to be a dried up waterfall and river at the right side, but you can't be sure. The city, tree and clouds look decent, at least.

Image

When the game's not dithering-obsessed it does have some nice clear graphics. The blocks at the top are textured in a unique way, light and shadow are portrayed nicely, and the chandeliers are well-rendered. The portraits look as good as can be expected on a NES game.

The text boxes have a strange color scheme because the game reserves that red/green/white palette at all times for the top display. This means all items such as keys also use this palette. They placed the importance of bold green and red meters above that of other graphics, and so we have some festive looking interface elements.

Image

Another view of the early areas. I like this one because of the shadows of the pillars - notice how the shadow on the giant root is much closer to the pillar than on the bricks. It gives us the illusion of depth. I really like the texture on the green blocks too. Compare these to the more solid colored bricks in Castlevania 3 above.

Here's an NTSC/emulator comparison (two different emulators):

Image
Image

Faxanadu actually writes text boxes to a space in the background tables. This makes it trivial to pop up the box and they don't have to modify the nametables in real time, but it wastes a lot of valuable PPU space.

They use black as the background color at all times, but many palettes also use it. This is so they can apply different palettes to the same graphics to show objects in the foreground and background. You can see this at the bottom of the screen where the floor meets the background - same graphics, different palette. Black, brown and tan become brown, tan and pink (of all things). It's effective for showing a single color from its darkest values to lightest, but since that takes up two of the three unused background palettes it doesn't leave much room for variation. Indeed, Faxanadu doesn't use many different background color schemes at once, you won't see any green leaves against stone in this game.

Compare these stalactites with Castlevania 3's above.

Image

Most towns in the game look like this. They pick some really odd colors at times, though that could be my emulator showing yellow as green. The brick patterns on the buildings look pretty good. The colors are a little messed up on the tavern's lamps because they wanted them to look lit, leaving the surrounding blocks red.

I don't like the pixelly haze around the town either, it just seems like filler for the fact that they didn't have any details to put there.

The rest of the backgrounds I have taken from the world map at this site.

Image

The second section of the game takes place in a hazy mist. I have to be honest, I just don't like how this looks. It's animated, too, with sprites appearing behind it. I suppose it's one of the better ways you could portray mist in a NES game, but it's so blocky that it just feels like a mess. The big pillar looks alright, though.

Image

The mist is supposed to be covering the top of this castle, but I don't get that impression as well because we can't see any hint of red through it. The random-looking rocks don't help the scene much either. I might expect to see something like this in a haphazardly-designed game like Action 52...

Image

By the way, this is the interior of the castle. My eyes! What's with the bright green floor? This shows one of the pitfalls of designing with a single color in mind: some colors are just too bold.

Image
Image

The third part of the game takes place in the high branches of the world tree. I always liked how this part looked, showing a cross section of the hollow branches. The shadows are again an important part of the visuals.

Image

This is the final dungeon of the game. I really like the colors chosen here. Look, you have brown and two greys, and green/grey/blue, and they don't clash against each other too badly! Experiment with your colors, you might like the result. The lighting here is very well done, notice the varying length of the shadows under the platform.

So that's Faxanadu. As we've seen, some...adventurous color choices, lots of dithering, and a wide range of good to bad graphics. Their more unified colors let them show light and shadow more easily than the colorful Castlevania 3, but many scenes are monochromatic as a result. You can find a lot of worse examples on the NES though, overall it is a decent looking action RPG.
tepples
Posts: 22705
Joined: Sun Sep 19, 2004 11:12 pm
Location: NE Indiana, USA (NTSC)
Contact:

Post by tepples »

I think the "corrupt" graphics on the tree at the far left in the intro might have something to do with vector quantization: find the 256 or 128 or whatever tiles that best represent this bitmap image.
Faxanadu actually writes text boxes to a space in the background tables. This makes it trivial to pop up the box and they don't have to modify the nametables in real time, but it wastes a lot of valuable PPU space.
WarioWare for Game Boy Advance does the same thing, and probably for the same reason as Faxanadu: the game engine also supports Japanese, and Japanese has too many letters (about 100 counting both kinds of kana) to fit into that box. Mario Is Missing for Super NES does something similar for a different reason: it uses a small proportional font to fit more text into the same size text box.
User avatar
Bregalad
Posts: 8055
Joined: Fri Nov 12, 2004 2:49 pm
Location: Divonne-les-bains, France

Post by Bregalad »

Wow this was interesting. They obviously put a lot of thought in the backgorund in this game as well (contrary to CV3, I haven't played it).
I really wonder how the mist part looks. On your screens it looks terrible, but on the Youtube video it looks awesome (probably because pixels are blended together).
Maybe it's one of the few NES places that really relies on a filter to look any good ?
I'll definitely have to play through this game with my Power Pak :)

I'd say I don't quite like the idea to have one palette a faded out version of another. You could as well fade the tiles - unless you use it to fade a very large number of tiles - it sounds like a waste to me.
In my game I took the choose to have 2 constant BG palettes for the status bar - which can of course also be put to good use on levels. That way I have a colorful status bar - at the expanse of being slightly more reducted in my choice of colors for the BG. I'll take new screenshots (because the ones on my website are outdated) and ask your opinion :)

And yes if it loads the letters in the pattern table instead of the name table, it's probably not because they didn't want to modify the name table in real time - modify the pattern table in real time sounds like much more a big deal to me. It's more likely because all Japanese letters didn't fit on the original version. But does Zelda II, Castlevania II, etc.. do this as well ? After all 50 letters for Hiragana is 2 less than 2 * 26 letters for upper and lower cases.

EDIT : Is there a password that can take me easily to the mist part in Faxanadu ? I've seen some password on Gamefaqs but don't know which one to use. Thanks.
EDIT 2 : The hero looks TERRIBLE too.
Useless, lumbering half-wits don't scare us.
UncleSporky
Posts: 388
Joined: Sat Nov 17, 2007 8:44 pm

Post by UncleSporky »

Bregalad wrote:EDIT : Is there a password that can take me easily to the mist part in Faxanadu ? I've seen some password on Gamefaqs but don't know which one to use. Thanks.
Start in Mascon: zKPcAvt1iEQoFzwhAxjA

Look at the PPU data too, you can see how they used a gradient of mist tiles, and which ones animate.
Post Reply