Jump to content

Ninepatch sprite, possible?


Recommended Posts


And first congrats to the author for this amazing lib.

just wondered to be able to take one png image, instanciate a Sprite and declare top, left, right, bottom border sizes, and finally get a ninepatch sprite (*), for example to easily render buttons with different sizes.

Is it possible 'out of the box' with Pixi?

If not, where should I start to look at in order to ceate such specialized class?

Thanks in advance for you advices :-)

(*)like: http://yannickloriot.com/2013/03/9-patch-technique-in-cocos2d/

Link to comment
Share on other sites

Yes! There is a NinePatch here: https://github.com/SebastianNette/PIXI.NinePatch


It's really easy to use.

Simply load the pixi.ninepatch.js after you have loaded pixi.js.


It took me only a few minutes to write that container, so there might be some bugs. If you find any, please report them to me!



var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false);stage.addChild(ninepatch);

The asterisk is replaced by the numbers 1-9, where 1 is the top left corner and 9 is the bottom right corner.






You can either use images or frames. That's what the fourth parameter is for. true for frames, false for images.


A demo can be found here: http://mokgames.com/playground/pixi/ninepatch/


Keep in mind, that everything you place in the body container is currently scaled up.

I will fix that later this day by adding another DisplayObjectContainer for the body and head properties of my ninepatch.

Link to comment
Share on other sites

  • 1 year later...
  • 4 weeks later...

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...