Debug in Phaser.State

[updatestage]

Hi there,

 

I'm new to Phaser and new to TypeScript, I just work on the base of the tutorials and set up the multi state project. I created two sprites and want to display the sprite bodies. But this doesn't work. Here is my code:

module TestGame {     export class Level1 extends Phaser.State {				sp:Phaser.Sprite;		sp2:Phaser.Sprite;		        create() {        	this.sp = this.game.add.sprite(80,200,"preloadBar");        	this.sp.angle = 70;        	this.sp.body.immovable = true;					this.sp2 = this.game.add.sprite(100,50,"loader2");		this.sp2.body.collideWorldBounds = true;        	this.sp2.body.bounce.y = .6;		this.sp2.body.gravity.y = 100;        }                        update(){	        this.game.physics.collide(this.sp, this.sp2, this.collisionHandler, null, this);        }                render(){        	console.log(this.game.debug.renderSpriteBody);        	console.log(this.sp);        	console.log("---");	        this.game.debug.renderSpriteBody(this.sp);	        this.game.debug.renderSpriteInfo(this.sp, 100, 100, "#ffffff");        }                collisionHandler(){	        if (this.sp.body.touching.down) console.log("DOWN");        }        		    } // end of class} // end of module

The sprites are displayed and working and the render function logs the data correctly, but neither sprite collision bounds nor sprite info are displayed.

 

It works fine if I don't use States.

 

Any ideas, what I do wrong?

[updatestage]

I found the problem:

 

Debugging only works in "CANVAS" mode. Neither "AUTO" nor "WEBGL" support debugging.

[Harissa]

Thanks for writing this up - I've been struggling with this for a morning and finally cracked it thanks to this post.