Controller

The controller is one of the core functions of FairyGUI, which provides support for the following similar requirements in UI production:

Controller design

Each component can create one or more controllers, as shown in the following figure:

  1. Click the controller name to display the controller design interface.
  2. Click the controller page button to switch pages.
  3. Add controller.

The controller design page is as follows:

Controller action

You can define a series of actions to be performed when the page is switched.

Currently supports two actions, playing transition and switching pages.

  1. Play transition: Specifies to play an transition when the page changes. ClickMake finer settings:

    • repeat timesSet the number of transitions. -1 means loop playback.

    • delaySets how many seconds the transition is delayed to start playback.

    • Stop when leaving the pageIf the transition is still playing when you leave the page, check this option to forcibly stop the transition. If you don’t check this, the transition will continue to play until it stops (if it is a loop, it will never stop).

  2. Switch page: You can switch other controllers to realize the linkage function of one controller. You can even set the controller of a child component, provided that the controller of the child component is already set to “Export as component property”. The target page has two special
    Options:Pages with the same index``And a page of the same name。 With this special option, the two controllers can be fully synchronized.

Attribute control

After creating the controller, here’s how to use the controller. The controller works by controlling the properties of each component.

Select a component on the stage, you can see the “Properties Control” panel appears in the right property bar:

Display control

The display control indicates that the component is displayed only when the active page of the controller belongs to one of the participating pages, otherwise it is not displayed. If the participation page is empty, the display control has no effect and the component will always be displayed.

Set the display control mode:

Select the controller on the left and check the participation page on the right.

Remarks:

  1. The display control does not use the visible property of the component itself. The two are independent. Whether they are visible in the end is the logical result of the AND logic.

  2. When the component is not visible, it will not be removed from the display list of the container (GComponent), but the underlying layer of FairyGUI will handle it so that invisible components do not take up rendering resources. The display list that is not disturbed by the controller ensures that the required components can be accessed at any time through GetChild.

  3. If necessary, you can display theShield display controller.

    Suppose there are now two components A and B, both using display controls, and they are displayed on different pages. Now I want to align them, this is obviously not possible, because they will not be displayed at the same time, then they can only fill in their coordinates manually, or cancel the display control, align it and set it back. This is obviously too cumbersome, and the editor has taken this into account for you.

    After clicking “Shield Controller”, all the components hidden by the controller can be displayed, you can easily apply the alignment, or select these components for batch operations.

    This function only assists UI editing, so it is only effective at design time, and there is no shielding function in actual operation.

Display Control-2

Display control-2 is generally used in conjunction with display control. It can achieve the needs of two controllers to control the display of a component. It also provides a logical relationship option, you can choose “AND” or “OR”.

Position control

Position control means that the component can have different XY coordinates in different controller pages.

After setting the controller, on different controller pages, you can adjust the X and Y attribute values of the target component. The editor will automatically record the attribute values of the component on different pages without additional operations.

Position control supports transition effects. SelectedLater, when the controller page changes, the component does not set new coordinates immediately, but uses an easing to reach the new value. ClickYou can set the easing parameters:

The position controller supports the use of percentages to record coordinates. SelectedLater, the coordinate values will be recorded using percentages. For example, when the component is placed at the horizontal center of the component, the x value is recorded as 50%. When the component size is changed, the coordinates of the components after switching the controller page are still the center, that is, 50% of the position.

Relationship between position control and correlation system

Assume that the controller C1 has two pages P1 and P2, and the component N is now set to position control. The coordinates on the page P1 are V1 (50, 50) and the coordinates on the page P2 are V2 (100, 100). Element N sets the right-to-right relation relationship with the container component. The controller is now on page P1 with coordinates (50, 50).

Now the size of the container component changes, the coordinate of the component N is modified to (70, 70) by the correlation system, at this time V1 is updated to (70, 70), and V2 is also automatically updated to (120, 120). In other words, the actions of the correlation system are applied to the coordinates saved on all pages.

Size control

Size control means that the component can have different width and height and Scale values in different controller pages.

After setting the controller, on different controller pages, you can adjust the width, height, ScaleX, and ScaleY property values of the target component, and the editor will automatically record the component property values on different pages.

The size control supports transition effects. The setting method of easing is the same as that of position control, please refer to position control.

Color control

Color control means that the component can have different colors in different controller pages. Only image components (corresponding to the color setting of the image), text / rich text components (corresponding to the color of the text), and loader components (corresponding to the color changing settings of the loaded image or transition) support color control.

After setting the controller, in different controller pages, you can adjust the color value of the target component, and the editor will automatically record the attribute values of the component on different pages.

Color controls support transition effects. The setting method of easing is the same as that of position control, please refer to position control.

Look control

Appearance control refers to the different controller pages of the element that can have different transparency, graying, rotation, and non-touch properties.

After setting the controller, you can adjust the transparency, graying, rotation, and non-touchable property values of the target component on different controller pages. The editor will automatically record the component’s property values on different pages.

