sprites (FIXED) V4 9-Sliced Sprites

[Jonny Shaw]

Hi all, been trying to dig into PixiJS a little more.  Sorry if this has been covered before but struggling to find anything relating to V4.  Is there a plugin or something that enables 9-slicing of sprites?  Mainly for the use in UI elements, (buttons borders, frames etc?)

Thanks in advance!

[ivan.popelyshev]

http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html

[Jonny Shaw]

16 hours ago, ivan.popelyshev said:

http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html

Brilliant many thanks!   Looks nice and simple too!

[Jonny Shaw]

Just tried this out - think the doc needs updating for this as http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html  constructor only works as 

let Plane9 = new PIXI.mesh.NineSlicePlane(PIXI.Texture.fromImage('BoxWithRoundedCorners.png'), 15, 15, 15, 15);

[ivan.popelyshev]

oops! Thank you, shaym4n

 

[Jonny Shaw]

Having a bit of a brainfreeze I think unless I've missed a limitation on this...

Trying to 9 Slice this sprite as a bubble so it can be reused for a help screen but with the width's and heights I'm setting it's still coming out distorted?

Any clues greatly appreciated!

var bubbleFrame = new PIXI.mesh.NineSlicePlane(PIXI.Texture.fromImage("images/loader/bubble-type1.png"), 20, 41, 85, 24);

[ivan.popelyshev]

That was my bug and we fixed it. Can you update to latest version?

[Jonny Shaw]

24 minutes ago, ivan.popelyshev said:

That was my bug and we fixed it. Can you update to latest version?

Thanks!  Have updated to 4.52 (production), still distorted but strangely almost split in two?  Could the file type affect it in anyway - atm it's using an 8-bit png as attached above.

[ivan.popelyshev]

OK, now I need fiddle to understand WTF is going on there

[Jonny Shaw]

23 hours ago, ivan.popelyshev said:

OK, now I need fiddle to understand WTF is going on there

Many thanks, have put a fiddle at https://jsfiddle.net/digilocker/f2evfLyp/

[ivan.popelyshev]

OK, now I can debug it

[ivan.popelyshev]

Sorry for late answer, you certainly overshot rightWidth, its too big. Width of texture is 90, and in your leftWidth+rightWidth=104. I fixed that:

new PIXI.mesh.NineSlicePlane(useme, 20, 41, 50, 24);

 

 

[Jonny Shaw]

9 hours ago, ivan.popelyshev said:

Sorry for late answer, you certainly overshot rightWidth, its too big. Width of texture is 90, and in your leftWidth+rightWidth=104. I fixed that:

new PIXI.mesh.NineSlicePlane(useme, 20, 41, 50, 24);

 

 

Wow!  Massive apologies, no idea how I got that one so wrong!  Can only guess I had tried playing with the numbers before I updated to 2.5.2 though sure I double checked them.  Many thanks - fresh eyes certainly helped on this one I think!