Created Trainer Backsprite Editing (markdown)

1 files changed, 220 insertions, 0 deletions

diff --git a/Trainer-Backsprite-Editing.md b/Trainer-Backsprite-Editing.md
new file mode 100644
index 0000000..8fd2773
--- /dev/null
+++ b/Trainer-Backsprite-Editing.md
@@ -0,0 +1,220 @@
+The backsprite frames for Brendan, May, Steven, Wally, RS-Brendan, and RS-May use the same palette as their front trainer sprite.
+Plus they uses 4 frames instead of 5. This tutorial will instruct you how to delink the palette sharing and make the backsprites use 5 frames.
+
+Note : * I personally opt to delink the palette sharing and edit all of the backsprites so they'll have 5 frames.
+Should you specifically only want to edit player backsprites, then focus only on Brendan and May part of this tutorial.
+* Albeit can be edited, for easy references. 4 frames animation uses 4th frame as the beginning of the animation. And goes from 4th > 1st > 2nd > 3rd.
+* While 5 frames animation uses the 1st frame as the beginning of the animation and goes from 1st > 2nd > 3rd > 4th > 5th
+
+### Allow Backsprite Frames to Use Different Palettes.
+Prepare your backsprites frames, indexed in 16 colors in a preferable name format like `brendan_back_pic.png` for Male Player backsprite and `may_back_pic.png` for Female Player backsprite. `steven_back_pic.png`, so on and so forth. Then move all of them to **`graphics/trainers/back_pics`**.
+While you're there, delete the `.4bpp` files as well.
+
+Then export the palette of your indexed backsprites into a `.pal` format, preferable name it something like `brendan_back_pic.pal` for Male Player backsprite and `may_back_pic.pal` for Female Player backsprite. `steven_back_pic.pal`, so on and so forth. Then move all of them to **`graphics/trainers/palettes`**`.
+
+Then go to **`include/graphics.h`**, Search for `extern const u32 gTrainerBackPicPalette_Leaf[];` add these code below it.
+```c
+extern const u32 gTrainerBackPicPalette_Brendan[];
+extern const u32 gTrainerBackPicPalette_May[];
+extern const u32 gTrainerBackPicPalette_Steven[];
+extern const u32 gTrainerBackPicPalette_Wally[];
+extern const u32 gTrainerBackPicPalette_RubySapphireBrendan[];
+extern const u32 gTrainerBackPicPalette_RubySapphireMay[];
+```
+
+Then go to **`src/data/graphics/trainers.h`** Head to the bottom and you should see `gTrainerBackPicPalette_Leaf[]`, Add these code below it.
+```c
+const u32 gTrainerBackPicPalette_Brendan[] = INCBIN_U32("graphics/trainers/palettes/brendan_back_pic.gbapal.lz");
+const u32 gTrainerBackPicPalette_May[] = INCBIN_U32("graphics/trainers/palettes/may_back_pic.gbapal.lz");
+const u32 gTrainerBackPicPalette_Steven[] = INCBIN_U32("graphics/trainers/palettes/steven_back_pic.gbapal.lz");
+const u32 gTrainerBackPicPalette_Wally[] = INCBIN_U32("graphics/trainers/palettes/wally_back_pic.gbapal.lz");
+const u32 gTrainerBackPicPalette_RubySapphireBrendan[] = INCBIN_U32("graphics/trainers/palettes/ruby_sapphire_brendan_back_pic.gbapal.lz");
+const u32 gTrainerBackPicPalette_RubySapphireMay[] = INCBIN_U32("graphics/trainers/palettes/ruby_sapphire_may_back_pic.gbapal.lz");
+```
+
+Then go to **`src/data/trainer_graphics/back_pic_tables.h`**, jump into the bottom and replace all of the code with :
+```c
+    TRAINER_BACK_PAL(BRENDAN, gTrainerBackPicPalette_Brendan),
+    TRAINER_BACK_PAL(MAY, gTrainerBackPicPalette_May),
+    TRAINER_BACK_PAL(RED, gTrainerBackPicPalette_Red),
+    TRAINER_BACK_PAL(LEAF, gTrainerBackPicPalette_Leaf),
+    TRAINER_BACK_PAL(RUBY_SAPPHIRE_BRENDAN, gTrainerBackPicPalette_RubySapphireBrendan),
+    TRAINER_BACK_PAL(RUBY_SAPPHIRE_MAY, gTrainerBackPicPalette_RubySapphireMay),
+    TRAINER_BACK_PAL(WALLY, gTrainerBackPicPalette_Wally),
+    TRAINER_BACK_PAL(STEVEN, gTrainerBackPicPalette_Steven),
+```
+
+At this point, you have delinked the palette sharing between the backsprite frames and front trainer sprite.
+
+### Allow Backsprites to Animate in 5 Frames.
+Still in the **`src/data/trainer_graphics/back_pic_tables.h`**, you should see `gTrainerBackPicCoords`. Replace all of them with :
+```c
+    [TRAINER_BACK_PIC_BRENDAN] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_MAY] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_RED] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_LEAF] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_RUBY_SAPPHIRE_BRENDAN] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_RUBY_SAPPHIRE_MAY] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_WALLY] = {.size = 8, .y_offset = 5},
+    [TRAINER_BACK_PIC_STEVEN] = {.size = 8, .y_offset = 5},
+```
+
+Then head to **`src/data/trainer_graphics/back_pic_anims.h`**, and you should see how the frames are animated.
+For simple editing, delete all of the code of this file and replace everything with the code below :
+```c
+static const union AnimCmd gAnimCmd_Brendan_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_May_Steven_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_Wally_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_Red_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_Leaf_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_RubySapphireBrendan_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd gAnimCmd_RubySapphireMay_1[] =
+{
+    ANIMCMD_FRAME(1, 20),
+    ANIMCMD_FRAME(2, 6),
+    ANIMCMD_FRAME(3, 6),
+    ANIMCMD_FRAME(4, 24),
+    ANIMCMD_FRAME(0, 1),
+    ANIMCMD_END,
+};
+
+static const union AnimCmd *const sBackAnims_Brendan[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_Brendan_1,
+};
+
+static const union AnimCmd *const sBackAnims_May[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_May_Steven_1,
+};
+
+static const union AnimCmd *const sBackAnims_Red[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_Red_1,
+};
+
+static const union AnimCmd *const sBackAnims_Leaf[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_Leaf_1,
+};
+
+static const union AnimCmd *const sBackAnims_RubySapphireBrendan[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_RubySapphireBrendan_1,
+};
+
+static const union AnimCmd *const sBackAnims_RubySapphireMay[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_RubySapphireMay_1,
+};
+
+static const union AnimCmd *const sBackAnims_Wally[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_Wally_1,
+};
+
+static const union AnimCmd *const sBackAnims_Steven[] =
+{
+    sAnim_GeneralFrame0,
+    gAnimCmd_May_Steven_1,
+};
+
+const union AnimCmd *const *const gTrainerBackAnimsPtrTable[] =
+{
+    [TRAINER_BACK_PIC_BRENDAN] = sBackAnims_Brendan,
+    [TRAINER_BACK_PIC_MAY] = sBackAnims_May,
+    [TRAINER_BACK_PIC_RED] = sBackAnims_Red,
+    [TRAINER_BACK_PIC_LEAF] = sBackAnims_Leaf,
+    [TRAINER_BACK_PIC_RUBY_SAPPHIRE_BRENDAN] = sBackAnims_RubySapphireBrendan,
+    [TRAINER_BACK_PIC_RUBY_SAPPHIRE_MAY] = sBackAnims_RubySapphireMay,
+    [TRAINER_BACK_PIC_WALLY] = sBackAnims_Wally,
+    [TRAINER_BACK_PIC_STEVEN] = sBackAnims_Steven,
+};
+```
+
+Then head to **`src/data.c`**, search for `gTrainerBackPicTable_Brendan`. You should see the backsprite data for Brendan, May, Steven, etc.
+Simply add `gTrainerBackPic_X + 0x2000, 0x0800,` don't forget to replace the *X* to match the code on the 5th line of the code above , for example : 
+```c
+const struct SpriteFrameImage gTrainerBackPicTable_Brendan[] =
+{
+    gTrainerBackPic_Brendan, 0x0800,
+    gTrainerBackPic_Brendan + 0x0800, 0x0800,
+    gTrainerBackPic_Brendan + 0x1000, 0x0800,
+    gTrainerBackPic_Brendan + 0x1800, 0x0800,
+    gTrainerBackPic_Brendan + 0x2000, 0x0800, //5th
+};
+
+const struct SpriteFrameImage gTrainerBackPicTable_May[] =
+{
+    gTrainerBackPic_May, 0x0800,
+    gTrainerBackPic_May + 0x0800, 0x0800,
+    gTrainerBackPic_May + 0x1000, 0x0800,
+    gTrainerBackPic_May + 0x1800, 0x0800,
+    gTrainerBackPic_May + 0x2000, 0x0800, //5th
+};
+
+So on and so forth
+```
+
+At this point, you have successfully animate your backsprites.
\ No newline at end of file