[Pokeemerald] Editing Battle Backgrounds

[Avara]

Editing Battle Backgrounds​

Battles are such a big part of Pokémon games - they probably make up for half the gameplay.
That being considered, you will want to make sure your battle backgrounds look good.

The reason I've formatted this post the way I have is so that readers don't have to sift through walls of text and pictures to look at the part they're interested in.
Here is a mini table of contents:​

• Part 1: An Introduction
• Part 2: Replacing the Tileset and Palette
• Part 3: The Tilemap
• Part 4: Extra Palette Trick
• Part 5: Adding New Backgrounds
• Part 6: Configuring Backgrounds (coming soon!)

 

[Avara]

Part 1: An Introduction

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.)

 

[Avara]

Part 2: Replacing the Tileset and Palette

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!

 

[Avara]

Part 3: The Tilemap

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).

Spoiler:

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.

Spoiler:

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).

Spoiler:

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!

 

[Avara]

Part 4: Extra Palette Trick

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).

Spoiler:

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

*Note: for Multi Battle mode, there is an extra step that BLourenco pointed out here.

 

[BLourenco]

Thanks for this guide! I just finished implementing blue/red background for the Battle Tower, but found an special case with the Multi Battle mode that you need to deal with if you're using the extra palette trick. Basically you simply need to repeat that final step of the trick on graphics\battle_frontier\battle_tilemap2.bin (changing the tiles in the palette view from 2 to 3), as that handles the player's half of the battle intro.

Before:

After:

 

[Avara]

Part 5: Adding New Battle Backgrounds

First things first, we have to add a #define for our new battle background. Open "pokeemerald\include\constants\battle.h" and add an entry at the end (my example is numbered 10):

// Battle terrain defines for gBattleTerrain.
#define BATTLE_TERRAIN_GRASS        0
#define BATTLE_TERRAIN_LONG_GRASS   1
#define BATTLE_TERRAIN_SAND         2
#define BATTLE_TERRAIN_UNDERWATER   3
#define BATTLE_TERRAIN_WATER        4
#define BATTLE_TERRAIN_POND         5
#define BATTLE_TERRAIN_MOUNTAIN     6
#define BATTLE_TERRAIN_CAVE         7
#define BATTLE_TERRAIN_BUILDING     8
#define BATTLE_TERRAIN_PLAIN        9
#define BATTLE_TERRAIN_ACADEMY      10

Now you will want to open "pokeemerald\include\graphics.h" and add entries for each of the files used for your new battle background, for example:

// battle terrains
extern const u32 gBattleTerrainTiles_Academy[];
extern const u32 gBattleTerrainTilemap_Academy[];
extern const u32 gBattleTerrainAnimTiles_Academy[];
extern const u32 gBattleTerrainAnimTilemap_Academy[];
extern const u32 gBattleTerrainPalette_Academy[];

Next, open "pokeemerald\src\data\graphics\battle_terrain.h" and add entries for your tiles, palette and tilemaps like this:

const u32 gBattleTerrainTiles_Academy[] = INCBIN_U32("graphics/battle_terrain/academy/tiles.4bpp.lz");
const u32 gBattleTerrainPalette_Academy[] = INCBIN_U32("graphics/battle_terrain/academy/palette.gbapal.lz");
const u32 gBattleTerrainTilemap_Academy[] = INCBIN_U32("graphics/battle_terrain/academy/map.bin.lz");

const u32 gBattleTerrainAnimTiles_Academy[] = INCBIN_U32("graphics/battle_terrain/academy/anim_tiles.4bpp.lz");
const u32 gBattleTerrainAnimTilemap_Academy[] = INCBIN_U32("graphics/battle_terrain/academy/anim_map.bin.lz");

After that, open "pokeemerald\src\battle_bg.c" and add an entry for your new battle background, which should look like this:

	    [BATTLE_TERRAIN_ACADEMY] =
    {
        .tileset = gBattleTerrainTiles_Academy,
        .tilemap = gBattleTerrainTilemap_Academy,
        .entryTileset = gBattleTerrainAnimTiles_Academy,
        .entryTilemap = gBattleTerrainAnimTilemap_Academy,
        .palette = gBattleTerrainPalette_Academy,
    },

Final steps now! You'll want to open "pokeemerald\src\battle_anim_utility_funcs.c" and add a new entry there, too.

	case BATTLE_TERRAIN_ACADEMY:
        gBattleAnimArgs[4] = RGB(31, 31, 31);
        break;

As my example background is an indoor one, I've just copied what the entry was for the Building background - the same in "pokeemerald\src\battle_intro.c", where mine now looks like this.

static const TaskFunc sBattleIntroSlideFuncs[] =
{
    BattleIntroSlide1, // BATTLE_TERRAIN_GRASS
    BattleIntroSlide1, // BATTLE_TERRAIN_LONG_GRASS
    BattleIntroSlide2, // BATTLE_TERRAIN_SAND
    BattleIntroSlide2, // BATTLE_TERRAIN_UNDERWATER
    BattleIntroSlide2, // BATTLE_TERRAIN_WATER
    BattleIntroSlide1, // BATTLE_TERRAIN_POND
    BattleIntroSlide1, // BATTLE_TERRAIN_MOUNTAIN
    BattleIntroSlide1, // BATTLE_TERRAIN_CAVE
    BattleIntroSlide3, // BATTLE_TERRAIN_BUILDING
    BattleIntroSlide3, // BATTLE_TERRAIN_PLAIN
    BattleIntroSlide3, // BATTLE_TERRAIN_ACADEMY
};

All that's left to do now is test! If you've done everything correctly, your brand new battle background should show up in-game without a hitch :)

 

[retrogba]

Hi there! Any information on how to define when a specific battle bg is used over another? I know how to insert/replace my own BGs, but I'm not sure it's clear how to actually set up a battle bg to trigger over another. Any help there or intent to expand this guide to cover that?

 

[Lunos]

Hi there! Any information on how to define when a specific battle bg is used over another? I know how to insert/replace my own BGs, but I'm not sure it's clear how to actually set up a battle bg to trigger over another. Any help there or intent to expand this guide to cover that?

The battle backgrounds are set based on the type of a map by the BattleSetup_GetTerrainId function located in src/battle_setup.c.

You can trigger your own battle background based on whatever conditions you want there.
Alternatively, you can also just set a var and decide which battle background to set for a battle based on its value.

 

[retrogba]

The battle backgrounds are set based on the type of a map by the BattleSetup_GetTerrainId function located in src/battle_setup.c.

You can trigger your own battle background based on whatever conditions you want there.
Alternatively, you can also just set a var and decide which battle background to set for a battle based on its value.

Yeah, I posted this in the discord and didn't want to spam with the same question again, but it looks like it's based on a combo of metatile info from where the player is currently standing, combined with the map header. I wasn't quite sure if there was a simpler way, as this tutorial kind of just goes "and then you'll see it in the game!" but didn't really explain how the "Academy" type's case was triggered.

 

[Voluptua]

Thanks for the tutorial! I am trying to load my tiles in tilemap studio and well it loads the tiles.png but somehow it doesnt displays my new tiles I want to use instead, it displays the default one even tho I changed it! It doesnt make any sense even when I compile the project. (If I open tiles.png everything is as it should, but in the tilemap studio is doesnt) Pls help :/

 

[MariaJumpMan!]

Thanks for the tutorial! I am trying to load my tiles in tilemap studio and well it loads the tiles.png but somehow it doesnt displays my new tiles I want to use instead, it displays the default one even tho I changed it! It doesnt make any sense even when I compile the project. (If I open tiles.png everything is as it should, but in the tilemap studio is doesnt) Pls help :/

Do you already tried use make clean on your terminal...?