Title label
Introduction¶
A container with title, text in two rows, and an icon, background.
- 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 label object
var label = scene.rexUI.add.titleLabel(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 label object
var label = scene.rexUI.add.titleLabel(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { TitleLabel } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add label object
var label = new TitleLabel(scene, config); scene.add.existing(label);
Add label object¶
var label = scene.rexUI.add.titleLabel({
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
orientation: 0,
// rtl: false,
background: backgroundGameObject,
icon: iconGameObject,
iconMask: false,
title: titleGameObject,
separator: separatorGameObject,
text: textGameObject,
action: actionGameObject,
actionMask: false,
align: {
title: 'right',
text: 'right',
},
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
icon: 0, iconTop: 0, iconBottom: 0,
text: 0,
actionTop: 0, actionBottom: 0,
},
// name: '',
// draggable: false,
// sizerEvents: false,
// enableLayer: 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
: Set size (invokeonResizeCallback
) based on visible window, which composed of- Percentage of visible width/height :
'p%'
, p:0
~100
. - Padding :
'+n'
, or'-n'
.
- Percentage of visible width/height :
onResizeCallback
: A default resize callback will be assigned interanlly.
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.
rtl
:true
: Layout children from right to left.false
: Layout children from left to right. Default behavior.
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.
title
: Game object of title.separator
: Game object of title, optional.text
: Game object of text.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.
align
: Alignment of title, text game objects.align.title
:'left'
, or'right'
. Default vale is'right'
.align.text
:'left'
, or'right'
. Default vale is'right'
.
space
: Pads spaces.space.left
,space.right
,space.top
,space.bottom
: Space of bounds.space.icon
: Space between icon game object and text game object.space.iconTop
,space.iconBottom
: Space around icon game object.space.text
: Space between text game object and action icon game object.space.iconTop
,space.iconBottom
: Space around icon game object.
name
: Set name of this game object.draggable
: Settrue
to drag top-most object.sizerEvents
: Settrue
to fire sizer events. Default value isfalse
.enableLayer
:false
: Add child game objects into scene's display list. Default behavior.true
: Add child game objects into an internal layer game object. See also.
Custom class¶
- Define class
class MyTitleLabel extends RexPlugins.UI.TitleLabel { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... }
- Create instance
var label = new MyTitleLabel(scene, config);
Layout children¶
Arrange position of all elements.
label.layout();
See also - dirty
Get element¶
- Get element
- Background game object
var background = label.getElement('background');
- Icon game object
var icon = label.getElement('icon');
- Title game object
var textObject = label.getElement('title');
- Separator game object
var textObject = label.getElement('separator');
- Text game object
var textObject = label.getElement('text');
- Action icon game object
var action = label.getElement('action');
- Background game object
- Get by name
or
var gameObject = label.getElement('#' + name); // var gameObject = label.getElement('#' + name, recursive);
var gameObject = label.getByName(name); // var gameObject = label.getByName(name, recursive);
recursive
: Settrue
to search all children recursively.
Title¶
- Get title string
var s = label.title;
- Set title string
or
label.setTitle(s);
label.title = s;
Text¶
- Get text string
var s = label.text;
- Set text string
or
label.setText(s);
label.text = s;
Icon texture¶
- Set texture
label.setTexture(key); // label.setTexture(key, frame);
- Set texture via texture object
label.setTexture(texture); // label.setTexture(texture, frame);
- Get texture, frame.
var texture = label.texture; var frame = label.frame;
- Get texture key, frame name.
var textureKey = label.texture.key; var frameName = label.frame.name;