Jump to content

Nine Patch


Recommended Posts

Hi guys,

I'm new to Panda2 and I'm trying it out to see if it fit my requirements.

My game will be UI intensive so I need few features that make my work a bit easier.

One of these feature is the possibility to use Nine Patch for Button, Panel, etc.

Something like this : https://phaser.io/news/2015/08/nine-patch-phaser-plugin

Is it available for Panda2? If not how easy is to create custom control that allow me to have such behaviours?

Are we able to set to a sprite a region of a texture?


Link to comment
Share on other sites

Hi @megasoft78, welcome to the forum

I've been using Panda few months now, so still pretty new myself. But I've found so far as UI features go, Panda's pretty nice. The Tween functions are really nice for making buttons slide up/down, in/out smoothly, and the way you can make a Container, and stack Sprites/graphics into it to draw is very convenient. 

I don't think Panda's got a Plugin at the moment for Nine Patch, but if it can be done in Phaser, it can definitely be done in Panda, and I suspect fairly easily.

Do you have a sample Nine Patch graphics set? If you share it, I could take a stab at seeing how you could patch them together for such a button type.

On 9/24/2018 at 4:22 PM, megasoft78 said:

Are we able to set to a sprite a region of a texture?

Yep. I think this, or this example should look something similar to what you want to do? 

Link to comment
Share on other sites

Hi @Wolfsbane,

Thank you. :)

The 9 patching allow you to have a single png all the buttons even if you change size.

In my case I have a lot of buttons that have different sizes so I don't want to create one png for each size.

As you can see below you define which areas (vertical and horizontal) you want the image to stretch and which areas you want to keep as it is. In this case the corners are going to stay the same and stretch just the internal of the sprite. Normally it's achieved by drawing each of the separate 9 areas separatelly.

Image result for 9 patch stretch


Link to comment
Share on other sites

Yeah, that'd be pretty easy to do within Panda. Panda supports loading texture sheets (i.e. from TexturePacker, etc). So you could define the button graphic to be split that way in there, then the panda code for loading the graphics and when you create your button object, just create it dynamically.

Edit: There's a nice plugin/example @enpu created that comes when you've got the full version of Panda that demonstrates a lot of nice UI/button features (although not your 9 patch feature.. yet!). You can check the preview of it here.



Link to comment
Share on other sites

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...