Phaser2 ninepatch
npm install @armathai/phaser2-ninepatch
Phaser-ninePatch plugin adds 9-patch scaling support to Phaser!
Key features:
Blazing fast
Low memory usage
Easy to use API
First you want to get a fresh copy of the plugin. You can get it from this repo or from npm, ain't that handy. npm
``
npm install @armathai/phaser2-ninepatch --save
You still need to load the plugin in your game. This is done just like any other plugin in Phaser. So, to load the plugin, include it in one of the Phaser States.
`javascript`
function preload() {
game.plugins.add(NinePatchPlugin);
}
The plugin will patch your Phaser game with additional load/add/make methods so the ninepatch container fits up in Phaser like any normal object!
Like any other asset in Phaser, you still need to preload the image. It's a bit different then a regular image, in the sense that it requires some extra data.
Apart from the key and the url, you can also specify the sizes of top, left, right and bottom sides.
If you don't specify a bottom size, it will use the value for the top. Same goes for right and left.
It's also possible to only give one size. If only one value is given, this will use that for the edges.
`javascript
//This will load a 9-patch texture where all sides are 25px
game.load.ninePatch('my-image', '/images/my-image.jpg', 25);
//This will load a 9-patch texture where the
// top is 10, left is 15, right is 20 and bottom is 30 pixels in size
game.load.ninePatch('my-image', '/images/my-image.jpg', 10, 15, 20, 30);
`
Also adding and creating of 9-patch containers is exposed through Phaser's GameObjectCreator and GameObjectFactory. So you can add a 9-patch container to your game just like any other image once it's preloaded!
`javascript`
//We specify the x and y position. the key for the image and the width and height of the container. It will be automaticly scaled!
game.add.ninePatch(100, 100, 'my-image', 200, 50);
Or if you'd want to do something with it first:
`javascript
//Two options here, first we use Phaser
var container = game.create.ninePatch(0, 0, 'my-image', 200, 50);
container.x = 20;
container.y = 20;
game.add.existing(container);
//Or we use the Constructor
var ninePatch = new NinePatch(game, 0, 0, 'my-image', null, 200, 50);
ninePatch.x = 50;
ninePatch.y = 50;
game.add.existing(ninePatch);
`
It's also possible to use an image that's located inside a Texture atlas. The only difference then is that you don't have to preload the image, instead you use the object's constructor and pass the framedata directly on creation:
`javascript`
//Add an ninePatch image with an texture atlas
var sliceButton = new NinePatch(
game, // Phaser.Game
150, // x position
100, // y position
'buttons', // atlas key
'btn_clean.png', // Image frame
200, // expected width
100, // expected height
{
//And this is the framedata, normally this is passed when preloading. Check README for details
top: 20, // Amount of pixels for top
bottom: 23, // Amount of pixels for bottom
left: 27, // Amount of pixels for left
right: 28, // Amount of pixels for right
},
);
this.game.add.existing(sliceButton);
9-patch container has a resize method which lets you expand/shorten the width or length of the image. When using resize method, make sure values are not lower than the width of the image corners
`javascript``
var sliceContainer = game.add.ninePatch(5, 5, 'image', null, 48, 48);
sliceContainer.resize(100, 200);