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 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 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 to make it look translucent. All of the faces in Little Medusa’s cutscenes are rendered as sprites 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 the 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). 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 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 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 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 is 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. 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. Another popular way to use sprites in cutscenes is to add an extra layer of depth to a scrolling image.
You can make sprites move at their 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 screenshots were taken. Getting in there is pretty simple. First, load up the game that you want to look at.
Next, click on Config > Display. From there you can 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!