PDA

View Full Version : [Tutorial] Hacking/Editing the Fire Red Title Screen [NO GLITCHY TILES]


Bilaterus
September 14th, 2012, 03:09 PM
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

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.
http://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.
http://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

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
http://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!

Hehe, sorry for the long title :)

What we are trying to do is go from this:
http://httpi1121.photobucket.com/albums/l507/Under241/Problem.png
To this:
http://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).

http://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.

http://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.

http://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…)

http://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

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.
http://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.
http://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

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!

Putting in the correct Palette

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!

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 rong wrong feel free to tell me!

Hope this has helped everyone :)
Good luck and Happy Hacking!

44Ash
September 30th, 2012, 07:20 AM
Hi Bilaterus.Thanks for the tutorial.It is awesome.I understood it easily.I am going to try it.

Bilaterus
September 30th, 2012, 03:00 PM
Hi Bilaterus.Thanks for the tutorial.It is awesome.I understood it easily.I am going to try it.

Great! Let me know if (more like when) it works or if there are any parts that need better explaining.

ForYouu
October 1st, 2012, 09:49 AM
Great Tutorial!

Just one thing.

i1121.photobucket.com/albums/l507/Under241/Problem.png

Add http to that. Pokecommunity doesn't allow me to post links.

Bilaterus
October 1st, 2012, 01:23 PM
Great Tutorial!

Just one thing.

i1121.photobucket.com/albums/l507/Under241/Problem.png

Add http to that. Pokecommunity doesn't allow me to post links.

Ok let's start with the flames in the background.
What you have forgotten to do is set a transparent colour, or to be more accurate a helpful transparent colour. You need to change the first pixel on the image (the top left hand corner) to a colour you won't use on your background. (So for example for you you could use a pink/red). You would probably need to do this before indexing the image. Make sure you make a tile that can replace the transparent colour pixel bit when you put it on NTME. And on NTME just don't use that block. To check which colour is your transparent one, go on IrfanView and go on Image>palette>edit Pallette and the first colour there will become the transparent one.

To remove the *shudder* glitchy tiles, I can only assume your background is not fulfilling the three sacred rules.

Let me know what happens and I'll see if I can help more :)

ForYouu
October 1st, 2012, 03:58 PM
Ahhh!

Yeah.... I'm very sorry but I've just spent about 40 minutes trying to do the above tutorial. I finally worked it out... so very tired (Head wise) I'm really not in the mood to try this again to no avail. I'll try this tomorrow and tell you how it goes.

Thank you very much

ForYouu
October 2nd, 2012, 07:39 AM
Just... tried again.

Didn't work :( Again.

Still got flames and glitchy tiles.

* Sigh *

Bilaterus
October 2nd, 2012, 07:46 AM
Just... tried again.

Didn't work :( Again.

Still got flames and glitchy tiles.

* Sigh *

If you don't mind posting the link of your background image (with or without the http :P) then can I have a go at sorting it out?

ForYouu
October 2nd, 2012, 07:51 AM
Thank you very much,

fc06.deviantart.net/fs70/i/2010/158/c/7/Ilex_Forest_by_Delthero.jpg

I'm just using someones picture to test it out. Does that breach copyright.... I hope not.

Bilaterus
October 2nd, 2012, 02:15 PM
I’m sure you’ll be glad to see this image after your hours of toil,

http://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).

http://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.

http://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.

http://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…)

http://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.

Hope this helps! Of course me being nosey as usual let me know if it works and if this explanation is clear enough!

ForYouu
October 2nd, 2012, 03:23 PM
Yeah....

So, what happened?

When it goes to the title screen.. it doesn't. Black Screen and this sound as if it's trying to load the title screen (Very buggy sound) and it goes on loop until I close the rom.

* Sigh *

Bilaterus
October 2nd, 2012, 03:28 PM
I'm not sure what's wrong, maybe you just used a dodgey ROM? Did you replace the background or try it out on a fresh ROM? If you want you can skip most of the steps and just save the tileset image I did and try inserting it.

ForYouu
October 2nd, 2012, 03:38 PM
Could you send me the raw and pal files?

I'll see if it's a dodgy rom.

Thanks for your help again :) It's really helpful to a beginner like me :)

Thanks

Bilaterus
October 2nd, 2012, 03:43 PM
I will but not at the moment, I'm using my phone to reply and I was just about to go sleep :( I'll try put them up first thing tomorrow.

There's no need to thank me :) every person should be this helpful to everyone!

ForYouu
October 2nd, 2012, 03:50 PM
Thank you very much :) I'll probably have another try at it with a completely clean Rom.

I'll edit this to tell you how successfully it went :) If.

Bilaterus
October 3rd, 2012, 12:03 AM
Here are the files,

PAL FILE
http://uploading.com/files/get/3635da73/PAL%2BFILE.pal

RAW FILE
http://uploading.com/files/get/47392b9f/TILEMAP.raw

Hmm I think you'll need the .PNG file as well (the TILESET)
It's in the attachments below.

Remember the PAL file is for APE
The RAW file is for 2014 on unLZ-GBA
And the TILESET is for 2013 on unLZ-GBA

ForYouu
October 3rd, 2012, 05:31 AM
Dear god... it's beautiful :)

Okay, so a log of everything I've done.

I should mention first you might want to change your link to my picture to http:// from http, it's not displaying :(

Okay, Log:

