html5-canvasphaser-framework

PhaserJS: Visual guide for placing sprites when knowing the x and y


Is there some kind of Chrome addon or something for phaser to allow me to find out the x and y coordinates of where I wish to place sprites?

Right now, it's a guessing game. I have to use a number, reload the browser and then go to the point in the game (which might now be the beginning) and see if it's OK. Otherwise, repeat the process.

Is there anything better? A visual debugger or something similar?

I have tried using the standard Google Chrome dev tools, but I can't get access to the sprites inside the HTML canvas or WebGL.


Solution

  • if you don't have any action in the onClick callback, you can use something like this:

    var text;
    Jumper.Game.prototype = {
      create: function() {
        this.game.input.onDown.add(this.onTap, this);
      },
      onTap: function(pointer){
        text = "x:"+parseInt(pointer.x)+" y="+parseInt(pointer.y);  
      },
      render:function(){
        this.game.debug.text(text || '--', 2, 14, '#00ff00');
      }
    }

    or you can changethis.game.input.onDown.add(this.onTap, this); with this.game.input.addMoveCallback(this.onTap, this) for "live" position.