Game object

Introduction

Base class of all game object in phaser.

  • Author: Richard Davey

Usage

Destroy

  • Destroy game object
    gameObject.destroy();
    
  • Game object will be destroyed automatically when scene destroyed, if it is in display list, or update list.
  • Event
    gameObject.once('destroy', function(gameObject) {
    
    }, scope);
    

Position

  • Get
    var x = gameObject.x;
    var y = gameObject.y;
    
  • Set
    gameObject.x = 0;
    gameObject.y = 0;
    gameObject.setPosition(x,y);
    gameObject.setX(x);
    gameObject.setY(y);
    
    • Set random
      gameObject.setRandomPosition(x, y, width, height);
      // gameObject.setRandomPosition(); // x=0, y=0, width=game.width, height=game.height
      

Angle

  • Get
    var angle = gameObject.angle;
    var radians = gameObject.rotation;  // angle in radians
    
  • Set
    gameObject.angle = degrees;
    gameObject.rotation = radians;
    gameObject.setAngle(degrees);
    gameObject.setRotation(radians);
    

Visible

  • Get
    var visible = gameObject.visible; // visible: true/false
    
  • Set
    gameObject.visible = visible;
    gameObject.setVisible(visible);
    

Alpha

  • Get
    var alpha = gameObject.alpha;  // 0~1
    
  • Set
    gameObject.setAlpha(alpha);
    // gameObject.alpha = alpha;
    
    or
    gameObject.setAlpha(topLeft, topRight, bottomLeft, bottomRight);
    // gameObject.alphaTopLeft = alpha;
    // gameObject.alphaTopRight = alpha;
    // gameObject.alphaBottomLeft = alpha;
    // gameObject.alphaBottomRight = alpha;
    

FlipX, FlipY

  • Get
    var flip = gameObject.flipX;  // flip: true/false
    var flip = gameObject.flipY;  // flip: true/false
    
  • Set
    gameObject.flipX = flip;
    gameObject.flipY = flip;
    gameObject.setFlipX(flip);
    gameObject.setFlipY(flip);
    gameObject.setFlip(flipX, flipY);
    gameObject.toggleFlipX();
    gameObject.toggleFlipY();
    gameObject.resetFlip();  // equal to gameObject.setFlip(false, false);
    

Depth (z-index)

The depth starts from zero (the default value) and increases from that point. A game object with a higher depth value will always render in front of one with a lower value.

  • Get
    var depth = gameObject.depth;
    
  • Set
    gameObject.depth = value;
    gameObject.setDepth(value);
    

Scroll factor

  • Get
    var scrollFactorX = gameObject.scrollFactorX;
    var scrollFactorY = gameObject.scrollFactorY;
    
  • Set
    gameObject.setScrollFactor(scrollFactor);
    gameObject.setScrollFactor(scrollFactorX, scrollFactorY);
    

Scroll factor: 0~1

  • 0= fixed to camera
  • 0.25= quarter the speed of the camera
  • 0.5= half the speed of the camera

Bounds

var output = gameObject.getTopLeft(output);     // output: {x, y}
var output = gameObject.getTopCenter(output);     // output: {x, y}
var output = gameObject.getTopRight(output);    // output: {x, y}
var output = gameObject.getLeftCenter(output);    // output: {x, y}
var output = gameObject.getRightCenter(output);    // output: {x, y}
var output = gameObject.getBottomLeft(output);  // output: {x, y}
var output = gameObject.getBottomCenter(output);     // output: {x, y}
var output = gameObject.getBottomRight(output); // output: {x, y}
var output = gameObject.getCenter(output);      // output: {x, y}
var output = gameObject.getBounds(output);      // output: {x, y, width, height}

Origin

  • Get
    var originX = gameObject.originX;
    var originY = gameObject.originY;
    
  • Set
    gameObject.setOrigin(x, y);
    // gameObject.setOrigin(x); // y = x
    
    • Set to top-left
      gameObject.setOrigin(0);
      
    • Set to center
      gameObject.setOrigin(0.5);
      
    • Set to bottom-right
      gameObject.setOrigin(1);
      

