1 decade ago by Heiko
Hey I've uploaded a Button StateMachine plugin to github. I started off writing the state machine into my button entities, but the code became to cluttered so I decided to move the state machine into a separate module/plugin.
Have a look and let me know if it proves useful to you. Would also appreciate feedback on bugs, and/or ways to improve this plugin.
Get the plugin and documentation here: Impact-ButtonStateMachine-Plugin
Below is an example implementation of a game button using the state machine plugin (see github repo for more complete example and docs):
Have a look and let me know if it proves useful to you. Would also appreciate feedback on bugs, and/or ways to improve this plugin.
Get the plugin and documentation here: Impact-ButtonStateMachine-Plugin
Below is an example implementation of a game button using the state machine plugin (see github repo for more complete example and docs):
// ------------------------------------------------------------------------------------------------------------- // DemoGamebtn.js // ------------------------------------------------------------------------------------------------------------- ig.module( 'game.entities.demogamebtn' ) .requires( 'plugins.button-state-machine', 'impact.entity' ) .defines(function() { EntityDemoGamebtn = ig.Entity.extend({ size: {x: 16, y: 16}, btnStateMachine: null, // ------------------------------------------------------------------------------------------------------------- // Button States // ------------------------------------------------------------------------------------------------------------- endClick: function() { this.currentAnim = this.anims.btnNormal; }, endClickIgnore: function() { this.currentAnim = this.anims.btnNormal; }, endHover: function() { this.currentAnim = this.anims.btnNormal; }, startClick: function() { this.currentAnim = this.anims.btnDown; }, startHover: function() { this.currentAnim = this.anims.btnHover; }, // ------------------------------------------------------------------------------------------------------------- // Alpha Hit Detection // ------------------------------------------------------------------------------------------------------------- // hittest - returns true if mouse cursor within bounds, else false hittest: function() { if ((ig.input.mouse.x > this.pos.x && ig.input.mouse.x < (this.pos.x + this.size.x)) && (ig.input.mouse.y > this.pos.y && ig.input.mouse.y < (this.pos.y + this.size.y))) { return true; } return false; // hittest failed - mouse outside of entity }, init: function(x, y, settings) { this.animSheet = new ig.AnimationSheet('media/btns/' + settings.image , settings.width, settings.height); this.addAnim('btnNormal', 1, [0]); this.addAnim('btnHover', 2, [1]); this.addAnim('btnDown', 3, [2]); this.addAnim('btnDisabled', 4, [3]); this.currentAnim = this.anims.btnNormal; this.size.x = settings.width; this.size.y = settings.height; // ... // ... this.btnStateMachine = new ig.ButtonStateMachine(); this.btnStateMachine.isMouseInside = this.hittest.bind(this); this.btnStateMachine.isMouseDown = function() { return ig.input.state('click'); }; this.btnStateMachine.startClick = this.startClick.bind(this); this.btnStateMachine.endClick = this.endClick.bind(this); this.btnStateMachine.startHover = this.startHover.bind(this); this.btnStateMachine.endHover = this.endHover.bind(this); this.btnStateMachine.endClickIgnore = this.endClickIgnore.bind(this); this.parent(x, y, settings); }, update: function() { this.parent(); this.btnStateMachine.updateState(); } }); });