How Game Objects Work

Updated: 11th January 2018 by Richard Davey   @photonstorm

All Game Objects (GOs) in Phaser 3 inherit from the same base class, which is found in src/gameobjects/GameObject.js. This class contains a few core functions, getters / setters and some core properties.

Most importantly: Game Objects now belong to a Scene, not a 'World' any more. In a way, you can think of each Scene as being its own 'World', but the property is now scene and world is no longer used.

All GOs have a Transform Component which controls everything to do with the transformation of the GO (rotation, scale, position, etc).

Texture based GOs like Images and Sprites have texture and frame properties. These contain references to a base texture and frame, not instances (see the Texture Manager for more details)

If relevant, the GO has two renderer functions, one for Canvas and one for WebGL. For example the Image GO has ImageWebGLRenderer and ImageCanvasRenderer.

If you look at the WebGL function you'll see it's very minimal:

var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
{
    if (this.renderMask !== this.renderFlags)
    {
        return;
    }

    renderer.spriteBatch.addSprite(src, camera);
};

module.exports = ImageWebGLRenderer;

In the above src refers to the Image GO itself, and renderer to the WebGL Renderer instance responsible for displaying the Image.

Previous

Next