Appearance controls support transition effects. But only transparency and rotation participate in easing, graying and untouchable are set immediately. The setting method of easing is the same as that of position control, please refer to position control.

Text control

Text control means that the component can have different text in different controller pages. Only text / rich text components (corresponding to the color of the text), label components, button components, and drop-down box components support text control.

After setting the controller, in different controller pages, you can adjust the text or title attributes of the target component, and the editor will automatically record the attribute values of the component on different pages.

Icon control

Icon control means that the component can have different icons in different controller pages. Only loader components, label components, and button components support icon control.

After setting the controller, on different controller pages, you can adjust the URL or icon properties of the target component, and the editor will automatically record the property values of the component on different pages.

transition control

transition control means that the component can have different transition-related settings in different controller pages. Only transition and loader support transition control.

After setting the controller, you can adjust the “play” and “frame” properties of the target component on different controller pages, and the editor will automatically record the property values of the component on different pages.

Font size control

Font size means that the component can have different font sizes in different controller pages. Only text, rich text, labels, and buttons support font size control.

After setting the controller, you can adjust the “font size” property of the target component on different controller pages, and the editor will automatically record the property values of the component on different pages.

Linkage with button

The controller can be linked with the buttons. When the normal button is pressed, or the radio / check button selection status changes, the controller’s page changes accordingly. Select a button component. In the “connection” property setting on the right, you can set a controller and a page for the controller:

After the setting is completed, there will be different reactions depending on the type of button:

The “selection control” of the list can be bound to a controller:

In this way, when the list selection changes, the controller also jumps to the page with the same index at the same time. Vice versa, if the controller jumps to a certain page, the list also selects the items with the same index at the same time.

Linking with page scrolling

Components or lists whose overflow processing is “scrolling”. If scrolling is also set to “page mode”, you can specify a “paging control” for them.

In this way, when the page is scrolled, the controller also jumps to the page with the same index. Vice versa, if the controller jumps to a page, the scroll container scrolls to the same index page at the same time.

Linkage with the drop-down box

The “select control” of the drop-down box can be bound to a controller:

In this way, when the drop-down box selection changes, the controller also jumps to the page with the same index at the same time. Vice versa, if the controller jumps to a certain page, the drop-down box also selects the item with the same index at the same time.

Controller

When running, the APIs commonly used by controllers are:

Controller c1 = aComponent.GetController ("c1");
    
    // Set the controller's active page by index
    c1.selectedIndex = 1;
    // If you do not want to trigger the Change event when you change the controller
    c1.setSelectedIndex (1);
    // can also be set using the name of the page
    c1.selectedPage = "page_name";
    // Get the current active page of the controller
    Debug.Log (c1.selectedIndex);

There are notification events when the controller changes:

//Unity/Cry/MonoGame
c1.onChanged.Add(onChanged);
//AS3
c1.addEventListener(StateChangeEvent.CHANGED, onChanged);
//Egret
c1.addEventListener(StateChangeEvent.CHANGED, this.onChanged, this);
//Laya
c1.on(fairygui.Events.STATE_CHANGED, this, this.onChanged);
//Cocos2dx
c1->addEventListener(UIEventType::Changed, CC_CALLBACK_1(AClass::onChanged, this));
//CocosCreator
c1.on(fgui.Event.STATUS_CHANGED, this.onChanged, this);

When changing the controller page, the property control connected to it may have easing. If you want to be notified of the end of the easing, you can listen to the GearStop event:

//Unity/Cry/MonoGame
aObject.OnGearStop.Add(OnGearStop);
//Egret
c1.addEventListener(GObject.GEAR_STOP, this.onGearStop, this);
//Laya
c1.on(fairygui.Events.GEAR_STOP, this, this.onGearStop);
//Cocos2dx
c1->addEventListener(UIEventType::GearStop, CC_CALLBACK_1(AClass::OnGearStop, this));
//CocosCreator
c1.on(fgui.Event.GEAR_STOP, this.onGearStop, this);

If you are initializing the interface, you may not want any easing. This can be done:

// Prohibit easing caused by all controllers
    GearBase.disableAllTweenEffect = true;
    c1.selectedIndex = 1;
    // remember to restore
    GearBase.disableAllTweenEffect = false;

The way to set the linkage between the button and the controller through code is (Generally not necessary, try to complete the design in the editor):

button.relatedcontroller = aController;
button.relatedPageId = aController.GetPageId(1);

You can set the property control with code: (Generally not necessary, try to complete the design in the editor):

// GearXXX objects are connections between controllers and properties. 0-display control, 1-position control, 2-size control,
    // 3-appearance control, 4-color control, 5-transition control, 6-text control, 7-icon control
    GearDisplay gearDisplay = obj.GetGear (0);
    gearDisplay.controller = obj.parent.GetController ("c1");
    // Note that here is the id of the page, not the index or name. Can be converted by Controller.GetPageIdByName.
    gearDisplay.pages = new string [] {...};
    GearXY gearXY = obj.GetGear (1);
    gearXY.tweenConfig.duration = 0.5f;