Phaser 3: Show Interactable area

The game I’m creating doesn’t require any physics, however you are able to interact when hovering over/clicking on the sprite by using sprite.setInteractive({cursor: “pointer”});, sprite.on(‘pointermove’, function(activePointer) {…}); and similar.

I ran into some issues with the interactive area and wanted to debug it by showing the “area” that is interactable. However I could only find ways to do that that are related to Arcade Physics. Is there any way to get something like a debug outline around my interactable area without Physics?

Answer

Out-Of-The-Box, without physics, I don’t know any way, but one could get this function/feature with a small helper-function. (but maybe there is something, since phaser is a really extensive framework. But I also couldn’t find anything).

Something like this, could do the trick, and is reuseable:

function debugSpriteArea(scene, sprite){
    let debugRect = scene.add.rectangle(
        sprite.x, sprite.y,
        sprite.displayWidth, sprite.displayHeight, 
        0xff0000).setOrigin(sprite.originX,
            sprite.originY);
    debugRect.setDepth(-1);
}

Here the help-function in action:

let Scene = {
    preload ()
    {
        this.load.spritesheet('brawler', 'https://labs.phaser.io/assets/animations/brawler48x48.png', { frameWidth: 48, frameHeight: 48 });
    },

    create ()
    {
        // Animation set
        this.anims.create({
            key: 'walk',
            frames: this.anims.generateFrameNumbers('brawler', { frames: [ 0, 1, 2, 3 ] }),
            frameRate: 8,
            repeat: -1
        });

        const cody = this.add.sprite(200, 100, 'brawler')
            .setOrigin(0.5);

        debugSpriteArea(this, cody);

        cody.play('walk');
        cody.setInteractive();

        this.mytext =  this.add.text(10, 10, 'No Hit', { fontFamily: 'Arial' });

        cody.on('pointerdown', function (pointer) {
            let originXOffset = cody.displayWidth * cody.originX;
            let originYOffset = cody.displayHeight * cody.originY;

            let x = (pointer.x - cody.x + originXOffset ) / (cody.displayWidth / cody.width)
            let y = (pointer.y - cody.y + originYOffset) / (cody.displayHeight / cody.height);

            if(cody.anims && cody.anims.currentFrame){

                let currentFrame = cody.anims.currentFrame;
                let pixelColor = this.textures.getPixel(x, y, currentFrame.textureKey, currentFrame.textureFrame);

                if(pixelColor.a > 0) {
                    this.mytext.text = 'hit';
                } else {
                    this.mytext.text = 'No hit';
                }
            }
        }, this);
    }
};


function debugSpriteArea(scene, sprite){
    let debugRect = scene.add.rectangle(
        sprite.x, sprite.y,
        sprite.displayWidth, sprite.displayHeight, 
        0xff0000).setOrigin(sprite.originX,
                sprite.originY);
    debugRect.setDepth(-1);
}

const config = {
    type: Phaser.AUTO,
    width: 400,
    height: 200,
    scene: Scene
};

const game = new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js"></script>