最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to detect click on the images in phaser3 - Stack Overflow

programmeradmin5浏览0评论

I am new to phaser and I am trying to detect a click on several images in phaser3 .This has somehow bee a two part problem for me. First is to detect click on the objects, but even if I click anywhere else on the screen also the click handler fires.

Second part is that I have identical and multiple images on the scene, and I want to detect clicks on each of them inside a single function only and detect which image was clicked .

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <script src="/[email protected]/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>

Can anyone help me out here please?

I am new to phaser and I am trying to detect a click on several images in phaser3 .This has somehow bee a two part problem for me. First is to detect click on the objects, but even if I click anywhere else on the screen also the click handler fires.

Second part is that I have identical and multiple images on the scene, and I want to detect clicks on each of them inside a single function only and detect which image was clicked .

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.jsdelivr/npm/[email protected]/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>

Can anyone help me out here please?

Share Improve this question edited Sep 14, 2020 at 1:33 James Skemp 8,5819 gold badges70 silver badges112 bronze badges asked Aug 31, 2020 at 8:40 abhishek ranjanabhishek ranjan 6529 silver badges26 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 4

The pointerdown event listener on game objects is different than the pointerdown event listener on the global input manager. If you instead do this.input.on('pointerdown', ...) you'll get a callback with the pointer, but also an array of game objects that were clicked, with an empty array if no game objects were clicked. If you need to register clicks on input objects that overlap each other, you can change this behavior with #setTopOnly. You can check object equality or against some property expected such as the object's name or texture key. I linked a stackblitz with rectangles, but understand they are behaving the same as an image's hitbox would.

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

If you want to run something when just clicked, instead of pointer up or pointer down, try the following workaround like this.

this.add.text(100, 200, 'Click me', { fontFamily: 'Arial', fontSize: 64, color: '#00ff00' }).setInteractive({ draggable: true });

this.input.on('dragend', (pointer, object) =>{
    if(pointer.x==object.input.dragStartXGlobal &&
        pointer.y==object.input.dragStartYGlobal){
        alert("Object clicked");
    }
});

I think, Phaser has example how to do it:

https://labs.phaser.io/index.html?dir=input/game%20object/&q=

Examples that helped me:

  • https://github./phaserjs/examples/blob/master/public/src/input/game%20object/debug%20hitarea.js

  • https://github./phaserjs/examples/blob/master/public/src/input/game%20object/on%20down%20event.js

Here's how I did it:

const playButton = this.add.sprite(width * 0.5, height * 0.5, 'ui_button3').setInteractive();
playButton.on('pointerdown', () => {
    alert('playButton clicked');
})
发布评论

评论列表(0)

  1. 暂无评论