I used the bugged ROM and it didn't work. With tears in my eyes I deleted it.
I keep backups with names now, so I had no hardness when I recovered the backup.
I used the backup, however it still insisted on displaying the buggy tiles and fireworks.
So, with tears in my eyes again I said, f**k it, let's just go back to the first ROM. I've not even done anything neccessary with it anyway.
So I went back to the first ROM and I did everything correctly. Getting this!
http://i1121.photobucket.com/albums/l507/Under241/Worked.png

So with tears of joy in my eyes I cried for the best!

I now am pretty much fluent with this entire method :) Lol, one thing that comes out of it well.
I am going in a linear direction so I now am going to change the introduction if you want to know :)
I'm hoping to get a few results by the end of the month (October)

Thank you very much for all your help :)

Bilaterus
October 3rd, 2012, 05:47 AM
Yeah! I'm so glad it worked! Sorry about that link though :P and I'm sorry you had to delete some of your ROMs.

I'm happy it worked out for the best, just remember this feeling of acheivementn next time your stuck on a script or anything!

By the looks and sounds of your ROM and your persistence I better be the first one to test it ForYouu! (See what I did there? ;)

If you need any more help feel free to ask me, but I'm sure these forums pretty much cover everything you need to know :)

ForYouu
October 3rd, 2012, 06:03 AM
Yeah! I'm so glad it worked! Sorry about that link though :P and I'm sorry you had to delete some of your ROMs.

I'm happy it worked out for the best, just remember this feeling of acheivementn next time your stuck on a script or anything!

By the looks and sounds of your ROM and your persistence I better be the first one to test it ForYouu! (See what I did there? ;)

If you need any more help feel free to ask me, but I'm sure these forums pretty much cover everything you need to know :)

Haha :)

I sure will,

Ooh, guess what just happened. Training in Victory Road prior to Elite Four (Heart Gold) and I just got a shiny Golbat :P

Lol,

Actually, I do have something to ask, two things actually.

1. Do you know how to change the "Pokemon Fire Red" to something of my choosing?

&

2. You know the credits at the very start of the game, not the Game Freak Logo but the 1996-20xx, do you know how to change that to whatever I want?

Thanks for your time :) It's much appreciated again.

Also, like my sig?

Bilaterus
October 3rd, 2012, 06:24 AM
Haha! Looks like everything is going your way today :D

Well I found this link to change that other thingy (the copyright stuff and logo) so you can check that out.
http://www.pokecommunity.com/showthread.php?t=286786&highlight=Change+fire+red+logo

Other than that all I know is that the unLZ-GBA offset for the Pokemon symbol is 2011...
What you said :P

I'm a bit busy atm but I might mess around with it and see if someone's does a tutorial or if I could just do it :O

Oh and your sig is really clever :P

ForYouu
October 3rd, 2012, 08:13 AM
I went snooping around and I found this.

http://i1121.photobucket.com/albums/l507/Under241/Snooping2009.png

So, I'm assuming from the tutorials I've seen that the RAW file is going to be 2010.

That was the one I want to change :) Hopefully I'll do it, going to backup and everything first. Might make a tutorial.. :)

Again, thank you very much for everything :) Without you none of this would be able to happen.

EAGLEMAN
October 4th, 2012, 06:19 PM
Hey i did everything you said but i still got the blocks on the bottom left:
imageshack.us/a/img94/6161/pokemonerror.png

would you be willing to take a crack at my background image? ive been doing this for 3 hours with attempt after attempt and im pretty fraustrated with this. I would really appreciate your help.

Bilaterus
October 4th, 2012, 11:21 PM
Hey Eagleman!

It did take me a while to sort out ForYouu's background, don't take it the wrong way, but I don't want this thread turning into a bunch of people asking me to do it for them.

Although I'm happy to help :) If you could post your TileSet in your next post then I'll look at it and see if something is weird. It does seem like the Pallette isn't a problem so it must be the RAW (The TileMap) which means it mut be the TileSet...

My best advice is make sure your TileSet complies with the 3 sacred rules, and that on NTME the preset size is set to FR/LG TS.

EAGLEMAN
October 5th, 2012, 08:42 AM
I finally did it!
imageshack.us/a/img442/6779/successt.png

all i did was make the width of my indexed image even smaller and it fixed it.
Now that i know how to do it i can finally start to make it look better cause now that i see my titlescreen correct for the first time the font dosent seem to look good lol, anyway thanks for the tutorial man.

passarbye
February 18th, 2013, 12:03 PM
Hey Bilaterus, thanks for the tutorial. :classic:

ganesha
March 7th, 2013, 03:00 AM
Can you please make a video tutorial

Hulk-Hands
October 24th, 2013, 11:41 PM
so I've done everything and when I check for the final result both my background and the official background are there. My backgound just has flames coming out from across the bottom with the rest being black. The flames are there, along with the glitchy tiles and the rest of the official background...

King Haxxo
November 8th, 2013, 06:05 PM
Just to make it clear, this tutorial replaces the file that has "Press Start" and the copyright at the bottom. That means you'll have to add the Pokemon Logo, the version logo and the Press Start text to the background you'll be implementing. Your menu will be completely static, no blinking Press Start and no shining Pokemon logo.

laramie14
August 18th, 2014, 07:45 AM
Hey everyone! I'm making a fire red ROM hack and I'm having trouble with my title screen.. I inserted my ROM hack name that I made into (2009,67) and its works, but the problem is that when you start the ROM it goes great until the flash on the title screen happens and then the whole screen becomes white, except for my ROM hack name but you can see the flames moving through my ROM hack name and it doesn't freeze the ROM... How do I fix this?