kringlur
Velkominn í heim POKéMON!
- 90
- Posts
- 13
- Years
- Age 32
- Uppsala, Sweden
- Seen Jul 24, 2014
How to make a tileset and insert tiles from RBY to Fire Red. Can easily be used for Gold/Silver/whatever too.
You'll need:
Photoshop
Advance Map
Paint
If you have questions or improvements, please let me know! After I perfect my tilesets I'll post them here for download so no one else has to go through all the work.
You'll need:
Photoshop
Advance Map
Paint
Spoiler:
First, get an image of what you want to make into tiles. I used some images from here and the first one from this page (the second from that page turned out faulty).
Open them in Photoshop. Enable grids (in CS5 on the navigational bar, view > extras). Then open grid preferences:
Now, look at this. This is one Fire Red tile in Advance Map's tile settings (optional: open Advance Map, click on the purple puzzle piece). However, Advance Map doesn't read the full tile in this viewer - it reads it in fourths.
regular:
one-fourth:
three-fourths:
When you put those four parts together then save it to the "blocks", that's when all four pieces turn into one tile when you want to map with it. This same tile settings area also has a rotate function for fourths of tiles, so you only need to copy unique fourths of tiles and can rotate or flip them to create similar tiles if needed.
Back to Photoshop: Adjust the grid size so that each tile is cut into fourths, or you could even do a fourth of that (make sure the screenshot/tileset image you need is cropped perfectly, or the gridlines won't match up to the tile edges). I needed 32pixels with 2 or 4 subdivisions.
Go to View > Snap to > Guides. This ensures that when you're selecting/pasting a tile, it's much easier to get it perfectly on the square.
Now go to Advance Map > From header > PALLET TOWN (3.0) and double-click so that map section opens. Then click on the purple puzzle piece above. Because we want to replace all the tiles from Fire Red, make sure palette zero is selected in the palette chooser box (you should see recognizable tiles from Fire Red in their normal colours). Then go to picture > save tileset 1 and save as a .dib file. Both that and a .pal (palette) file should save wherever you chose the tileset to save.
Check the dimensions of the .dib file, then make a blank canvas in Photoshop with the same dimensions. Mine was 128x320 pixels. Make sure the grid shows up in the new canvas too. Now, just copy the tiles or fourths of tiles you want (I used fourths of tiles because all my tiles wouldn't fit on one file, more on what to do then later) into the new canvas.
(I got a friend to do this for me as I don't have Paint, so no screencaps)
After that is done, make note of the colours the original Red/Blue/Yellow tiles are. If your image quality sucks so there's no set colour for each of them, just choose which looks most similar to the original game. For me this was:
Black - 000000
White - f8f8f8
Light grey - a8a8a8
Dark grey - 606060
Open the .dib file in Paint and make note of four random colours that are in the image, the same way you did above.
Copy your entire "new canvas", with all the tiles pasted onto it, over top of the Fire Red tiles on the .dib file in Paint. It should be exactly the same size in width, and possibly height if you filled up the whole canvas. It can't be even a pixel wider or higher, or things will mess up. Now you have to replace the RBY tile colours with the four colours you picked out. You can't replace the Fire Red colours to RBY colours instead or do anything else as far as I know.
Here's an easy way for how to replace colours in Paint (this doesn't work in Photoshop, which can't replace any colour with any other colour like Paint can):
Select eye dropper tool
Left click on colour you want to replace
Select eye dropper
Right click on the colour you want to replace it with
Click on the eraser, use right-click to replace colours on the canvas.
Now that you have all your things recoloured, save as a .dib (or save over the original file if you can't make a new .dib file). Rename your .pal file to the same name as your new .dib file. Go back to Advance Map with the tile settings open, click picture > load tileset 1. Load this new file (if you didn't rename your .pal file, it'll say it can't open the tileset because the palette file is missing).
If you get something that looks all one colour, there's a problem (when I did this, it was because I messed up my palette file somehow and had to make a new one). It should look weird, but be recognizable tiles like this.
You see those small, green pixels in the top row where it should be red/orange? That means the image that I copied them from had bad quality so when I replaced the colours, it didn't get that part. Just go back and fix them in Paint then re-save and re-open.
Now take the hex colour codes of the colours before, and convert them into RGB colour. I used this site. In Advance Map, go to Palettes > Show palette editor. You'll need to switch the colours you replaced in Paint with their original colours again.
(The images below were taken at an earlier time so the tileset doesn't match, but you get the idea.)
Original:
Those red, green, and blue numbers to the far right are what match up to the RGB colour codes you got from the website (you don't match them up to the black numbers in the text boxes). First I'm replacing this orangy colour with one of the greys.
Black - 000000 - 0,0,0
White - f8f8f8 - 248,248,248
Light grey - a8a8a8 - 168,168,168
Dark grey - 606060 - 96,96,96
I know the grey doesn't look grey, but it's just a trick of the eyes and will look normal after all the other colours are switched.
End result:
Go to palettes > write current palette to file (save). This ensures that you don't have to replace the colours every time you open the file.
Now you're back in the block editor/tileset editor view. Click on a fourth of a tile and put it in the "down" section, like where our Fire Red grass tile was before. You can rotate/flip tiles when you place them in to make other tiles that you might have skipped to save room. If you saved yours in whole tiles, you can hold down "ctrl" on your keyboard and drag the mouse to get a full tile at once, then put it on there.
Scroll down past where your tiles end in the viewer, and go to the very bottom-right corner and click on the last fourth of a tile there. It should be a solid colour, which will show up in the game as transparent. Use that to fill in the "Up" portion - do not cover the "up" with the same tile as in "down", or your character will be covered by the tile instead of the character covering the tile when you play the game. It's very important to use this last tile as your transparent tile, otherwise if you load a "tileset 2", the tiles you worked hard to set up might get messed up in looks.
Now check the "behaviour" and "background" bytes. These are mostly just necessary for Fire Red hacks because those have much more complicated sprites and such, but messing with them will mess with if doors work, if ledges work, et cetera. Here's some ones you'll probably need:
Behaviour Bytes:
00 00 Normal (use this for ground, flowers, cave walls, etc.)
38 00 to 3B 00 ledges (the ones your character jumps over)
61 use warp (you'll need to put this on doors, stairs, and those warp tiles that are sometimes used in gyms or Rocket hideouts)
Background Byte:
00 00 Normal
01 01 Wild Pokemon (Grass) (only use this for grass! This ensures that when you walk through grass the Pokemon specified in the rest of the map settings actually shows up... or so I think.)
00 22 Wild Pokemon (Water) (Frankly I'm not sure about this one, I think I had problems with it when I was testing it.)
As far as I could find there's no complete list of which byte numbers do what, so if anyone could point me to one that'd be great. Now, save the block.
After you use certain things (like the computer), your computer tile might turn into something weird, like a water tile. I think this is because there's normally an animation in Fire Red on those tiles and we replaced the tile it should have pointed to. Knowledge of this would be needed to make water tiles and flower tiles animate, too. If anyone can tell me how to do these, please do so.
Anyway, exit out of the block editor window (not the entire program), and a popup should ask you if you want to save/load your new blocks/tiles. Click yes. Now your Palette Town map should be completely messed up in the map viewer, something like this (but probably worse):
This is because we randomly saved over the tiles that used to be there with our new tiles. All you have to do is re-map by using your tiles on the right of the screen. Then make sure to go into "movement positions" and change it where it needs to be changed, so you can't walk through buildings for example.
Movement positions:
1=not passable (use it so you're stopped from walking into buildings, trees, etc.)
C=passable (use it for ground and anything you should be able to walk on/through, like doors)
4=not passable unless you use surf (use it for water!)
D=signpost (use it for signposts!)
"Cut" bushes are actually done in a script in the game as far as I can tell, so there's no movement positions or anything needed for that. For some reason my movement positions map shows up up-side down, and you can't see where your map changes appeared until you cover up the old movement positions with "C".
Now for Events. Just make sure you put warps on doors/stairs and stuff like that, nothing new here.
If all your tiles didn't fit on tileset 1:
Just go through the tutorial again, this time saving "tileset 2" as a .dib and making sure your canvas size fits that. For me it was 128x192 pixels. You can only have two tilesets on one map, so if you really have a lot of extra tiles (mine all managed to fit on tileset one, two, and then another copy of two so three total) you should categorize them so you'll have all cave tiles on this one, all indoor tiles on this one, et cetera otherwise you'll never be able to map. Don't worry, you can pick which tiles and tilesets you use with every map, so Gary's house could be a museum while Ash's house could be a cave.
Make sure the very last tile on tileset 2 is blank, otherwise it'll mess up your tiles from before! Remember that we put a transparent part on all the tiles, which was taken from the last tile in tileset 2. If you save over that, it'll also save over the transparency.
Open them in Photoshop. Enable grids (in CS5 on the navigational bar, view > extras). Then open grid preferences:
Now, look at this. This is one Fire Red tile in Advance Map's tile settings (optional: open Advance Map, click on the purple puzzle piece). However, Advance Map doesn't read the full tile in this viewer - it reads it in fourths.
regular:
When you put those four parts together then save it to the "blocks", that's when all four pieces turn into one tile when you want to map with it. This same tile settings area also has a rotate function for fourths of tiles, so you only need to copy unique fourths of tiles and can rotate or flip them to create similar tiles if needed.
Back to Photoshop: Adjust the grid size so that each tile is cut into fourths, or you could even do a fourth of that (make sure the screenshot/tileset image you need is cropped perfectly, or the gridlines won't match up to the tile edges). I needed 32pixels with 2 or 4 subdivisions.
Go to View > Snap to > Guides. This ensures that when you're selecting/pasting a tile, it's much easier to get it perfectly on the square.
Now go to Advance Map > From header > PALLET TOWN (3.0) and double-click so that map section opens. Then click on the purple puzzle piece above. Because we want to replace all the tiles from Fire Red, make sure palette zero is selected in the palette chooser box (you should see recognizable tiles from Fire Red in their normal colours). Then go to picture > save tileset 1 and save as a .dib file. Both that and a .pal (palette) file should save wherever you chose the tileset to save.
Check the dimensions of the .dib file, then make a blank canvas in Photoshop with the same dimensions. Mine was 128x320 pixels. Make sure the grid shows up in the new canvas too. Now, just copy the tiles or fourths of tiles you want (I used fourths of tiles because all my tiles wouldn't fit on one file, more on what to do then later) into the new canvas.
(I got a friend to do this for me as I don't have Paint, so no screencaps)
After that is done, make note of the colours the original Red/Blue/Yellow tiles are. If your image quality sucks so there's no set colour for each of them, just choose which looks most similar to the original game. For me this was:
Black - 000000
White - f8f8f8
Light grey - a8a8a8
Dark grey - 606060
Open the .dib file in Paint and make note of four random colours that are in the image, the same way you did above.
Copy your entire "new canvas", with all the tiles pasted onto it, over top of the Fire Red tiles on the .dib file in Paint. It should be exactly the same size in width, and possibly height if you filled up the whole canvas. It can't be even a pixel wider or higher, or things will mess up. Now you have to replace the RBY tile colours with the four colours you picked out. You can't replace the Fire Red colours to RBY colours instead or do anything else as far as I know.
Here's an easy way for how to replace colours in Paint (this doesn't work in Photoshop, which can't replace any colour with any other colour like Paint can):
Select eye dropper tool
Left click on colour you want to replace
Select eye dropper
Right click on the colour you want to replace it with
Click on the eraser, use right-click to replace colours on the canvas.
Now that you have all your things recoloured, save as a .dib (or save over the original file if you can't make a new .dib file). Rename your .pal file to the same name as your new .dib file. Go back to Advance Map with the tile settings open, click picture > load tileset 1. Load this new file (if you didn't rename your .pal file, it'll say it can't open the tileset because the palette file is missing).
If you get something that looks all one colour, there's a problem (when I did this, it was because I messed up my palette file somehow and had to make a new one). It should look weird, but be recognizable tiles like this.
You see those small, green pixels in the top row where it should be red/orange? That means the image that I copied them from had bad quality so when I replaced the colours, it didn't get that part. Just go back and fix them in Paint then re-save and re-open.
Now take the hex colour codes of the colours before, and convert them into RGB colour. I used this site. In Advance Map, go to Palettes > Show palette editor. You'll need to switch the colours you replaced in Paint with their original colours again.
(The images below were taken at an earlier time so the tileset doesn't match, but you get the idea.)
Original:
Those red, green, and blue numbers to the far right are what match up to the RGB colour codes you got from the website (you don't match them up to the black numbers in the text boxes). First I'm replacing this orangy colour with one of the greys.
Black - 000000 - 0,0,0
White - f8f8f8 - 248,248,248
Light grey - a8a8a8 - 168,168,168
Dark grey - 606060 - 96,96,96
I know the grey doesn't look grey, but it's just a trick of the eyes and will look normal after all the other colours are switched.
End result:
Go to palettes > write current palette to file (save). This ensures that you don't have to replace the colours every time you open the file.
Now you're back in the block editor/tileset editor view. Click on a fourth of a tile and put it in the "down" section, like where our Fire Red grass tile was before. You can rotate/flip tiles when you place them in to make other tiles that you might have skipped to save room. If you saved yours in whole tiles, you can hold down "ctrl" on your keyboard and drag the mouse to get a full tile at once, then put it on there.
Scroll down past where your tiles end in the viewer, and go to the very bottom-right corner and click on the last fourth of a tile there. It should be a solid colour, which will show up in the game as transparent. Use that to fill in the "Up" portion - do not cover the "up" with the same tile as in "down", or your character will be covered by the tile instead of the character covering the tile when you play the game. It's very important to use this last tile as your transparent tile, otherwise if you load a "tileset 2", the tiles you worked hard to set up might get messed up in looks.
Now check the "behaviour" and "background" bytes. These are mostly just necessary for Fire Red hacks because those have much more complicated sprites and such, but messing with them will mess with if doors work, if ledges work, et cetera. Here's some ones you'll probably need:
Behaviour Bytes:
00 00 Normal (use this for ground, flowers, cave walls, etc.)
38 00 to 3B 00 ledges (the ones your character jumps over)
61 use warp (you'll need to put this on doors, stairs, and those warp tiles that are sometimes used in gyms or Rocket hideouts)
Background Byte:
00 00 Normal
01 01 Wild Pokemon (Grass) (only use this for grass! This ensures that when you walk through grass the Pokemon specified in the rest of the map settings actually shows up... or so I think.)
00 22 Wild Pokemon (Water) (Frankly I'm not sure about this one, I think I had problems with it when I was testing it.)
As far as I could find there's no complete list of which byte numbers do what, so if anyone could point me to one that'd be great. Now, save the block.
After you use certain things (like the computer), your computer tile might turn into something weird, like a water tile. I think this is because there's normally an animation in Fire Red on those tiles and we replaced the tile it should have pointed to. Knowledge of this would be needed to make water tiles and flower tiles animate, too. If anyone can tell me how to do these, please do so.
Anyway, exit out of the block editor window (not the entire program), and a popup should ask you if you want to save/load your new blocks/tiles. Click yes. Now your Palette Town map should be completely messed up in the map viewer, something like this (but probably worse):
This is because we randomly saved over the tiles that used to be there with our new tiles. All you have to do is re-map by using your tiles on the right of the screen. Then make sure to go into "movement positions" and change it where it needs to be changed, so you can't walk through buildings for example.
Movement positions:
1=not passable (use it so you're stopped from walking into buildings, trees, etc.)
C=passable (use it for ground and anything you should be able to walk on/through, like doors)
4=not passable unless you use surf (use it for water!)
D=signpost (use it for signposts!)
"Cut" bushes are actually done in a script in the game as far as I can tell, so there's no movement positions or anything needed for that. For some reason my movement positions map shows up up-side down, and you can't see where your map changes appeared until you cover up the old movement positions with "C".
Now for Events. Just make sure you put warps on doors/stairs and stuff like that, nothing new here.
If all your tiles didn't fit on tileset 1:
Just go through the tutorial again, this time saving "tileset 2" as a .dib and making sure your canvas size fits that. For me it was 128x192 pixels. You can only have two tilesets on one map, so if you really have a lot of extra tiles (mine all managed to fit on tileset one, two, and then another copy of two so three total) you should categorize them so you'll have all cave tiles on this one, all indoor tiles on this one, et cetera otherwise you'll never be able to map. Don't worry, you can pick which tiles and tilesets you use with every map, so Gary's house could be a museum while Ash's house could be a cave.
Make sure the very last tile on tileset 2 is blank, otherwise it'll mess up your tiles from before! Remember that we put a transparent part on all the tiles, which was taken from the last tile in tileset 2. If you save over that, it'll also save over the transparency.
If you have questions or improvements, please let me know! After I perfect my tilesets I'll post them here for download so no one else has to go through all the work.
Last edited: