Awesome
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 textureskey
is a key string of the image/spritesheet/atlas loadedframe
is the optional index of the frame if the nine patch image is on a spritesheet or atlas, can be either string or numberleft
,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.