Getting Graphics in an NES ready format (For those not in the beta)

Description of your first forum.
Post Reply
User avatar
Kasumi
Posts: 137
Joined: Fri Mar 09, 2018 11:13 pm

Getting Graphics in an NES ready format (For those not in the beta)

Post by Kasumi » Fri May 11, 2018 10:15 pm

The NES image format is CHR. CHR is an "indexed" format, meaning that rather than storing what color every pixel is, it just stores a number for every pixel. It's a bit like paint by numbers:
Image
All the 1s are meant to be the same color, all the 2s are meant to be the same color, etc. In the example above, 1 is red in the palette. But if we changed palette entry 1 to another color like yellow, all the 1 areas in the image would then need to be painted yellow.

Because the indexed image contains no color on its own, it needs a palette to display properly. And you can change the palette (which affects how the image is displayed or painted) without changing the image itself. This is how the tops of the bushes in Super Mario Bros. are reused as clouds.
Image
It is the same image, painted with a different palette. (One has white, the other has green for entry one.)

In short:
A pixel in an NES CHR file can be one of four numbers.
It is (usually) divided into 8x8 pixel sections called "tiles".
Each of the four numbers corresponds to an entry in a palette.
The same CHR file can be displayed using different four color palettes, which will change how it is displayed.
Image
NES has room in memory for two 256 tile sets. A four color 128x128 pixel image would be one full 256 tile set.
Here's a quick infographic on NES limitations beyond this:
Image

First: I cannot recommend my own tool enough as far as quickly converting background art or a 4 color image that's meant to be a tileset: https://kasumi.itch.io/ichr
Image
The above is the whole process. Save your image as a PNG (or PNG sequence), and then just drag the first frame onto the program. It'll figure out your colors and give you a ROM/CHR in a folder next to the image, or report errors. (More details about errors in the readme, but feel free to ask about anything you think should work, but doesn't.)

Many other converters require an indexed image as input. So let's get a program called Graphics Gale and talk a bit more about indexed images: https://graphicsgale.com/us/
Graphics Gale is a free piece of software that lets you easily create "indexed" images. And both NES Screen Tool and YY-CHR really only like importing indexed images.
Here's a quick look at Graphics Gale's interface:
Image
Here is how you create a new indexed image in it:
Image
256x240 is the NES screen size which NES Screen Tool likes.
128x128 is the size of a 256 tile sheet of CHR which YY-CHR likes.
The really important part is to be sure you're selecting 8bit (256 Colors).
Here is how you'd turn an image you already have into an indexed image:
Image
Open it. All Frames, Color Depth. 8bpp (256 Colors). (Make sure dither is unchecked)
Important! You must save your image as an indexed BMP for both NES Screen Tool AND YY-CHR so make sure you do the above!

Using only Graphics Gale to prepare a BMP for NES Maker:
NES Maker uses four specific colors. Black is color 0. This represents transparency for sprite tiles or the universal background color (called the "clear color" in the infographic). The other colors don't matter quite as much, but you have to make sure you make the correct color black. Red is color 1. Green is color 2. Blue is color 3.

The colors should be exact!
Image
Note the numbers under the palette.
The top number should always be 255.
The number below that controls how red the color is.
The number below that controls how green the color is.
The bottom number controls how blue the color is.
For black (color 0) you want 0 for red, green, and blue.
For red, (color 1) you want 255 for red, 0 for green and blue.
For green (color 2) you want 0 for red, 255 for green, and 0 for blue.
For blue (color 3) you want 0 for red and green, 255 for blue.

If the color you want to be color 0 isn't the first palette entry in Graphics Gale, that's okay for NES Maker:
Image
Just make sure the RGB values are correct.

After all that indexed image talk, I'm actually only sure RGB images work in NES Maker. Since I'm not in the beta to test, change your image back to RGB before you save:
Image
All Frames, Color depth... 24bpp

Then file, Save As, select Bitmap (*.bmp) from the Save as type pulldown menu. Type your filename ending in .bmp and click save.
(Since I am not in the beta, it's hard to confirm which image dimensions NES Maker likes. Certain background sets are 128x64 and I have had someone confirm for me that this works for those.)

Using YY-CHR to make CHR Files:
Get YY-CHR: http://www.geocities.jp/yy_6502/yychr/index.html
Image

YY-CHR works best on four color images. It wants the images it imports to be 128x128 pixels. It wants an indexed BMP, so make sure the image you want to import is indexed in Graphics Gale:
Image
It wants the first four colors in your BMP's indexed palette to be in the order they would be on NES. Universal Color (Color 0), Color 1, Color 2, Color 3.
To move a color in the palette in Graphics Gale, hold shift and click and drag.
Image
To copy a color in the palette in Graphics Gale, hold control and click and drag.
Image
Arrange the palette so that the first four colors are the colors you are using and they are in the correct order for NES. (Color 0 is first, color 1 is next, etc)
Then file, Save As, select Bitmap (*.bmp) from the Save as type pulldown menu. Type your filename ending in .bmp and click save.
Open YY-CHR. Open your bitmap:
Image
File, Open bitmap. You want Open bitmap, not just open!
If you need to change the color order (to make sure the universal color is in the right place), you can use this:
Image
First right click and drag to select the entire image. Then click the icon with the red, green, and blue squares. Then click the slot you want to change, and type the number you want to change it to. (You can also just ensure your colors are in the right order in the BMP's palette using Graphics Gale.)
Either way, File, Save As (thefilenameyouwant).chr to get your tileset.

Using NES Screen Tool for Special Screens:
Get NES Screen Tool: https://shiru.untergrund.net/software.shtml
Image
NES Screen Tool wants an indexed BMP, so make sure the image you want to import is indexed in Graphics Gale:
Image
NES Screen Tool wants the palette to represent what it would look like on NES. So universal background color, the three unique colors for palette 0, universal background color, the three unique colors for palette 1, universal background color, the three unique colors for palette 2, universal background color, the three unique colors for palette 3.
Also, make sure your image is 256x240 until you know what you're doing!
To move a color in the palette in Graphics Gale, hold shift and click and drag.
Image
To copy a color in the palette in Graphics Gale, hold control and click and drag. (Useful since you need to duplicate the universal color four times.)
Image
This is what the palette is meant to look like in that Kirby image:
Image
And this... is important. If you need the same color in different 4 color sets, they need to be in the same place in each set or NES Screen Tool will not be able to figure out.
Image
Check out this arrangement:
Image
Note that the light blue is in slot 3 in the 0th palette and in slot 2 in the 2nd palette. This is what causes it to break. It's valid on NES, but it wouldn't import correctly in NES Screen Tool. Sometimes it's not possible to have the shared colors all be in the same slot. If this is the case for your art, try I-CHR: https://kasumi.itch.io/ichr

Now save it as a BMP file. (NES Screen Tool only imports indexed BMPs)
Image
Then file, Save As, select Bitmap (*.bmp) from the Save as type pulldown menu. Type your filename ending in .bmp and click save.

Now open NES Screen Tool and Import the BMP you saved as a nametable:
Image
Import, BMP file as nametable.
You'll notice it still looks slightly wrong. For similar reasons to why the colors have to be in the same slots in the palette, you'll need to paint the right palettes to the right places in your image.
First ensure Apply tiles is off. Otherwise, you'll by changing the background rather than just the colors its displayed with.
Then ensure Apply palettes is on. Otherwise, you won't change the colors its displayed with. Then click the proper palette to select it, and click on the background where that palette should appear.
Image
(The above doesn't fix everything.)
Then, save your .CHR:
Image
Patterns, Save CHR, 4K (Current Table).
Save your background/nametable (.nam):
Nametable, Save nametable and attributes. (And attributes is important! You want the palette info saved with the background.)
Save your palette.
Palettes, Save palettes.

Done...
Last edited by Kasumi on Sat May 12, 2018 3:46 pm, edited 4 times in total.
User avatar
JakeSpencer
Posts: 54
Joined: Thu Mar 08, 2018 1:54 am

Re: Getting Graphics in an NES ready format (For those not in the beta)

Post by JakeSpencer » Sat May 12, 2018 8:43 am

This is an invaluable guide, Kasumi, thank you! I don't even want to describe the tedious way I was making sprites using Inkscape before (although they were never ported to NES format ultimately). I'll definitely try this out.
Check out my YouTube channel: "Jake's Amateur Gaymers"
https://www.youtube.com/channel/UCAXuTZ ... fyw_kzC4Zw
User avatar
Tengen Games North
Posts: 44
Joined: Fri Mar 16, 2018 11:23 pm
Location: Alberta, Canada

Re: Getting Graphics in an NES ready format (For those not in the beta)

Post by Tengen Games North » Sat May 12, 2018 7:46 pm

I just started using NES Screen Tool and its a step up from making them in GIMP. I have tried to save my GIMP files as proper BMP files to import but the colours get screwed up so am just redoing everything in NESst.

I think I'm reducing the number of games I plan to make by half.
Post Reply