Here's a fun problem to solve when making NES games, that you might not even realize is a problem! #nesdev
Sprites on the NES are actually drawn in "screen space" and wrap around at the edges. But obviously in many games, this makes no sense! Here's how to solve it 🧵
The sprites are drawn in a range of 0-255 on the x-axis (0-239 on the y-axis), and have no concept of a "camera", or the level. It is up to the dev to draw them in a location on screen that makes sense, relative to the game's camera.
It is also up to the dev to make sure that objects that are "off camera" do not get drawn.
But this can be tricky because "objects" are actually multiple 8x8 sprites drawn together to form a larger object.
There are times when an object is only *partially* on-camera (and partially off-camera) and we need to ensure that those partial parts, off-camera, do not get drawn, on a *sprite-by-sprite basis*.
This is technically a little tricky but very fixable!
However, once we fix that issue, a more complex problem presents itself. Take a look! 👀
The problem: what to do when a single sprite is half on screen and half off screen. If we draw it, in this example, it will actually show up on the far right.
The solution is kind of ugly!
This NES actually has a built in feature to handle this, but probably not in the way you might expected. A game can set a flag to completely disable rendering sprites on the left 8 pixels of the screen. This "fixes" the issue by removing the glaring "pop" as a sprite vanishes.
That looks smoother, but it still looks weird having the object seem to slide out of existence. To improve this, we can also turn off rendering off the background for that same area of the screen. This creates the illusion that the entire left column of the screen are unused.
And here is the final result!
So to recap, the solution is to:
1) Cull off-screen sprites. 2) Disable rendering on the left 8 pixels of the screen to avoid sprites *popping* in and out.
3) Rest easy knowing that many of your favorite games did this too! 😉
• • •
Missing some Tweet in this thread? You can try to
force a refresh
Here's how I do some really basic perf testing on my NES game, Super Sunny World 🌞
I can enable a "Frame Line" which draws a line of "white" at the end of the Game Loop. If that line goes past the bottom of the screen, that would result in a lag frame! #nesdev
This works because while FRAME 1 is drawing, line by line from the top of the screen downward, FRAME 2 is being calculated. So the longer FRAME 2 takes to update, the lower on screen the line will be.
But you may be wondering: I didn't think the NES could draw arbitrary lines like that! You're right. The "line" isn't actually a "line". Instead I change to color of the rendering (using something called an "emphasis bit") for a set time creating the illusion of the line.
Implementing scrolling on the NES is difficult. Because of that, I've been thinking about what different platformer games have done, and which battles I want to fight with my #nesdev game.
I'll document all the different *types* of scrolling I can think of in this thread.
::Full 8-Way Scrolling (Blaster Master)::
Levels extend in all directions with a maze-like layout, not favoring any one direction in particular. Levels are much larger than can fit in nametable, and employ level streaming.
::Limited 8-Way Scrolling (Mario 3)::
SMB 3 has some levels with 8 way scrolling, but are still designed with a bias towards horizontal movement. Up/Down is reserved for "hidden objects" and "secrets".
Camera is designed to only scroll up if player is doing a highjump/flying.
Got the day off work, and kids are in school! Time to go ham on this project, and turn *this* (side scroller) into *this* (top down rpg-like world map). #nesdev
Bringin' in the lil' guy!
Believe it or not, this is actually *progress*! Graphics data for the top down character is being properly swapped in (replacing the side scroller graphics).