Ninepatch Images possible with Phaser?

[negue]

Hey,

 

does anyone know If and how it is possible to create a sprite with a ninepatch background Image.

 

I want to use this great asset pack: http://opengameart.org/content/ui-pack

 

But just don't know where to start for the panel-backgrounds.

 

Thanks!

[XekeDeath]

You'd create 9 sprites, one for each patch, and size/position them according to the needs of the panel.

[negue]

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!

[Starboar]

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.

[negue]

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.

[InsaneHero]

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.

[PixelPicoSean]

It maybe better to create a bitmapData and draw parts repeatedly on it if you're not going to resize it often, and it has no events problems since it's just a frame of a sprite or image instance.

[InsaneHero]

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.