Palettes
Monster Palettes
Pixel Editor Toolbar
Tabs
How To Get Started
Keyboard Shortcuts
The Pixel Editor is obviously a very important part of NESmaker. It is here that you will do all your drawing, both for sprites and background graphics. In my personal opinion this pixel editor is the best and easiest NES graphics tool to use. It has a very familiar look and feel, and if you have used Microsoft Paint before, then you already understand many of the basic concepts. However, since we are drawing graphics for the NES, we must remember that we can only use four colors per sprite and four colors per background tile. So one thing that might be confusing at first is this concept of using palettes. First of all it is important to understand that sprite palettes and background palettes are two different things. So for example when we are drawing background graphics (tiles) we have to use the background palettes (they are called Palettes in NESmaker, as opposed to sprite palettes which are called Monster Palettes). Let’s take a quick look at how palettes work.
Palettes
In NESmaker by deafault there are only four colors; BLACK, RED, GREEN and BLUE. These colors are never shown in the game, but let’s think about them as default working colors. It is simply a matter of separating the four different colors. What the colors actually look like when the game is running depends on what palette is active at that given time. Another thing we need to remember both for the background palettes and monster palettes, is that the black color (upper left in any subpalette) is the transparent color. This is especially important to remember when making sprite graphics. So for sprites you actually just have three colors to draw with. The black color will act as an eraser. Changing the top left (transparent) color will cause some unexpected behavior when running the game, due to a tiny bug in NESmaker. This is easily fixed with a very short tutorial on the NESmaker forum.
Here is an example of what a picture will look like without any palettes chosen.
Here we see the same picture with a palette selected. When we are in the Pixel Editor, NESmaker calls this Palette Translation.
When dealing with background (tile) graphics we have the main palette (Palette 0 in this example) and subpalettes. Subpalettes are a set of four colors. Each background palette has four subpalettes. This is what it looks like:
The Pixel Editor will only display one subpalette at a time. You can choose a different main palette from the drop-down menu called Palette on the left (just above the colors). If you have organized your background palettes in different groups, then you first have to choose the correct palette group before choosing a palette.
An important thing to remember when drawing in the Pixel Editor is that it will not necessarily reflect how it will look when the game is running. To make sure that you get the same colors in-game as you see in the Pixel Editor, you must set the same palette you used in the Pixel Editor on the screen where you design the background graphics (tiles):
When designing a screen you have a certain palette set up. Like we saw in the picture above, we can change what background palette should be used for that particular screen. However, we can use any of the four subpalettes on the tiles we place on the screen. That is done by clicking on the subpalette on the left before selecting a tile graphic from the little tile selection window on the top. The subpalette of tiles can also be changed at any time when you’re designing a screen (level). While hovering the mouse pointer over a certain tile you can press either of these keys to change the subpalette:
Palettes can be modified by right clicking on the different colors. This can be done in the Pixel Editor, when designing a screen or in the Palettes section in the Context Menu on the left.
Monster Palettes
Working with Monster Palettes is slightly different than using a background palette in the Pixel Editor. The difference is that when using a background palette, we just select one palette which in turn contains four subpalettes. Monster palettes are just subpalettes, so there we can choose four different monster palettes to work with. It is worth noting that the Pixel Editor will behave the same. So it will still just display the colors of one subpalette at a time. To switch between background palettes and monster palettes you just click the button above the color palettes (just below the Open / Save buttons).
What colors a sprite will use in-game depends on what colors that object is set up with under Game Objects or Monster Graphic Banks/Monsters. Each 8×8 pixel tile can have one palette. It’s also important to remember that what colors are actually shown during gameplay will depend on what Monster Palette is selected for the screen.
Pixel Editor Toolbar
– Load and Save Buttons
The first three buttons of the toolbar are Load, Save and Save As. These buttons load and save images (not NESmaker projects). The default file type used with NESmaker is .bmp . You can open any BMP file made in another application in the Pixel Editor, but we need to keep in mind the NES color limitations. So if you open a picture made with for example Photoshop, then you most likely need to manually convert the colors to fit the NES standard.
– Color Translation Buttons
The next three buttons have to do with colors. The first one (with tiny squares in black, red, green and blue) will display the graphics in the Pixel Editor in the default “working colors”. In other words these are not the colors that will be shown in the game. The next button (with tiny squares in black, yellow, orange and purple) is called “Enable Palette Translation”. This button will display the graphics with the selected monster palettes. The third color button is called “Show Bad Pixels”. This should only be used if you open a graphic file that was made in another application, like for example Photoshop. The point of this button is to show what pixels needs to be colored in one of the four NESmaker colors. When selecting this button you will only see the so-called “bad pixels”. The pixels that already have one of the four NESmaker colors will be black.
– NESmaker Color Buttons
The next four buttons are the four colors you can select when drawing in the Pixel Editor. These will be displayed in BLACK, RED, GREEN and BLUE, or if you have selected the Palette Translation button, these buttons will show the colors of the currently selected Monster Palette. You can use these buttons to select a color to draw with, or you can just click the colors from the Monster Palette on the left.
– Adjustment Buttons
The next three buttons will assist you with adjusting or fine tuning the Pixel Editor. The first of these three is the Show Grid button. This button will display a pixel grid. This can be useful when working with dark colors on the black background or if for some other reason it is hard to see where the pixels are. The next button is the Force Square Aspect Ratio button. This is mostly used if you resize the NESmaker window and the tiles in the Pixel Editor gets stretched out. By clicking this button the tiles will be square again. The last button in this group is labeled “Show border with actual colors”. This will display a border around the colors in the Monster Palettes on the left.
– Pixel Group Buttons
The Pixel Group buttons will display a grid of either 8×8 pixels or 16×16 pixels, or you can even have both selected. The general rule is to use the 8×8 button when drawing sprites and the 16×16 button when drawing background tiles. This will make sure your graphics are perfectly aligned the way NESmaker expects them to be, so you won’t have any issues with misaligned graphics when setting up game objects, monsters or background tiles.
– Paint Tool Buttons
These buttons are the ones you will use the most when making graphics. The first button is the pencil, which will allow you to draw on the graphic sheet (with the selected color). The next button is the Selection button. This will allow you to select an area that you want to copy. The button after that is the Select Tile button. This will also allow you to select an area to copy graphics, but when this is selected you can only select whole tiles, unlike the previous button which allows free selection. The Select Tile button will select 8×8 tiles if that button is selected from the Pixel Group buttons, or 16×16 tiles if that button is selected. If both the 8×8 and 16×16 grid buttons are selected, then the Select Tile button will select from an 8×8 grid. The next button is the Rectangle Tool. This button will draw filled rectangles with the color you have selected. Then we have the Line Tool button. This button draw a line from point A to point B with the selected color. Next is the Global Color Change button. This will change ALL pixels with the same color as the one you click on. Finally there’s the Tile Fill button. This button fills an 8×8 tile on the graphic sheet with the selected color. If you have an 8×8 tile with several colors it will change all the pixels in that 8×8 tile with the same color as the pixel you click on into this new color.
– Zoom Buttons
These buttons will act just like you expect. The magnifier with a + will zoom in on the graphic sheet, and the magnifier with a – will zoom out.
– Pixel Information
This last area will display color information about the pixel your mouse pointer is currently hovering over. The color information is shown in RGB values. This area also shows the current pixel position of the mouse pointer.
Tabs
You can have multiple tabs open in the Pixel Editor. This is very useful when working on several different graphic sheets. To add a new tab you just click Pixel Editor in the top Menu Bar and select Add Tab. Likewise you can remove tabs from there as well. Switching between tabs works just like you expect, by clicking on the different tabs.
How To Get Started
The first time you open the Pixel Editor in NESmaker it might not be obvious what you should do first. There are no open graphic sheets you can start drawing on and there is no obvious “Create New File” button. So how do you start? Well, it’s really up to you. You have to decide if you want to start making background graphics or sprite graphics first. The good news is that all graphic sheets are per-made in your project. So you don’t have to create a blank BMP file and import it. Let’s take a look at some of the most common graphic sheets you will be using.
When you create a new NESmaker project a new folder will be created under GraphicAssets in the main NESmaker folder. It will look something like this:
C:\NESmaker_4_5_x\GraphicAssets\Test
In this example “Test” is the name I gave to the new NESmaker project. A lot of blank (black) BMP files will be copied in there. These are your graphic sheets. They have different sizes that are adapted to NESmaker, so do not change the canvas size of these files.
The main files you should start with (as a beginner) are these three files:
– BckCHR_00.bmp
– GameObjectTiles.bmp
– Monster_0_00.bmp
BckCHR_00.bmp is the first graphic sheet for background graphics. Open this up in the Pixel Editor to start making tile graphics, or in other words, background graphics. Remember to enable the 16×16 button to make it easier to see how big you can make each tile graphic.
GameObjectTiles.bmp is the graphic sheet for all Game Objects. That includes the player object, player projectiles, pickup objects etc. When opening this in the Pixel Editor you should enable the 8×8 button to make sure you your sprite tiles are the correct size. You can of course make bigger sprites than just an 8×8 pixel tile, but all sprites (even really big ones) are made up of these smaller 8×8 tiles. It’s probably good to keep that in mind when you start setting up graphics for the player and the other objects for your game.
Monster_0_00.bmp is the first graphic sheet for monster objects. Since this sheet is also made for sprite graphics it’s recommended to enable the 8×8 grid button. The graphics you draw here is what will be available in Tiles-0 when setting up a new monster object.
At this point you should experiment with the different palettes to get comfortable with how they work. Save your graphics (with the Save button in the Pixel Editor), and you are ready to start making screens with backgrounds, as well as setting up Game Objects and Monster Objects.
There are many more graphic sheets, but there is one graphic sheet that is very important to you if you plan on making a game with text, or use a module that has a static HUD (Adventure module, Arcade Platformer module, Maze module). The name of the file is:
Hud.bmp
If you leave this file blank you can’t display any text in text boxes or symbols in the HUD. In the main GraphicAssets folder (for example C:\NESmaker_4_5_x\GraphicAssets) there is a pre-made HUD file. You can open that in the Pixel Editor and click the Save As button, choose the Hud.bmp file in the GraphicAssets folder for your project (for example C:\NESmaker_4_5_x\GraphicAssets\Test). Then overwrite the blank file (Hud.bmp) that was created when you started the new project in NESmaker. You will now be able to display text and set up the static HUD.
Keyboard Shortcuts
There are many features in NESmaker that rely on pressing different keys on the keyboard. Here we will take a quick look at keyboard shortcuts for the Pixel Editor.
Flipping an image
You can flip graphics in the Pixel Editor either horizontally or vertically. This is done by selecting the part of the image you want to flip and then press the H key on the keyboard to flip it horizontally or the V key to flip it vertically.
Click the select tool. You can choose either the Select region button or the Select tiles button for this. See the section about Paint Tool Buttons further up on this page to see more information about how these work. In this example I have chosen the Select tile button.
Select the part of the image you want to flip.
Press the H key on the keyboard to flip the image horizontally.
Press the V key on the keyboard to flip the image vertically.
Copy and Paste
Just like other paint applications, NESmaker allows you to copy and paste graphics in the Pixel Editor. To do this you use the standard shortcut keys for this in Microsoft Windows. The keys for copy is CTRL and C. The keys for paste is CTRL and V. To align the selection you are pasting in to the top left of the grid lines you must hold down the SHIFT key on the keyboard while pressing CTRL and V. If you don’t use the SHIFT key the selection will be pasted in at the location of the mouse cursor.
Select the image you want to copy.
Click CTRL and C to copy.
Choose where you want to paste in the selection. Remember to hold down the SHIFT key if you want your selection to be aligned to the top left of the grid the mouse pointer is inside of.
Click CTRL and V to paste in the image.
Open and Save
CTRL and O to open an image does NOT work in the Pixel Editor.
CTRL and S to save an image does NOT work in the Pixel Editor.