Supported Formats:
- BFLYT
- BRLYT
- BCLYT
- BFLAN
- BRLAN
- BCLAN
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.
- 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.
Table of Contents
- Tree Hierarchy
- Material Editing
- Color Editing
- Panel Editing
- Panel Selection
- Batch Editing
- Creating new panes
- Picture Panes
- Window Panes
- Text Panes
- Game Preview
- Animations
- Saving
Tree Hierarchy
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.
Material Editing:
Texture Map 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)
Color Editing:
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.
Panel Editing:
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.
Selecting
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.
Batch Editing
This is currently wip, but some properties support batch editing. Select multiple panes of the same type in the viewer (note the tree view does not support mutli selection yet but will in a future update).
Then edit in the editor
Here I edited vertex colors. Currently color properties can be batch edited. I plan to adjust the tool so every property can be batch edited in upcoming updates.
New 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.
Picture Panes
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.
Window Panes
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
Text Panes
Supported Font Formats
- BFFNT
- BCFNT
- BRFNT
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. Also if you want to move multiple panes you can do so in the viewer itself with mouse click/dragging.
Previewing
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.
Animations
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.
For editing simply double click an animation file in the list and you can edit them.
The editor isn't super user friendly atm. You can right click and add new entries.
Alternatively you can open a new animation window which will automatically load bflan data referenced to that pane.
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!
Saving
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.