Text area
Introduction¶
A container with a text, slider, and scroller.
- Author: Rex
- Game object
Live demos¶
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.scenePlugin('rexuiplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexuiplugin.min.js', 'rexUI', 'rexUI');
- Add text-area object
var textArea = scene.rexUI.add.textArea(config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import UIPlugin from 'phaser3-rex-plugins/templates/ui/ui-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexUI', plugin: UIPlugin, mapping: 'rexUI' }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add text-area object
var textArea = scene.rexUI.add.textArea(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { TextArea } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add text-area object
var textArea = new TextArea(scene, config); sscene.add.existing(textArea);
Add text-area object¶
var textArea = scene.rexUI.add.textArea({
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
// Elements
background: backgroundGameObject,
text: textGameObject,
// textWidth: undefined,
// textHeight: undefined,
slider: {
track: trackGameObject,
thumb: thumbGameObject,
},
scroller: {
threshold: 10,
slidingDeceleration: 5000,
backDeceleration: 2000,
},
clamplChildOY: false,
header: headerGameObject,
footer: footerGameObject,
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
text: 0,
// text: {
// top: 0,
// bottom: 0,
// left: 0,
// right: 0,
//},
header: 0,
footer: 0,
},
expand: {
header: true,
footer: true,
},
align: {
header: 'center',
footer: 'center',
},
content: '',
// name: '',
// draggable: false
});
x
,y
: Position of this object, it is valid when this object is the top object.anchor
: See anchor.left
,right
,centerX
,x
,top
,bottom
,centerY
,y
: Position based on visible window, which composed of- Percentage of visible width/height :
'p%'
, p:0
~100
.'left'
(=0%),'center'
(=50%),'right'
(=100%)'top'
(=0%),'center'
(=50%),'bottom'
(=100%)
- Offset :
'+n'
, or'-n'
.
- Percentage of visible width/height :
width
,height
: Minimum width, minimum height.background
: Game object of background, optional. This background game object will be resized to fit the size of text area.text
: Game object of text.textWidth
: Fixed width of text game object. Setundefined
to ignore this feature.textHeight
: Fixed height of text game object. Setundefined
to ignore this feature.slider
: Componments of slider, optional.slider.background
: Game object of slider background, optional.slider.track
: Game object of track.slider.thumb
: Game object of thumb.slider.input
:'drag'
: Control slider by dragging thumb game object. Default setting.'click'
: Control slider by touching track game object.'none'
: Disable sider controlling.
slider.position
: Position of this sldier.0
,'right'
,'bottom'
: Sldier at right/bottom side. Default value.1
,'left'
,'top'
: Sldier at left/top side.
- Set to
false
to skip creating slider.
scroller
: Configuration of scroller behavior.scroller.threshold
: Minimal movement to scroll. Set0
to scroll immediately.scroller.slidingDeceleration
: Deceleration of slow down when dragging released.- Set
false
to disable it.
- Set
scroller.backDeceleration
: Deceleration of pull back when out of bounds.- Set
false
to disable it.
- Set
- Set to
false
to skip creating scroller.
clamplChildOY
: Settrue
to clamp scrolling.header
: Game object of header, optional.footer
: Game object of footer, optional.space
: Pads spacesspace.left
,space.right
,space.top
,space.bottom
: Space of bounds.space.text
:- A number: Space between text object and slider object.
- An object: Padding of text object.
- If
scrollMode
is0
(vertical) :space.text.top
,space.text.bottom
: Top, bottom padding space of text object.space.text.right
: Space between text object and slider object.
- If
scrollMode
is1
(horizontal) :space.text.left
,space.text.right
: Left, right padding space of text object.space.text.bottom
: Space between text object and slider object.
- If
space.header
: Space between header and text object.space.footer
: Space between footer and text object.
expand
: Expand width or height of elementexpand.header
: Settrue
to expand width or height of header game object.expand.footer
align
: Align elementalign.header
'center'
, orPhaser.Display.Align.CENTER
: Align game object at center. Default value.'left'
, orPhaser.Display.Align.LEFT_CENTER
: Align game object at left-center.'right'
, orPhaser.Display.Align.RIGHT_CENTER
: Align game object at right-center.
align.footer
content
: Content of this text area.name
: Set name of this textArea.
Custom class¶
- Define class
class MyTextArea extends RexPlugins.UI.TextArea { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... }
- Create instance
var textArea = new MyTextArea(scene, config);
Layout children¶
Arrange position of all elements.
textArea.layout();
See also - dirty
Content¶
- Set
textArea.setText(text);
- Append
textArea.appendText(text);
- Get
var text = textArea.text;
Scroll content¶
- Set
or
textArea.setChildOY(oy);
textArea.childOY = oy;
- Get
var childOY = textArea.childOY;
- Top OY
var topOY = textArea.topChildOY;
- Bottom OY
var bottomOY = textArea.bottomChildOY;
Scroll by percentage¶
- Set
or
textArea.setT(t); // t: 0~1
textArea.t = t;
- Get
var t = textArea.t;
Scroll to top/bottom¶
- Scroll to top
textArea.scrollToTop();
- Equal to
textArea.t = 0;
- Equal to
- Scroll to bottom
textArea.scrollToBottom();
- Equal to
textArea.t = 1;
- Equal to
Enable/disable scrolling¶
- Slider
- Set enable state
or
textArea.setSliderEnable(enabled);
textArea.sliderEnable = enabled;
- Get enable state
var enable = textArea.sliderEnable;
- Set enable state
- Scroller
- Set enable state
or
textArea.setScrollerEnable(enabled);
textArea.scrollerEnable = enabled;
- Get enable state
var enable = textArea.scrollerEnable;
- Set enable state
Event¶
- On scroll
textArea.on('scroll', function(textArea) { // ... })
Lines count¶
var linesCount = textArea.linesCount;
Other properties¶
See sizer object, base sizer object.
Get element¶
- Get element
- Background game object
var background = textArea.getElement('background');
- Text game object
var text = textArea.getElement('text');
- Slider
- Track
var track = textArea.getElement('slider.track');
- Thumb
var thumb = textArea.getElement('slider.thumb');
- Track
- Scroller
var scroller = textArea.getElement('scroller');
- Background game object
- Get by name
or
var gameObject = textArea.getElement('#' + name); // var gameObject = textArea.getElement('#' + name, recursive);
var gameObject = textArea.getByName('#' + name); // var gameObject = textArea.getByName('#' + name, recursive);
recursive
: Settrue
to search all children recursively.