Sprite Visual Debug - RPG Tutorial 8

Today I wanted to share a super simple code snippet for adding a green transparent overlay to your sprite(s) to help with debugging of positioning and how much space it actually takes up. This is very helpful whenever you are working with transparent sprites.

This will be our first interaction with the render() function! It’s also a one liner, take a look below:

// add a transparent green fill to sprite
game.debug.spriteBounds(sprite);

So that’s it, super simple. Please remember to change the sprite variable to whatever you have your sprite named.

I think next I will talk about taking into account mobile touch. This is one solution I want to explore, to help make it easy for users to play the game from a mobile device.

Demo the thing..

Open Demo

Download Source Files

If you would like the source files for this tutorial: Download source files

Load Comments