(FIXED) V4 9-Sliced Sprites

Recommended Posts

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!

Share this post

Link to post
Share on other sites

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);



Share this post

Link to post
Share on other sites
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.


Share this post

Link to post
Share on other sites
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!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.