PIXI.NinePatch

Rendering 9Patch containers on a PIXI stage.

Demo: http://mokgames.com/playground/pixi/ninepatch/ (Graphics from http://opengameart.org/content/ui-pack)

How to use

Simply load the pixi.ninepatch.js file after your pixi.js file.

<script src="pixi.js"></script>
<script src="pixi.ninepatch.js"></script>

Creating a 9 Patch Container

var ninepatch = new PIXI.NinePatch(width, height, image, useFrames);
stage.addChild(ninepatch);

width: The width of your 9Patch container.

height: The height of your 9Patch container.

image: The name of the used image. Use an asterisk for the the coutning number.

useFrames: If true, PIXI.Sprite.fromFrame will be used. If false then PIXI.Sprite.fromFrame will be used.

var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false);
stage.addChild(ninepatch);

The asterik in the file name will be replaced with the numbers 1 to 9.

[ 
  1, 2, 3,
  4, 5, 6,
  7, 8, 9
]

Adding content to the container

var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false);
stage.addChild(ninepatch);

ninepatch.body.addChild(sprite);

Restoring the DisplayObjectContainer scale behaviour

var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false, PIXI.NinePatch.scaleModes.DEFAULT);
stage.addChild(ninepatch);

or

var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false);
stage.addChild(ninepatch);

ninepatch.scaleMode = PIXI.NinePatch.scaleModes.DEFAULT;