Animations: refresher course on files and diffing¶
Quick reminder on Nintendo Switch files¶
Making themes means altering
.szs files. Those are archives that contain the UI's graphical assets, all of them being
.bflan files. Basically, the whole UI is broken down into such files. So in order to create
animations, we'll obviously need to tamper them.
Pictures, icons, text, and pretty much everything displayed on your console screen are pane objects that are contained
.bflyt files. These
.bflyt files also contain information on panes' position/size/scale and their RGBA channels.
In other words, those panes are what we will mess around with in this tutorial, i.e. they are precisely the objects on
which we will attach our animations. So you might want to check beforehand the
.bflyt file that contains the
pane you want to animate.
In practice, we'll essentially be focusing on
.bflan files, in which are stored parts of the animation data
for a specific
.bflyt file. Almost all the process is done through Switch Layout Editor which I'll start to
introduce in the next subsection.
Getting back to
.szs archives, you'll find those in
themes/systemData on your SD card, these have already been
extracted by the NXTheme Installer homebrew app. Please note that
.szs files contain copyrighted stuff, making them
illegal to share (that's the reason why modders implemented the
.nxtheme format to get around this).
Each file corresponds to a specific menu,
||All software / full launcher|
so if one wants to edit UI elements on the home page, we would need to grab the
ResidentMenu.szs file. Likewise, if we
want to make edits to the all apps section,
Flauncher.szs is the file we will be working with. You get the idea.
You will also find in
.szs files that aren't listed here, e.g.
Those are not officially supported by the theme injector, but it is possible to manually edit them regardless. Check out LayoutDocs' diffpatching section.
Diffing with Layout Editor¶
For more details, see the following section:
You should be used to messing around with
.json files and compiling themes with Switch Theme Injector, but maybe
you're not familiar with Switch Layout Editor. Think of it as a
.szs reader/archiver that also offers an actual
on-screen preview of the panes' positioning, which is quite convenient for layout editing. It turns out that Layout
Editor is also used for animation editing.
Alternatively, you can use Switch Toolbox (also included with LayoutKit), which is another piece of software that has pretty much the same purposes as Layout Editor, at least for our current needs. However, since I've been working with Layout Editor, I won't be covering Switch Toolbox here, but at the end of the day it's up to your preference.
Once the animations have been implemented, we'll need to make a layout diff (as in difference). Basically, we want
to work with two versions of the
.szs file of interest: the first one stays untouched and the second one will contain
all the edits that have been made through Layout Editor. Layout diffing is the process of comparing (diffing) both
.szs files and spitting out a
.json layout that reflects all your edits. The output
.json file can then be used in Switch Theme Injector to compile
.nxtheme as you would normally do.
We'll go through these general steps that apply for any type of animation editing:
make two copies of the picked
edit one of them with our animations
.nxthemeusing the output/diffed
.jsonand install onto the console (usual process with Switch Theme Injector and NXTheme Installer)
With all of that being introduced, we can finally start creating animations.