UIButton
UIButton 继承自 UIInteractive(可交互组件), 实现基本的按钮功能。 按钮组件内部封装有 UIImage
用于显示背景图,集成自可交互组件 UIInteractive
,使用内置的 UITransform
描述的方形区域作为感应热区。
组件贴图
组件有多种状态 UIInteractiveStyle,每种状态对应一个贴图
normalSprite
- 默认状态对应的贴图downSprite
- 鼠标按下时对应的贴图overSprite
- 鼠标 over 时对应的贴图disableSprite
- 组件被禁用时的贴图
我们可以设置组件各种状态下对应的背景图,即可获得按钮随状态切换变换样式的效果
ts
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')
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')
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
启用/禁用
设置组件是否有效:
true
- 按钮会响应鼠标事件false
- 不响应鼠标事件,并且呈现disableSprite
的贴图
ts
let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
guiButton.enable = true; //false
let button = new Object3D()
let guiButton: UIButton = button.addComponent(UIButton)
guiButton.enable = true; //false
1
2
3
2
3
组件交互
跟普通 Object3D
一样,我们可以使用事件监听器来监听PointerEvent3D
中关于 GUI
系列事件,即可获得用户操作响应函数回调:
PointerEvent3D.PICK_CLICK_GUI
:鼠标点击PointerEvent3D.PICK_OVER_GUI
:鼠标滑入PointerEvent3D.PICK_OUT_GUI
:鼠标移除PointerEvent3D.PICK_UP_GUI
:鼠标抬起PointerEvent3D.PICK_DOWN_GUI
:鼠标按下
ts
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)
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)
1
2
3
4
5
6
7
2
3
4
5
6
7
按钮文字
一个对象可以添加多个 GUI 组件,比如同时添加 UIButton
和 UITextField
ts
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';
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';
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
ts
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()
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()
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76