How to use sliced sprites with Pixi.js NineSlicePlane
From Pixi.js 4.7 version, NineSlicePlane is available and working ok, in previous version it was already available, but 4.7 version includes all bugs and errors corrections.
Sliced sprites are an interesting option, for example, to create a progress bar, where the central texture is stretched in x axis increasingly and decreasingly so it mustn’t deform.
How to create a sliced sprite in the code
- Make sure Pixi.js version is equal or above 4.7
- Define this snippet to create a sliced sprite:
let textureCenterHeight = 42;
let textureCenterURL = 'SpriteProgressBarCentralTexture';let textureImageCenter = PIXI.Texture.fromImage('pathToImages/'+textureCenterURL+'.png');let textureCenter = new PIXI.mesh.NineSlicePlane(textureImageCenter, 5, 0, 5, 0);textureCenter.height = textureCenterHeight;
NineSlicedPlane is NOT compatible with atlases, the texture needs to be in an image alone, such as a .png file.
Another problem I encountered is that I can’t get the correct width and height from textureImageCenter (a bug, maybe?), if I made a log from the properties, these where ok, but when using them the values were not correct. That’s why the height is defined manually on this example: The best practice would be to add that height property to a layout file and read it from there.
The height from textureCenter needs to always be defined, otherwise the image height is not calculated properly.
How to prepare the graphics for sliced sprites
We need to export the central texture sprite:
- Export the image in png format, this will be the image the project will load.
And that’s all to sliced sprites with Pixi.js, on the below line, there’s the official doc attached.
