Phaser 3：显示可交互区域

Question

我正在创建的游戏不需要任何物理，但是您可以通过使用 sprite.setInteractive({cursor: "pointer"}) 将 over/clicking 悬停在精灵上时进行交互;, sprite.on('pointermove', 函数(activePointer) {...});和类似的。

我运行遇到了一些交互区域的问题，想通过显示可交互的“区域”来调试它。但是，我只能找到与 Arcade Physics 相关的方法。有什么方法可以在没有 Physics 的情况下在我的可交互区域周围获得类似调试轮廓的东西吗？

Answer 1

Out-Of-The-Box，没有物理学，我不知道有什么办法，但是可以得到这个function/feature 与 small helper-function。 （但也许有一些东西，因为移相器是一个非常广泛的框架。但我也找不到任何东西）。

像这样的东西，可以解决问题，并且可以重复使用：

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);
}

这里是 help-function 的作用：

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>

Phaser 3：显示可交互区域

Phaser 3: Show Interactable area

javascript

debugging

phaser-framework