Interactive / buttonMode just not working for me

[Critters]

Hi,

So i'm making a game and I am having no luck after 3 hours of trying to get a simple mouse click on a container or graphic. Below are snippets of code related to the issue:

At the top:

import * as PIXI from 'pixi.js';

gameInstance = PIXI.autoDetectRenderer({

        width: gameWidth,

        height: gameHeight,

        antialias: true,

        backgroundColor: 0x81a832,

        resolution: window.devicePixelRatio || 1

    })

I make a master container for the game

gameStage = new PIXI.Container();*

I have several containers, to help keep things ordered

HUDContainer = new PIXI.Container();

    gameStage.addChild(HUDContainer);

Then I draw a bar top and bottom, I see these when I run the game

let graphics = new PIXI.Graphics();

    graphics.lineStyle(2, 0x000000, 1);

    graphics.beginFill(0xCCCCCC, 1);

    graphics.drawRect(0, 0, gameWidth, 100);

    graphics.drawRect(0, gameHeight-200, gameWidth, 200);

    graphics.endFill();

    graphics.interactive = true;

    graphics.buttonMode = true;

    HUDContainer.addChild(graphics);

    graphics.on('mousedown', function (e) {

        console.log('Mouse clicked');

        console.log('X', e.data.global.x, 'Y', e.data.global.y);

    });

And then in my animation tick:

gameInstance.render(gameStage);

But clicking on them does nothing, no errors, no cursor change mousing over them, nothing. Rest of the game works fine, but I can't get simple mouse interaction to work

I've tried applying the interactive + buttonMode to graphics, containers, sprites. All failed

 

Any help greatly appreciated, i've hit a wall

 

[ivan.popelyshev]

Hello and Welcome to the forums!

It should work.

It sounds like HTML/CSS issue. Are you sure there's nothing above your canvas blocking clicks?

Edited April 28, 2020 by ivan.popelyshev

[Critters]

5 hours ago, ivan.popelyshev said:

Hello and Welcome to the forums!

It should work.

It sounds like HTML/CSS issue. Are you sure there's nothing above your canvas blocking clicks?

I LOVE YOU!

 

That was it, the canvas was getting added to the bottom of the document and not in the "gameContainer" container element I created which was above everything else (and the canvas). It behaved the same visually so I didn't notice it until I inspected the Elements

 

Thanks!