FR Complete Title Screen Editing

[Joexv]

Ok so I've been around here for a few years and something thats always bothered me was the lack of an actually complete title screen tutorial explaining how to edit (almost)every aspect of the title screen's graphics.
Now this tutorial wont explain how to change how animations work or anything, that requires asm/coding stuffz. We will stick with the regular awesome graphical parts. Ok lets get started.

Tools Needed:
Hex Editor -Will probably not be needed, unless you mess something up.
Infranview
APE
Paint
Fire Red v1.0 rom
Unlz
Gba Graphics Editor
NTME
FreeSpaceFinder
Sphere 1.5
Character Maker Pro 1.3


Part 1 Charizard Sprite:

Spoiler:

Info: Middle layer. Raw file pallet is D. Pallet 0xEAD5E8 Aprox UNLZ #2011

Alright so to start off we will be editing the charizard sprite. This is by far the easiest part to edit.
So to get started make an image of 240x160 dimension in paint. And now paste in your sprite or whatever else you want in there. Iwill be using this image as my sprite:

Spoiler:

Yes its big. It can be any size you want as long as it fits and is 16 colors.

Once thats done open up your sprite in infranview. Decrease the color depth to 16

Spoiler:

Now save the image as a bmp file and then open it up in CMP.
Look at the pallet section on the left. If your background pallet is first then click ctrl+s to sav your pallet somewhere as an act file. And then hit f12 to save the image as a png.

Now follow Karatekid52's tutorial on making easy tilemaps with sphere.(I wont explain it here as its kinda long)
Now when making the raw file in the Pallet tab make sure that the sprite is covered in the D pallet option.TUTORIAL

Open up UNLZ and go to 2010. The main title screen images are located somewhere around here. Click around if you don't find them at first. Locate the charizard image and then import your sprite, and click write to rom. A pop up should appear. Make sure that export image and automatically fix pointers. If the version on UNlz that you have says abort if image is too big, check that!!! That is super important so you dont corrupt anything. Now, if your image is too big itll tell you along with a hex number.

Spoiler:

Open up your rom in FSF and type in the hex number into the little converter. Then find the required amount of bytes for your image. After you have a new offset go back to UNLZ and write to rom again and this time type in the new offset into the image offset location. After you click ok a pop up show say something along the lines of pointer changed at such and such. Good now the image is inserted. dont test it just yet.

Now go back to unlz and at the charizard sprite click next once. This should show an odd little picture thing. this is the raw file for Charizard. Now click file->load raw. and open the raw file you created earlier in NTME.(see sphere tutorial if you skipped that). Then follow the same procedure as inserting the sprite. Once that is done open up VBA and take a quick glance at your new sprite. It should look something like this:

Spoiler:

This is normal. his is because the pallet hasnt been edited yet. To fix this open APE and load offset 0xEAD5E8.

Spoiler:

Click the import pallet button on the second pallet area. Load up the act file you saved earlier and
then hit the big replace button at the top. You can click load again to double check the pallets but its not necessary. Lets head back to Vba and see how well it looks now.

Spoiler:

Much better right? And thats it for inesrting a new sprite! Pretty easy huh. ;-P

Part 2 Background

Spoiler:

Info: Bottom layer. Raw file pallet is E, F for flashing. Pallet 0xEAE094 Aprox UNLZ #2013

Now the background is kinda tricky cause you have to be careful with your pallet if you want to be able to have a flashing start. Heres a little cheat sheet for those of you who want it.

Spoiler:

invisible; flash,flash,flash,flash,flash,
color to flash to; normal; normal; normal; normal;
Flames show above; normal; normal; normal; normal;

Now for those of you who want to keep the flashing start button make sure that your pallet is in this order! I couldnt get it to work just by moving the pallet around in infranview or CMP so I just took the original pallet opened up my 16color background image and then imported the pallet. Dont worry about messy colors as APE will fix it. Just make sure that the colors on the image match the pattern you need to keep them in. Kinda confusing but its worth it if you do it right. :)

So with the background we will take a different approach then the sprite. Now if you want just a solid image as the background go right ahead its easy and quick and usually will look really nice. But if you want the flames to show in the background or to have the flashing start button follow this tutorial. If you dont just do everything that you did with the Charizard Sprite but replace the copyright/start button in unlz.

Ok so on with the inserting! Open up Gba Graphics editor. Go to image offset 0xeae0b4 and then in the pallet menu type in 0xEAE094. Now export the image. Now you may notice that ugly green color thats normally behind the flames isnt on the image. Thats because it automatically acts like the background color for the background. No worrying about having to use that. Anyways open up the new image in paint. Increase the image size by using the drag bars on the bottom and right sides. Make the image as big as you want as long as it is divisible by 8.

Now edit it to your liking. I will be using this for my background:

Spoiler:

I put my version logo in this image so that it would be behind the Pokemon logo. and the Wooper sprite.
Now as you can see there are lots of small like 2-ish pixel tiles. You dont need to worry about keeping those. I did as to save some time. Now make sure that your image is 16 colors and has the transparent image as its first color. I imported the original pallet and then edited as needed to allow for a flashing start button and to show the flames. You dont have to like I said above, but I personally like how it looks. And again I wont get into too much detail for this in this part of the tutorial. I may later.

Now this time to get your raw file open up NTME and then click file-open tileset. Find your image and open it. Once its loaded click the preset sizes and click FR\LG TS. And now draw up your tilescreen backgorund. Make sure that everything in the pallet tab is set to E. For the flashing start button set only the start button to F.

Spoiler:

Anyways once you have your image and an exported pallet using CMP(following the method used for Charizard Sprite) Open up Unlz and go to 2013-ish. And insert the image and raw file like before.
Now test it in vba.

Spoiler:

Granted mine doesnt look too much different thatn the original but oh well thats what I was going for.

Now open APE and head to 0xEAE094. And import the pallet like you did with your sprite.

Spoiler:

And then open up vba again.

Spoiler:

You cant really tell since its a pic but the start button is flashing.
Yay all done with the hardest part!

Part 3 The flames:

Spoiler:

Info: Kinda Bottom layer. Pallet 0x3BF77C Aprox UNLZ #141
Now I wont go into detail with this as its super easy. But go to around 141 in UNLZ and find the flames. It doesnt matter what pallet. Now save the image as a png. Open it up in paint and do what ever you want. Just do not change the size! Also the flames are 16x16 a pop so make sure to follow that or else you may end up with a weird looking image. Heres what Im using.

Spoiler:

Its litterally 2 colors. and only like1 image just move around a little but itll do for what im making.

Now as before decrease the color to 16 and export the pallet in CMP.
Also follow the steps for inserting it and its pallet. Pallet is at 0x3BF77C.

Once done check er out.

Spoiler:

Part 4 Pokemon Logo:

Spoiler:

Now for the pokemon logo/version logo do everything that youve done before but this time leave the pallet option in NTME as 0, and instead of decreasing the color to 16 decrease it to 256.
But with the 256 color limit theres a catch. You should try and not use more than 200 or else you will have to overwrite the pallets of your background and logo.

Once your pallet is decreased use Infranview to change the background color and to export your pallet. But this time export the pallet as a pal file.(its the only one infranview supports afaik.)

Now save the image as a png.

Now sometimes unlz will crash when importing this image. Ive only had it happen if I have the image 240x160 in size so just have only the logo\version on it. Heres mine as an example.

Spoiler:

I dont have my version in this cause I wanted it to appear under the Pokemon logo.

Once inserted test it.

Spoiler:

See its covering my logo.:)

Now inserting the pallet isnt hard but it is kinda time consuming if youre slow at replacing ape pallets.
OK now open ape again and head to 0xEAB6C4. Now open up your pal file in the secondary section and then replace the pallet. Now you will have to click the index button on the secondary pallet after inserting each one.
Insert one index per offset listed. Index-offset chart is listed bellow.

Spoiler:

00EAB6C4 – Index 1
00EAB6E4 – Index 2
00EAB704 – Index 3
00EAB724 – Index 4
00EAB744 – Index 5
00EAB764 – Index 6
00EAB784 – Index 7
00EAB7A4 – Index 8
00EAB7C4 – Index 9
00EAB7E4 – Index 10
00EAB804 – Index 11
00EAB824 – Index 12
00EAB844 – Index 13

Now if you've done a 256 color title screen you may recognise this and you may be wondering why not 14-15? Well 14+15 are the pallets for you sprite and background. Simple enough.

Also if Infranview doesnt export your pallet correctly I used photoshop to get a correct version. I hope this isnt the case for everyone but if your pallets messed up that may be why.

I would recommend bookmarking every offset that way you dont have to copy and paste every offsets
Once done open it up and enjoy your work.:)

Spoiler:

Part 5 Fixing errors:

Spoiler:

Now during my testing with this for some reason my offsets never were set for the Pokemon logo and the backgorund logo. To fix this go to these offsets in a hex editor and type in the corisponding offset backwards for each.

78a98----Titlescreen image
78a9c----Raw location

78ab0----Background image
bfbac----Raw location

Extra:

Spoiler:

If you want to remove the shine on the pokemon logo go to about 139 in unlz or 0x3BF64C. Save the image and just copy the background color and recolor the whole image to be "blank" open it back up and save it overwriting the original image. you shouldn't need to repoint it but If you have to do so normally.

Misc: Offsets for images and raw files:

Spoiler:

Object/Image/Raw
Background/0x3bf58c/0x3bf5a8
Sprite/0xead608/0xeadee4
Logo/0xeab8c4/0xead390
Shine on logo/0x3BF64C/???
Flames/0x3BF79C/???

If I forgot one tell me.

I hope you guys enjoyed the tutorial. if any of it is confusing please tell me. Im npt very good at explaining things I understand.:) Also if I missed something please tell me.

Credits:
To Sphearical Ice for the most complete Title Screen Editing tutorial Ive read and for having most if not all of the
pallets and images for the sprites and background.
Black Charizard for the 256 color title screen tutorial that I used to find the offsets for the logo..
KarateKid52 for his sphere tutorial.
Everyone whos had me make a titlescreen for them for all the practice its given me.
And to one of my bestest friends Joseph for the idea for a Wooper who saved christmas hack.

Please do not use any of the images i have posted here. I worked very hard on them and they are being used for my Christmas hack.

 

[DarkenedEclipse]

Finally someone smart enough to create this XD good job!

 

[Turtl3Skulll]

Hahaha loved that title screen you made, if its for an actual game I look forward to it; either way looks sweet enough I'll go make a title screen just cause of it :D

 

[Ephraim225]

If that isn't going to be a real game I'll be sad XD

I have a request if I may, could you list the offsets of all images and tilemaps instead of just listing their number in unLZ? It would be a huge help since I have many images inserted already so the numbers aren't accurate.

 

[Joexv]

If that isn't going to be a real game I'll be sad XD

I have a request if I may, could you list the offsets of all images and tilemaps instead of just listing their number in unLZ? It would be a huge help since I have many images inserted already so the numbers aren't accurate.

I can do that. Expect that to be on op soon. And yes it is a real game. Its almost done too :3

Edit: Image offsets added to OP.

 

[Percy]

How did you made that freaking "The Wooper Who Saved Christmas" logo?

 

[Joexv]

How did you made that freaking "The Wooper Who Saved Christmas" logo?

Futura LT Bold font with a 3pt stroke behind it. If you want the curve like a normal logo its an arc curve 10-20%.
Credits to Spherical Ice for this information.:P
Font link
https://ufonts.com/fonts/futura-lt-bold.html

 

[ZapdosMan]

I found a really good video online about this.

 

[Shiny1um]

please reply if anyone knows how to edit the other background behind the flames.
THIS ONE IF YOU ARE NOT UNDERSTANDING MY QUESTION.

 

[Kairyla]

Ok so I've been around here for a few years and something thats always bothered me was the lack of an actually complete title screen tutorial explaining how to edit (almost)every aspect of the title screen's graphics.
Now this tutorial wont explain how to change how animations work or anything, that requires asm/coding stuffz. We will stick with the regular awesome graphical parts. Ok lets get started.

Tools Needed:
Hex Editor -Will probably not be needed, unless you mess something up.
Infranview
APE
Paint
Fire Red v1.0 rom
Unlz
Gba Graphics Editor
NTME
FreeSpaceFinder
Sphere 1.5
Character Maker Pro 1.3


Part 1 Charizard Sprite:

Spoiler:

Info: Middle layer. Raw file pallet is D. Pallet 0xEAD5E8 Aprox UNLZ #2011

Alright so to start off we will be editing the charizard sprite. This is by far the easiest part to edit.
So to get started make an image of 240x160 dimension in paint. And now paste in your sprite or whatever else you want in there. Iwill be using this image as my sprite:

Spoiler:

Yes its big. It can be any size you want as long as it fits and is 16 colors.

Once thats done open up your sprite in infranview. Decrease the color depth to 16

Spoiler:

Now save the image as a bmp file and then open it up in CMP.
Look at the pallet section on the left. If your background pallet is first then click ctrl+s to sav your pallet somewhere as an act file. And then hit f12 to save the image as a png.

Now follow Karatekid52's tutorial on making easy tilemaps with sphere.(I wont explain it here as its kinda long)
Now when making the raw file in the Pallet tab make sure that the sprite is covered in the D pallet option.TUTORIAL

