Typing

Introduction

Typing text on text object, bbcode text object, or tag text boject.

  • Author: Rex
  • Behavior of text object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Load plugin (minify file) in preload stage
    scene.load.plugin('rextexttypingplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexttypingplugin.min.js', true);
    
  • Add typing behavior
    var typing = scene.plugins.get('rextexttypingplugin').add(textGameObject, config);
    

Import plugin

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Install plugin in configuration of game
    import TextTypingPlugin from 'phaser3-rex-plugins/plugins/texttyping-plugin.js';
    var config = {
        // ...
        plugins: {
            global: [{
                key: 'rexTextTyping',
                plugin: TextTypingPlugin,
                start: true
            },
            // ...
            ]
        }
        // ...
    };
    var game = new Phaser.Game(config);
    
  • Add typing behavior
    var typing = scene.plugins.get('rexTextTyping').add(textGameObject, config);
    

Import class

  • Install rex plugins from npm
    npm i phaser3-rex-plugins
    
  • Import class
    import TextTyping from 'phaser3-rex-plugins/plugins/texttyping.js';
    
  • Add typing behavior ```javascript var typing = new TextTyping(textGameObject, config);

Create instance

var typing = scene.plugins.get('rexTextTyping').add(textGameObject, {
    //speed: 333,       // typing speed in ms
    //typeMode: 0,      //0|'left-to-right'|1|'right-to-left'|2|'middle-to-sides'|3|'sides-to-middle'
    //setTextCallback: function(text, isLastChar, insertIdx){ return text; }  // callback before set-text
    //setTextCallbackScope: null
});
  • textObject : Text object, bbcode text object, or tag text boject.
  • speed : Typing speed in ms.
  • typeMode :
    • 'left-to-right', or 0 : Typing characters from left to right.
    • 'right-to-left', or 1 : Typing characters from right to left.
    • 'middle-to-sides', or 2 : Typing characters from middle to sides.
    • 'sides-to-middle', or 3 : Typing characters from sides to middle.
  • setTextCallback : Callback befor set-text, to decorate display text.
    function(text, isLastChar, insertIdx) { return text; }
    
  • setTextCallbackScope : Scope of setTextCallback function.

Start typing

typing.start('ABCDEFG');
// typing.start('ABCDEFG', 333);  // speed in ms

Typing more text

typing.appendText(text);

Stop typing

typing.stop();
// typing.stop(true);;  // stop and show all text

Pause/Resume typing

  • Pause typing
    typing.pause();
    
  • Resume typing
    typing.resume();
    

Set typing speed

typing.setTypeSpeed(speed);  // speed in ms

Set speed in typing event or setTextCallback to change typing speed of remaining text.

Set typing mode

typing.setTypeMode(mode);
  • typeMode :
    • 'left-to-right', or 0 : typing characters from left to right.
    • 'right-to-left', or 1 : typing characters from right to left.
    • 'middle-to-sides', or 2 : typing characters from middle to sides, optional.
    • 'sides-to-middle', or 3 : typing characters from sides to middle.

Events

  • On typing :
    typing.on('type', function(){});
    
  • On typing completed :
    typing.on('complete', function(typing, txt){});
    

Status

  • Is typing
    var isTyping = typing.isTyping;