Back to Animations: introduction¶
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
stored in .bflyt and .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
in .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,
.szs file |
Menu |
|---|---|
ResidentMenu.szs |
Home screen |
Set.szs |
Settings |
Psl.szs |
Player selection |
Flauncher.szs |
All software / full launcher |
Lock.szs |
Lock screen |
MyPage.szs |
User page |
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.
Info
You will also find in themes/systemData other .szs files that aren't listed here, e.g. Option.szs.
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¶
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.
Tip
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
these .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
the .nxtheme as you would normally do.
In summary¶
We'll go through these general steps that apply for any type of animation editing:
-
make two copies of the picked
.szsfile -
edit one of them with our animations
-
layout diffing
-
compile the
.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.