Slider
Introduction¶
A container with a track, indicator, thumb and 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 slider object
var slider = scene.rexUI.add.slider(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 slider object
var slider = scene.rexUI.add.slider(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import { Slider } from 'phaser3-rex-plugins/templates/ui/ui-components.js';
- Add slider object
var slider = new Slider(scene, config); scene.add.existing(slider);
Add slider object¶
var slider = scene.rexUI.add.slider({
// x: 0,
// y: 0,
// anchor: undefined,
// width: undefined,
// height: undefined,
// origin: 0.5
// originX:
// originY:
orientation: 0,
reverseAxis: false,
background: backgroundGameObject,
/*
background: {
radius: 0,
color: undefined, alpha: 1,
strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
shape: undefined
}
*/
track: trackGameObject,
/*
track: {
width: 1, height: 1,
radius: 0,
color: undefined, alpha: 1,
strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
shape: undefined
}
*/
indicator: indicatorGameObject,
/*
indicator: {
width: 1, height: 1,
radius: 0,
color: undefined, alpha: 1,
strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
shape: undefined
}
*/
thumb: thumbGameObject,
/*
thumb: {
width: 1, height: 1,
radius: 0,
color: undefined, alpha: 1,
strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2,
shape: undefined
}
*/
thumbOffsetX: 0,
thumbOffsetY: 0,
input: 'drag',
value: 0,
gap: undefined,
easeValue: {
duration: 0,
ease: 'Linear'
},
valuechangeCallback: function(newValue, oldValue, slider) {
},
space: {
left: 0,
right: 0,
top: 0,
bottom: 0,
},
enable: true,
// 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.origin
,originX
,originY
: Set origin of this sizer. Default value is (0.5, 0.5).orientation
:'left-to-right'
,'horizontal'
,'h'
,'x'
, or0
: Horizontal slider.'top-to-bottom'
,'vertical'
,'v'
,'y'
, or1
: Vertical slider.
reverseAxis
:false
: Map left/top to0
, and right/bottom to1
. Default behavior.true
: Map left/top to1
, and right/bottom to0
.
background
:- Game object of background, optional. This background game object will be resized to fit the size of slider.
- A plain object to create round rectangle shape
{ radius: 0, color: undefined, alpha: 1, strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2, shape: undefined }
track
:- Game object of track, optional. This track game object will be resized to fit the size of slider, with space.
- A plain object to create round rectangle shape
{ width: 1, height: 1, radius: 0, color: undefined, alpha: 1, strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2, shape: undefined }
indicator
:- Game object of indicator, optional.
- A plain object to create round rectangle shape
{ width: 1, height: 1, radius: 0, color: undefined, alpha: 1, strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2, shape: undefined }
thumb
:- Game object of thumb, optional.
- A plain object to create round rectangle shape
{ width: 1, height: 1, radius: 0, color: undefined, alpha: 1, strokeColor: undefined, strokeAlpha: 1, strokeWidth: 2, shape: undefined }
thumbOffsetX
,thumbOffsetY
: Shift thumb, default value is0
.input
:'pan'
,'drag'
, or0
: Control slider by panning/dragging thumb game object. Default setting.'click'
, or1
: Control slider by touching track game object.'none'
, or-1
: Disable sider controlling.
value
: Initial value (0 ~ 1).gap
: Snap a value to nearest grid slice, using rounding.undefined
: Disalbe this feature.
easeValue
: Easing value wheninput
is'click'
.easeValue.duration
: Duration of value easing, default is0
(no easing).easeValue.ease
: Ease function, default is'Linear'
.
valuechangeCallback
: callback function when value changed.function(newValue, oldValue, slider) { }
space
: Pads spacesspace.left
,space.right
,space.top
,space.bottom
: Space of bounds.
enable
: Setfalse
to disable controlling.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 MySlider extends RexPlugins.UI.Slider { constructor(scene, config) { super(scene, config); // ... scene.add.existing(this); } // ... }
- Create instance
var slider = new MySlider(scene, config);
Layout children¶
Arrange position of all elements.
slider.layout();
See also - dirty
Get element¶
- Get element
- Background game object
var background = slider.getElement('background');
- Track game object
var track = slider.getElement('track');
- Indicator game object
var track = slider.getElement('indicator');
- Thumb track game object
var action = slider.getElement('thumb');
- Background game object
- Get by name
or
var gameObject = slider.getElement('#' + name); // var gameObject = slider.getElement('#' + name, recursive);
var gameObject = slider.getByName(name); // var gameObject = slider.getByName(name, recursive);
recursive
: Settrue
to search all children recursively.
Enable¶
- Get
var enable = slider.enable;
- Set
or
slider.setEanble(enable);
slider.enable = enable;
Value¶
Change value will also change the position of slider thumb and width of slider indicator.
- Get value
or
var value = slider.getValue(min, max); // value : min ~ max
orvar value = slider.getValue(); // value: 0 ~ 1
var value = slider.value; // value: 0 ~ 1
- Set value
or
slider.setValue(value, min, max); // value: min ~ max
orslider.setValue(value); // value: 0 ~ 1
slider.value = value; // value: 0 ~ 1
- Increase value
or
slider.addValue(inc, min, max); // inc: min ~ max
orslider.addValue(inc); // inc: 0 ~ 1
slider.value += inc; // inc: 0 ~ 1
Ease value¶
- Ease value to
or
slider.easeValueTo(value, min, max); // value: min ~ max
slider.easeValueTo(value); // value: 0 ~ 1
- Stop ease
slider.stopEaseValue();
- Set ease duration
slider.setEaseValueDuration(duration);
- Set ease function
slider.setEaseValueFunction(ease);
ease
: Ease function.
Gap¶
- Set
or
slider.setGap(gap); // gap: 0~1
slider.setGap(gap, min, max); // gap: min~max
- Get
var gap = slider.gap; // gap: 0~1
Events¶
- On value changed
slider.on('valuechange', function(newValue, oldValue, slider){ // }, scope);
- On input start
slider.on('inputstart', function(pointer) { }, scope);
- On input end
slider.on('inputend', function(pointer) { }, scope);