Plane

Introduction

A Plane is a kind of Mesh game object with one-sided grid of cells. which can have a texture that is either repeated (tiled) across each cell, or applied to the full Plane.

• Author: Richard Davey

WebGL only

It only works in WebGL render mode.

Usage

Load texture

scene.load.image(key, url);

Reference: load image

Add plane object

var plane = scene.add.plane(x, y, key);
// var plane = scene.add.plane(x, y, key, frame);
// var plane = scene.add.plane(x, y, texture, frame, width, height, tile);

• x, y : Position
• key, frame : Texture key of
• width, height : The width/height of this Plane, in cells, not pixels.
• tile : Is the texture tiled? I.e. repeated across each cell.

Add plane from JSON

var plane = scene.make.plane({
    x: 0,
    y: 0,
    key: '',
    // frame: '',
    // width: 8,
    // height: 8,
    // tile: false,
    // checkerboard: null,
    // checkerboard: { color1, color2, alpha1, alpha2, height }

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

    add: true
});

Custom class

• Define class

  class MyPlane extends Phaser.GameObjects.Plane {
      constructor(scene, x, y, texture, frame, width, height, tile) {
          super(scene, x, y, texture, frame, width, height, tile);
          // ...
          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 plane = new MyPlane(scene, x, y, texture, frame, width, height, tile);
  

Texture

See game object - texture

Animation

See Sprite's animation section.

Play animation

• Play

  plane.play(key);
  // plane.play(key, ignoreIfPlaying);
  

  • key : Animation key string, or animation config
    • String key of animation
    • Animation config, to override default config

      {
          key,
          frameRate,
          duration,
          delay,
          repeat,
          repeatDelay,
          yoyo,
          showOnStart,
          hideOnComplete,
          startFrame,
          timeScale
      }
      

• Play in reverse

  plane.playReverse(key);
  // plane.playReverse(key, ignoreIfPlaying);
  

  • key : Animation key string, or animation config
• Play after delay

  plane.playAfterDelay(key, delay);
  

  • key : Animation key string, or animation config
• Play after repeat

  plane.playAfterRepeat(key, repeatCount);
  

  • key : Animation key string, or animation config

Stop

• Immediately stop

  plane.stop();
  

• Stop after delay

  plane.stopAfterDelay(delay);
  

• Stop at frame

  plane.stopOnFrame(frame);
  

  • frame : Frame object in current animation.

    var currentAnim = plane.anims.currentAnim;
    var frame = currentAnim.getFrameAt(index);
    

• Stop after repeat

  plane.stopAfterRepeat(repeatCount);
  

Properties

• Has started

  var hasStarted = plane.anims.hasStarted;
  

• Is playing

  var isPlaying = plane.anims.isPlaying;
  

• Is paused

  var isPaused = plane.anims.isPaused;
  

• Total frames count

  var frameCount = plane.anims.getTotalFrames();
  

• Delay

  var delay = plane.anims.delay;
  

• Repeat
  • Total repeat count

    var repeatCount = plane.anims.repeat;
    

  • Repeat counter

    var repeatCount = plane.anims.repeatCounter;
    

  • Repeat delay

    var repeatDelay = plane.anims.repeatDelay;
    

  • Yoyo

    var repeatDelay = plane.anims.yoyo;
    

• Current animation key

  var key = plane.anims.getName();
  

  • key : Return '' if not playing any animation.
• Current frame name

  var frameName = plane.anims.getFrameName();
  

  • frameName : Return '' if not playing any animation.
• Current animation

  var currentAnim = plane.anims.currentAnim;
  

• Current frame

  var currentFrame = plane.anims.currentFrame;
  

Interactive

To test if pointer is at any face of this mesh game object.

plane.setInteractive();

Other properties

See Mesh game object, game object

Checkerboard

Creates a checkerboard style texture, based on the given colors and alpha values and applies it to this Plane, replacing any current texture it may have.

• Create

  plane.createCheckerboard(color1, color2, alpha1, alpha2, height)
  

• Remove

  plane.removeCheckerboard();
  

Other properties

See Mesh game object, game object

Create mask

var mask = plane.createBitmapMask();

See mask

Shader effects

Support postFX effects

Note

No preFX effect support