BFLYT Editing
Currently this editor is quite new, however i have been hard at work trying to make it very stable. Wii U and Switch layouts are supported and should save perfectly fine. Bclyt and brlyt are both planned and will open (but currently saving for those is not supported yet).
Requirements:
- this tool.
- A PC with OpenGL. Older versions should work.
Controls:
- Mouse (Left Click) to select.
- Mouse (Right Click) to open menus.
- Hold Middle Mouse, or hold Shift + Mouse (Left Click) to pane camera.
- Hold Mouse (Left Click) to drag.
- Ctrl + Z to undo
- Ctrl + R to redo
- Del to delete
To start with, what can this do so far?
- Can create all major pane types. Part panes are not supported yet.
- Edit properties
- Move and transform panes.
- Remove existing panes.
- Preview animations.
- Convert between versions and endianness
- Preview layouts. Can preview with textures and materials, however texture combiners are not finished so not everything will be perfectly accurate yet.
To start lets edit properties. Here we have a tree, and a property grid.
What each section does
- Quick Access: We have a quick access to easily access to multiple UI elements.
- File Settings controls the version and other properties when saved.
- Textures is a list of textures used by the layout.
- Fonts is a list of font files used by the layout.
- Materials is how the UI will be rendered. Picture boxes and window panels currently use these.
- The root items are how the UI is structured. These are by multiple panes/panels, and can be grouped. These can be picture boxes, text boxes, normal panels (null panes), and also part panels. I will go over each one later.
Lets start with material editing.
Here we can add, edit, and remove textures. Here is the dialog for adding or editing one.
With this you can select any texture already in the layout, or add more. (Note for now you must have the layout open in an archive that has textures for this to save properly)
Materials have a black color, and a white color They basically blend these colors together, so white will influence the color received more, or black depending on the type. These should display fine within the editor.
Select the color with the drop down arrow. This will open the color selector.
The color is on the top. The alpha color is below. And both combined is at the bottom. You can have it whatever you want, simply move the color picker around and sliders.
Panels is the base of every UI element. These make up rectangles, and can be moved around, rotated, and resized within the property window. Adjusting parent elements will affect it's children.
When selecting a pane, you will get a selection box which can move the edges around and resize it. Selecting the center of it will allow the mouse to move it around.
Tips:
- Rotation is in degrees.
- You can right click and hide a pane. Ctrl + H also will do the same.
- You can delete with the "Del" key.
- You can Ctrl + Z to undo.
- You can Ctrl + R to redo.
You can simply click on the pane with the mouse to select one. To select other panes overlapping, right click and select the pane you want to choose.
Dragging the mouse while left clicking will create a selection box for selecting multiple panes.
Right click and in the "Create Panes" menu you can create new panes.
Optionally you can automatically make picture panes by dragging panes from the texture menu.
The width and height will automatically be adjusted, but you can always change it with moving the edges/corners or using the property editor.
These panes are pretty simple, they include images and also materials and vertex colors.
Vertex colors have an advantage over material colors as they can be per corner. These also include alpha for transparency.
The rest of the data can be edited with the materials section.
These panes contains corners and edges which can have additional textures and materials. The center area is called the content region, which is default selected.
You can select which texture and other material setting based on the region that's selected.
Here I set a texture for all 4 corners. They can be set to specific ones too with the frames dropdown.
Textures can also be flipped if necessary
When creating a new one, you must select the font file you want, either by adding one or selecting an existing one if it has one.
These will not display the text unless the file is open in the toolbox.
Keep in mind text panes are very wip and rendering is not accurate. The text currently stretches by the pane (which is not right) and is not positioned properly. Colors also don't all display and shadows aren't shown. This will be fixed in a future update.
If you want a clean preview, go to the Window option and choose game preview. This is a window with a clean view of the gui.
Alternatively you can hide them in editor too either specific panes or as the game preview.
Hold on tight as editing isn't quite finished yet! But they can be previewed!
These can be previewed aslong as you open your layout in a sarc/arc/lyarc.
Simply go to the animation hierarchy tab and select one.
Then select the play button on the timeline below.
Tips:
- Hold down shift and you can select multiple animations. These will both play at the same time! Very useful if many are combined together or layered!
For saving, simply File - Save. This will apply the changes if the file was opened in an archive, or to the file itself. If you have opened it in a sarc file, you will want to close the editor and save the sarc file in the toolbox itself. This will be changed with a proper save export dialog soon.