https://nesrocks.com/blog/nes-graphics/ Menu BIT INK STUDIOS Skip to content * Super Hiking League (Steam) * NES Graphics Tutorials * About * Contact BIT INK STUDIOS * Facebook Page * Twitter * Instagram Skip to content * Super Hiking League (Steam) * NES Graphics Tutorials * About * Contact October 31, 2018December 4, 2023 NES Development 9 Comments Tutorial series for simulating NES Graphics On my twitter page (follow me if you haven't yet!) I've been creating a few very quick tutorials to help people understand what NES graphics mean. I see a lot of people doing pixel art and just calling it "8-bit" or "NES style", but a lot of the time it misses the target by a fair margin. Hopefully these will help clarify why. You can click on any image to see the original tweet. Tutorial 1: Background palette [nestut-01] Tutorial 2: Background tiles Tiles are a big reason why NES games are what they are. If you don't think with tiles, chances are you won't get the right feel. Use a tile based pixel editor like NAW, yy-chr, NEXXT or PyxelEdit. [nestut-02] Tutorial 3: Attributes So the screen is 256x240 and is made of tiles, and there are four sub palettes of 3 colors each, +1 background color. And this is how all of it comes together. I used black for the bg here. [nestut-03] Tutorial 4: Animated tiles! The NES has no problem changing the entire tiles table every frame. There's technically no limit to this other than cost of hardware memory inside the cartridge. Go wild. [nestut-04] Tutorial 5: Parallax This one is all about that sweet parallax effect. If you want the true NES feel this is important! There are techniques to fake bg layering, but they are very technical and limited. This is the real deal. [nestut-05] Tutorial 6: Introduction to sprites Sprites are a very extensive topic. There are 8x8 and 8x16 modes, flickering, flipping, clipping... Phew! Keep in mind that ALL sprites in the screen will have to use one of the 4 subpals you choose! [nestut-06] Tutorial 7: Sprite manipulation Sprites have the advantage of not being aligned to a grid like the background tiles, so you can position them at any coordinate on the screen. But they have a few extra features! [nestut-07] Tutorial 8: Scanline limit Let's get technical. The NES can display up to 64 sprites on the screen, but only 8 can appear on each scanline! Some games will change sprite priority every frame so more can be seen, resulting in sprite flickering. [nestut-08] Bonus: I've made a simple NES flicker / sprite limit test rom. Useful to demonstrate the sprite limit and how sprite flickering can be programmed to mitigate the issues it brings. Notice how without flickering programmed in, one character is completely invisible unless you jump. And the other two seem to hide behind the sky when approaching the ground. Press select to toggle flickering. Gif captured in 50 fps. * Download NES Flicker test ROM * Download NES Flicker tester Ca65 project files [anim2] Tutorial 9: 8x16 Sprite Mode There isn't a "best" sprite mode, but I feel like 8x16 is often overlooked. Here you can see one of the biggest reasons to use it. The 8 sprites/scanline limit has been respected in this example. Same as a with the 8x8 sprite, a whole 8x16 sprite can have only 1 subpal. Also, since the sprite is twice as tall in this mode there will be a higher tendency for scanline sprite limit to occur. So either embrace flickering or design the game very well so it doesn't happen often! [nestut-09] Tutorial 10: Palette rundown Putting together the transparency (background color), the nametable subpalettes (4 sets of 3 colors) and the sprite subpalettes (4 sets of 3 colors) we can draw our screen! Think in layers as shown in tutorial #7: first comes the transparency color, then the back sprites, then the nametable and finally the front sprites. All subpalette colors can easily be changed every frame for the famous palette cycle effect! [nestut-10] fb-share-icon Tweet Pin Share Post navigation Previous Next 9 thoughts on "Tutorial series for simulating NES Graphics" 1. [5dfe] This is amazing! Great examples and easy to understand! Cacticus , October 11, 2019 at 1:55 pm Reply 2. [cf9e] Very interesting information, I love how in-depth you got in this! Jess , February 1, 2020 at 7:25 am Reply 3. [d2d5] So that's why there's black tiles! Poopc , July 9, 2020 at 10:13 pm Reply 4. [5eaa] Everything else is great, but example 03 seems to have 5 or even 6 colours in some of the 16x16 attribute fields. P-Tux7 , November 4, 2021 at 4:13 pm Reply + [612c] Hey! I don't see it, care to show exactly where? Also, that particular background has been tested on a real NES. Nesrocks , January 5, 2022 at 11:59 am Reply 5. [21ef] You said vertical parallax can\'t be done, but NES TMNT does it. The video explains parallax quite well, EXCEPT FOR this one thing! I don\'t understand how this single example works. https://youtu.be/wt73KPS_23w?t=460 Kelly Wylde , May 27, 2022 at 4:39 am Reply + [612c] The first TMNT game? Where in the game does it do it? That section shows a complicated technique where you swap the background graphic of the mountains to a version slightly shifted to give an illusion that it's moving. nesrocks , July 18, 2022 at 12:56 pm Reply 6. [1ce2] honfopfjfp0jfp0f-fkif- ericmarian 18549 , March 23, 2023 at 7:54 pm Reply 7. [d2f8] Fried Jaxson , January 20, 2024 at 2:43 am Reply Leave a Reply Cancel reply Your email address will not be published. Required fields are marked * [ ] [ ] [ ] [ ] [ ] [ ] [ ] Comment [ ] Name * [ ] Email * [ ] Website [ ] [ ] Save my name, email, and website in this browser for the next time I comment. [Post Comment] Search for: [ ] [Search] Get NAW on Itch.io! NES Assets Workshop: NAW by nesrocks Relevant Links My game is on consoles! NES Graphics Tutorials A collection of my ROM hacks NES Assets Workshop MCBRemakes (portuguese) Donate with PayPal button * Follow @bitinkstudios RSS Recent Comments * Arseniy on The Real Ghostbusters Remastered * fc_lover on Adventure Island Hack * Jaxson on Tutorial series for simulating NES Graphics * Anty on TMNT II (NES) Options Mode * ericmarian 18549 on Tutorial series for simulating NES Graphics Categories * Adventure Island (1) * Arts and Crafts (2) * Ghostbusters (1) * Miscelaneous (3) * NAW (1) * NES Development (4) * New game dev log (3) * Rom Hacking (7) * Super Hiking League (2) * Super Pitfall (16) * Uncategorized (6) * Unused Content (1) Proudly powered by WordPress | Theme: Harmonic by WordPress.com.