Bilaterus
ToBe Best Spriter ;)
- 31
- Posts
- 13
- Years
- Seen Nov 6, 2012
Hey Guys, this is a tutorial on how to change the Fire Red title screen background. You know, where the flames are. Many tutorials, both on forums and videos show an almost perfect method, with the exception of the infamous glitchy tiles in the bottom left hand corner of the screen. It makes any game hack look tacky and unprofessional. Any words in bold will have a definition at the bottom. If you prefer video explanations rather than text and (a few) images check out this video: https://www.youtube.com/watch?v=IUrTkfH59pE (made by me :P) It's 40 minutes long, but it's light hearted and stuff :) So without further a due, let's start :D
Stuff you'll need:
MS Paint/Image editing software
IrfanView/Something that can Index the image
NTME (Nameless TileMap Editor)
unLZ-GBA (No idea :P)
APE (Advanced Palette Editor)
FSF (Free Space Finder)
VBA (Visual Boy Advance)
Choosing a background
Indexing an image
Oh no! My first colour is different on IrfanView even though I changed the first pixels colour!
Turning a TileMap into a TileSet
Putting it on the ROM
Putting in the correct Palette
Last step is to check your work on VBA :)
Definition List
Bold: Thicker text :P
TileSet: An image that contains a set of tiles needed to create a TileMap, most definitely no two tiles will be the same which is what differentiates this from a TileMap
TileMap: Made using the tiles from a TileSet to create the actual image that will be shown
Index[ed][ing]: From what I know it's changing the image so that it's locked on using 16 colours
Palette: A set of colours used in an image
Offset: A code that the ROM used to determine what it's using where.
Credit to TheTheTheThe and DawnRyder on Pokecommunity, after reading their tutorials and kinda getting to grips with the programs I worked it out.
If there is anyway to make this clearer or if I've written anythingrong wrong feel free to tell me!
Hope this has helped everyone :)
Good luck and Happy Hacking!
Stuff you'll need:
MS Paint/Image editing software
IrfanView/Something that can Index the image
NTME (Nameless TileMap Editor)
unLZ-GBA (No idea :P)
APE (Advanced Palette Editor)
FSF (Free Space Finder)
VBA (Visual Boy Advance)
Choosing a background
Spoiler:
This is one of the parts that, if done correctly, will stop glitchy tiles appearing.
Firstly you'll need a mind-blowing background, although you can't choose something that is too complex.
So as seen in example 1 and 2, 1 is obviously a more enticing and generally better looking background, although you'd have to pick background 2 as you need to keep in mind how you are going to break it down into a TileSet. Well here's a before and after of an image turned into a TileSet so you can see what you'll need to do.
As you can see we have shortened it and done stuff to it that I'll explain later. Now you know what kind of image we'll need you'll need to Index it.
Also the Press Start bit on the titlescreen, this is what we are replacing, and thus it won't be there when this is done. I advise creating your own press start graphics as part of the background image.
Firstly you'll need a mind-blowing background, although you can't choose something that is too complex.
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://desmond.imageshack.us/Himg688/scaled.php?server=688&filename=1examplesofbackgrounds.png&res=landing)
So as seen in example 1 and 2, 1 is obviously a more enticing and generally better looking background, although you'd have to pick background 2 as you need to keep in mind how you are going to break it down into a TileSet. Well here's a before and after of an image turned into a TileSet so you can see what you'll need to do.
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://desmond.imageshack.us/Himg542/scaled.php?server=542&filename=2differenceintilemapand.png&res=landing)
As you can see we have shortened it and done stuff to it that I'll explain later. Now you know what kind of image we'll need you'll need to Index it.
Also the Press Start bit on the titlescreen, this is what we are replacing, and thus it won't be there when this is done. I advise creating your own press start graphics as part of the background image.
Indexing an image
Spoiler:
To index an image my way (not that it's any better or different) then you'll need your image and IrfanView.
Firstly in your image put a coloured box in the top left hand corner, this will become the first colour in the palette and will also be the transparent colour. So that means use a colour that is not on your image as later we will remove the coloured box.
Then right click on your image and select 'open with' and select IrfanView.
Now on IrfanView select Image>Decrease Colour Depth and a pop up box will appear. Change it to 16 colours and press OK. You shouldn't leave Floyd Steinberg dithering on if you image has bunches of plain colours or it'll look like this, unless you like that effect :O
Also for later on in this tutorial you should go onto Image>Palette>Export Palette and save it. It should be a .PAL file.
There! You have an Indexed image!
Firstly in your image put a coloured box in the top left hand corner, this will become the first colour in the palette and will also be the transparent colour. So that means use a colour that is not on your image as later we will remove the coloured box.
Then right click on your image and select 'open with' and select IrfanView.
Now on IrfanView select Image>Decrease Colour Depth and a pop up box will appear. Change it to 16 colours and press OK. You shouldn't leave Floyd Steinberg dithering on if you image has bunches of plain colours or it'll look like this, unless you like that effect :O
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://desmond.imageshack.us/Himg694/scaled.php?server=694&filename=3differencewithditherin.png&res=landing)
Also for later on in this tutorial you should go onto Image>Palette>Export Palette and save it. It should be a .PAL file.
There! You have an Indexed image!
Oh no! My first colour is different on IrfanView even though I changed the first pixels colour!
Spoiler:
Hehe, sorry for the long title :)
What we are trying to do is go from this:
To this:
Let me explain here what I did and what you need to do, and then I guess I'll put it in the first post too;
Firstly make sure the image in .PNG, when I first downloaded it it was .JPEG.
Also make sure before starting these steps that the image is already sized (less than 256px and both dimensions divisible by 8).
Next open the image with IrfanView and decrease the colours to 256.
Go to Image>Pallette>Edit Pallette and change the first colour (usually a dark colour) to a colour not obviously present in the background (like red in this case).
Now take that image onto Paint, and use the colour pick tool (pipette) and left click the alt colour (red or whatever, I'm not going to keep saying it), and using the colour pick tool again right click on a colour that is similar to the dark colour (the one we changed with alt colour at the beginning).
Now select the rubber tool and paint over the red by holding down right click and going over the entire alt colour areas. If done correctly only the alt colour will be changed. Do this to the whole image and then put an alt colour square in the top left hand corner or anywhere where you can replace it on NTME.
Take this newly coloured in image onto IrfanView and decrease the colours to 16.
If you go onto Image>Pallette>Edit Pallette you'll notice the alt colour has skipped down the line again.
This time note down the RGB (Red Green Blue) values of the alt colour and first colour. Then switch them.
Go onto Paint and using the rubber and colour pick tool trick replace the colours again. (Now that I'm writing this I'm sure this method can be refined…)
There you go! Your image now should work if you follow the tutorial from the 'Putting it on to the ROM' section.
What we are trying to do is go from this:
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://httpi1121.photobucket.com/albums/l507/Under241/Problem.png)
To this:
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://imageshack.us/a/img339/6973/foryouu0finished.png)
Let me explain here what I did and what you need to do, and then I guess I'll put it in the first post too;
Firstly make sure the image in .PNG, when I first downloaded it it was .JPEG.
Also make sure before starting these steps that the image is already sized (less than 256px and both dimensions divisible by 8).
Next open the image with IrfanView and decrease the colours to 256.
Go to Image>Pallette>Edit Pallette and change the first colour (usually a dark colour) to a colour not obviously present in the background (like red in this case).
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://imageshack.us/a/img43/7409/foryouu1256red.png)
Now take that image onto Paint, and use the colour pick tool (pipette) and left click the alt colour (red or whatever, I'm not going to keep saying it), and using the colour pick tool again right click on a colour that is similar to the dark colour (the one we changed with alt colour at the beginning).
Now select the rubber tool and paint over the red by holding down right click and going over the entire alt colour areas. If done correctly only the alt colour will be changed. Do this to the whole image and then put an alt colour square in the top left hand corner or anywhere where you can replace it on NTME.
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://imageshack.us/a/img231/5914/foryouu2256redcoloured.png)
Take this newly coloured in image onto IrfanView and decrease the colours to 16.
If you go onto Image>Pallette>Edit Pallette you'll notice the alt colour has skipped down the line again.
This time note down the RGB (Red Green Blue) values of the alt colour and first colour. Then switch them.
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://imageshack.us/a/img833/5307/foryouu316red.png)
Go onto Paint and using the rubber and colour pick tool trick replace the colours again. (Now that I'm writing this I'm sure this method can be refined…)
Spoiler:
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://imageshack.us/a/img689/1885/foryouu4tileset.png)
There you go! Your image now should work if you follow the tutorial from the 'Putting it on to the ROM' section.
Turning a TileMap into a TileSet
Spoiler:
This is one of the parts that, if done correctly, will stop glitchy tiles appearing.
Well it's not easy to explain but that's my duty :) You see how in advance map the tiles on the TileSet (right hand side bar thingy) don't use the same ones twice, even though for (let's just say) the house you need 2 bits of wall? Why couldn't they just have the house fully built? That's because to save space and memory they break it down into the bits you need. This is what you need to do to your background.
So basically you have to identify what tiles are doubled, so in our case the orange background is obviously used multiple times. But more importantly as indicated by the blue rectangles there are some clouds duplicated and the confetti looking like thing.
These can all be removed in order to gain space to reduce the image to fulfil the rights of the 3 sacred laws of the TileSet:
1. The image must be indexed
2. The width of the TileSet needs to be less than 256 pixels
3. Both dimensions need to be divisible by 8
At the moment the example is exactly 256 pixels, so by cutting down the middle clouds and just doing some neatening, I shortened it to 208. The parts I have removed is shown by the blue rectangles.
Ensure the TileSet fulfils the sacred laws and then… You've made a TileSet!
Well it's not easy to explain but that's my duty :) You see how in advance map the tiles on the TileSet (right hand side bar thingy) don't use the same ones twice, even though for (let's just say) the house you need 2 bits of wall? Why couldn't they just have the house fully built? That's because to save space and memory they break it down into the bits you need. This is what you need to do to your background.
So basically you have to identify what tiles are doubled, so in our case the orange background is obviously used multiple times. But more importantly as indicated by the blue rectangles there are some clouds duplicated and the confetti looking like thing.
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://desmond.imageshack.us/Himg507/scaled.php?server=507&filename=4doubletiles.png&res=landing)
These can all be removed in order to gain space to reduce the image to fulfil the rights of the 3 sacred laws of the TileSet:
1. The image must be indexed
2. The width of the TileSet needs to be less than 256 pixels
3. Both dimensions need to be divisible by 8
At the moment the example is exactly 256 pixels, so by cutting down the middle clouds and just doing some neatening, I shortened it to 208. The parts I have removed is shown by the blue rectangles.
![[PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES] [PokeCommunity.com] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]](https://desmond.imageshack.us/Himg651/scaled.php?server=651&filename=5shrinkingimage.png&res=landing)
Ensure the TileSet fulfils the sacred laws and then… You've made a TileSet!
Putting it on the ROM
Spoiler:
You'll need NTME, unLZ-GBA, and FSF
Ok so this is the part everyone should know (from other tutorials) but for any newcomers or just a handy reminder, here's how to do it.
Open NTME and load your TileSet
At the bottom right hand corner of the program there's a drop down bar called 'Preset Sizes', change that to FR/LG TS (Fire Red/Leaf Green Title Screen)
Now using the TileSet at the top, repaint your image into the bottom canvas.
Using the 'Tile Selection' tool on the right hand side of the program allows you to select more than one tile at a time. Also experiment with flipping tiles to add originality.
You'll notice a black dotted line after scrolling right on the TileMap canvas. If it's not there you probably haven't changed the Preset Size. Tiles that go beyond that line (to the right of it of course :P) will NOT appear on the ROM.
Now click on the tab labelled 'Palette Map' at the bottom of the program.
Select the E (it should be purple) and cover the entire TileMap with E's.
Go to File>Save TileMap and save it, it should be a .RAW file.
There you go… You've made a TileMap!
Although your not done yet, open unLZ-GBA and go to 'Open File' and select your ROM, type in 2013 in the box next to 'goto' and press 'goto' (I have a feeling I'm dumbing it down to much :/) and press Import and import your TILESET (Not TileMap).
You'll notice that 2013 is the Press Start bit on the titlescreen, this is what we are replacing, and thus it won't be there when this is done. I advise creating your own press start graphics as part of the background
*Next click on 'Write to ROM' (Export Image and Auto abort should already be selected) and after trying to write it an error message should appear 'Image is too big! Compressed size: blah blah Aborting!' Note down/remember the compressed size. Don't close unLZ-GBA.
Go onto FSF and open your ROM (File>Open ROM) then in the hex box (the second one/the lower one) type in the compressed size and a number should appear in the dec[decimal] box.
Copy the decimal number into the 'Needed Bytes' box, and select the 'Search from the beginning of the ROM' toggle.
Press 'Find' and copy it.
Go back to unLZ-GBA and press 'Write to ROM' again, but this time paste your offset in the 'Image Offset' box (leaving the two zeroes at the start if they are there) and tick the 'Automatically fix pointers' box.
After pressing OK it should say something like 'Pointer found at whatever'*
Press next (not next pal or anything) or use the goto function to go to 2014
When on 2014 go to File>Load RAW and load your .RAW file (the TileMap)
Rinse and repeat from where the stars are (Well now that I think about it you probably don't need to rinse…)
Well done! You just inserted your background!
If you loaded this up on a VBA you would see your background but with crazy colours, why? Because we haven't uploaded our palette silly!
Ok so this is the part everyone should know (from other tutorials) but for any newcomers or just a handy reminder, here's how to do it.
Open NTME and load your TileSet
At the bottom right hand corner of the program there's a drop down bar called 'Preset Sizes', change that to FR/LG TS (Fire Red/Leaf Green Title Screen)
Now using the TileSet at the top, repaint your image into the bottom canvas.
Using the 'Tile Selection' tool on the right hand side of the program allows you to select more than one tile at a time. Also experiment with flipping tiles to add originality.
You'll notice a black dotted line after scrolling right on the TileMap canvas. If it's not there you probably haven't changed the Preset Size. Tiles that go beyond that line (to the right of it of course :P) will NOT appear on the ROM.
Now click on the tab labelled 'Palette Map' at the bottom of the program.
Select the E (it should be purple) and cover the entire TileMap with E's.
Go to File>Save TileMap and save it, it should be a .RAW file.
There you go… You've made a TileMap!
Although your not done yet, open unLZ-GBA and go to 'Open File' and select your ROM, type in 2013 in the box next to 'goto' and press 'goto' (I have a feeling I'm dumbing it down to much :/) and press Import and import your TILESET (Not TileMap).
You'll notice that 2013 is the Press Start bit on the titlescreen, this is what we are replacing, and thus it won't be there when this is done. I advise creating your own press start graphics as part of the background
*Next click on 'Write to ROM' (Export Image and Auto abort should already be selected) and after trying to write it an error message should appear 'Image is too big! Compressed size: blah blah Aborting!' Note down/remember the compressed size. Don't close unLZ-GBA.
Go onto FSF and open your ROM (File>Open ROM) then in the hex box (the second one/the lower one) type in the compressed size and a number should appear in the dec[decimal] box.
Copy the decimal number into the 'Needed Bytes' box, and select the 'Search from the beginning of the ROM' toggle.
Press 'Find' and copy it.
Go back to unLZ-GBA and press 'Write to ROM' again, but this time paste your offset in the 'Image Offset' box (leaving the two zeroes at the start if they are there) and tick the 'Automatically fix pointers' box.
After pressing OK it should say something like 'Pointer found at whatever'*
Press next (not next pal or anything) or use the goto function to go to 2014
When on 2014 go to File>Load RAW and load your .RAW file (the TileMap)
Rinse and repeat from where the stars are (Well now that I think about it you probably don't need to rinse…)
Well done! You just inserted your background!
If you loaded this up on a VBA you would see your background but with crazy colours, why? Because we haven't uploaded our palette silly!
Putting in the correct Palette
Spoiler:
For this you'll need APE, MS Paint and a way to take a snapshot of your screen (printscreen works fine)
Now open APE and load your ROM on it.
In the offset box type in the following code: 00EAE094 and press Load.
On the right hand side of the 'Changed Palette' part there is a paint holder thingy with an arrow pointing left. If you hover over it for a bit it should say Import…
Press it and go on 'Files of type' at the bottom and change it to 'Paintshop Palette' or in other words .PAL then locate you palette and import it.
An error message will appear the first time, press OK on it and import it again, another error will appear but this time your palette will appear. Press printscreen and save it on a paint doc or write down all the colours numbers, then press OK.
APE will go bananas and close automatically.
Open APE again and load your ROM and put in the offset and press Load…
But instead of importing your palette, you'll need to write in each one using the printscreen or notes as a reference. Using the tab key is a quick way to switch boxes.
After doing that press replace, then if you press load you'll notice the 'Actual Palette' part is the same. This means you have changed the palettes, which means…
Congratulations! Either you've just changed the palette or you've done that and finished changing the background!
Now open APE and load your ROM on it.
In the offset box type in the following code: 00EAE094 and press Load.
On the right hand side of the 'Changed Palette' part there is a paint holder thingy with an arrow pointing left. If you hover over it for a bit it should say Import…
Press it and go on 'Files of type' at the bottom and change it to 'Paintshop Palette' or in other words .PAL then locate you palette and import it.
An error message will appear the first time, press OK on it and import it again, another error will appear but this time your palette will appear. Press printscreen and save it on a paint doc or write down all the colours numbers, then press OK.
APE will go bananas and close automatically.
Open APE again and load your ROM and put in the offset and press Load…
But instead of importing your palette, you'll need to write in each one using the printscreen or notes as a reference. Using the tab key is a quick way to switch boxes.
After doing that press replace, then if you press load you'll notice the 'Actual Palette' part is the same. This means you have changed the palettes, which means…
Congratulations! Either you've just changed the palette or you've done that and finished changing the background!
Last step is to check your work on VBA :)
Definition List
Bold: Thicker text :P
TileSet: An image that contains a set of tiles needed to create a TileMap, most definitely no two tiles will be the same which is what differentiates this from a TileMap
TileMap: Made using the tiles from a TileSet to create the actual image that will be shown
Index[ed][ing]: From what I know it's changing the image so that it's locked on using 16 colours
Palette: A set of colours used in an image
Offset: A code that the ROM used to determine what it's using where.
Credit to TheTheTheThe and DawnRyder on Pokecommunity, after reading their tutorials and kinda getting to grips with the programs I worked it out.
If there is anyway to make this clearer or if I've written anything
Hope this has helped everyone :)
Good luck and Happy Hacking!
Last edited: