Will Pixi support Nine-slicing in the future?

[Retri]

It's an incredibly powerful technique, esp. for UI elements.

Will we see it in Pixi?

[ivan.popelyshev]

Nine-patch? Well, tell me which implementation you want

Its all tricks with textures and TileSprite's

[Retri]

I'm specifically looking to implement the same style of nine-slicing found in flash, illustrator and unity.

So where you define two horizontal and two vertical lines that will "slice" the image into nine parts.

• The corners do not scale.
• The top and bottom middle slices only scale horizontally.
• The left and right middle slices only scale vertically.
• The center slice scales both axis.

So what I tried and illustrate below. Notice how the corners do not change, as the button changes size.

 

[ivan.popelyshev]

Scale or tile?

I have enough tasks on my own, may be you can make that implementation and then i'll edit it? Pleeeeease

[GBear]

this is not hard...
 

this function is supposed all image size is 32x32;

Quote

Jandi.UILayer.prototype.createLayer = function(theme, w, h, option) {
    if(theme.body.center != '')
        var center  = PIXI.Sprite.fromImage(theme.body.center);
    var top     = PIXI.Sprite.fromImage(theme.body.top);
    var down    = PIXI.Sprite.fromImage(theme.body.down);
    var left    = PIXI.Sprite.fromImage(theme.body.left);
    var right   = PIXI.Sprite.fromImage(theme.body.right);
    var tleft   = PIXI.Sprite.fromImage(theme.edge.top.left);
    var tright  = PIXI.Sprite.fromImage(theme.edge.top.right);
    var dleft   = PIXI.Sprite.fromImage(theme.edge.down.left);
    var dright  = PIXI.Sprite.fromImage(theme.edge.down.right);

    if(theme.body.center != ''){
        center.position.set(32,32);
        center.scale.set((w-(32*2))/32, (h-(32*2))/32);
    }
    top.position.set(32, 0);
    top.scale.set((w-32*2)/32, 1);
    down.position.set(32, h-32);
    down.scale.set((w-32*2)/32, 1);
    left.position.set(0, 32);
    left.scale.set(1, (h-32*2)/32);
    right.position.set(w-32, 32);
    right.scale.set(1, (h-32*2)/32);
    tright.position.set(w-32, 0);
    dleft.position.set(0, h-32);
    dright.position.set(w-32,h-32);

    if(theme.body.center != ''){
        this.addChild(center, top, down, left, right, tleft, tright, dleft, dright);
    } else {
        this.addChild(top, down, left, right, tleft, tright, dleft, dright);
    }