UIButton

UIButton is a subclass of UIInteractive, which implements basic button functionality. The button component encapsulates UIImage for displaying background images, inherits from the interactive component UIInteractive, and uses the square area described by the built-in UITransform as the sensing hot zone.

Component Texture

The component has multiple states UIInteractiveStyle, each state corresponds to a texture

• normalSprite - Texture by default
• downSprite - Texture when the mouse is pressed
• overSprite - Texture when the mouse is over
• disableSprite - Texture when the component is disabled

We can set the corresponding background image of the component in various states to obtain the effect of the button changing style with the state switching

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
// Load a group of sprite textures
await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json')
// Set the corresponding state texture of the button
guiButton.normalSprite = Engine3D.res.getGUISprite('button-up')
guiButton.downSprite = Engine3D.res.getGUISprite('button-down')
guiButton.overSprite = Engine3D.res.getGUISprite('button-over')
guiButton.disableSprite = Engine3D.res.getGUISprite('button-disable')

Enable / Disable

To set whether the component is valid:

• true - Button will respond to mouse events
• false -Does not respond to mouse events, and presents the texture of disableSprite

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
guiButton.enable = true; //false

Component Interaction

Same as the normal Object3D, we can use the event listener to listen to the GUI series events in PointerEvent3D, and we can get the user operation response function callback:

• PointerEvent3D.PICK_CLICK_GUI: Mouse click
• PointerEvent3D.PICK_OVER_GUI: Mouse hover
• PointerEvent3D.PICK_OUT_GUI: Mouse out
• PointerEvent3D.PICK_UP_GUI: Mouse up
• PointerEvent3D.PICK_DOWN_GUI: Mouse down

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)

button.addEventListener(PointerEvent3D.PICK_CLICK_GUI, this.onClick, this)
button.addEventListener(PointerEvent3D.PICK_OUT_GUI, this.onOut, this)
button.addEventListener(PointerEvent3D.PICK_OVER_GUI, this.onOver, this)
button.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this)

Button Text

A component can add multiple GUI components, such as adding UIButton and UITextField at the same time

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
...
// Load font resources
await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt')
// Add GUI text
let buttonLabel = button.addComponent(UITextField);
buttonLabel.text = 'Click me';

WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

<

import { Engine3D, Scene3D, Object3D, Camera3D, ViewPanel, UIButton, HoverCameraController, PointerEvent3D, View3D, AtmosphericComponent, UITextField, Color, TextAnchor, WorldPanel, UIPanel, GPUCullMode } from '@orillusion/core';

class Sample_button {
    async run() {
        // initializa engine
        await Engine3D.init();
        // create new scene as root node
        let scene3D: Scene3D = new Scene3D();
        scene3D.addComponent(AtmosphericComponent);
        // create camera
        let cameraObj: Object3D = new Object3D();
        let camera = cameraObj.addComponent(Camera3D);
        // adjust camera view
        camera.perspective(60, Engine3D.aspect, 1, 5000.0);
        // set camera controller
        let controller = cameraObj.addComponent(HoverCameraController);
        controller.setCamera(0, -20, 30);
        // add camera node
        scene3D.addChild(cameraObj);

        let view = new View3D();
        view.scene = scene3D;
        view.camera = camera;
        Engine3D.startRenderView(view);

        // create panel root
        let panelRoot: Object3D = new Object3D();
        let panel: UIPanel = panelRoot.addComponent(WorldPanel);
        panel.cullMode = GPUCullMode.none;
        panelRoot.localScale.set(0.1, 0.1, 0.1);
        let canvas = view.enableUICanvas();
        canvas.addChild(panelRoot);

        // create button node
        let buttonQuad = new Object3D();
        panelRoot.addChild(buttonQuad);
        // create button component
        let button: UIButton = buttonQuad.addComponent(UIButton);
        // set button size
        button.uiTransform.resize(180, 60);

        // set button status
        // load sprite resource
        await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json');
        button.normalSprite = Engine3D.res.getGUISprite('button-up');
        button.downSprite = Engine3D.res.getGUISprite('button-down');
        button.overSprite = Engine3D.res.getGUISprite('button-over');
        button.disableSprite = Engine3D.res.getGUISprite('button-disable');

        // add button text
        // load font resource
        await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt');
        let buttonLabel = buttonQuad.addComponent(UITextField);
        buttonLabel.text = 'Click me';
        buttonLabel.fontSize = 24;
        buttonLabel.color = new Color(1, 0.8, 0.4);
        buttonLabel.alignment = TextAnchor.MiddleCenter;

        // add listener
        buttonQuad.addEventListener(PointerEvent3D.PICK_CLICK_GUI, this.onClick, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_OUT_GUI, this.onOut, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_OVER_GUI, this.onOver, this);
        buttonQuad.addEventListener(PointerEvent3D.PICK_DOWN_GUI, this.onDown, this);
    }

    private onClick() {}

    private onOut() {}

    private onOver() {}

    private onDown() {
        alert('clicked me!');
    }
}
new Sample_button().run();