Jonny Shaw Posted May 19, 2017 Share Posted May 19, 2017 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! Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 19, 2017 Share Posted May 19, 2017 http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html labrat.mobi and Jonny Shaw 2 Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted May 20, 2017 Author Share Posted May 20, 2017 16 hours ago, ivan.popelyshev said: http://pixijs.download/dev/docs/PIXI.mesh.NineSlicePlane.html Brilliant many thanks! Looks nice and simple too! Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted May 26, 2017 Author Share Posted May 26, 2017 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 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 26, 2017 Share Posted May 26, 2017 oops! Thank you, shaym4n Jonny Shaw 1 Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted May 30, 2017 Author Share Posted May 30, 2017 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); Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 30, 2017 Share Posted May 30, 2017 That was my bug and we fixed it. Can you update to latest version? Jonny Shaw 1 Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted May 30, 2017 Author Share Posted May 30, 2017 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. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 31, 2017 Share Posted May 31, 2017 OK, now I need fiddle to understand WTF is going on there Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted June 1, 2017 Author Share Posted June 1, 2017 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/ Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 1, 2017 Share Posted June 1, 2017 OK, now I can debug it Jonny Shaw 1 Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted June 4, 2017 Share Posted June 4, 2017 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); Quote Link to comment Share on other sites More sharing options...
Jonny Shaw Posted June 5, 2017 Author Share Posted June 5, 2017 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! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.