Sign in to follow this  
Luis Felipe

Phaser and dat.GUI

Recommended Posts

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:


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 :P 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() {;  paddle =,300, 'paddle'); [ 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:

Share this post

Link to post
Share on other sites

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');  ;        },        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

Share this post

Link to post
Share on other sites

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.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.