Jump to content

Will Pixi support Nine-slicing in the future?


Retri
 Share

Recommended Posts

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.

 

9slice.png

Link to comment
Share on other sites

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);
    }

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...