Open up UNLZ and go to 2010. The main title screen images are located somewhere around here. Click around if you don't find them at first. Locate the charizard image and then import your sprite, and click write to rom. A pop up should appear. Make sure that export image and automatically fix pointers. If the version on UNlz that you have says abort if image is too big, check that!!! That is super important so you dont corrupt anything. Now, if your image is too big itll tell you along with a hex number.

Spoiler:

Open up your rom in FSF and type in the hex number into the little converter. Then find the required amount of bytes for your image. After you have a new offset go back to UNLZ and write to rom again and this time type in the new offset into the image offset location. After you click ok a pop up show say something along the lines of pointer changed at such and such. Good now the image is inserted. dont test it just yet.

Now go back to unlz and at the charizard sprite click next once. This should show an odd little picture thing. this is the raw file for Charizard. Now click file->load raw. and open the raw file you created earlier in NTME.(see sphere tutorial if you skipped that). Then follow the same procedure as inserting the sprite. Once that is done open up VBA and take a quick glance at your new sprite. It should look something like this:

Spoiler:

This is normal. his is because the pallet hasnt been edited yet. To fix this open APE and load offset 0xEAD5E8.

Spoiler:

Click the import pallet button on the second pallet area. Load up the act file you saved earlier and
then hit the big replace button at the top. You can click load again to double check the pallets but its not necessary. Lets head back to Vba and see how well it looks now.

Spoiler:

Much better right? And thats it for inesrting a new sprite! Pretty easy huh. ;-P

Part 2 Background

Spoiler:

Info: Bottom layer. Raw file pallet is E, F for flashing. Pallet 0xEAE094 Aprox UNLZ #2013

Now the background is kinda tricky cause you have to be careful with your pallet if you want to be able to have a flashing start. Heres a little cheat sheet for those of you who want it.

Spoiler:

invisible; flash,flash,flash,flash,flash,
color to flash to; normal; normal; normal; normal;
Flames show above; normal; normal; normal; normal;

Now for those of you who want to keep the flashing start button make sure that your pallet is in this order! I couldnt get it to work just by moving the pallet around in infranview or CMP so I just took the original pallet opened up my 16color background image and then imported the pallet. Dont worry about messy colors as APE will fix it. Just make sure that the colors on the image match the pattern you need to keep them in. Kinda confusing but its worth it if you do it right. :)

So with the background we will take a different approach then the sprite. Now if you want just a solid image as the background go right ahead its easy and quick and usually will look really nice. But if you want the flames to show in the background or to have the flashing start button follow this tutorial. If you dont just do everything that you did with the Charizard Sprite but replace the copyright/start button in unlz.

Ok so on with the inserting! Open up Gba Graphics editor. Go to image offset 0xeae0b4 and then in the pallet menu type in 0xEAE094. Now export the image. Now you may notice that ugly green color thats normally behind the flames isnt on the image. Thats because it automatically acts like the background color for the background. No worrying about having to use that. Anyways open up the new image in paint. Increase the image size by using the drag bars on the bottom and right sides. Make the image as big as you want as long as it is divisible by 8.

Now edit it to your liking. I will be using this for my background:

Spoiler:

I put my version logo in this image so that it would be behind the Pokemon logo. and the Wooper sprite.
Now as you can see there are lots of small like 2-ish pixel tiles. You dont need to worry about keeping those. I did as to save some time. Now make sure that your image is 16 colors and has the transparent image as its first color. I imported the original pallet and then edited as needed to allow for a flashing start button and to show the flames. You dont have to like I said above, but I personally like how it looks. And again I wont get into too much detail for this in this part of the tutorial. I may later.

Now this time to get your raw file open up NTME and then click file-open tileset. Find your image and open it. Once its loaded click the preset sizes and click FR\LG TS. And now draw up your tilescreen backgorund. Make sure that everything in the pallet tab is set to E. For the flashing start button set only the start button to F.

Spoiler:

Anyways once you have your image and an exported pallet using CMP(following the method used for Charizard Sprite) Open up Unlz and go to 2013-ish. And insert the image and raw file like before.
Now test it in vba.

Spoiler:

Granted mine doesnt look too much different thatn the original but oh well thats what I was going for.

Now open APE and head to 0xEAE094. And import the pallet like you did with your sprite.

Spoiler:

And then open up vba again.

Spoiler:

You cant really tell since its a pic but the start button is flashing.
Yay all done with the hardest part!

Part 3 The flames:

Spoiler:

Info: Kinda Bottom layer. Pallet 0x3BF77C Aprox UNLZ #141
Now I wont go into detail with this as its super easy. But go to around 141 in UNLZ and find the flames. It doesnt matter what pallet. Now save the image as a png. Open it up in paint and do what ever you want. Just do not change the size! Also the flames are 16x16 a pop so make sure to follow that or else you may end up with a weird looking image. Heres what Im using.