Tint

  • Get
    var color = gameObject.tintTopLeft;     // color: 0xRRGGBB
    var color = gameObject.tintTopRight;
    var color = gameObject.tintBottomLeft;
    var color = gameObject.tintBottomRight;
    var isTinted = gameObject.isTinted;
    
  • Set
    gameObject.tint = color;
    gameObject.setTint(color);  // multiply color value
    gameObject.setTint(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);
    gameObject.setTintFill(color);  // replace color value
    gameObject.setTintFill(colorTopLeft, colorTopRight, colorBottomLeft, colorBottomRight);    
    gameObject.clearTint();     // equal to `gameObject.setTint(0xffffff)`
    

Blend mode

  • Get
    var blendMode = gameObject.blendMode;
    
  • Set
    gameObject.blendMode = blendMode;
    gameObject.setBlendMode(blendMode);
    
  • Under WebGL only the following Blend Modes are available
    • 'ADD', or Phaser.BlendModes.ADD, or 1
    • 'MULTIPLY', or Phaser.BlendModes.MULTIPLY, or 2
    • 'SCREEN', or Phaser.BlendModes.SCREEN, or 3
    • 'ERASE', or Phaser.BlendModes.ERASE, or 17
      • Only works when rendering to a framebuffer, like a Render Texture
    • 'SOURCE_IN', or Phaser.BlendModes.SOURCE_IN, or 18
      • Canvas render mode only
    • 'SOURCE_OUT', or Phaser.BlendModes.SOURCE_OUT, or 19
      • Canvas render mode only
    • 'SOURCE_ATOP', or Phaser.BlendModes.SOURCE_ATOP, or 20
      • Canvas render mode only
    • 'DESTINATION_OVER', or Phaser.BlendModes.DESTINATION_OVER, or 21
      • Canvas render mode only
    • 'DESTINATION_IN', or Phaser.BlendModes.DESTINATION_IN, or 22
      • Canvas render mode only
    • 'DESTINATION_OUT', or Phaser.BlendModes.DESTINATION_OUT, or 23
      • Canvas render mode only
    • 'DESTINATION_ATOP', or Phaser.BlendModes.DESTINATION_ATOP, or 24
      • Canvas render mode only
    • 'LIGHTER', or Phaser.BlendModes.LIGHTER, or 25
      • Canvas render mode only
    • 'COPY', or Phaser.BlendModes.COPY, or 26
      • Canvas render mode only
    • 'XOR', or Phaser.BlendModes.XOR, or 27
      • Canvas render mode only
  • Canvas has more available depending on browser support.

Render pipeline

  • Defaule name of render pipeline : 'TextureTintPipeline'
  • Add render pipeline instance
  • Set custom render pipeline
    gameObject.setPipeline(pipelineName);
    
    • pipelineName : Name of this render pipeline, a string.
  • Reset custom render pipeline to defaule render pipeline
    gameObject.resetPipeline();
    
  • Get current name of render pipeline:
    var pipelineName = gameObject.getPipelineName();
    
  • Set properties of piepline instance

Some shader effects

  • Glow-filter: Glow post processing filter.
  • Gray-scale: Gray scale post processing filter.
  • Hsl-adjust: Adjust color in HSL domain, post processing filter.
  • Inverse: Inverse color post processing filter.
  • Pixelation: Pixelation post processing filter.
  • Toonify: Draw outlines and quantize color in HSV domain, post processing filter.

