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
| Name | Type | Default |
|---|---|---|
| x | Integer | 0 |
| y | Integer | 0 |
| w | Integer | 0 |
| h | Integer | 0 |
Methods
| Name | Parameters | Description |
|---|---|---|
| enableClipping | x, y, w, h | Shorthand for setting clipping |
| disableClipping | Disables 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());