wedNESday #9 - Exploring NES Graphics
Posted on Wed 01 May 2024 in nes
Playing around with NES graphics can be an incredibly fun and rewarding experience. Transitioning from that blank screen to one filled with tiles in a nametable highlights the capabilities and limitations of the platform. It's like a window ready to explode.
Through this post, we might use some terms and conventions on the NES. There is NES 101 at the end of the post if you may need.
In this post, you may stomp in some terms and conventions used in NES game development. For those unfamiliar with NES graphs, we've included a handy NES 101 section at the end of the post for reference.
The goal
The objective is to import any image onto a NES screen. However, when importing a regular image, we may encounter loss in colors and resolution. How can we assess the accuracy of the program?
The solution is simple: import screens that the NES was capable of rendering. By comparing the imported images with the original NES screens, we can gauge the program's accuracy.
Tyler D
I've developed a command to import images onto a NES screen. Does it work effectively? How accurate it is? But how can I verify this? How can I ensure its reliability?
Let's review some of the know glitchs.
The Inner War
In "Abadox: The Deadly Inner War" is a horizontally scrolling shoot 'em up video game developed by Natsume and published by Milton Bradley Company released in North America in 1990 and in Europe in 1991.
In "Abadox," players control a small spaceship tasked with navigating through the insides of a giant alien organism known as "Abadox" to rescue the princess Maria. The game's story is set in the year 5012, where the planet Abadox has been invaded and consumed by a giant alien organism. The princess Maria has been swallowed by the creature, and the player must pilot their ship through various levels of the organism's interior to rescue her and ultimately destroy the creature.
| Orignal | Emulated |
|---|---|
|
|
Above, we have the original title screen image side by side with the emulated one generated by the tool. At first glance, it looks quite amazing. Look again, the eyes can be deceiving.
| Diff | FCEUX Screenshot |
|---|---|
|
|
Now, with more detail, we can observe on the left the disparities between the Original and the Emulated images. In orange, we can see the differences in Metatiles, while in yellow, the discrepancies in tiles are highlighted, and in red, the pixel differences stand out. These discrepancies may have occurred because the original image might have utilized sprites to enhance certain colors. I will demonstrate this in the next example. However, what truly stands out here is the color disparity between the Emulated and the FCEUX Screenshot. This discrepancy arises from my improper utilization of the actual FCEUX palette table. This marks our first glitch.
I'm Batman, without sprite overlay
"Batman: The Video Game" is a side-scrolling action-platformer developed and published by Sunsoft. Released in 1989, it's based on the 1989 film "Batman" directed by Tim Burton.
In the game, players control Batman as he fights through Gotham City to stop the villainous Joker and save the city. The gameplay consists of traversing side-scrolling levels, battling enemies, and ultimately confronting bosses at the end of each stage. Batman's primary weapon is his Batarang, but he can also perform melee attacks and use other gadgets such as a grappling hook to navigate levels.
| Orignal | Emulated |
|---|---|
|
|
The title screen is astonishing. For its time, it exudes a photorealistic feeling. However, in emulation, looks a more noir aesthetic.
| Diff | FCEUX Screenshot |
|---|---|
|
|
I see, some yellow tones were omitted from the result. Each 16x16 metatile block has a 4-color limit. To compensate for this, the game utilizes sprites in certain areas of the face and symbol to incorporate subtle touches. This time, we don't need the difference image to notice, although you can also check it out.
Double Dragon's Dungeons
"Advanced Dungeons & Dragons: DragonStrike" is a fantasy-themed video game released in 1992. Developed by Westwood Associates and published by FCI, the game is based on the "DragonStrike" tabletop role-playing game (RPG) from the Dungeons & Dragons franchise.
In "DragonStrike," players assume the role of a dragon rider tasked with defeating evil forces threatening the land of Krynn. The game combines elements of action and flight simulation with RPG mechanics, offering a unique gaming experience within the Dungeons & Dragons universe.
| Orignal | Emulated |
|---|---|
|
|
A superb "Double Dragon" title screen that doesn't depict the typical theme of brothers fighting for a girl. However, it couldn't fit into the regular pattern table.
| Diff | FCEUX Screenshot |
|---|---|
|
|
That image utilizes sprites to render an entire area. With only the NES's background tiles, we can display at most 256 unique tiles on the screen. However, the screen is composed of 960 tiles. This inevitably leads to border issues, as tile repetition becomes necessary. To address this limitation, the game renders part of the screen using sprites. However, there's a catch: we can display at most 64 sprites on the screen, with no more than 8 in the same line. This allows for a maximum of 320 unique tiles on the screen. Therefore, despite this workaround, there is still some repetition present in the rendering.
Still there?
I doubt, that you are still reading this or that you did care about the resume of the previous game, if it was released in 1990 or not.
| Orignal | Emulated |
|---|---|
|
|
Even what would be the simplyst screen shot, some minor glitchs would arrise. See the botton part of the image?
| Diff | FCEUX Screenshot |
|---|---|
|
|
Problem here is dua to some attribute table missing. There must be some attribute table missing data on the final rom.
Conclusion
We will found glitchs regarding
- Differs in the used palette and emulator palette;
- Use of sprite overlay to increse color's in area;
- Render part of the screen in sprites;
- Attribute table not being fully defined.
Despite encountering several issues, the tool boasts an accuracy rate of over 90%. To be more precise, let's take a closer look:
| Title Screens | Hits | Misses | Accuracy |
|---|---|---|---|
| 618 | 134761 | 13559 | 90.85827939590075 % |
Testing the tool agains a random sample of NES title screens. I our case is using 618 different images. You can check the more detail result at TylerD's game title screen list.
Note
NES Graphs 101
Tiles
Tiles are the building blocks of NES graphics. Each tile is an 8x8 pixel square. They are made of two bitplane, allowing at most 4 colors per tile. A tile can be represented in the screen in two forms, in the background as a Background Tile or in the foreground as a Sprite.
Pattern Tables
Pattern tables store the graphical data for each tile used in the game. There are two pattern tables in the NES, each containing 256 tiles. These pattern tables are where developers define the visual appearance of sprites and backgrounds in their games. Usually, games uses one pattern table for the background tiles and the other for the sprites.
Name Tables
Name tables are an essential part of the NES's graphics system. In simple terms, a name table is a 32x30 grid of 8x8 tiles that represent what Usually represents the background of the game.
player sees on the screen during gameplay. However, the NES only has enough memory to store two name tables at once, each representing one screen of gameplay. These name tables are often referred to as nametable 0 and nametable 1.
How It Works
The NES's graphics hardware fetches data from the name tables and pattern tables to generate the visuals seen on the screen. When the console is powered on or reset, the CPU initializes the name tables with the necessary graphical data. During gameplay, the CPU updates the name tables as needed to reflect changes in the game world.