BFLYT Editing

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.

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.