Render texture

Introduction¶

Render texture with 4 or 9 vertex control points.

Author: Rex
Game object

WebGL only

It only works in WebGL render mode.

Live demos¶

RenderTexture

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

scene.load.plugin('rexquadimageplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexquadimageplugin.min.js', true);

Add render texture object

var image = scene.add.rexQuadRenderTexture(x, y, width, height, config);

Import plugin¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Install plugin in configuration of game

import QuadImagePlugin from 'phaser3-rex-plugins/plugins/quadimage-plugin.js';
var config = {
    // ...
    plugins: {
        global: [{
            key: 'rexQuadImagePlugin',
            plugin: QuadImagePlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);

Add render texture object

var image = scene.add.rexQuadRenderTexturege(x, y, width, height, config);

Import class¶

Install rex plugins from npm
```
npm i phaser3-rex-plugins
```

Import class

import { QuadRenderTexture } from 'phaser3-rex-plugins/plugins/quadimage.js';

Add render texture object

var image = new QuadRenderTexture(scene, x, y, width, height, config);
scene.add.existing(image);

Create instance¶

var image = scene.add.rexQuadRenderTexturege(x, y, width, height, {
    // hideCCW: true,
    // ninePointMode: false,
});

or

var image = scene.add.rexQuadRenderTexturege({
    // x: 0,
    // y: 0,
    // width: 32,
    // height: 32,
    // hideCCW: true,
    // ninePointMode: false,
});

ninePointMode :
- true : Add 9 vertex control points.
- false : Add 4 vertex control points. Default behavior.

Add prespective render texture from JSON

var image = scene.make.rexQuadRenderTexturege({
    x: 0,
    y: 0,    
    width: 32,
    height: 32,

    // hideCCW: false,
    // ninePointMode: false,

    add: true
});

Custom class¶

Define class

class MyQuadRenderTexturege extends QuadRenderTexturege {
    constructor(scene, x, y, width, height, config) {
        super(scene, x, y, width, height, config);
        // ...
        scene.add.existing(this);
    }
    // ...

    // preUpdate(time, delta) {
    //     super.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 image = new MyQuadRenderTexturege(scene, x, y, width, height, config);

Internal render texture¶

var rt = image.rt;

rt : Render texture

Paste texture¶

Paste game object

image.rt.draw(gameObject, x, y);
// image.rt.draw(gameObject, x, y, alpha, tint);

gameObject : a game object, or an array of game objects

Paste game objects in a group

image.rt.draw(group, x, y);
// image.rt.draw(group, x, y, alpha, tint);

Paste game objects in a scene

image.rt.draw(scene.children, x, y);
// image.rt.draw(scene.children, x, y, alpha, tint);

Paste texture

image.rt.draw(key, x, y);
// image.rt.draw(key, x, y, alpha, tint);

or

image.rt.drawFrame(key, frame, x, y);
// image.rt.drawFrame(key, frame, x, y, alpha, tint);

key : The key of the texture to be used, as stored in the Texture Manager.

Snapshop game objects
```
image.snapshot(gameObjects);
```
- gameObjects : Array of game objects.

Erase¶

image.rt.erase(gameObject, x, y);

gameObject : a game object, or an array of game objects

Clear¶

image.rt.clear();

Fill¶

image.rt.fill(rgb, alpha);
// image.rt.fill(rgb, alpha, x, y, width, height);

Other properties¶

See Quad image game object, Mesh game object, game object

Create mask¶

var mask = image.createBitmapMask();

See mask

Shader effects¶

Support postFX effects

Note

No preFX effect support