Nine slice

Introduction

Display a texture-based object that can be stretched both horizontally and vertically, but that retains fixed-sized corners, built-in game object of phaser.

• Author: Phaser Team

WebGL only

Only work in WebGL render mode.

Usage

Load texture

scene.load.image(key, url);

Reference: load image

Add nine slice object

var nineSlice = scene.add.nineslice(
    x, y, 
    texture, frame, 
    width, height, 
    leftWidth, rightWidth, topHeight, bottomHeight,
    tileX, tileY
);

     A                          B
   +---+----------------------+---+
 C | 1 |          2           | 3 |
   +---+----------------------+---+
   |   |                      |   |
   | 4 |          5           | 6 |
   |   |                      |   |
   +---+----------------------+---+
 D | 7 |          8           | 9 |
   +---+----------------------+---+

• leftWidth, rightWidth : The size of the left/right vertical column (A)/(B).
• topHeight, bottomHeight : The size of the top/bottom horizontal row (C)/(D).
  • Set to 0 or undefined to create a 3 slice object.
• tileX, tileY : When enabled, the scalable horizontal/vertical regions are repeated across the object instead of being stretched.

var nineSlice = scene.add.nineslice(x, y, texture, frame, width, height);
// var nineSlice = scene.add.nineslice(x, y, texture, frame);

• If that frame (indexed by texture, frame) is generated by Texture Packer.

Add nine slice from JSON

var nineSlice = scene.make.nineslice({
    x: 0,
    y: 0,
    key: '',
    // frame: '',

    // width: 256,
    // height: 256,
    // leftWidth: 10,
    // rightWidth: 10,
    // topHeight: 0,
    // bottomHeight: 0,

    // angle: 0,
    // alpha: 1,
    // scale : {
    //    x: 1,
    //    y: 1
    //},
    // origin: {x: 0.5, y: 0.5},

    add: true
});

Custom class

• Define class

  class MyNineSlice extends Phaser.GameObjects.NineSlice {
      constructor(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight) {
          super(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);
          // ...
          scene.add.existing(this);
      }
      // ...
  
      // preUpdate(time, delta) {}
  }
  

  • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
    • If the Game Object renders, it will be added to the Display List.
    • If it has a preUpdate method, it will be added to the Update List.
• Create instance

  var nineSlice = new MyNineSlice(scene, x, y, texture, frame, width, height, leftWidth, rightWidth, topHeight, bottomHeight);
  

Resize

nineSlice.setSize(width, height);

Set texture of source image

nineSlice.setTexture(texture, frame);
nineSlice.setSlices(width, height, leftWidth, rightWidth, topHeight, bottomHeight);

Texture

See game object - texture

Other properties

See game object

Create mask

See mask

Shader effects

Support internal and external filters

Compare with nine-patch

• Nine-slice is a built-in game object.
• Nine-slice has better render performance.
  • Nine-patch extends from render-texture, which will create a new texture, then draw frames on it.
• Nine-slice is webgl mode only.
• Nine-slice does not have flip, crop methods.