UIImage
UIImage 组件提供图片的显示功能, 跟字体组件一样,图片组件依赖于 Atlas
图集,你需要先加载精灵图集到引擎中,然后指定精灵赋予图片组件供渲染。
默认
UIImage
组件未设置精灵,将以白色方块形式呈现
ts
import { Engine3D } from '@orillusion/core';
// 创建用于显示UI的面板
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// 面板加入到系统canvas中
renderJob.guiCanvas.addGUIChild(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.texture = Engine3D.res.getSubTexture('logo');
设置组件贴图
Atlas
封装了一组位图图片对象,我们可以通过 Engine3D.res.loadAtlas
加载全部图集,然后通过 Engine3D.res.getSubTexture
获取其中某一个元素图片,赋予组件进行渲染。
ts
// 加载 Atlas 图集素材
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// 在 UI_atlas.json 定义了 logo 素材
image.texture = Engine3D.res.getSubTexture('logo');
修改图片颜色
通过设置 color
属性更改图片颜色,如果组件有设置贴图,会乘法叠加贴图像素颜色
ts
image.color = new Color(1.0, 0.0, 0.0, 1.0); //red
渲染类型
精灵图类型:参考 ImageType,设置精灵的渲染类型;
- Simple:默认类型,精灵图被拉伸平铺到指定区域
- Sliced:按照九宫格的方式进行拉伸渲染
- Tiled:未支持
- Filled:未支持
ts
import {
Engine3D, Scene3D, Object3D, Camera3D, ForwardRenderJob, ViewPanel, UIImage, DirectLight, HoverCameraController, Color, ImageType,
} from "@orillusion/core";
import {log} from "util";
export class Sample_button {
async run() {
// initializa engine
await Engine3D.init();
// create new scene as root node
let scene3D: Scene3D = new Scene3D();
// create camera
let cameraObj: Object3D = new Object3D();
let camera = cameraObj.addComponent(Camera3D);
// adjust camera view
camera.perspective(60, window.innerWidth / window.innerHeight, 1, 5000.0);
// set camera controller
let controller = cameraObj.addComponent(HoverCameraController);
controller.setCamera(0, -20, 15);
// add camera node
scene3D.addChild(cameraObj);
// create light
let light: Object3D = new Object3D();
// add direct light component
let component: DirectLight = light.addComponent(DirectLight);
// adjust lighting
light.rotationX = 45;
light.rotationY = 30;
component.lightColor = new Color(1.0, 1.0, 1.0, 1.0);
component.intensity = 1;
// add light object
scene3D.addChild(light);
await Engine3D.res.loadAtlas('https://cdn.orillusion.com/atlas/UI_atlas.json');
// create new forward rendering job
let renderJob: ForwardRenderJob = new ForwardRenderJob(scene3D);
// start rendering
Engine3D.startRender(renderJob);
// create panel root
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
renderJob.guiCanvas.addGUIChild(panelRoot);
// 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(180, 60);
let color = new Color(1.0, 0.5, 0.5, 0.8);
image.texture = Engine3D.res.getSubTexture('button-disable');
image.imageType = ImageType.Sliced;
setInterval(() => {
color.r += 0.01;
if (color.r > 1) color.r = 0;
color.g = color.r;
image.color = color;
}, 50)
}
}
new Sample_button().run();