Edit

Introduction

Create an input text object above a text object to edit string content.

  • Author: Rex
  • Behavior of text object

Live demos

Usage

Sample code

Install plugin

Load minify file

  • Enable dom element in configuration of game 
    var config = {
    parent: divId,
    dom: {
        createContainer: true
    },        
    // ...
};
var game = new Phaser.Game(config);
    • Set parent to divId
    • Set dom.createContainer to true.
  • Load plugin (minify file) in preload stage 
    scene.load.plugin('rextexteditplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rextexteditplugin.min.js', true);
  • Add text-edit behavior 
    var editor = scene.plugins.get('rextexteditplugin').edit(textGameObject)

Import plugin

  • Install rex plugins from npm 
    npm i phaser3-rex-plugins
  • Install plugin in configuration of game 
    import TextEditPlugin from 'phaser3-rex-plugins/plugins/textedit-plugin.js';
var config = {
    parent: divId,
    dom: {
        createContainer: true
    },        
    // ...
    plugins: {
        global: [{
            key: 'rexTextEdit',
            plugin: TextEditPlugin,
            start: true
        },
        // ...
        ]
    }
    // ...
};
var game = new Phaser.Game(config);
  • Add text-edit behavior 
    var editor = scene.plugins.get('rexTextEdit').edit(textGameObject)

Import class

  • Install rex plugins from npm 
    npm i phaser3-rex-plugins
  • Enable dom element in configuration of game 
    var config = {
    parent: divId,
    dom: {
        createContainer: true
    },        
    // ...
};
var game = new Phaser.Game(config);
    • Set parent to divId
    • Set dom.createContainer to true.
  • Import class 
    import TextEdit from 'phaser3-rex-plugins/plugins/textedit.js';
  • Add text-edit behavior 
    var editor = new TextEdit(textGameObject)

Open text editor

An easy way to open a text editor.

var editor = scene.plugins.get('rexTextEdit').edit(textObject, config);
// var editor = scene.plugins.get('rexTextEdit').edit(textObject, config, onClose);
  • textObject : Text object, bbcode text object, or tag text boject.
  • config :
    • config.type :
      • text (default), or
      • password
      • number
    • config.text : Initial string content.
    • config.onTextChanged : Callback invoked when input text changed. 
      function (textObject, text) {
    textObject.text = text;
}
    • config.selectAll : Set true to select all text.
    • More configuration parameters...
  • onClose : Callback invoked when text editor is closed. 
    var callback = function(textObject) {
}

Create a text editor (input element) above text object.

  • Size, font size, font family, font color, background color of text editor will be equal to text object.
  • Text object will be invisible when text editor is opened.
  • Store reference of text editor at textObject._editor.
  • Text editor will be closed when
    • Press enter key, or
    • Touch outside of editor, or
    • Open another text editor, or
    • Call editor.close()

Limitation of text game object

Don't assign height property of text game object.
Because that text input element does not have vertical align setting, text will always align to middle/center.

Create instance

var editor = scene.plugins.get('rexTextEdit').add(textGameObject);

Open editor

editor.open(config);
// editor.open(config, onClose);
  • config
    • config.type :
      • text (default), or
      • password
    • config.text : Initial string content.
    • config.onTextChanged : Callback invoked when input text changed. 
      function (textObject, text) {
    textObject.text = text;
}
    • More configuration parameters...
  • onClose : Callback invoked when text editor is closed. 
    var callback = function(textObject) {
}

Create a text editor (input element) above text object.

  • Size, font size, font family, font color, background color of text editor will be equal to text object.
  • Text object will be invisible when text editor is opened.

Is opened

var isOpened = editor.isOpened;

Close editor

editor.close();

Text editor will be closed when

  • Press enter key, or
  • Touch outside of editor, or
  • Open another text editor, or
  • Call editor.close()

Get DOM

var inputText = editor.inputText.node;