Rendering 9Patch containers on a PIXI stage.
Demo: http://mokgames.com/playground/pixi/ninepatch/ (Graphics from http://opengameart.org/content/ui-pack)
Simply load the pixi.ninepatch.js file after your pixi.js file.
<script src="pixi.js"></script>
<script src="pixi.ninepatch.js"></script>
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
]
var ninepatch = new PIXI.NinePatch(100, 30, "img/yellow_button_0*.png", false);
stage.addChild(ninepatch);
ninepatch.body.addChild(sprite);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;
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent