Stretchable, repeatable images

Article by Richard Davey. Posted on 31st Aug 2015.   @phaser_


The Nine Patch Phaser Plugin allows you to use nine patch images in the HTML game framework Phaser.

9 Patch images are stretchable, repeatable images reduced to their smallest size. The simplest example would be if you were to take a rounded div and slice it up into 9 squares like you would a tic-tac-toe board. The four corners wouldn't change sizes at all but would be static while the other 5 pieces would be stretched or repeated to allow the whole image to scale appropriately.

This is not technically a Phaser Plugin. It provides two methods in game.cache to generate nine patch textures and a Phaser.NinePatchImage class to create nine patch images from these textures.

The plugin is written using ES6 and compiled with Babel and Browserify, tested on Phaser 2.1.3 and Phaser 2.4.3.

Feel free to follow me on twitter @netcell and check out my blog!

Read More