Before you start messing around with battle backgrounds, it's best to understand the minimum about how they work first. If you already know your way around battle backgrounds, skip this first section, it's aimed at people who are totally new to this area!
Basic things to know:
A battle background consists of 14 rows of 30 8x8 tiles.
The top 10 rows slide in to the right and the bottom 4 slide in to the left - something to keep in mind when designing your bg.
Let's have a look inside the standard "tall grass" battle background's folder for an example of the files used. Find it in “pokeemerald\graphics\battle_terrain”.
We've got the following:
anim_map.bin - the tilemap for the animation.
anim_tiles.png - the tileset for the animation.
map.bin - the tilemap for the battle background.
tiles.png - the tileset for the battle background.
palette.pal - the palette that all of the above uses.
(Don't worry if your folder looks different with more files! I ran a "make clean" to take this screenshot purely for tutorial purposes. The other files are generated upon building, so you're fine.)
Let's say we want to replace the standard tall grass battle background. To get started, you'll need the tileset you want to use for your own new battle background; indexed to 16 colours, in .png format and having dimensions of 128x128. If you don't know how to index an image click here. I'll be using this bg mockup I (very quickly) threw together shown below. Rename yours “tiles” and replace the original “tiles.png” in the folder of the battle background you want to replace - in this case “pokeemerald\graphics\battle_terrain\tall_grass”.
The palette for battle backgrounds contains more than just 16 colours, which can be a bit confusing to work with if you haven't come across it before. Open GraphicsGale, and create a new file. Size specifications don't matter, but choose "8bit(256colors)". Click the little arrow underneath the palette, which will be all black apart from some random colours on the top and bottom rows. Click "Remove Unused Colors", "OK" upon prompt, and then your palette will be filled with black aside from the first (which will now be white). Hit that little arrow again, "Load Palette", select “palette.pal” and you'll see something resembling this:
Click "All". Now you're going to want to load another palette - this time from your new “tiles.png”. You should see something like this:
Click & drag your mouse along that 16-colour row on the left side, then click on the top row of the right side to copy those colours over.
The top two rows of colours on the left and right sides should now match as shown above. Hit "OK", and then save your new palette over the top of the old one in the “tall_grass” folder. Sorted!
So now that we've got our tileset and palette ready, onto making the tilemap! Personally, I do all my tilemaps for battle backgrounds in HxD and will continue to because I'm a weird person who actually enjoys hex editing (therapeutic? nah? just me?) and I like the precision, however I know the vast majority of people are not going to want to do that, not in a million years haha. Thus, I set off on a search for a reliable tilemap creator to use for this tutorial. The best one I've found is esperance's Tilemap Creator. Make sure you have the latest version! And please, for the sake of your sanity, stay away from NTME.
First, open your tileset (I've attached some of the next images in spoilers because of their size).
Next, open the tilemap ("map.bin"). The size specifications should be set to 32x64.
From this point forward, you're now free to assemble your tilemap(right) using the tiles from your tileset(left). Since in my example tileset all I did was add an extra tile for shading and changed the palette, I barely have any work to do in this instance but depending on how different your tileset is to the original image, you might have lots to do. You'll notice that there are two different pictures on the right-hand side: the one on the top, in this case with the platforms, shows the parts that slide in. The bottom picture is what will appear when the battle background is first loaded, before the parts which slide in.
The image I've attached in the below spoiler shows the palette view. The red 2 represents the default palette (the one we added earlier containing the orange colours).
When you're satisfied with how everything looks, highlight the "Tilemap" drop-down and hit "Save". Do not save your tileset, as it may result in an invalid .png signature error when you try to build.
Compile, test in-game, and you should be all done!
If you're careful with your colour/tile placement you can actually have up to 32 colours in your battle background instead of 16, by making use of two 16 colour palettes.
Recall an earlier part of this guide where I mentioned that the battle background palettes use more than 16 colours. When we were adding in our new palette, we only replaced the first 16/top row. This red part I've outlined can also be used in your battle background.
Purely for example purposes I've changed some of the colours in the second row to pink. Don't be tempted to use the third row of the palette! It's used for the sliding-in animation, and battle background tiles using this part of the palette won't quite work correctly in-game (e.g. unaffected by certain flash/move effects). Let's open the .bin file in TileMap Creator again and use the palette view option (screenshot in a spoiler due to size).
Using the grey 3 instead of the red 2 tiles will cause the second set of 16 colours to be used where you've placed them. All that's left to do now is compile and test <3