Orillusion

简体中文

English

简体中文

English

Appearance

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;


WebGPU is not supported in your browser
Please upgrade to latest Chrome/Edge

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