Canvas frame manager

Introduction¶

Generate bitmapfont from text game object, or bbcode text game object.

Author: Rex
Member of scene

Live demos¶

Paste text

Usage¶

Sample code

Install plugin¶

Load minify file¶

Load plugin (minify file) in preload stage

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

Add canvas-frame-manager object

var canvasFrames = scene.plugins.get('rexcanvasframemanagerplugin').add(scene, config);

Import plugin¶

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

Install plugin in configuration of game

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

Add canvas-frame-manager object

var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, config);

Import class¶

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

Import class

import CanvasFrameManager from 'phaser3-rex-plugins/plugins/canvasframemanager.js';

Add canvas-frame-manager object

var canvasFrames = new CanvasFrameManager(scene, config);

Create instance¶

var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, {
    key: '',
    width: 4096,
    height: 4096,
    cellWidth: 64,
    cellHeight: 64,
    fillColor: undefined
});

key : Texture key in texture manager
width, height : Size of canvas.
cellWidth, cellHeight : Maximum frame size.
fillColor : Fill an initial color, in css color string.
- undefined : Don't fill color.

or

var canvasFrames = scene.plugins.get('rexCanvasFrameManager').add(scene, key, width, height, cellWidth, cellHeight, fillColor);

Steps of generating bitmapfont :

Add frames :

canvasFrames.paste(frameName, gameObject);

Update texture
```
canvasFrames.updateTexture();
```
Export frame data to bitmapfont
```
canvasFrames.addToBitmapFont();
```

Add frame¶

From game object¶

After rendering content on text, bbcode text, canvas

canvasFrames.paste(frameName, gameObject);

frameName : Frame name.
gameObject : text, bbcode text, or canvas.

Custom drawing¶

canvasFrames.draw(frameName, callback, scope)

frameName : Frame name.

callback :

function(canvas, context, frameSize) {
    // The maximum frame size
    var cellWidth = frameSize.width;
    var cellHeight = frameSize.height;

    // Draw content in area of (0, 0) - (cellWidth, cellHeight)

    // Update frame size
    // frameSize.width = ...
    // frameSize.height = ...
}

Empty frame¶

canvasFrames.addEmptyFrame(frameName);
// canvasFrames.addEmptyFrame(frameName, width, height);

frameName : Frame name.
width : Frame width, default value is cellWidth
height : Frame height, default value is cellHeight

Update texture¶

Update texture after adding frames.

canvasFrames.updateTexture();

Remove frame¶

canvasFrames.remove(frameName);

frameName : Frame name.

Export to bitmapfont¶

canvasFrames.addToBitmapFont();

Destroy instance¶

canvasFrames.destroy();