Size

  • Native (un-scaled) size
    • Get
      var width = gameObject.width;
      var height = gameObject.height;
      
    • Set
      gameObject.setSize(width, height);
      
      or
      gameObject.width = width;
      gameObject.height = height;
      
  • Display size
    • Get
      var displayWidth = gameObject.displayWidth;
      var displayHeight = gameObject.displayHeight;
      
    • Set
      gameObject.setDisplaySize(displayWidth, displayHeight);
      
      or
      gameObject.displayWidth = displayWidth;
      gameObject.displayHeight = displayHeight;
      
  • Scale
    • Get
      var scaleX = gameObject.scaleX;
      var scaleY = gameObject.scaleY;
      
      or
      var scale = gameObject.scale;  // Return (scaleX + scaleY)/2
      
    • Set
      gameObject.setScale(scaleX, scaleY);
      
      or
      gameObject.scaleX = scaleX;
      gameObject.scaleY = scaleY;
      
      or
      gameObject.scale = scale;  // Set scaleX, scaleY to scale
      

Click

gameObject.setInteractive().on('pointerdown', function(pointer, localX, localY, event){
    // ...
});

See touch event

State

  • Get
    var state = gameObject.state;
    
  • Set
    gameObject.setState(state);
    

Data

  • Get
    var value = gameObject.getData(key);
    var values = gameObject.getData(keys); // keys: an array of keys
    var value = gameObject.data.values[key];
    
  • Set
    gameObject.setData(key, value);
    gameObject.setData(obj); // obj: {key0:value0, key1:value1, ...}
    gameObject.data.values[key] = value;
    gameObject.data.values[key] += inc;
    
  • Enable
    gameObject.setDataEnabled();
    
  • Events :
    • Set data evant
      gameObject.data.events.on('setdata', function(parent, key, value){ /* ... */ });
      
    • Change data event
      gameObject.data.events.on('changedata', function(parent, key, value, previousValue){ /* ... */ });
      
      gameObject.data.events.on('changedata-' + key, function(parent, value, previousValue){ /* ... */ });
      

See data manager

Note

Ensure data manager is created before binding any data-changed events.

Texture

  • Set texture via key string
    gameObject.setTexture(key);
    // gameObject.setTexture(key, frame);
    
  • Set texture via texture object
    gameObject.setTexture(texture);
    // gameObject.setTexture(texture, frame);
    
  • Set frame
    gameObject.setFrame(frame);
    gameObject.setFrame(frame, updateSize, updateOrigin);
    
    • frame : The name or index of the frame within the Texture.
    • updateSize : Should this call adjust the size of the Game Object?
    • updateOrigin : Should this call adjust the origin of the Game Object?
  • Applies a crop to a texture
    gameObject.setCrop(x, y, width, height);
    
    The crop coordinates are relative to the texture frame, not the Game Object, meaning 0 x 0 is the top-left.
    • Reset crop
      gameObject.setCrop();
      // gameObject.isCropped = false;
      
  • Get texture, frame.
    var texture = gameObject.texture;
    var frame = gameObject.frame;
    
  • Get texture key, frame name.
    var textureKey = gameObject.texture.key;
    var frameName = gameObject.frame.name;
    

Will render

  • Test render flag and camera filter.
    var willRennder = gameObject.willRender(camera);
    
  • Test render flag only
    var willRender = (gameObject.renderFlags === Phaser.GameObjects.GameObject.RENDER_MASK);
    
    • Phaser.GameObjects.GameObject.RENDER_MASK : 15 (Visible, Alpha, Transform and Texture)

Name

  • Get
    var name = gameObject.name;
    
  • Set
    gameObject.setName(name);
    gameObject.name = name;
    

Custom class

  • Define class
    class MyClass extends BaseClass {
        constructor(scene, x, y) {
            super(scene, x, y);
            // ...
            scene.add.existing(this);
        }
        // ...
    
        // preUpdate(time, delta) {
        //     if (super.preUpdate) {
        //         super.preUpdate(time, delta);
        //     }
        // }
    
        // destroy(fromScene) {
        //     //  This Game Object has already been destroyed
        //     if (!this.scene) {
        //         return;
        //     }
        //     super.destroy(fromScene);
        // }
    }
    
    • 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.
        • Some kinds of game object like Sprite, Dom-element has preUpdate method already.
  • Create instance
    var image = new MyClass(scene, x, y, key);