nesrocks.github.io/tutorial-series-for-simulating-nes-graphics.html at main · nesrocks/nesrocks.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html><html lang="en-gb"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Tutorial series for simulating NES Graphics - Nesrocks</title><meta name="description" content="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&hellip;"><meta name="generator" content="Publii Open-Source CMS for Static Site"><link rel="canonical" href="https://nesrocks.github.io/tutorial-series-for-simulating-nes-graphics.html"><link rel="alternate" type="application/atom+xml" href="https://nesrocks.github.io/feed.xml" title="Nesrocks - RSS"><link rel="alternate" type="application/json" href="https://nesrocks.github.io/feed.json" title="Nesrocks - JSON"><meta property="og:title" content="Tutorial series for simulating NES Graphics"><meta property="og:image" content="https://nesrocks.github.io/media/website/main_admin_avatar.png"><meta property="og:image:width" content="184"><meta property="og:image:height" content="184"><meta property="og:site_name" content="Nesrocks"><meta property="og:description" content="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&hellip;"><meta property="og:url" content="https://nesrocks.github.io/tutorial-series-for-simulating-nes-graphics.html"><meta property="og:type" content="article"><link rel="stylesheet" href="https://nesrocks.github.io/assets/css/style.css?v=b9c13d70183586570330f9e09da4155b"><script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://nesrocks.github.io/tutorial-series-for-simulating-nes-graphics.html"},"headline":"Tutorial series for simulating NES Graphics","datePublished":"2025-09-17T08:50-03:00","dateModified":"2025-09-17T08:50-03:00","image":{"@type":"ImageObject","url":"https://nesrocks.github.io/media/website/main_admin_avatar.png","height":184,"width":184},"description":"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&hellip;","author":{"@type":"Person","name":"Nesrocks","url":"https://nesrocks.github.io/authors/nesrocks/"},"publisher":{"@type":"Organization","name":"Nesrocks","logo":{"@type":"ImageObject","url":"https://nesrocks.github.io/media/website/main_admin_avatar.png","height":184,"width":184}}}</script><noscript><style>img[loading] {
                    opacity: 1;
                }</style></noscript></head><body class="page-template"><header class="top js-header"><a class="logo" href="https://nesrocks.github.io/"><img src="https://nesrocks.github.io/media/website/main_admin_avatar.png" alt="Nesrocks" width="184" height="184"></a><nav class="navbar js-navbar"><button class="navbar__toggle js-toggle" aria-label="Menu" aria-haspopup="true" aria-expanded="false"><span class="navbar__toggle-box"><span class="navbar__toggle-inner">Menu</span></span></button><ul class="navbar__menu"><li><a href="https://nesrocks.itch.io/naw" target="_self">NAW (itch.io)</a></li><li><a href="https://store.steampowered.com/app/915850/Super_Hiking_League_DX/" target="_self">Super Hiking League (Steam)</a></li><li class="active"><a href="https://nesrocks.github.io/tutorial-series-for-simulating-nes-graphics.html" target="_self">NES Graphics Tutorials</a></li><li><a href="https://nesrocks.github.io/about.html" target="_self">About</a></li></ul></nav></header><main class="page"><article class="content"><div class="hero hero--noimage"><header class="hero__content"><div class="wrapper"><h1>Tutorial series for simulating NES Graphics</h1></div></header></div><div class="entry-wrapper content__entry"><p>On my twitter page <a href="https://twitter.com/bitinkstudios">(follow me if you haven’t yet!)</a> 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.</p><h6>Tutorial 1: Background palette</h6><figure class="aligncenter size-full wp-image-507"><a href="https://twitter.com/bitinkstudios/status/1056543384725262336"><br><img loading="lazy" src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-01.gif" alt="" width="500" height="500" data-is-external-image="true"></a></figure><p></p><p><span id="more-506"></span></p><h6>Tutorial 2: Background tiles</h6><figure class="aligncenter size-full wp-image-508">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 <a href="https://nesrocks.itch.io/naw">NAW</a>, yy-chr, <a href="https://frankengraphics.itch.io/nexxt">NEXXT</a> or PyxelEdit.<br><a href="https://twitter.com/bitinkstudios/status/1055921292740825094"><br><img loading="lazy" src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-02.gif" alt="" width="500" height="500" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 3: Attributes</h6><figure class="aligncenter size-full wp-image-509">So the screen is 256×240 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.<br><a href="https://twitter.com/bitinkstudios/status/1055968494393679872"><br><img loading="lazy" src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-03.gif" alt="" width="500" height="500" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 4: Animated tiles!</h6><figure class="aligncenter size-full wp-image-510">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.<br><a href="https://twitter.com/bitinkstudios/status/1056251606205915136"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-04.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 5: Parallax</h6><figure class="aligncenter size-full wp-image-511">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.<br><a href="https://twitter.com/bitinkstudios/status/1057486918693388288"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-05.gif" alt="" width="500" height="499" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 6: Introduction to sprites</h6><figure class="aligncenter size-full wp-image-544">Sprites are a very extensive topic. There are 8×8 and 8×16 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!<br><a href="https://twitter.com/bitinkstudios/status/1073242564839510017"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-06.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 7: Sprite manipulation</h6><figure class="aligncenter size-full wp-image-545">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!<br><a href="https://twitter.com/bitinkstudios/status/1076177240348606467"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-07.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 8: Scanline limit</h6><figure class="aligncenter size-full wp-image-546">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.<br><a href="https://twitter.com/bitinkstudios/status/1080801490741182465"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-08.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></a></figure><p></p><p>Bonus: I’ve m<span class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">ade a simple NES f</span><span class="css-901oao css-16my406 r-poiln3 r-bcqeeo r-qvutc0">licker / 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. </span></p><ul><li>[Download not found]</li><li>[Download not found]</li></ul><figure class="aligncenter size-full wp-image-1282"><a href="https://twitter.com/bitinkstudios/status/1452790356332908547"><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/anim2.gif" alt="" width="512" height="480" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 9: 8×16 Sprite Mode</h6><figure class="aligncenter size-full wp-image-547">There isn’t a “best” sprite mode, but I feel like 8×16 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.<br>Same as a with the 8×8 sprite, a whole 8×16 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!<br><a href="https://twitter.com/bitinkstudios/status/1084218418268721153"><br><img src="https://nesrocks.com/blog/wp-content/uploads/2018/10/nestut-09.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></a></figure><p></p><h6>Tutorial 10: Palette rundown</h6><p>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!</p><div class="wp-block-image"><figure class="aligncenter size-large"><a href="https://twitter.com/bitinkstudios/status/1480738963564511232" target="_blank" rel="noopener noreferrer"><figure class="wp-image-1334"><img src="https://nesrocks.com/blog/wp-content/uploads/2022/01/nestut-10.gif" alt="" width="500" height="500" loading="lazy" data-is-external-image="true"></figure></a></figure></div></div></article></main><footer class="footer"><div class="wrapper"><div class="footer__copyright"><p>Powered by Publii</p></div><button id="backToTop" class="footer__bttop" aria-label="Back to top" title="Back to top"><svg width="20" height="20"><use xlink:href="https://nesrocks.github.io/assets/svg/svg-map.svg#toparrow"/></svg></button></div></footer><script defer="defer" src="https://nesrocks.github.io/assets/js/scripts.min.js?v=700105c316933a8202041b6415abb233"></script><script>window.publiiThemeMenuConfig={mobileMenuMode:'sidebar',animationSpeed:300,submenuWidth: 'auto',doubleClickTime:500,mobileMenuExpandableSubmenus:true,relatedContainerForOverlayMenuSelector:'.top'};</script><script>var images = document.querySelectorAll('img[loading]');
        for (var i = 0; i < images.length; i++) {
            if (images[i].complete) {
                images[i].classList.add('is-loaded');
            } else {
                images[i].addEventListener('load', function () {
                    this.classList.add('is-loaded');
                }, false);
            }
        }</script></body></html>