Skip to content

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, fromScene) {
    
    }, scope);
    
    • fromScene : true if game object is destroyed during scene is shutdown. When scene is shutdown, all game objects will be destroyed.

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
      

Local point

Transfer world point to local point

var point = gameObject.getLocalPoint(x, y);  // point : {x, y}
// var out = gameObject.getLocalPoint(x, y, out);
or
var out = gameObject.getLocalPoint(x, y, out, camera);

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;
    
  • Clear (set to 1)
    gameObject.clearAlpha();
    

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

Order of rendering

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

Display list

scene.children.bringToTop(child);
scene.children.sendToBack(child);
scene.children.moveUp(child);
scene.children.moveDown(child);
scene.children.moveAbove(child1, child2);  // Move child1 above child2
scene.children.moveBelow(child1, child2);  // Move child1 below child2
scene.children.moveTo(child, index);
scene.children.swap(child1, child2);

Layer game object

Place game object into Layer game object

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)`
    

Note

gameObject.tint is a write-only property

Blend mode

  • Get
    var blendMode = gameObject.blendMode;
    
  • Set
    gameObject.blendMode = blendMode;
    gameObject.setBlendMode(blendMode);
    

Mask

See Mask.

Built-in shader effects

See built-in shader effects

Post-fx pipeline

Register post-fx pipeline

  • Register post-fx pipeline in game config
    import PostFxClass from 'path';
    var config = {
        // ...
        pipeline: [PostFxClass]
        // ...
    };
    var game = new Phaser.Game(config);
    

Some post-fx pipelines:

  • Barrel: Barrel post processing filter.
  • Color replace: Replace color post processing filter.
  • Cross-stitching: Cross-stitching post processing filter.
  • Dissolve: Dissolve transition post processing filter.
  • Fish eye: Fish-eye post processing filter.
  • Glow-filter: Glow post processing filter.
  • Glow-filter: Glow post processing filter, ported from pixi.
  • Gray-scale: Gray scale post processing filter.
  • Hsl-adjust: Adjust color in HSL domain, post processing filter.
  • Horri-fi: 6-in-1 post processing filter.
  • Inverse: Inverse color post processing filter.
  • Kawase-blur: Kawase-blur post processing filter.
  • Pixelation: Pixelation post processing filter.
  • Toonify: Draw outlines and quantize color in HSV domain, post processing filter.
  • Shockwave: Shockwave post processing filter.
  • Split: Split image into 4 parts.
  • Swirl: Swirl post processing filter.
  • Warp: Warp post processing filter.

Add post-fx pipeline

gameObject.setPostPipeline(PostFxClass);
  • PostFxClass : Class of post-fx pipeline.

Remove post-fx pipeline

  • Remove a post-fx pipeline
    gameObject.removePostPipeline(PostFxClass);
    
  • Remove all post-fx pipelines
    gameObject.resetPipeline(true);
    
    or
    gameObject.postPipelines = [];
    gameObject.hasPostPipeline = false;
    

Get post-fx pipeline

var pipelineInstance = gameObject.getPostPipeline(PostFxClass);

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.incData(key, value);    
    gameObject.setData(obj); // obj: {key0:value0, key1:value1, ...}
    gameObject.data.values[key] = value;
    gameObject.data.values[key] += inc;
    
    or
    gameObject.toggleData(key);
    
  • Enable
    gameObject.setDataEnabled();
    
  • Events :
    • Set data evant
      gameObject.on('setdata', function(gameObject, key, value){ /* ... */ });
      
    • Change data event
      gameObject.on('changedata', function(gameObject, key, value, previousValue){ /* ... */ });
      
      gameObject.on('changedata-' + key, function(gameObject, 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);
    // gameObject.setTexture(key, frame, updateSize, updateOrigin);
    
  • 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?
  • Set frame by frame object
    gameObject.setFrame(frameObject);
    // gameObject.setFrame(frameObject, updateSize, updateOrigin);
    
  • 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;
    

Name

  • Get
    var name = gameObject.name;
    
  • Set
    gameObject.setName(name);
    gameObject.name = 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)

Add to scene/container

Add

Trigger 'addedtoscene' event, which invoke gameObject.addedToScene()

  • Register 'addedtoscene' event
    gameObject.on('addedtoscene', function(gameObject, scene){});
    
  • Or, override addedToScene method
    class MyClass extends BaseClass {
        // ...
        addedtoscene() {
            super.addedtoscene();
            // ...
        }
    }
    

Remove

Trigger 'removedfromscene' event, which invoke gameObject.removedFromScene()

  • Register 'removedfromscene' event
    gameObject.on('removedfromscene', function(gameObject, scene){});
    
  • Or, override removedFromScene method
    class MyClass extends BaseClass {
        // ...
        removedFromScene() {
            super.removedFromScene();
            // ...
        }
    }
    

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