Sprite Layering on the NES

The NES is extremely limited when it comes to having large images with a lot of color in them. Generally, people will make static images with just the background layer in order to render a large image. Doing this tends to leave scenes looking kind of flat, monochromatic, and lacking in any kind of visual flair. That is where sprite layering comes into play. We are going to look a little deeper into the cutscenes in Little Medusa in order to understand how sprite layering can make a scene much more interesting, even with the limited budget of the NES.

The Uses of Sprite Layering

Using sprites in a large static image can be useful for a lot of reasons. They can add motion to a scene, increase the color depth of the overall image, add animation to an otherwise still image, and you can even use them to add in a few extra tiles if you need it. Just make sure that you still adhere to regular sprite limitations, and use them to enhance a scene overall.

We are going to take a look at a few of the cutscenes in Little Medusa and see how sprites were used to add a little extra to them.

In this first scene sprites are used for a few different things. Ariadne’s eyes, mouth, hair, and the water coming from her hands are all rendered on the sprite layer. If you were to split the two layers up, it would look like this:

The reason why we used sprites where we did was to accomplish a few different effects. First, we were able to make an effect where the water flickers every other frame in order to make it look translucent. All of the faces in Little Medusa’s cutscenes are rendered as sprites in order to have them stand out a little more, and to make them easy to animate. Their mouths move with the text, and their eyes blink. Instead of having to rely on bank swapping the BG layer, which would use a lot of tiles, we used sprites so that they could stay on the same bank. Also, the hair is a sprite so that we could have a larger color palette available instead of just three BG palettes (the fourth is taken up by the text box). The other convenient element to sprites is that sprite tiles can be flipped horizontally or vertically, so only half of each sprite was needed to be stored in the ROM.

In the reverse shot sprites were used for facial animations still, but other than that they were mostly used to increase the color depth on Arte. Here is how it looks broken up:

The added white area on her snake body, the color of the jewelry, and the white on the snakes would not have been possible using BG attribute tables (the 16x16 palette selections that BG elements use). In order to add those colors, they had to be added in as sprites on top of the image (hence, "sprite layering"). Without sprites, all of those elements would have had to share the same palette as her skin.

The Earth Titan Ermolai’s introduction is a good example of how to use sprite layering to add motion to a scene. As he is talking, the rocks that are in the air are floating around in circular patterns to make it look like he is controlling them. Seeing how sprites can be moved around the screen much more freely than BG elements, sprite layering really was the only way to achieve this effect.

When it is split up, it is pretty easy to see the stones on the separate layer. Truthfully, it would be pretty easy to tell even without splitting it up. Generating a few moving sprites around the screen is a great way to bring a static image to life a little more. If it is appropriate, animating the sprites can make it even more exciting to look at.

Also, this Titan’s face is actually two sprites layered on top of each other. If an image is static, you can generally get away with layering sprites on top of each other without too much issue. Through sprite layering, we were able to increase the color count well beyond what is normally allowed. 

Finally this scene uses sprites to add motion, but also to cheat the background’s tile count. The little tornadoes are obviously sprites so that they can move up the screen quickly, to make it look like Coeus is summoning them from underneath. As always, the facial features are still animated sprites as well.

Once it is broken up, we can see that a large column of tiles in the center of his body are made out of sprites. We made them use the same colors as the background to blend it in. We ended up making this out of sprites, because the overall image used too many tiles to be part of the background. The main drawback of using sprites is the fact that you can only have 8 sprite tiles per scan line. In order to design around that limitation, we made the sprites fill in a large vertical space. This allowed us to make an image that used a lot more tiles than the background layer was going to afford us.

Using the sprite layer is a pretty great way to add a lot to what would normally be a still image. It goes even further beyond what we did in Little Medusa as well. Other popular ways to use sprites in cutscenes is to add an extra layer of depth to a scrolling image.

You can make sprites move at their own independent speeds, so that you can have a couple of sprite elements and a scrolling background all moving at different speeds. Also, seeing how sprite movements aren’t tied to screen scrolling, they are free from the impact that some kind of parallax effect would have on the rest of the screen.

If you want to look into how sprite and background layers are used in different games, there is an option to disable the sprites or the backgrounds in the emulator FCEUX. That is how the above screen shots were taken. Getting there is pretty simple. First, load up the game that you want to look at.

Next, click on Config > Display. From there you have the ability to uncheck either “Graphics: BG” (The Background Layer), or “Graphics: OBJ” (The sprite layer). Unchecking one of those will prevent that layer from being displayed on the screen. Another useful idea is to use the pause button on your keyboard to pause the emulator (this is different from pausing in-game and can be done at any time) during a scene that you want to look at. This will give you as much time as you want to look at the way the scene was put together.

Want more guides to graphical tricks? Check out bank-swapping on the NES!

how to layer sprites how to use sprite layering laying sprites on top of each other limitations of the NES little medusa little medusa NES little medusa NES game nes art nes art how to nes background art nes backgrounds nes bg nes bgs nes graphic limitations nes graphic restrictions NES graphic techniques nes graphics NES graphics tricks nes guide for artists NES layering sprites nes palette restrictions NES sprite layering NES tile counts new games on the snes new indie retro games new NES game little medusa new retro games nintendo graphics old console palette restrictions palette restrictions sprite layering video game design

← Older Post Newer Post →