Making Map Tilesets

These tutorials will guide you through making different types of custom tilesets for NewerSMBW's map making tool, Koopatlas. The three types of tilesets we will be looking at are Terrain Tilesets, 'Water's Edge' Tilesets (bottom terrain tiles that fade out to simulate it going into the water), and finally '''Path/Misc. Tilesets''', which are everything else you may want to make!

NOTE: At the bottom of the page, you will find the tutorial for importing the tilesets into Koopatlas and NewerSMBW, since it's the final step for all the tutorials here.

This tutorial is intended to be done with Adobe Photoshop, however, other image editing software can be used, though you will need to manually do the curved terrain yourself.

= Guidelines for Tileset Images =


 * Tileset images must be a size of 768x384 pixels. Koopuzzle will only allow images of those dimensions.
 * They should align to the tile grid. Your tiles will tile ugly and look bad if they aren't properly aligned to the grid.

= Making Terrain Tilesets = This guides you through making a regular terrain tileset, which are used in most normal cases.

Requirements Before Starting

 * Pre-made template for general terrain tilesets, created by Tempus. You can download it here


 * Adobe Photoshop


 * Puzzle Tileset Editor

Step One: Getting our Tileset Image
The tileset we'll be making will be based off of NSMBW's desert tileset. Firstly open Puzzle. I'd recommend using either the Updated fork, or the Next fork, both will work for what we're doing. Now open the tileset, located in your NSMBW dump's   folder. Then, click on, and save the tileset image somewhere on your computer.



Step Two: Tile Setup
Now that we've exported the tileset image, we can open it in Photoshop. Once it's opened, we can go and open the PSD in the tileset template we downloaded earlier. You will want to open the file named, as that is what we'll be editing. Once opened, you will see this file open in the Photoshop Canvas:



The text on the image is an instruction layer, you can remove it by going over to the layer list, and unticking the folder named. What we will now see is a bunch of ground tiles, and flat outer tiles, styled like the NSMBW jungle tileset. Now what we're going to do is switch back over to our exported desert tileset image, and find the flat ground tiles. In the image below, they are selected in Photoshop, so you can find them easily.

I'd recommend enabling a grid for this next part by going to .



Once you select those tiles, you can press  to copy it, then press   to paste it in the image, on a new layer. The new layer with the copied tiles will be overtop the original layer, so hover over the tiles, select the Move tool, and move them down to the empty space of the tileset image. This will allow us to make a change to the tiles that is needed for the tileset template. You will now want to select the ground fill tiles, which are the middle row of tiles in what we just copied. Then you want to press  to copy, and then press   to paste the new tiles. The new tiles will be on top of the tiles we copied, on layer 3. Before we do anything to the new row of tiles, we need to select the bottom row of tiles, select the Move tool, and move them down one tile, so there will be an empty tile space between the middle tiles and the bottom tiles. Now, move the new middle tiles on layer 3 down to that empty space. You do not need to use the Select tool, as we can just move the entire layer 3, since it is just those tiles. After all this, you should have something similar to the image below. As you can see, there are now two rows of middle tiles.



Step Three: Copying the Four Tile Rows (Flat Outer Ground Tiles)
Now that you have your sand tiles editing like above, it's time to move them over to the tileset template. Before we copy though, we need to merge the layers with the tiles (layers 2 and 3, assuming you copied the first three rows of tiles instead of moving them). both of them, then click  (Right-Mouse-Button), and press. Now, select all four rows of tiles, and press  to copy them, then go to the Tileset Template file and press   to paste it in the image, on a new layer (should be layer 51 if no modifications have been made to the file yet). Then, move the copied tiles overtop the flat forest tileset textures, with the blue, yellow, and green stars. Your tileset template image should look like this now:



You can turn off the grid if you wish, it won't serve any use from here on out.

Step Four: Making the Inner Ground Tiles
Now that we've copied over the flat outer terrain, we can make the inner ground tiles, which is the ground tiles you walk on, like grass. We'll be recoloring the current grass to be more sand-like, instead of making a custom texture, however this guide can still be used for custom textures. The first thing we're going to do is scroll down the Layers list, and select the layer named. Once you've selected on that layer, select on the Select tool, and use it to select the large rectangle of grass at the bottom of the file. The image below shows what tiles we'll be selecting. Make sure you only select the pixels those tiles use, and none of the pixels on the surrounding tiles.

Note: ''In the file named, you can find a sand top texture named. If you wish to use that, you can, instead of a grass recolor like I'll be doing.''



Now that we've selected those tiles, press  to copy the tiles. Now, we will want to create a new Photoshop Document by going to, or by pressing. The new document will need a size of 576x576 pixels. The other options can stay as their default. When created, paste the copied tiles into it, and drag it up to the top-left corner. Now, continue pasting the same set of tiles into the image till you fill up the entire image size. If you selected the tiles correctly, and placed them correctly in the new document, you will be able to perfectly fit 32 of the copied tiles into the document before it is filled. Your document should look like this now:



