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.

The next blog post I will be talking about taking into account touch events on mobile devices. This is one solution I want to explore, to help make it easy for users to play the game from a mobile device, Sprite Touch Move.

Demo the thing…

Open Demo

Download Source Files

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

View Files on Github

Github Folder