ユーザインターフェイス - ボタン

Simple buttons using Element and Button components. See the full scene.







2Dスクリーンなので、Screen Spaceをチェックしました。Reference Resolutionは、目標とする解像度です。この場合は1080 x 1920です。Scale ModeのBlendを選択して解像度の変更に適応し、Scale Blendを1に設定して、スクリーンが高さの変更に適応するようにします 。

画面には、上部に表示されるロゴのImage Elementや'SELECT QUALITY'のテキストを示すText Elementと3つのボタンなどのさまざまな子があります。

Adding a button to the UI

There are two ways to add a button to the scene.

Via the Hierarchy Panel

This is the easiest way to add a button to the scene as it creates the necessary entities, components and preconfigures the properties.

With an existing Element

If there is an existing Element that we would like to turn into a button, we can add Button component to it in the Inspector panel and configure it ourselves.

Remember to enable Use Input on the Element component so the user can interact with it:

And set the Image Entity property on the Button component to be same Entity that the Element component is on.

Button setup

Let's take a closer look at the first button in the example project:

The button has 3 components:

The button Entity also has a Text Element as a child for showing text (this is optional depending on the style of your button).

The Element's type is Image and it's anchored to the bottom of the screen.

After anchoring the button we give it an offset from the bottom by simply moving it up.

We also have Use Input enabled in order to interact with the button.

Changing how the button looks on interaction

We can change how the button looks when the user interacts with the button for the following states:

This can be done via two Transition Modes:

Tinting the color

Tinting the button color in each state is the easiest method to add some user feedback when they interact with it. In the project, the High Quality button has the following setup:

With the following effect:

Changing the Sprite

We can also change the sprite image of the button in the different states for cases where you may want the button to change shape or want to give a look of the button being 'pressed' into the screen. The Low Quality button has the following setup:

With the following effect:

Button events

We have a script in the project that listens for when the user clicks on the button and updates the text in the UI to the quality setting that they've selected.

var ButtonLogic = pc.createScript('buttonLogic');
ButtonLogic.attributes.add('textEntity', {
    type: 'entity',
    description: 'The entity that we want to update when the button is clicked'
ButtonLogic.attributes.add('description', {type: 'string'});

// initialize code called once per entity
ButtonLogic.prototype.initialize = function() {
    this.entity.button.on('click', function(event) {
        this.textEntity.element.text = this.description;
    }, this);

This script is attached to the button entities in the scene.

The Button component has a click event against which a callback function can be registered that works for both mouse and touch input.

this.entity.button.on('click', function(event) {
    this.textEntity.element.text = this.description;
}, this);

There are other events that can be listened to such as mouseenter and mouseleave. A full list can be found in the API documentation.

These events will only fire if Use Input is enabled on the Element component so make sure that has been ticked in the inspector.

This site is translated by the community. If you want to get involved visit this page