UIImageGroup
UIImageGroup 组件提供多图片的显示,该组件允许你在一个组件下,同时控制多个 Quad
渲染。相较于 UIImage
组件,其主要区别如下:
UIImageGroup
多个Quad
绑定在一个Object3D
对象,在批量渲染同类型Sprite
类型时,UIImageGroup
可以获得更加高效的渲染性能;UIImageGroup
中每个Quad
使用自身的尺寸数据,节点所对应的UITransform
的缩放不会对每个Quad
产生影响;UIImageGroup
需要指定下标index
才能找到对应的Quad
对象,设置Quad
属性需要通过调用对应的set
API 进行设置。
初始化图片组:
ts
...
// 创建图片组节点
let groupObj = new Object3D();
panelRoot.addChild(groupObj);
// ImageGroup 组件需要设置内置多少个 Quad,默认为 1 个 Quad 节点
this.imageGroup = groupObj.addComponent(UIImageGroup, (count: 2));
...
// 创建图片组节点
let groupObj = new Object3D();
panelRoot.addChild(groupObj);
// ImageGroup 组件需要设置内置多少个 Quad,默认为 1 个 Quad 节点
this.imageGroup = groupObj.addComponent(UIImageGroup, (count: 2));
设置贴图
和单个 UIImage
一样,我们首先需要通过 Engine3D.res.loadAtlas
来加载精灵图集,然后通过 setSprite
赋予图片组中指定 index
的 quad
贴图内容:
ts
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 设置 0 位精灵贴图
imageGroup.setSprite(0, Engine3D.res.getGUISprite('logo'));
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 设置 0 位精灵贴图
imageGroup.setSprite(0, Engine3D.res.getGUISprite('logo'));
修改图片颜色
同样,通过 setColor
更改对应 index
的 quad
颜色,如果组件有设置贴图,会乘法叠加贴图像素颜色:
ts
imageGroup.setColor(0, new Color(1.0, 0.0, 0.0, 1.0));
imageGroup.setColor(0, new Color(1.0, 0.0, 0.0, 1.0));
修改图片大小
通过 setSize
更改对应 index
的 quad
大小:
ts
imageGroup.setSize(0, 100, 100);
imageGroup.setSize(0, 100, 100);
组件 visible(可见/隐藏)
图片组中,可以设置 visible
属性统一修改所有 quad
显示或隐藏:
ts
imageGroup.visible = false;//or true
imageGroup.visible = false;//or true
销毁图片组
ts
imageGroup.destroy();
imageGroup.destroy();
修改指定下标精灵的拉伸/平铺类型
精灵图类型:参考 ImageType,设置精灵的渲染类型;
- Simple:默认类型,精灵图被拉伸平铺到指定区域
- Sliced:按照九宫格的方式进行拉伸渲染
- Tiled:未支持
- Filled:未支持
ts
imageGroup.setImageType(0, ImageType.Simple);
imageGroup.setImageType(0, ImageType.Simple);
下面示例展示如何在 UIImageGroup
中设置单个 Quad
的位置和大小:
ts
import { AtmosphericComponent, BitmapTexture2D, Camera3D, Engine3D, HoverCameraController, Object3D, Scene3D, Texture, UIImageGroup, View3D, ViewPanel, makeAloneSprite } from '@orillusion/core'
import * as dat from 'dat.gui'
class Sample_UIImageGroup {
scene: Scene3D
imageGroup: UIImageGroup
async run() {
Engine3D.setting.shadow.autoUpdate = true
// 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)
this.scene = scene3D
await this.createImageGroup()
}
async createImageGroup() {
// enable ui canvas
let canvas = this.scene.view.enableUICanvas()
//create UI root
let panelRoot: Object3D = new Object3D()
//create panel
let panel = panelRoot.addComponent(ViewPanel)
canvas.addChild(panel.object3D)
let bitmapTexture2D = new BitmapTexture2D()
bitmapTexture2D.flipY = true
await bitmapTexture2D.load('https://cdn.orillusion.com/images/webgpu.png')
let uiNode = new Object3D()
panelRoot.addChild(uiNode)
//create sprite sheet list
this.imageGroup = this.createSpriteSheets(uiNode, bitmapTexture2D)
this.createGUI()
}
private halfSize = 0
createGUI() {
let GUIHelp = new dat.GUI()
let quat = this.imageGroup.getQuad(1)
let f = GUIHelp.addFolder('Position')
let pos = { x: quat.x, y: quat.y }
let action = () => this.imageGroup.setXY(1, pos.x, pos.y)
f.add(pos, 'x', -Engine3D.width * 0.5, Engine3D.width * 0.5, 1).onChange(action)
f.add(pos, 'y', -Engine3D.height * 0.5, Engine3D.height * 0.5, 1).onChange(action)
f.open()
f = GUIHelp.addFolder('Size')
let size = { width: quat.width, height: quat.height }
let action2 = () => this.imageGroup.setSize(1, size.width, size.height)
f.add(size, 'width', 0, 256, 1).onChange(action2)
f.add(size, 'height', 0, 256, 1).onChange(action2)
f.open()
}
private createSpriteSheets(root: Object3D, texture: Texture): UIImageGroup {
let sprite = makeAloneSprite('logo', texture)
let imgGroup = root.addComponent(UIImageGroup, { count: 2 })
let size = 128
this.halfSize = size * 0.5
for (let i = 0; i < 2; i++) {
imgGroup.setSprite(i, sprite)
imgGroup.setSize(i, size, size)
if (i == 1) {
imgGroup.setXY(1, -this.halfSize, 128 - this.halfSize)
} else {
imgGroup.setXY(0, -this.halfSize, -this.halfSize)
}
}
return imgGroup
}
}
new Sample_UIImageGroup().run()
import { AtmosphericComponent, BitmapTexture2D, Camera3D, Engine3D, HoverCameraController, Object3D, Scene3D, Texture, UIImageGroup, View3D, ViewPanel, makeAloneSprite } from '@orillusion/core'
import * as dat from 'dat.gui'
class Sample_UIImageGroup {
scene: Scene3D
imageGroup: UIImageGroup
async run() {
Engine3D.setting.shadow.autoUpdate = true
// 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)
this.scene = scene3D
await this.createImageGroup()
}
async createImageGroup() {
// enable ui canvas
let canvas = this.scene.view.enableUICanvas()
//create UI root
let panelRoot: Object3D = new Object3D()
//create panel
let panel = panelRoot.addComponent(ViewPanel)
canvas.addChild(panel.object3D)
let bitmapTexture2D = new BitmapTexture2D()
bitmapTexture2D.flipY = true
await bitmapTexture2D.load('https://cdn.orillusion.com/images/webgpu.png')
let uiNode = new Object3D()
panelRoot.addChild(uiNode)
//create sprite sheet list
this.imageGroup = this.createSpriteSheets(uiNode, bitmapTexture2D)
this.createGUI()
}
private halfSize = 0
createGUI() {
let GUIHelp = new dat.GUI()
let quat = this.imageGroup.getQuad(1)
let f = GUIHelp.addFolder('Position')
let pos = { x: quat.x, y: quat.y }
let action = () => this.imageGroup.setXY(1, pos.x, pos.y)
f.add(pos, 'x', -Engine3D.width * 0.5, Engine3D.width * 0.5, 1).onChange(action)
f.add(pos, 'y', -Engine3D.height * 0.5, Engine3D.height * 0.5, 1).onChange(action)
f.open()
f = GUIHelp.addFolder('Size')
let size = { width: quat.width, height: quat.height }
let action2 = () => this.imageGroup.setSize(1, size.width, size.height)
f.add(size, 'width', 0, 256, 1).onChange(action2)
f.add(size, 'height', 0, 256, 1).onChange(action2)
f.open()
}
private createSpriteSheets(root: Object3D, texture: Texture): UIImageGroup {
let sprite = makeAloneSprite('logo', texture)
let imgGroup = root.addComponent(UIImageGroup, { count: 2 })
let size = 128
this.halfSize = size * 0.5
for (let i = 0; i < 2; i++) {
imgGroup.setSprite(i, sprite)
imgGroup.setSize(i, size, size)
if (i == 1) {
imgGroup.setXY(1, -this.halfSize, 128 - this.halfSize)
} else {
imgGroup.setXY(0, -this.halfSize, -this.halfSize)
}
}
return imgGroup
}
}
new Sample_UIImageGroup().run()