Label
Introduction¶
A container with an icon, text, and background.
- Author: Rex
- Game object
Source code¶
Usage¶
Install scene plugin¶
Install plugin in configuration of game
import UIPlugin from 'rexTemplates/ui/ui-plugin.js'; var config = { // ... plugins: { scene: [{ key: 'rexUI', plugin: UIPlugin, mapping: 'rexUI' }, // ... ] } // ... }; var game = new Phaser.Game(config);
Add label object¶
var label = scene.rexUI.add.label({ // x: 0, // y: 0, // anchor: undefined, // width: undefined, // height: undefined, orientation: 0, background: backgroundGameObject, icon: iconGameObject, iconMask: false, text: textGameObject, expandTextWidth: false, expandTextHeight: false, action: actionGameObject, actionMask: false, space: { left: 0, right: 0, top: 0, bottom: 0, icon: 0, text: 0, }, // 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.orientation
:'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Put icon at left side, and text at right side.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Put icon at top side, and text at bottom side.
background
: Game object of background, optional. This background game object will be resized to fit the size of label.icon
: Game object of icon, optional.iconMask
: Set true to add a circle mask on icon game object.- Phaser 3 engine does not support nested mask, uses circle mask image instead.
text
: Game object of text, optional.expandTextWidth
: Settrue
to expand width of text object.expandTextHeight
: Settrue
to expand height of text object.action
: Game object of action icon, optional.actionMask
: Set true to add a circle mask on action icon game object.- Phaser 3 engine does not support nested mask, uses circle mask image instead.
space
: Pads spacesspace.left
,space.right
,space.top
,space.bottom
: Space of bounds.space.icon
: Space between icon game object and text game object.space.text
: Space between text game object and action icon game object.
name
: Set name of this label.draggable
: Settrue
to drag to-most sizer.
Expand size of text¶
Expand width/height of text when expandTextWidth
/expandTextHeight
is true
To resize text object, text object should have resize
method. For example
class MyText extends Phaser.GameObjects.Text { constructor(scene, x, y, text, style) { super(scene, x, y, text, style); scene.add.existing(this); } resize(width, height) { this.setFixedSize(width, height); return this; } }
Or uses bbcode text object, or tag text object
Custom class¶
- Define class
class MyLabel extends RexPlugins.UI.Label { constructor(scene, config) { super(scene, config); // ... } // ... }
- Create instance
var label = new MyLabel(scene, config);
Layout children¶
Arrange position of all elements.
label.layout();
Get element¶
- Get element
- Background game object
var background = label.getElement('background');
- Icon game object
var icon = label.getElement('icon');
- Text game object
var textObject = label.getElement('text');
- Action icon game object
var action = label.getElement('action');
- Background game object
- Get by name
var gameObject = label.getElement('#' + name);
Text¶
- Get text string
var s = label.text;
- Set text string
or
label.setText(s);
label.text = s;