Edit
Introduction¶
Create an input text object above a text object to edit string content.
- Author: Rex
- Behavior of text object
Live demos¶
Usage¶
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
totrue
.
- Set
- 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
totrue
.
- Set
- 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), orpassword
number
config.text
: Initial string content.config.onTextChanged
: Callback invoked when input text changed.function (textObject, text) { textObject.text = text; }
config.selectAll
: Settrue
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);
textGameObject
: Text, bbcodt-text, or tag-text
Open editor¶
editor.open(config);
// editor.open(config, onClose);
config
config.type
:text
(default), orpassword
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;