A Kiwi Game can create a debug canvas that will be added to the layer above the regular game canvas. The debug canvas is not created by default (even with debugging on) and rendering/clearing of the canvas is upto the developer. The context for rendering can be access via the ‘dctx’ property and you can use the ‘clearDebugCanvas’ method to clear the canvas.
To use the Debug canvas you can create it in you create method of your state. This will add an overlay which will have a low opacity.
|
1 |
myGame.stage.createDebugCanvas(); |
Once this is done you can treat this canvas like any other canvas but you can also use use some of the in built features of Kiwi.js to draw to it.
|
1 |
this.mySprite.box.draw( game.stage.dctx ); |
You can also clear the canvas easily using the clearDebugCanvas at the start of your update loop
|
1 2 3 4 5 |
MyState.update = function(){ Kiwi.State.prototype.update.call( this ); myGame.stage.clearDebugCanvas(); this.mySprite.box.draw( myGame.stage.dctx ); } |
Below is an example of using the debug canvas to see the hitbox of two sprites.
You can find this game in the Kiwi.js Example Repository here inside of the tutorials/core/canvas/ directory.
Recent Comments