Now, we're going to recolor it to look more like sand and less like, well, grass. Firstly what you want to do is select layer 1, then scroll up to the top layer, and select it while holding. This should select every layer from layer 1 to 32. Then  on any layer and press , to merge all the layers into one. With the single layer selected, go to, or simply press. This will open a window like this:

We're going to base our color off of the sand on the top of the tiles in the  tileset. To save you the time of selecting the color of the sand with the Eyedropper tool, here's the color code of the sand we'll be using:. Click on the foreground color picker, at the bottom of the toolbar, and set the color code to be that. It should be this color now. If not, change it to be.



Now, with that color selected, we're going to go back into the Hue/Saturation window by pressing. Then we will want to change the color to these values:



Press OK, then go to, and name your pattern whatever you wish. Now we're going to go back to the tileset template document. While the layer  is selected, click on , then in the new window that opens, click the dropdown named  , and select the pattern you just made. Click OK, and the grass tiles will be recolored.

Step Five: Making the Slanted & Curved Outer Ground Tiles
Now we'll be making the slanted and curved outer ground tiles, which are the light and dark shadows filling most of the document. Thankfully, this otherwise complex process has been simplified by a Photoshop Action included with the tileset template download. Simply open the  panel by going to , or by pressing. Now, open Windows File Explorer (or whatever file viewer your OS has) and navigate to where you downloaded the tileset template. Once you're there, double-click on the Photoshop Action file named, and it will go back into Photoshop with the Actions pane open on the right side of the screen.



Click on the one named, near the bottom, but DO NOT press the play button at the bottom of the window yet. There are two more things you need to do before you can press it.


 * Firstly, find the layer with the stars (at the top, named ), and untick it so it will be hidden.


 * Secondly, make sure the folder in the Layer listing named  is opened (arrow next to it should be facing down), or the action will not work. The folder is below the   layer we edited previously.

Now that those two things are done, we can press the play button. Once the action is complete, the template document should look like the image below. If it doesn't, retrace these steps to see what went wrong.



Now it's time to actually add this tileset into Koopatlas! Go to, and save your tileset image somewhere easy to remember on your device. After this, go to this section on this article to add it to Koopatlas and NewerSMBW!

= Making "Water's Edge" Tilesets = This guides you through making a Water's Edge tileset, which simulates the tiles fading into the background of the map. This will require the above tutorial to be done, but if you don't have the PSD still open, you can quickly do Steps Two and Five of the previous tutorial to be able do this tutorial.

