Orillusion

Appearance

本页内容

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：未支持


Orillusion powered by WebGPU on Chrome/Edge 113+
Please upgrade to latest Chrome/Edge

<
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();