Spoiler:

Its litterally 2 colors. and only like1 image just move around a little but itll do for what im making.

Now as before decrease the color to 16 and export the pallet in CMP.
Also follow the steps for inserting it and its pallet. Pallet is at 0x3BF77C.

Once done check er out.

Spoiler:

Part 4 Pokemon Logo:

Spoiler:

Now for the pokemon logo/version logo do everything that youve done before but this time leave the pallet option in NTME as 0, and instead of decreasing the color to 16 decrease it to 256.
But with the 256 color limit theres a catch. You should try and not use more than 200 or else you will have to overwrite the pallets of your background and logo.

Once your pallet is decreased use Infranview to change the background color and to export your pallet. But this time export the pallet as a pal file.(its the only one infranview supports afaik.)

Now save the image as a png.

Now sometimes unlz will crash when importing this image. Ive only had it happen if I have the image 240x160 in size so just have only the logo\version on it. Heres mine as an example.

Spoiler:

I dont have my version in this cause I wanted it to appear under the Pokemon logo.

Once inserted test it.

Spoiler:

See its covering my logo.:)

Now inserting the pallet isnt hard but it is kinda time consuming if youre slow at replacing ape pallets.
OK now open ape again and head to 0xEAB6C4. Now open up your pal file in the secondary section and then replace the pallet. Now you will have to click the index button on the secondary pallet after inserting each one.
Insert one index per offset listed. Index-offset chart is listed bellow.

Spoiler:

00EAB6C4 – Index 1
00EAB6E4 – Index 2
00EAB704 – Index 3
00EAB724 – Index 4
00EAB744 – Index 5
00EAB764 – Index 6
00EAB784 – Index 7
00EAB7A4 – Index 8
00EAB7C4 – Index 9
00EAB7E4 – Index 10
00EAB804 – Index 11
00EAB824 – Index 12
00EAB844 – Index 13

Now if you've done a 256 color title screen you may recognise this and you may be wondering why not 14-15? Well 14+15 are the pallets for you sprite and background. Simple enough.

Also if Infranview doesnt export your pallet correctly I used photoshop to get a correct version. I hope this isnt the case for everyone but if your pallets messed up that may be why.

I would recommend bookmarking every offset that way you dont have to copy and paste every offsets
Once done open it up and enjoy your work.:)

Spoiler:

Part 5 Fixing errors:

Spoiler:

Now during my testing with this for some reason my offsets never were set for the Pokemon logo and the backgorund logo. To fix this go to these offsets in a hex editor and type in the corisponding offset backwards for each.

78a98----Titlescreen image
78a9c----Raw location

78ab0----Background image
bfbac----Raw location

Extra:

Spoiler:

If you want to remove the shine on the pokemon logo go to about 139 in unlz or 0x3BF64C. Save the image and just copy the background color and recolor the whole image to be "blank" open it back up and save it overwriting the original image. you shouldn't need to repoint it but If you have to do so normally.

Misc: Offsets for images and raw files:

Spoiler:

Object/Image/Raw
Background/0x3bf58c/0x3bf5a8
Sprite/0xead608/0xeadee4
Logo/0xeab8c4/0xead390
Shine on logo/0x3BF64C/???
Flames/0x3BF79C/???

If I forgot one tell me.

I hope you guys enjoyed the tutorial. if any of it is confusing please tell me. Im npt very good at explaining things I understand.:) Also if I missed something please tell me.

Credits:
To Sphearical Ice for the most complete Title Screen Editing tutorial Ive read and for having most if not all of the
pallets and images for the sprites and background.
Black Charizard for the 256 color title screen tutorial that I used to find the offsets for the logo..
KarateKid52 for his sphere tutorial.
Everyone whos had me make a titlescreen for them for all the practice its given me.
And to one of my bestest friends Joseph for the idea for a Wooper who saved christmas hack.

Please do not use any of the images i have posted here. I worked very hard on them and they are being used for my Christmas hack.

Hello thanks for this, it is very helpfull. Unfortunately my screen is totally messed up and
I did everything you did.. I will put an image to show you.. perhaps you can help me

EDIT : I solved the problem withe the messed up colours myself. My only problem is that I do not get it
why the background turned black...

 

[EthanXY]

I can't get sphere 1.5. is there another way to do the steps that require it?

 

[anxz86]

I successfully inserted the image and raw and the pallete also but even after inserting pallete it's showing messy colours.And it's showing yellow all over but there is no yellow in pallete I replaced.
Please help