UIImage
UIImage 组件提供图片的显示功能, 你可以通过加载单个图片或通过 loadAtlas
加载精灵图集 GUISprite
的列表到引擎中,然后指定 GUISprite
赋予图片组件供渲染。
制作
Atlas
精灵图集依赖外部第三方工具,请自行搜索制作方法。默认UIImage
组件未设置精灵图,将以白色方块形式呈现
ts
import { Engine3D } from '@orillusion/core';
// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 激活UICanvas
let canvas = this.scene.view.enableUICanvas();
// 面板加入到系统canvas中
canvas.addChild(panelRoot);
// 创建图片节点
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
this.image.sprite = Engine3D.res.getGUISprite('logo');
import { Engine3D } from '@orillusion/core';
// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 激活UICanvas
let canvas = this.scene.view.enableUICanvas();
// 面板加入到系统canvas中
canvas.addChild(panelRoot);
// 创建图片节点
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
this.image.sprite = Engine3D.res.getGUISprite('logo');
加载图集
Atlas
封装了一组位图图片对象,我们可以通过 Engine3D.res.loadAtlas
加载全部图集,然后通过 Engine3D.res.getGUISprite
获取其中某一个元素图片,赋予组件进行渲染。
ts
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 在 UI_atlas.json 定义了 logo 素材
image.sprite = Engine3D.res.getGUISprite('logo');
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 在 UI_atlas.json 定义了 logo 素材
image.sprite = Engine3D.res.getGUISprite('logo');
加载单个图片
我们也可以通过已经创建好的 Texture2D
对象来主动生成一个 GUISprite
,然后赋予 UIImage
组件供显示:
ts
let bitmapTexture2D = new BitmapTexture2D();
//设置y轴翻转
bitmapTexture2D.flipY = true;
//加载贴图
await bitmapTexture2D.load('images/webgpu.png');
//创建GUISprite
let mySprite = makeAloneSprite('webgpu', bitmapTexture2D);
//将GUISprite赋予UIImage组件
this.image.sprite = mySprite;
let bitmapTexture2D = new BitmapTexture2D();
//设置y轴翻转
bitmapTexture2D.flipY = true;
//加载贴图
await bitmapTexture2D.load('images/webgpu.png');
//创建GUISprite
let mySprite = makeAloneSprite('webgpu', bitmapTexture2D);
//将GUISprite赋予UIImage组件
this.image.sprite = mySprite;
修改图片颜色
通过设置 color
属性更改图片颜色,如果组件有设置贴图,会乘法叠加贴图像素颜色
ts
image.color = new Color(1.0, 0.0, 0.0, 1.0); //red
image.color = new Color(1.0, 0.0, 0.0, 1.0); //red
修改图片大小
通过调用 uiTransform.resize()
来进行图片大小的调节
ts
image.uiTransform.resize(150, 150)
image.uiTransform.resize(150, 150)
组件visible(可见/隐藏)
ts
image.visible = false;//true
image.visible = false;//true
销毁图片
ts
image.destroy();
image.destroy();
拉伸/平铺类型
精灵图类型:参考 ImageType,设置精灵的渲染类型;
- Simple:默认类型,精灵图被拉伸平铺到指定区域
- Sliced:按照九宫格的方式进行拉伸渲染
- Tiled:未支持
- Filled:未支持
ts
image.imageType = ImageType.Simple;
image.imageType = ImageType.Simple;
ts
import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, UIImage, HoverCameraController, Color, ImageType, AtmosphericComponent, BitmapTexture2D, makeAloneSprite, WorldPanel, GPUCullMode, UIPanel } from '@orillusion/core'
class Sample_Image {
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, 100)
// 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)
// load a BitmapTexture2D
let bitmapTexture2D = new BitmapTexture2D()
bitmapTexture2D.flipY = true
await bitmapTexture2D.load('https://cdn.orillusion.com/images/webgpu.png')
// create image node
let imageQuad = new Object3D()
panelRoot.addChild(imageQuad)
// create image component
let image: UIImage = imageQuad.addComponent(UIImage)
// set image size
image.uiTransform.resize(50, 50)
// set image source
image.sprite = makeAloneSprite('webgpu', bitmapTexture2D)
}
}
new Sample_Image().run()
import { Engine3D, Scene3D, Object3D, Camera3D, View3D, ViewPanel, UIImage, HoverCameraController, Color, ImageType, AtmosphericComponent, BitmapTexture2D, makeAloneSprite, WorldPanel, GPUCullMode, UIPanel } from '@orillusion/core'
class Sample_Image {
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, 100)
// 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)
// load a BitmapTexture2D
let bitmapTexture2D = new BitmapTexture2D()
bitmapTexture2D.flipY = true
await bitmapTexture2D.load('https://cdn.orillusion.com/images/webgpu.png')
// create image node
let imageQuad = new Object3D()
panelRoot.addChild(imageQuad)
// create image component
let image: UIImage = imageQuad.addComponent(UIImage)
// set image size
image.uiTransform.resize(50, 50)
// set image source
image.sprite = makeAloneSprite('webgpu', bitmapTexture2D)
}
}
new Sample_Image().run()