如何檢測點擊phaser3中的圖像

Question

我是 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, 300, 'tube1');
        t1.scaleY = 0.5;
        t1.scaleX = 0.5;
        var t2 = ctx.add.image(220, 300, '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>

有人可以幫我嗎？

Answer 1

游戲對象上的pointerdown 事件偵聽器與全局輸入管理器上的pointerdown 事件偵聽器不同。 如果你改為這樣做this.input.on('pointerdown', ...)你會得到一個帶有指針的回調，還有一個被點擊的游戲對象數組，如果沒有游戲對象被點擊，則數組為空。 如果您需要在相互重疊的輸入對象上注冊點擊，您可以使用 #setTopOnly 更改此行為。 您可以檢查對象的相等性或對照某些預期的屬性，例如對象的名稱或紋理鍵。 我將 stackblitz 與矩形聯系起來，但我知道它們的行為與圖像的命中框相同。

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

如何檢測點擊phaser3中的圖像

問題描述

1 個解決方案

解決方案1
0 2020-09-01 14:25:28

如何檢測點擊phaser3中的圖像

問題描述

1 個解決方案

解決方案1 0 2020-09-01 14:25:28

解決方案1
0 2020-09-01 14:25:28