Buttons are the most commonly used extension components in FairyGUI. It is used for multiple purposes, such as RadioButton, Checkbox, List Item, etc. in the traditional UI framework, all of which are buttons in FairyGUI.

Create button

There are two ways to create a button component.

Edit-mode properties

In the component editing state, the properties panel of the button component is:


Note: There is not only “title” and “icon” inside the button component, you can place any component, such as placing as many texts, loaders, etc. The “title” and “icon” settings are only used for the button components to be intuitively set when the editor is instantiated.

Instance properties

Select a button component on the stage, and the property panel list on the right appears:


Set the button’s title or icon. You don’t even need to force the object to be the type of GButton. You can use the interface provided by GObject directly, for example:

GObject obj = gcom.GetChild ("n1");
    obj.text = "hello";
    obj.icon = "ui://package name/image name";

If it is a radio or multi-select button, the following method sets whether it is selected:

button.selected = true;

Normally for a single / multi-select button, the user can switch the state after clicking. If you don’t need this and want to change the state only through the API, then you can:

// After closing, you can only modify the state of the button by changing the selected property. The user will not change the state when clicked.
    button.changeStateOnClick = false;

The global sound of the button is set as follows:

// The Unity version requires an AudioClip object. If you use the resources in the library, you can use:
    UIConfig.buttonSound = (NAudioClip) UIPackage.GetItemAssetByURL("ui://package name/sound name");
    // Other versions require a resource url, that is:
    UIConfig.buttonSound = "ui://package name/sound name";

The volume of the button global sound is set as follows:

// Global volume
    UIConfig.buttonSoundVolumeScale = 1f;

This setting can only be set before any UI is created. If you want to dynamically control the global sound (including dynamic sound effects) on or off, the Unity platform can use the following methods, other platforms need to consult the functions provided by the engine.

GRoot.inst.EnabledSound ();
    GRoot.inst.DisableSound ();
    // Adjust the global sound volume, this includes the button sound and the sound played by the effect
    GRoot.inst.soundVolume = 0.5f;

The method of monitoring the click of a common button is: (Note that the click event is not only a button, any touch-enabled components, such as common components, loaders, graphics, etc., and their click event registration method is the same as the button.)

button.addClickListener(this.onClick, this);
button.onClick(this, this.onClick);
button->addClickListener(CC_CALLBACK_1(AClass::onClick, this));
button.onClick(this.onClick, this);

The button can simulate a triggered click:

// Simulate the trigger click, there will only be a triggered performance, and changing the button state will not trigger listening for the button click event.
    button.FireClick (true);
    // If the click event is to be triggered at the same time, an additional call is required: (only Unity / Cry examples, other platforms study it themselves)
    button.onClick.Call ();

There are notification events when the radio button and radio button state change:

button.addEventListener(StateChangeEvent.CHANGED, onChanged);
button.addEventListener(StateChangeEvent.CHANGED, this.onChanged, this);
button.on(fairygui.Events.STATE_CHANGED, this, this.onChanged);
button->addEventListener(UIEventType::Changed, CC_CALLBACK_1(AClass::onChanged, this));
button.on(fgui.Event.STATUS_CHANGED, this.onChanged, this);