UIImage

UIImage provides the display function of the image. You can load a single image or load a list of sprite atlas GUISprite to the engine through loadAtlas, and then specify GUISprite to assign to the image component for rendering.

TIP

Making Atlas sprite atlas depends on external third-party tools, please search for the production method by yourself. The default UIImage component does not set the sprite map, and it will be presented in the form of a white square

import { Engine3D } from '@orillusion/core';

// Create a panel for displaying UI
let panelRoot: Object3D = new Object3D();
panelRoot.addComponent(ViewPanel);
// Enable UICanvas
let canvas = this.scene.view.enableUICanvas();
// Add the panel to the system canvas
canvas.addChild(panelRoot);
// Create image node
let imageQuad = new Object3D();
panelRoot.addChild(imageQuad);
this.image = imageQuad.addComponent(UIImage);
this.image.uiTransform.resize(400, 60);
this.image.uiTransform.y = 100;

// Load Atlas atlas material
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
this.image.sprite = Engine3D.res.getGUISprite('logo');

Loading Atlas

Atlas contains a set of bitmap image objects. We can load all the atlas through Engine3D.res.loadAtlas, and then get one of the element images through Engine3D.res.getGUISprite and assign it to the component for rendering.

// Load Atlas atlas material
await Engine3D.res.loadAtlas('atlas/UI_atlas.json');
// The logo material is defined in UI_atlas.json
image.sprite = Engine3D.res.getGUISprite('logo');

Loading Single Image

We can also use the already created Texture2D object to automatically generate a GUISprite, and then assign it to the UIImage component for display:

let bitmapTexture2D = new BitmapTexture2D();
// Set y-axis flip
bitmapTexture2D.flipY = true;
// Load texture
await bitmapTexture2D.load('images/webgpu.png');
// Create GUISprite
let mySprite = makeAloneSprite('webgpu', bitmapTexture2D);
// Assign GUISprite to UIImage component
this.image.sprite = mySprite;

Change Image Color

The color of the image can be changed by setting the color property. If the component has a texture, the pixel color of the texture will be multiplied and added.

image.color = new Color(1.0, 0.0, 0.0, 1.0); //red

Modify image size

通过调用 uiTransform.resize() 来进行图片大小的调节 By calling uiTransform.resize() to adjust the size of the image

image.uiTransform.resize(150, 150)

Component visible (visible / hidden)

image.visible = false;//true

Destroy image

image.destroy();

Stretch / tiling type

Type of sprite map: refer to ImageType, set the rendering type of the sprite;

• Simple: Default type, the sprite map is stretched and tiled to the specified area
• Sliced: Stretched and rendered in a nine-grid manner
• Tiled: Not supported
• Filled: Not supported

image.imageType = ImageType.Simple;

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

<

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