UIButton

UIButton 继承自 UIInteractive（可交互组件）, 实现基本的按钮功能。 按钮组件内部封装有 UIImage 用于显示背景图，集成自可交互组件 UIInteractive，使用内置的 UITransform 描述的方形区域作为感应热区。

组件贴图

组件有多种状态 UIInteractiveStyle，每种状态对应一个贴图

• normalSprite - 默认状态对应的贴图
• downSprite - 鼠标按下时对应的贴图
• overSprite - 鼠标 over 时对应的贴图
• disableSprite - 组件被禁用时的贴图

我们可以设置组件各种状态下对应的背景图，即可获得按钮随状态切换变换样式的效果

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
// 加载一组精灵贴图
await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json')
// 设置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')

启用/禁用

设置组件是否有效：

• true - 按钮会响应鼠标事件
• false - 不响应鼠标事件，并且呈现 disableSprite 的贴图

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

组件交互

跟普通 Object3D 一样，我们可以使用事件监听器来监听 PickGUIEvent3D 中关于 GUI 系列事件，即可获得用户操作响应函数回调:

• PickGUIEvent3D.PICK_CLICK_GUI：鼠标点击
• PickGUIEvent3D.PICK_OVER_GUI：鼠标滑入
• PickGUIEvent3D.PICK_OUT_GUI：鼠标移出
• PickGUIEvent3D.PICK_UP_GUI：鼠标抬起
• PickGUIEvent3D.PICK_DOWN_GUI：鼠标按下

TIP

v0.8.4 后GUI 组件的鼠标事件弃用原有的 PointerEvent3D 事件，转而使用 PickGUIEvent3D 作为默认鼠标事件管理，除了名称变化，其它参数没有变化

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

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

按钮文字

一个对象可以添加多个 GUI 组件，比如同时添加 UIButton 和 UITextField

let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
...
// 加载字体资源
await Engine3D.res.loadFont('https://cdn.orillusion.com/fnt/0.fnt')
// 添加 GUI文字
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, PickGUIEvent3D } 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(PickGUIEvent3D.PICK_CLICK_GUI, this.onClick, this);
        buttonQuad.addEventListener(PickGUIEvent3D.PICK_OUT_GUI, this.onOut, this);
        buttonQuad.addEventListener(PickGUIEvent3D.PICK_OVER_GUI, this.onOver, this);
        buttonQuad.addEventListener(PickGUIEvent3D.PICK_DOWN_GUI, this.onDown, this);
    }

    private onClick() {}

    private onOut() {}

    private onOver() {}

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