Nine Patch Phaser Plugin

UPDATE: Unless you are currently using it, or your game is not very complicated, or has no need to run on old mobile devices, I am recommending you not to use this library due to posible performance issues. This is a nice experiment and a modified version of it (specifically designed for a code base of a game, so not gonna be useful publicly released) works pretty well in production. It is possible to look into the src folder to understand the library (it's really simple) and modify it to your needs, and I am willing to support you. However, since I am not currently using Phaser, I can't really invest time into updating this old library. Sincerely appologize. Thank you for your interest.

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

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.

UPDATE: The latest release is supposed to be compatible with Phaser 2.6.1 and above. If you are using an older version, please try using previous releases first.

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

Demo

Check the example folder or try that example rightaway on this codepen. The example includes a dat.gui control panel that you can play with.

Download

The source is available for download from latest release or by cloning the repository or download the files in build folder. Alternatively, you can install via:

• bower: bower install --save nine-patch-phaser-plugin

Usage

Simply download the nine-patch-phaser-plugin.js or nine-patch-phaser-plugin.min.js script from latest release and include it on your page after including Phaser:

<script src="phaser.js"></script>
<script src="nine-patch-phaser-plugin.js"></script>

In the create method in your preloading states (to make sure the image/spritesheet/atlas is loaded), use game.cache.addNinePatch method to create the nine patch textures:

game.cache.addNinePatch(name, key, frame, left, right, top, bottom);

• name is the reference key that would be used later to get the nine patch textures
• key is a key string of the image/spritesheet/atlas loaded
• frame is the optional index of the frame if the nine patch image is on a spritesheet or atlas, can be either string or number
• left, right, top, bottom are the left most, right most, top most and bottom most points of the center patch in the nine patch image.

After that, in your game, you can create a nine patch image as follow:

var image = new Phaser.NinePatchImage(game, x, y, name);

with name is the reference key you specified before.

To change the measures of the NinePatchImage, change the targetWidth and targetHeight properties. Also, remember that since Phaser.NinePatchImage actually extends Phaser.Image, so you can do anything that you can do on a Phaser.Image instance with a Phaser.NinePatchImage instance. However, in some cases, like with anchor, you have to run the method UpdateImageSizes for the NinePatchImage to be displayed correctly.

Check the example in example folder to see it in action :)

License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.