Jump to content
This forum will be closing down. Please move to the respective dedicated project forums.

Ninepatch Images possible with Phaser?


negue
 Share

Recommended Posts

I don't wanted to create each time 9 sprites / image-Files and then load them all after each other.

 

So I tried to create a NinePatchGroup (so that other Controls can be inside)

If anyone wants to use NinePatch Images - Sourcecode: https://gist.github.com/negue/9283385

 

Example:

// Load your NinePatch on preloadgame.load.image('IMAGE_KEY', 'grey_panel.png');// Create your NinePatchGroupvar ninePatch = new NinePatchGroup(game, x, y, targetWidth, targetHeight, 'IMAGE_KEY');// Update Height / Width of the NinePatchninePatch.targetWidth = 100; ninePatch.targetHeight = 100;ninePatch.update();

Have Fun!

Link to comment
Share on other sites

  • 2 weeks later...

This is really helpful, thanks - i'm going to use this.

 

One issue though, I get faint gaps where each section meets, i'm using the grey panel png from opengameart to test with and phaser v2.  I can fix this issue by manually tweaking the source of your group but thought i'd mention it.

Link to comment
Share on other sites

If I understand you right, I get also some gaps using Canvas, in WebGL it is working.

 

Could you post your fix?

 

I'm working on a updated Version of the NinePatchGroup:

- changeable Patch-Sizes if some NinePatches need different size for the lower parts

- NinePatchButton (change tint / ninepatch on hover, "jumping" label on click)

- Some Events

- AutoSize Patches to the inner children with variable margin

 

 

Gonna post them also on a gist.

Link to comment
Share on other sites

  • 7 months later...

Just found this and it's very useful thanks for sharing!

With the faint lines, could it be due to a source texture which is not a multiple of three in width?  Faint lines are often caused by fractional pixels... either in alignment (eg. x = 25.13) or in dimensions (eg. width = 256 divided by 3 gives 85.33333...)

I'm using it with a 9 patch texture I created myself which is 75 pixels across and I don't see any faint lines in either Canvas or WebGL mode.

Link to comment
Share on other sites

I think it depends on the size... if you're making some really big things then that's a lot of memory used instead of just hardware stretching a small image.

 

I can't *see* any lines between the 9 slices, but I've converted this code over to use a Sprite so I can capture input from it, and the 'useHandCursor' shows me that there are invisible gaps along all the join lines.  So I'll almost certainly use a bitmapData next.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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