Editing the UI

Note

This guide is not comprehensive, and will simply walk you through the process of editing a .arc file. It expects that you've already dumped your data .bins, and are able to access the .arc files in nx/ui/layout/Title, as well as understand how patch using pack_info.py

Tools

• sarc-tool (Credit: aboood40091)
• Switch Layout Editor (Credit: FuryBaguette)
• BNTX-extractor (Credit: aboood40091) (Not used in this guide)

The UI for Fire Emblem: Three Houses utilizes the same type of files as the Nintendo Switch's UI does. This is likely the case for several other games as well. It makes our life much easier when attempting to create Quality of Life mods affecting the UI, as tools have already been developed to edit these types of elements. Whats more, Three Houses utilizes .SARC files for these elements, which were also used with some WiiU content, and have been previousy made unpackable. In this guide, I'll walk you through a pretty simple modification - moving the text and purple-y cloud that introduces a room to the center of the screen, though still near the bottom. We'll also increase the font size just enough to be readable. By understanding how to make these minor changes, you'll find it much easier to make more impactful ones.

1. Download and Extract sarc-tool and Switch Layout Editor(extract this one with 7zip) to their own folders. Keep a window open on sarc-tool's folder.
2. In your dumped folder, navigate to nx/ui/layout/Title. Here you'll find ~53 .arc files. These are why you're here. These files handle UI element positions, sizes, animations, and more. In plain English, if you want to edit the UI in some way, you'll want to check here. At the time of writing this, the .arc files aren't mapped out by file name. In this guide, we'll be looking at 30819.arc, which I'll refer to as abb_area_name
3. Drag and drop 30819.arc onto sarc_tool.exe. Once it's done, you'll see a new folder, 30819. This will contain four folders: anim, bgsh, blyt, and timg. ** anim contains the animations that will affect our layout. ** bgsh contains shader data which will affect the look of our layout. This is currently not editable with the above tools. ** blyt contains the layout itself. ** timg deals with the texture images used. These textures can be extracted and edited using BNTX-extractor.
4. Enter blyt and open abb_area_name.bflyt in Switch Layout Editor. You should see something like this:
5. If the bottom-left pane is blank, don't worry. Select RootPane or one of its child nodes. This will load in the information, which is distinct to each node. You may also zoom in and out using the slider at the bottom.
6. Notice the black rectangle near the bottom-left of the boxes in the right pane. This matches up with the room name text whenever you enter a different part of the monastery ingame. Let's move it around a bit, and increase the size of that text. Expand RootPane and select pos_area, noting that the small square within said rectangle is now red.
7. Edit Position to 0;-350;
8. Expand pos_area and pos_txt, and select p_txt_area. This is, effectively, our textbox.
9. Set FontXYSize from 40;40 to 60;60
10. Save your file, overwriting the previous version of abb_area_name.bflyt. Close Switch Layout Editor, and drag your 30819 folder onto sarc_tool.exe This will generate a new file, 30819.sarc. You can safely change sarc to arc, though you may want to do that elsewhere in order to preserve the original file.
11. Make a patch as you normally would, placing your newly edited file into romfs\mods\nx\ui\layout\Title.

Here's a before and after image, for comparison:

As you can see, there's a bit of cut-off on the g in Dining Hall. To fix that, you'd want to edit the Size attribute in abb_area_name.bflyt's p_txt_area, and possibly also pos_txt. Matching your text size changes to the text shadow(p_txt_shadow) may also be in order. I hope to see what changes you come up with!

For reference, this spreadsheet can serve as a handy guide for figuring out what .arc files correspond to what UI elements.