Quad

Introduction

Manipulate the corner points of static images, built-in game object of phaser.

  • Author: Richard Davey

WebGL only

It only works in WebGL render mode.

Usage

Load texture

scene.load.image(key, url);

Reference: load image

Add object

var quad = scene.add.quad(x, y, key);

Add quad from JSON

var quad = scene.make.quad({
    x: 0,
    y: 0,
    key: '',

    // angle: 0,
    // alpha: 1
    // flipX: true,
    // flipY: true,

    add: true
});

Custom quad class

  • Define class
    class MyQuad extends Phaser.GameObjects.Quad {
        constructor(scene, x, y, texture, frame) {
            super(scene, x, y, texture, frame);
            // ...
            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 quad = new MyQuad(scene, x, y, key);
    

Properties of corner points

Position

  • Get
    var topLeftX = quad.topLeftX;
    var topLeftY = quad.topLeftY;
    var topRightX = quad.topRightX;
    var topRightY = quad.topRightY;
    var bottomLeftX = quad.bottomLeftX;
    var bottomLeftY = quad.bottomLeftY;
    var bottomRightX = quad.bottomRightX;
    var bottomRightY = quad.bottomRightY;    
    
  • Set
    quad.topLeftX = topLeftX;
    quad.topLeftY = topLeftY;
    quad.topRightX = topRightX;
    quad.topRightY = topRightY;
    quad.bottomLeftX = bottomLeftX;
    quad.bottomLeftY = bottomLeftY;
    quad.bottomRightX = bottomRightX;
    quad.bottomRightY = bottomRightY;
    
    quad.setTopLeft(x, y);
    quad.setTopRight(x, y);
    quad.setBottomLeft(x, y);
    quad.setBottomRight(x, y);    
    quad.resetPosition();
    

Alpha

  • Get
    var topLeftAlpha = quad.topLeftAlpha;
    var topRightAlpha = quad.topRightAlpha;
    var bottomLeftAlpha = quad.bottomLeftAlpha;
    var bottomRightAlpha = quad.bottomRightAlpha;
    
  • Set
    quad.topLeftAlpha = topLeftAlpha;
    quad.topRightAlpha = topRightAlpha;
    quad.bottomLeftAlpha = bottomLeftAlpha;
    quad.bottomRightAlpha = bottomRightAlpha;
    
    quad.resetAlpha();
    

Color

  • Get
    var topLeftColor = quad.topLeftColor;
    var topRightColor = quad.topRightColor;
    var bottomLeftColor = quad.bottomLeftColor;
    var bottomRightColor = quad.bottomRightColor;
    
  • Set
    quad.topLeftColor = topLeftColor;
    quad.topRightColor = topRightColor;
    quad.bottomLeftColor = bottomLeftColor;
    quad.bottomRightColor = bottomRightColor;
    
    quad.resetColors();
    

Reset all

quad.reset();

Set frame

quad.setFrame(frame);