如何检测Phaser3中的图像单击

问题描述

我是Phaser的新手，我试图检测到Phaser3中几张图像的点击。这在某种程度上已成为我的两个问题。首先是检测对对象的单击，但是即使我单击屏幕上的其他位置，也会触发单击处理程序。

第二部分是，我在场景中拥有相同且多张图像，我只想在单个功能内检测每个图像上的点击并检测单击了哪个图像。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr.net/npm/phaser@3.24.1/dist/phaser-arcade-physics.min.js"></script>
    <style media="screen">
      canvas {   display : block;   margin : auto;}
    </style>
</head>
<body>

    <script>
    var config = {
        type: Phaser.CANVAS,scale: {
            mode: Phaser.Scale.ScaleModes.FIT,parent: 'phaser-example',autoCenter: Phaser.Scale.CENTER_BOTH,width: 400,height: 640
        },// width: 400,// height: 640,physics: {
            default: 'arcade',arcade: {
                gravity: { y: 10 }
            }
        },scene: {
            preload: preload,create: create,update: update
        }
    };

    var game = new Phaser.Game(config);
    var Bimages;

    function preload ()
    {
        this.load.setBaseURL('http://localhost:3000');
            
        this.load.image('sky','assets/skies/deepblue.png');
        this.load.image('tube1','assets/myassets/ballSort/tube.png');
        this.load.image('tube2','assets/myassets/ballSort/tube.png');
    }

    var numOfTestTubes = 5;

    var storeTubes = [];

    function create ()
    {
        ctx = this;
        this.add.image(400,300,'sky').scaleY = 1.2;
        var t1 = ctx.add.image(150,'tube1');
        t1.scaleY = 0.5;
        t1.scaleX = 0.5;
        var t2 = ctx.add.image(220,'tube2');
        t2.scaleY = 0.5;
        t2.scaleX = 0.5;

        t1.setInteractive();
        t2.setInteractive();

        t1.on('pointerdown',handleclick);
    }

    function update(){
    }

    function handleclick(pointer,targets){
      console.log("clicked0",pointer);
    }
    </script>
</body>
</html>

有人可以帮我吗？

解决方法

游戏对象上的指标下降事件侦听器与全局输入管理器上的指标下降事件侦听器不同。如果改为使用this.input.on('pointerdown',...)，则将获得一个带有指针的回调，以及一个被单击的游戏对象的数组，如果未单击任何游戏对象，则将返回一个空数组。如果需要在彼此重叠的输入对象上注册单击，则可以使用#setTopOnly更改此行为。您可以检查对象是否相等或对照预期的某些属性（例如对象的名称或纹理键）进行检查。我将Stackblitz与矩形链接在一起，但了解它们的行为与图片的Hitbox相同。

https://stackblitz.com/edit/phaser-so-global-input-manager?file=index.ts

javascript phaser-framework

如何检测Phaser3中的图像单击

问题描述

解决方法

相关问答