Clipping

Published: September 03, 2019
Edited: December 08, 2020

It's possible to 'use' only a part of the currently set texture. The element will behave as if the texture was only the selected part: the dimensions might also change. Texture clipping may offer a high performance way of implementing spritemaps and rendering only a part of the texture.

Enabling clipping

Texture clipping can be enabled by specifying the x, y, w and h position and size (in pixels) of the texture object.

Attributes

NameTypeDefault
xInteger0
yInteger0
wInteger0
hInteger0

Methods

NameParametersDescription
enableClippingx, y, w, hShorthand for setting clipping
disableClippingDisables active clipping

Resize mode

Using resizeMode, it's possible to let the clipping be automatically determined from the texture source's width and height. This can be convenient when you are unsure about the exact image sizes, but want it to cover a specific area. Currently both cover and contain modes are supported. When the texture is loaded, the clipping is automatically defined. When the resizeMode of an already loaded texture is changed, it's immediately applied.

resizeMode actually changes the clipping attributes, so you should either set the clipping attributes manually or set the resizeMode, but not both.

Cover

Using the cover resize mode, it's possible to make sure that a texture covers a specified rectangular area. A part of the texture may be clipped. To control which part is clipped you can set the clipX and clipY properties. These are values from 0 to 1. To clip the top, set clipY to 0. To clip the bottom, set clipY to 1. By default, (clipX, clipY) is set to (0.5, 0.5), which causes an equal amount to be clipped away from left/right or top/bottom.

Cover: {
    texture: {resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}, type: lng.textures.ImageTexture, src: 'image.png'}
}

Contain

Using the contain resize mode, it's possible to fit an image in a specified rectangular area. One axis will fit to the specified size, the other will be less than specified. To properly align the texture within the area, use a wrapper element:

Wrapper: {
    rect: true, w: 200, h: 200, color: 0xFFAAAAAA,
    Contain: {
        x: w=>w/2, y: h=>h/2, mount: 0.5,
        texture: {type: lng.textures.ImageTexture, src: 'image.png', resizeMode: {type: 'contain', w: 200, h: 200}}
    }
}

Live Demo

class TextureDemo extends lng.Application {
    static _template() {
        return {
            MyTexture: {
                x: 200,
                y: 250,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png'},
                transitions: {
                    'texture.x': {duration: 4}
                }
            },
            Wrapper: {
                rect: true, w: 200, h: 200, color: 0xFFAAAAAA,
                Contain: {
                    x: w=>w/2, y: h=>h/2, mount: 0.5,
                    texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'contain', w: 200, h: 200}}
                }
            },
            Cover: {
                x: 200, y: 0,
                texture: {type: lng.textures.ImageTexture, src: '/Lightning/img/LngDocs_LilLightningIdle.png', resizeMode: {type: 'cover', w: 200, h: 200, clipY: 0}}
            }
        }
    };
    
    _init() {
        const myTexture = this.tag("MyTexture");
        myTexture.transition('texture.x').on('finish', () => {
            const current = myTexture.getSmooth('texture.x');
            myTexture.setSmooth('texture.x', current ? 0 : 50);
        })
        myTexture.setSmooth('texture.x', 50); 
    }
}

const options = {stage: {w: window.innerWidth, h: window.innerHeight, useImageWorker: false}};
const app = new TextureDemo(options);
document.body.appendChild(app.stage.getCanvas());

PHP Code Snippets Powered By : XYZScripts.com