Overworld and Underworld
Making a New Game Screen
The Screen Map
Tileset
Tile Layout
Drawing a Screen With Tiles
Using Paths
Keyboard Shortcuts
After you have created some tile graphics and set up a palette or two, you can start to design the screens (levels) of the game. This is done by using the Map Editor (Game Map).
Overworld and Underworld
There are two different game maps in NESmaker. One is called Overworld and the other is called Underworld. They are basically the same thing, a set of 256 screens. So in total you can have 512 different screens in your game. The names of the different maps have no meaning other than to have a way of separating them from each other (for example when discussing different maps on the NESmaker forum). It is worth noting that the handling of screens on the Underworld map is slightly different from the Overworld map in the NESmaker code base. Unfortunately there seems to be a bug that makes scrolling with screens on the Underworld map not work by default. So screens on the Underworld map are best utilized by setting them up as start screens, cutscenes, single screen levels, menus etc. In other words, screens that don’t scroll. There is however a post on the NESmaker forum that talks about a fix for this. You might also encounter other minor issues when making gameplay screens on the Underworld map. The way you move between the two maps in the NESmaker interface is by clicking “Underworld” or “Overworld” in the Context Menu on the left side (at the top of the list).
Making a New Game Screen
To start making a new game screen you just double click on any of the green rectangles in the Game Map (these green rectangles are the screens in your game). The NESmaker interface will change the Game Map area into a Screen Map area. That means you are now working on a single screen in your game. One of the screens on the Game Map must be set up as the “start screen”, or in other words the first screen of your game. This is the screen the game will boot into. This particular screen is shown on the Game Map with the face of a little character (from the game Mystic Searches). You can either right click on a screen on the Game Map and choose “Set Starting Screen”, or you can right click on the screen you’re working on in the Screen Map and choose “Place Player”. By choosing Place Player you both set the current screen as a starting screen and set the coordinates the player should spawn into. If you click Set Starting Screen on the Game Map, the player coordinates will not be set (changed).
The Screen Map
This is the part of NESmaker where you design your screens (levels). This assumes that you have already made some background (tile) graphics and maybe set up at least one background palette. Setting up your own palette is not required, but it is highly recommended in order to get the colors you want. Changing colors of background palettes can be done directly from the Screen Map section of NESmaker. Just double click on a color on the palette (on the left side) and choose the color you want. At any time you can go back to the Game Map by pressing the Overworld button on the top (above the Screen Map). If you are making screens on the Underworld map, this button will be labeled Underworld.
Tileset
When drawing our background graphics on the screen we use tiles. These are the square graphic blocks you made in the Pixel Editor. When these tile graphics are grouped together we call it a Tileset. NESmaker has three different tilesets we can use for background graphics. That means the Tileset will differ in size (how many tiles are included). It is important to know that these are just graphics. So when placing these tile graphics on the screen they will have absolutely no collision for objects (until we somehow apply tile collision). We will come back to tile collisions later in this section. Tilesets for normal background graphics in NESmaker will have 8 (16×16 pixel) tiles across, but the number of tile rows are different for each type of Tileset. These are the three different Tilesets:
Background
8 tiles across and 3 tiles down.
Tile size: 16×16 pixels
Example file name: BckCHR_00.bmp
The Background Tileset is great for making big background graphics that cover more than one tile. You could for example draw a mountain that covers 9 tiles. Personally I use this tileset to make level specific background graphics like a forest landscape or a city. But there’s nothing wrong with using this tileset to make normal tiles the objects can interact with, like for example floor tiles, hurt tiles, ladders, spikes etc.
Background Screen Specific
8 tiles across and 1 tile down.
Tile size: 16×16 pixels
Example file name: BckSSChr00.bmp
The Background Screen Specific tileset is perfect for making tiles that will repeat on most levels of your game. Let’s say you draw a standard floor tile that objects can walk on. That tile will probably be used for many (or maybe all) the gameplay screens in your game. A better example would probably be graphics for spikes or ladders. Unless you want those graphics to look different for each level, then putting them in a Background Screen Specific tileset is a good idea, since you can re-use that tileset for every screen while using the normal Background tileset to create unique graphics for each level.
Path
Path tiles are very special and require a bit of setup. Using paths is covered in a section further below.
16 tiles across and 8 tiles down.
Tile size: 8×8 pixels
Example file name: PathTiles00.bmp
In addition to these three tilesets we also have a special one just for text and HUD graphics (only used for static HUDs). This one is set up with 8×8 pixel tiles instead of 16×16 pixel tiles (like we use on normal background tiles). This tileset is not used for manually drawing graphics on the screen. It is only used directly by the NESmaker code when drawing text boxes or displaying a static HUD.
HUD
16 tiles across and 4 tile down.
Tile size: 8×8 pixels
File name: Hud.bmp
Tile Layout
Before you begin designing your screen we should take a look at something called Tile Layout. This will affect what tilesets you have available to draw your screens with. You can choose between 8 different combinations of tilesets for your screen. To select what tileset to use for the current screen, click the Tile Layout button (as shown in the picture above). You will then be presented with a window where you can select a tileset combination.
PS! If you are very eager to get started making your first test game, then you can skip this. The Normal Tile Layout works just fine.
The 8 choices are different combinations of the tilesets listed further up on this page. By default NESmaker uses the Normal tileset layout. Like we can see in the picture above, this includes the following tilesets: Main (Background), Screen (Background Screen Specific) and Path. This choice also includes the HUD tileset.
Here are the 8 different tileset combinations:
Normal
1 Background Tileset
1 Background Screen Specific Tileset
1 Path Tileset
HUD Tileset
The normal Tile Layout works fine for most purposes because it includes a little bit of everything. However, if you for example don’t use Paths in your game, then that space is wasted and could be used by another tileset like Background Screen Specific.
Double Main
2 Background Tileset
HUD Tileset
If you want to make a cutscene or a fancy opening screen for your game, then this is probably your best choice for Tile Layout. You can for example open a file like BckCHR_00.bmp in Microsoft Paint and double the size of the canvas. Store it as a new BMP file (for example MyPainting.bmp). Then you make a drawing (using only three colors in addition to the background color). Save the file and open it in NESmakers Pixel Editor. Change the colors by using the Global Color Change tool to make sure your colors are in line with NESmakers color requirements. By using the Tile selection tool you copy the first three rows and paste them into BckCHR_00.bmp. Then copy the bottom three rows and paste them into BckCHR_01.bmp. This will very easily let you create big pictures on a screen in the Screen Map editor.
No Path
1 Background Tileset
3 Background Screen Specific Tileset
HUD
This is generally a great option if you are a heavy user of Background Screen Specific tilesets. Here you can for example choose a main background tileset for visual background graphics and mix that together with the Screen Specific tilesets for floor tiles, spikes, ladders and so on. Choosing this option also allows you to have text boxes in your game since we also have access to the HUD tileset (like all tilesets which include the HUD does).
Half Path
1 Background Tileset
2 Background Screen Specific Tileset
1 Path Tileset
HUD
Normal NO HUD
1 Background Tileset
3 Background Screen Specific Tileset
1 Path Tileset
Double Main NO HUD
2 Background Tileset
2 Background Screen Specific Tileset
No Path NO HUD
1 Background Tileset
5 Background Screen Specific Tileset
Half Path NO HUD
1 Background Tileset
4 Background Screen Specific Tileset
1 Path Tileset
Drawing a Screen with Tiles
Drawing a screen is as easy as 1 – 2 – 3. Follow these simple steps:
- Select a graphic tile from the little tileset window.
- Select a subpalette to get the colors you want for this tile.
- Go over to the Screen Map (on the right) and start drawing. You can either click to place a tile or you can hold down the left mouse button and draw by dragging the mouse around.
PS! By default the screen will be filled with whatever the top left tile graphic is in your tileset.
If you for some reason want another subpalette for a tile (or maybe a row of tiles) that can easily be changed at any time by using the keyboard shortcuts.
Tile Collisions
By default the tiles you draw with on the screen are only graphics. They have no collision of any kind. You can however set up something called Assets that will allow you to paint with both graphics and corresponding collisions, but that is covered in another section.
Tile collision is what happens when an object collides with a tile. We can set up different types of collision and the different modules in NESmaker have different sets of tile collisions. Basically what happens is that a piece of code is run when an object collides with the tile. What piece of code is run depends on the Tile Type (tile collision) we choose for that tile. Some Tile Types are standard for all modules, like for example the Solid tile which will make an object stop when it collides with it. Other modules like for example the LR Platformer has a Tile Type called Ladder which obviously will let the player climb up or down when colliding with that tile. Unfortunately some Tile Types that are listed in the drop-down menu in NESmaker will not do anything because they don’t have any code associated with them. An example of that is the Auto Text tile in the MetroVania module. Choosing a tile type is easily done by selecting it from the drop-down list on the left. With that tile type selected you can click (or hold down for multiple tiles) the 0 (zero) key on the keyboard and draw where you want that specific collision.
To make it easier for yourself you can enable the Show Collision button by clicking the button that says Collision.
You will now be able to see the different tile numbers (collision types) on the screen. Click the Collision button again to disable this view.
It is a good idea to experiment a little with how the different tile types work. Here are some examples of the standard tile types that you will encounter in several of the NESmaker modules:
- NULL – Does nothing / No collision (use this to “erase” other collisions)
- Solid – Stops the object if the object is set up with Stop on Solid Collisions. Objects can have different reactions when colliding with a solid tile based on what’s selected in the Object Details of that specific object.
- Warp – This will make the game warp to another screen on the map upon collision. What screen will depend on the setup for this particular screen (every screen has a warp out screen setting).
- Jump Through Platform – The player can jump up through the tile from the bottom, but he will stop if he’s landing on it (when falling from above the tile). This tile will not stop the player if he walks through it from either side (left or right).
A good example of where to start setting up tile collisions in a platform game would be to make the entire row of floor tiles solid. If you don’t, then both the player and the enemies will fall off the screen and go to the screen below.
Using Paths
Paths is a very impressive function in NESmaker that allows you to draw for example a path of dirt or a river or whatever you want, just by dragging the mouse and drawing the shape you want. NESmaker automatically places the correct tiles (corners or straight paths) along the way, so whatever you’re making looks like a coherent shape. Unfortunately this feature is poorly documented and does not work out of the box in NESmaker 4.5.9.
To enable the use of Paths you must first set it up in Script Settings.
- Click “Project Settings”
- In the Project Settins window, go to “Script Settings”
- Scroll down to the bottom of the list and select “Handle Path Data”
- In the list to the right (Visible .asm files) double click “<DIR> BASE_4_5”. Then double click “<DIR> Game”. Double click “<DIR> Subroutines”. Then you must look through the list that appears and find the file called “doGetPathInfo.asm”. Double click the line with that file (BASE_4_5\Game\Subroutines\doGetPathInfo.asm) and you’re done. Now you can close the Project Settings window.
In the Pixel Editor you must open a file called PathTiles00.bmp . There are three files for PathTiles. We will only use the first one in this example. Every row (of 8×8 pixel tiles) will be shapes for a specific path. Some of the tiles are used for corners and edges, and some are used to give the path tile graphics some variety.
Set the Pixel Editor to display a grid of 8×8 tiles (click the button with the number 8). Now you can draw the different corners and edges of the Path tiles. From one of the graphic files in the TutorialAssets folder, more specifically this folder in the NESmaker folder:
…\NESmaker_4_5_x\TutorialAssets\4_5_x_BetaTutorialAssets\Graphics\CommunityGraphicAssets\PreHistory
we can see how we should draw the shapes. See the picture above for reference. So we are not drawing complete 16×16 pixel tiles like we normally do when making background graphics. When using Paths, those background tiles are automatically generated by NESmaker when we draw the path.
You can make four different path shapes. Every row will be a different path.
When you are done drawing the different corners and edge shapes for your path, save the file and go to All Graphics – Path Info in the Context Menu on the left. Now you can see what the path shapes will look like in the game. You can see all four path shapes in the section on the right. These four types are called a Path Group. Here you can also set up collision and the palette for the paths. Give the path group a name and click Save.
Go to the screen where you want to use Paths and click Screen Info. In the Screen Info window you must now select the path name of the path you just created (from the drop-down menu called Path Group). Select the path and click OK.
Now you can start drawing the paths by using one of these four keys: 1, 2, 3 or 4.
Just hold down one of these keys and drag the mouse pointer to draw your path. As you can see, each key corresponds to one of the different paths in the path group.
Keyboard Shortcuts
NESmaker has a lot of shortcut keys on the keyboard. Many of these are used when designing a game screen. Some have to do with palette colors and others have to do with tile collisions. Let’s look at what shortcut keys we have available.
Changing Subpalette For a Tile
To change the subpalette for a specific tile (or several tiles) move the mouse pointer to the tile/tiles you want to change. Then press (or hold down for multiple tiles) any of these four keys on the keyboard. Each of these keys are assigned to a certain subpalette (on the selected main Palette) on this screen.
Painting with a solid color
This is a little trick that requires us to change the Hud.bmp file in the Pixel Editor first. We need to make sure that the four 8×8 pixel tiles in the lower right corner of the tileset are set up with its own color from the subpalette.
Make sure your Hud.bmp file is set up according to the picture above and save the file.
Now we can draw with any solid color from the subpalette on our Screen Map without using tile graphics for tiles that only have a single color and no graphics. Select what subpalette you want to use from the palette on the left.
Press (or hold down for multiple tiles) one of the following keys to draw with a specific color from the subpalette.
Click or hold down the left mouse button and draw with a color according to the picture above. 6 is the first color (usually black).
Painting With Tile Collision
Painting with a Tile Type (tile collision) is done by selecting it from the drop-down list on the left. With that tile type selected you can click (or hold down for multiple tiles) the 0 (zero) key on the keyboard and draw where you want that specific collision.
Drawing Paths
Just hold down one of these keys and drag the mouse pointer to draw your path. Each key corresponds to one of the different paths in the path group.
“Erasing” / Drawing With the “Default Tile“
You can draw with the top left tile in your tileset to “erase” tiles on the screen. In this case I’m calling it erase since in a lot of cases the top left tile (in the tileset) will be the default background tile that makes up most of the screen.
Just hold down the 5 key on your keyboard and start drawing with the mouse.
