FSM
Introduction¶
- Author: Rex
- Object
Usage¶
Install plugin¶
Load minify file¶
- Load plugin (minify file) in preload stage
scene.load.plugin('rexfsmplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexfsmplugin.min.js', true);
- Add FSM object
var state = scene.plugins.get('rexfsmplugin').add(config);
Import plugin¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Install plugin in configuration of game
import FSMPlugin from 'phaser3-rex-plugins/plugins/fsm-plugin.js'; var config = { // ... plugins: { global: [{ key: 'rexFSM', plugin: FSMPlugin, start: true }, // ... ] } // ... }; var game = new Phaser.Game(config);
- Add FSM object
var state = scene.plugins.get('rexFSM').add(config);
Import class¶
- Install rex plugins from npm
npm i phaser3-rex-plugins
- Import class
import FSM from 'phaser3-rex-plugins/plugins/fsm.js';
- Add FSM object
var state = new FSM(config);
Create instance¶
Create by config¶
var state = scene.plugins.get('rexFSM').add({
start: 'A', // default: undefined
states: {
A: {
next: 'B', // function() { return 'B'; }
enter: function() {},
exit: function() {}
},
// ...
},
init: function() {},
extend: {
i: 0,
name: 'abc'
// ...
},
enable: true,
eventEmitter: undefined
});
start
: Initial state.states
: Define states.- stateName
next
: String of next state, or a callback to get next state.enter
: Callback when enter state.exit
: Callback when exit state.
- stateName
init
: Initial callback when creating instance.extend
: Inject key-value pairs into instance.enable
: Setfalse
to block any state changing.eventEmitter
undefined
: Create a private event emitter, default value.false
: Don't add any event emitter, i.e. no event will be fired.- Event emitter object : Fire event through this event emitter.
Inheritance¶
- Create new class
Members: -
class State extends FSM { constructor() { super(); } next_A() { return 'B' } enter_A() { /* ... */ } exit_A() { /* ... */ } }
next_
+ stateName: Callback to get next state. -enter_
+ stateName: Callback when enter state. -exit_
+ stateName: Callback when exit state. - Create instance
var state = new State();
Read state¶
- Current state
var curState = state.state;
- Previous state
var preState = state.prevState;
Start at state¶
Set new state without triggering any state-changing callbacks or events.
state.start(newState);
Next state¶
graph TB
next["state.next()"] --> next_A["state.next_A()<br>return 'B'"]
next_A --> eventStateChange["state.emit('statechange', state)<br>state.prevState -> state.state"]
subgraph State changing
eventStateChange --> exit_A["state.exit_A()"]
exit_A --> eventExitA["state.emit('exit_A', state)"]
eventExitA --> enter_B["state.enter_B()"]
enter_B --> eventEnterB["state.emit('enter_B', state)"]
subgraph Exit
exit_A
eventExitA
end
subgraph Enter
enter_B
eventEnterB
end
end
goto["state.goto('B')"] --> eventStateChange
subgraph Request
subgraph Next
next
next_A
end
subgraph Goto
goto
end
end
Request¶
- Get next state by callback
state.next(); // nextState = state.next_A()
- Goto state
state.goto(nextState); // state.state = nextState;
State-changing¶
These callbacks or events will be triggered if state is changing.
For example, state is changing from 'A' to 'B'.
- event
statechange
state.on('statechange', function(state) { console.log( state.prevState + '->' + state.state ); });
- callback
state.exit_A
- event
exit_A
state.on('exit_A', function(state) { /*...*/ });
- callback
state.enter_B
- event
enter_B
state.on('enter_B', function(state) { /*...*/ });
Enable¶
state.setEnable();
// state.setEnable(false); // disable
state.next()
and state.goto()
will be ignored if disabled.