Requirements Before Starting

 * Pre-made template for Water's Edge tilesets, created by Tempus. You can download it here


 * Adobe Photoshop


 * Puzzle Tileset Editor (only if Making Terrain Tilesets tutorial hasn't been done yet)


 * Most of Making Map Tilesets tutorial complete
 * The flat outer ground tiles and curved & slanted outer ground tiles need to be made, however, the inner ground isn't needed for this.

Step One: Setup
Firstly, make sure you still have your PSD of the edited general terrain tileset opened. If not, you can use the exported image, which will be fine, but it's recommended to use the PSD version. Once you have that open, make sure the flat terrain tiles and sloped & curved terrain tiles are made, the grass doesn't matter for this. As you can see in the image below, the outer terrain tiles have been made, however, the grass has not been done.



Step Two: Copying Tiles to the Water's Edge Template
To start off, we'll be opening the tileset template. It is in the same location as the other template, as is named. When you open it, you will see the Water's Edge tiles for Sakura Village and Freezeflame Glacier.



The first thing we'll do to the file is hide the Freezeflame Glacier tiles. Untick the folder named. Now, go back to the Regular Tileset Template, and in the  folder, select , and copy it overtop the tiles it fits here, then erase the excess that isn't necessary. It should look like the below.



Continue doing the same thing with the other layers till you're done and every one has been covered over with the sand textures. In the end, it will look something like this.



However we're not done yet. We still need to add the lighting to them so they fit with the other tiles. Go in the tileset template, and copy over the shadows then

Now that this is done, it's time to add the tileset into Koopatlas. Go to, and save your tileset image somewhere easy to remember on your device. After this, go to this section on this article to add it to Koopatlas and then NewerSMBW!

= Making Path/Misc. Tilesets = This guides you through making a path/misc. tileset, which can be used for paths, and other miscellaneous graphics. For now we will only focus on making a path that will fit with our desert tilesets. For this guide, we'll be making a path tileset to go alongside our desert tilesets. However, we will not be making new path tilesets, instead we will be editing path textures ripped out of NSMBW's World 2 archive.

Requirements Before Starting

 * BrawlBox/BrawlCrate


 * Adobe Photoshop
 * NSMBW File Dump

Step One: Exporting our Textures
We will begin by opening the file  file in either your choice of BrawlBox or BrawlCrate. The file can be found in the  folder of the NSMBW filesystem. Once it is open, you should see something like this.



Now, click on the + next to the  folder to open it, and it will show the files it contains. We want to open the file in this folder named, then open the   folder that appears. You will be presented with a long list of textures.



Now we'll want to scroll down the list of textures till we find one named. Once we find that, right-click on it, and click on the  option, then save the image somewhere on your device that you'll remember. Now, we'll want to do that again for a different texture. This next one is the second-to-last on the list, and is named.

Step Two: Editing our Textures in Photoshop
Now that we've exported out path textures, we'll want to edit them to be more versatile. You can select parts of the existing tiles, then copy-paste them, and use  to rotate them to different directions. While I won't go in-depth on this, as it's quite complex to do, I will share a completed image that has been edited to include more pathways. Once our tileset texture has been made in Photoshop, we can move on to adding it in-game, which can be found below.

If you want to make more changes to this image, feel free too, it isn't perfect.

= Making & Using the Tilesets = This section guides you through making the tileset in Koopuzzle, adding it into Koopatlas, and finally, adding it into NewerSMBW!

Requirements Before Starting
Koopuzzle

Koopatlas

NewerSMBW (Also need BrawlBox/BrawlCrate)

Making the Tilesets in Koopuzzle
Koopuzzle is the Koopatlas version of the Puzzle Tileset Editor. We can use this tool to add our custom tilesets into the game! When you first open Koopuzzle, you will see this mostly blank screen with nothing but empty panes on it.



Now, go to, and select the tileset image you want to make first. I'll be doing the sand terrain one we made at the start of this tutorial, but you can use a different tileset image if you wish. Once the sand tileset is opened, it should look something like this.



Now, you're going to want to start creating your objects. Below is a copy of the Interface Guide section of the Koopuzzle article. If you're confused on how an object should be, take a look at a NewerSMBW map to see how it's done there! When you make an object, it will appear in the Object List. Alongside the object number, an image of that object will be in an entry. The  and   buttons will add a new object, and remove selected objects. The dropdown on the left is the settings for how the object will repeat. The options are as follows:


 * Repeat - Repeats the object, with no fancy settings.
 * Stretch Center - Stretches the center of the object.
 * Stretch X - Stretches the X-axis of the object only.
 * Stretch Y - Stretches the Y-axis of the object only.
 * Repeat Bottom - Repeats the bottom tile row of the object.
 * Repeat Top - Repeats the top tile row of the object.
 * Repeat Left - Repeats the left column of the object.
 * Repeat Right - Repeats the right column of the object.
 * Upward Slope - An upward slope. Not really sure what this does.
 * Downward Slope - A downward slope. Not sure what this does either.

The  and   buttons on the bottom add a tile row to the object, while the ones on the right side add a tile column.

The Object Groups pane can be used to organize your objects. There are two buttons at the bottom that add or remove a group. You can have as many groups as you want, though it's best to keep enough to have them organized, but not too little to where everything is scattered. You can take a look at some of the NewerSMBW tilesets in the Koopatlas folder to get an idea of how they're organized. Once you've made all your objects (for reference, should be near or above 100 on a regular terrain tileset), you can begin to categorize them into groups. When you create a group, it will appear at the bottom of the list of objects in the  pane. You can name the group anything you want, but I'd recommend you keep it short and simple. Here's an example of my tileset organized into groups.



Now that your tiles are organized, go to  (or   if you're using an existing tileset as a base), to save your tileset somewhere on your device that you'll remember. It does not need to have a PaX name in it, just name it something simple, like  for example. Make the other two tilesets, and we can move on to importing them into Koopatlas.

Adding the Tilesets into Koopatlas
There are two ways to do this, either the manual way, or the in Koopatlas way. Both take relatively the same amount of time. Be aware that name of the tileset file is the name it will have in the Koopatlas tileset list.

 Manual Method 

Go to the location on your device where you saved your tileset files. Copy all three of them, and navigate to the  folder in Koopatlas, then paste them there.

 Koopatlas Method 

In Koopatlas, go to, or press  , then in the window that opens, navigate to the location on your device where you saved the tilesets, and select them. (On the latest commit of Koopatlas Updated, this method will almost always crash the editor, but the tileset will still be copied over)

The tilesets will now be available for use in Koopatlas!

Adding the Tilesets into NewerSMBW
NewerSMBW doesn't use the tileset archive files Koopatlas and Koopuzzle use. Instead, it uses binary files (*.bin) to load tilesets in-game. However, you cannot simply change the tileset file's extension to, you must extract a file out of the tileset file.

Open your tileset file with BrawlBox or BrawlCrate, and locate the file named, then export it from the file.

When exporting, or after it's exported, rename the file to be the same as the tileset archive. So, if the tileset file was named, then rename the binary file to be   as well. It must be the same name or else Newer will fail to recognize the tileset. Export the other two binary files from the tilesets. You should have three  files now.



Once that's done, copy them over to NewerSMBW's  folder. If you wish, you can LZ compress the files. With that, you're done! Your tilesets have been properly imported in-game. If you have issues with the tileset crashing the game, or rendering incorrectly, try LZ compressing it with this tool.