Phaser and dat.GUI

[Luis Felipe]

Hey all, had a few minutes today to try something. I'm trying to implement the dat.GUI system control into a Phaser project so that I can quickly and intuitively turn on/off change, variables, etc. 

 

Here is what I have so far: luisfelipeart.com/labs/juicybreak/

 

So far I've only managed to make the GUI appear, after several attempts. (*noobness* ). I was also only able to make it show up if the entire game was in <script> tags in the html file and not using other methods.

 

Any tips or ideas on how I could make this work would be greatly appreciated, or calling me a madman for trying this is also acceptable I mean I don't even know if this is possible.

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload: preload, create: create, update: update });// dat.GUI SETUPvar gui = new dat.GUI();var paddle;var paddleSpeed;paddleSpeed = 11;// dat.GUI OPTIONS SETUPfunction guiOptions(){  this.speed = paddleSpeed;}var text = new guiOptions();gui.add(text, 'speed', -50, 50);function preload() {  this.load.image('paddle', 'assets/jb_paddle.png');}function create() {  this.game.physics.startSystem(Phaser.Physics.ARCADE);  paddle = this.game.add.sprite(20,300, 'paddle');  this.game.physics.enable( [ paddle ], Phaser.Physics.ARCADE);}function update() {  paddle.body.velocity.x = paddleSpeed;}

I tried placing the GUI code in the update function but it obviously went berserk and endlessly duplicated itself (graphically).

 

Here's someone's Code Pen example using the GUI: http://codepen.io/Mombasa/pen/DAcmG?editors=001

[pxam]

i use it with gamestates. it looks something like this:

 var game = new Phaser.Game(800, 600, Phaser.AUTO, '');    // dat.GUI SETUP    var gui = new dat.GUI();    //Game    var Game = {};    Game.GameState = function(game){};    Game.GameState.prototype = {        preload: function(){            //load assets        },        create: function(){            //some values            this.value = 0;            this.listen = 0;            //dat.gui            this.setupGUI();                        console.log('state started');        },        setupGUI: function(){            var guiLevel = gui.addFolder('GameState');            guiLevel.add(this, 'value', 0, 10).name('my Value'); //value            guiLevel.add(this, 'listen', 0, 100).name('listen').listen(); //listen            guiLevel.add(this, 'guiCall').name('my Function');            guiLevel.open();        },        guiCall: function(){            alert('dat.gui!');            game.stage.backgroundColor = '#ff0000';        },        update: function(){            //update demo value             if(this.listen < 100){                this.listen += 1;            } else {                this.listen = 0;            }        }    }    game.state.add('myState', Game.GameState); //add State    game.state.start('myState', true, false); //start State

[Luis Felipe]

Awesome! Thanks

[dr.au]

Thanks to pxam I created this jsfiddle if anyone is looking for an easy starter template for Phaser + dat.gui controls over variables.

[nkholski]

I finally found some time to test this and would really recommed to use it during development. It took me less than 30 mins to get the gui working and allowing me to toggle obtained items, setting health and ammo and stuff. Usually I do all of this in the console, and I plan to add support to warp between predefined positions on my tilemap which would be hard using the console.