Hidden edit
Introduction¶
An invisible Input DOM element to receive character input and display on text, bbocodetext, or tagtext.
Inspirited from CanvasInput.
- Author: Rex
- DOM Game 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('rexhiddeninputtextplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexhiddeninputtextplugin.min.js', true);
- Add input-text object
var hiddenInputText = scene.plugins.get('rexhiddeninputtextplugin').add(textGameObject, config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import HiddenInputTextPlugin from 'phaser3-rex-plugins/plugins/hiddeninputtext-plugin.js'; var config = { parent: divId, dom: { createContainer: true }, // ... plugins: { global: [{ key: 'rexHiddenInputTextPlugin', plugin: HiddenInputTextPlugin, start: true }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add input-text object
var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, config);
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 HiddenInputText from 'phaser3-rex-plugins/plugins/hiddeninputtext.js';
- Add input-text object
var hiddenInputText = new HiddenInputText(textGameObject, config);
Note
Don't add this game object into scene
Add input text object¶
var hiddenInputText = scene.plugins.get('rexHiddenInputTextPlugin').add(textGameObject, {
type: 'text', // 'text'|'password'|'textarea'|...
cursor: '|',
cursorFlashDuration: 1000,
// updateTextCallback: undefined,
// updateTextCallbackScope: undefined,
// enterClose: true,
// onOpen: undefined,
// onClose: undefined,
// onUpdate: undefined,
});
textGameObject
:type
: Type of element'text'
,'password'
,'textarea'
, ...
cursor
: Cursor character used in default update text callback.null
, or''
: Don't insert cursor character.
cursorFlashDuration
: Display cursor character or a space string to create a flash cursor.enterClose
: Settrue
to close input text when enter-key was pressed. Default value is true.onOpen
: Callback invoked when focus on this hidden input text.function (textObject, hiddenInputText) { }
onClose
: Callback invoked when blur.function (textObject, hiddenInputText) { }
onUpdate
:- A callback invoked in each tick of editing.
function (text, textObject, hiddenInputText) { // return text; }
- Can return a new string for text game object displaying.
'number'
: Only output number string.
- A callback invoked in each tick of editing.
Note
This hiddenInputText will be destroyed when textGameObject
is destroyed.
Custom class¶
- Define class
class MyHiddenText extends HiddenInputText { constructor(textGameObject, config) { super(textGameObject, config) { // ... } // ... // 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 hiddenInputText = new MyHiddenText(textGameObject, config);
Cursor¶
- Set
hiddenInputText.setCursor(s);
- Get
var cursor = hiddenInputText.cursor;
Open editor¶
hiddenInputText.open();
Equal to hiddenInputText.setFocus()
Close editor¶
hiddenInputText.close();
Equal to hiddenInputText.setBlur()
;
Is opened¶
var isOpened = hiddenInputText.isOpened;
Equal to hiddenInputText.isFocused
Select text¶
This feature does not support.
Events¶
See InputText/Event
Other properties¶
See InputText, DOM game object.