Basis

Open project

After launching the FairyGUI editor, the welcome window is displayed first:

The editor supports opening multiple projects at the same time. On Windows platforms, multiple FairyGUI editors can be launched by double-clicking the icon on the desktop repeatedly. On the Mac platform, you can open a project, then click the main menu “File”-> “New Window”, and then open other projects.

Create new project

Creates a new UI project at the specified location.

The structure of the FairyGUI project in the file system is:

Main interface

The editor’s main interface consists of the following parts:

  1. main menu. On Mac, the main menu is integrated with the Mac application menu; on Windows, the main menu is displayed at the top of the main interface.
  2. The main toolbar. Commonly used function buttons.
  3. Document view, including a list of open documents, side toolbar, and stage area.
  4. The status bar shows the last message output from the console. Click to open the console.
  5. Each function view, users can drag them to different positions according to usage habits, or close them. Context the title bar of the panel and select “Close” from the context menu. If you want to open it again, go to “Main Menu-> View”.

Main toolbar

Resource Library

The tree view is used in the repository view. The top-level nodes are packages, and folders can be created under each package.

General operation

toolbar

Context menu

Package group

When there are more packages in the library panel, finding things is more troublesome. The editor provides the ability to group packages.

Click Edit Group to display the dialog box:

The list on the left can be added, deleted, modified, and the display order adjusted; the list on the right selects the packages in the group.
In particular, My Workspace (Local) is a special group. This group cannot be deleted or renamed. Its settings are saved in the user’s local machine and will not be saved in the project’s settings. Team sharing. It is designed to record personal work tasks.

Favorites

Favorites provides a quick access to frequently used components. You can put some commonly used components or resources in favorites for quick access.

Context one or more resources in the resource library and select “Add to Favorites” from the context menu to add the resources to favorites.

Display list

Shown here is a display list of components. Arranged in display order, the lower the component in the list, the more advanced. You can drag and drop change elements directly in the list to change their position in the display list.

Transitions

Shown here is the transition list of the component.

Create new transition. Enter the component immediately after creation Edit Transition

Rename transition.

Copy transition. The copied transition list will add a new transition with exactly the same content.

Delete transition.

Timeline

  1. Timeline and playhead position. The unit of time display is seconds.
  2. The various components and attributes involved in animation. The component name and type are shown on the left, and the property names are shown on the right. To add a new item here, click the symbol on the stage and select Properties from the pop-up context menu.
  3. Timeline of each attribute. Represents a keyframe,Represents the use of interpolation animation between two key frames,A small red flag indicates that this key frame has a Label, which can be accessed by code by name.
  4. Information display area.
    • FPSAnimation frame rate. Can be modified here.
    • frameThe current playhead is at frame number.
    • timeThe time of the current playhead, in seconds.
  5. Timeline zoom in / out. Drag to the right to increase the editable length of the timeline. For example, when the slider is on the far left, the timeline only displays a maximum of 30 seconds. If you want to make a few minutes of content, you can drag the slider to the right.

Timeline operation:

Context menu:

Context menu 2:

Reference

Query the situation where a resource is referenced by other resources, or the situation where a resource references other resources. And you can replace references in the query results.

In the resource library view, you can activate the reference view after selecting a resource and selecting “Query Dependencies” from the context menu.

  1. Query depends on my resources Query the resources I rely onThe latter is typically used for components.
  2. You can drag in the resources you need to operate here.
  3. Click the drop-down arrow to switch to replace mode. After clicking, the following interface appears:Drag the resource you want to replace in the input box below and click Replace. Note that you must query before replacing.
  4. List of query results.

Enter keywords to search for resources that have keywords in their names. Keywords are not case sensitive.

Console

Displays prompts, warnings, and error messages output by the software.

Preview

The preview interface displays thumbnails of the selected assets in the current asset library.

Click on the upper right cornerThe following menu pops up:

Inspector

Click any one or more components in the stage, and the corresponding properties panel will be displayed on the right side of the editor. If you click in the empty space of the stage (with nothing selected), the properties panel of the container component is displayed.

We will introduce the meaning of attributes here in detail when we introduce the usage method of each resource type.

Document view

Side toolbar

Select the mode.

Free scroll mode. In particular, in the selection mode, press and hold the space to temporarily switch to the free scroll mode, and release the space to return to the selection mode.

Text control.

Rich text control.

Graphic controls.

List control.

Loader control.

Creates a combination for the currently selected component.

Cancel the current combination.

对齐操作。 After selecting multiple components, click the button here to execute the corresponding alignment function. For example, after selecting two components and clicking left and right to center, the two components will be set to centerline alignment. If only one component is selected, the component performs the corresponding alignment function on the container component。 For example, after selecting a component and clicking Align Left and Right, the component will move to the middle position of the container component. As another example, after selecting a component and clicking the same width, the width of the component will be set to the same as the container component.

The selected components can be arranged in uniform row spacing, uniform column spacing, or table.

Controller toolbar

Click the plus sign to add a new controller. Click the controller name to enter the controller editing interface. Click each page button of the controller to switch pages.

stage

The stage is the editing area of the component. To add content to the stage:

The center color is different from the surrounding color in the main display area of the component. Although you don’t need to place everything in the component area, because by default, content beyond the component area will still be displayed, but the size of the component is only determined by the component area, and it does not calculate the enclosing of all children. Some special functions, such as filters, only work in the component area, so it is recommended to place the content in the component area as much as possible.

Common stage operations are:

Stage context menu:

Test interface

The test interface consists of the following parts:

  1. Click here to exit test mode.
  2. Where to set the adaptation test parameters.
  3. Controller list. Click each page button of the controller to switch pages.
  4. Here is how the component will look when run.
  5. Individual function views. Users can drag them to different locations according to their usage habits, or close them. Context the panel title bar and select Close from the context menu. If you want to open it again, go to “Main Menu-> View”. The animation view and console view are displayed by default in test mode.

Adaptation test

  1. If the currently designed component needs to be tested for adaptation, you can check the “Adaptation Test” option.
  2. Open the setting of global adaptation parameters. Should be performed before the first use of the adaptation testSetting of global adaptation parameters
  3. Adapt to screen settings. Note: The settings here are only used for adaptation testing. In actual operation, the top-level components are in size and position, and need to be set in code.
    • full screenThis means that the component fills the screen. At this time, the component size is equal to the logical screen size.
    • Adapt to height, center left and rightAdjust the width of the component based on the ratio of the height of the component to the height of the logical screen. For example, if the height of the component is 1/2 of the height of the logical screen, and the height of the component after the adaptation is equal to the height of the logical screen (magnified 2 times), the width of the component is also set to 2 times the width of the logical screen. Regardless of whether the horizontal direction is insufficient or overflowing, the position of the component is set in the center of the logical screen.
    • Adapt to width, center up and downAdjust the height of the component based on the ratio of the width of the component to the width of the logical screen. For example, if the width of the component is 1/2 of the logical screen width, and the width of the adapted component is equal to the logical screen width (2x magnification), the height of the component is also set to twice the logical screen height. Whether the vertical direction is insufficient or overflowing, the position of the component is set in the center of the logical screen.
  4. Tested equipment. Tip: You can do this in the “Project Settings-Adaptation Test-Equipment Configuration“Add other equipment.
  5. Switch between landscape and portrait.

Please note when adapting the test: If you change the screen size during the dynamic effect playback, and this dynamic effect involves components with adaptive settings, the dynamic effect may play abnormally. Please don’t change the screen size during the animation.