Not able to make sprite interaction to work

[FakeWizard]

0down votefavorite

I'm trying to build a simple game menu, containing some clickable sprites, which will be used as buttons to navigate around the menu. ( I'm using the latest pixi.js (v4.3.5) ) Structure of my app: loader.module ( makes use of the pixi.loaders.Loader ) events.module (basic event sub/pub module) base.view menu.view ( extends base.view ) game.main How it all works now ? Both all resources and ui elements have to be explicitly defined, before initializing the view. so in the menu.view, the follwoing attributes have to be defined.

 this.resources = [
      { name: 'start', src: 'img/start.png'},
      { name: 'start2', src: 'img/start2.png'}
    ];

   this.ui = [{
        name: 'start', /// resource name
        type: 'img',
        pos: { x: 0, y: 0 }
   }];

Now I only need to call view.init() to get it all loaded and drawn. On the visual side, evrything works perfectly, however the 'start' sprite (which has it's interactive and buttonMode set to true) is not reacting to any mouse events.

The below method is responsible for getting the required resource and returning a new sprite. It also enables the actual interaction functionality as part of this process. But the test function is never triggered for some reason.

__getSpriteObject( element ){
        let sprite = new PIXI.Sprite( this.loader.loader.resources[ element.name ].texture );
        sprite.x = element.pos.x;
        sprite.y = element.pos.y;

        sprite.interactive = true;
        sprite.buttonMode = true;
        console.log( sprite )

        sprite.on('pointerdown', function(){
            console.log("what")
        })
        return sprite;
    }

If the above info isn't sufficient , here is also a working example.

Also posted this question on SO: http://stackoverflow.com/questions/42272895/not-able-to-make-sprite-interaction-to-work

 

[ivan.popelyshev]

We don't use SO much, I'll create issue in github later.

[themoonrat]

It's because you have a div that sits over the top of the canvas

'game-over-overlay'

This is blocking the canvas getting interaction events

[FakeWizard]

"sigh" .that hurts , after spending half ofthe day figuring out what the issue is..and now I find out it';s just a html element :] ..

arrrrghh... .

 

Anyways ,thanks @themoonrat ..that saved my day ( literally ) 

[themoonrat]

Don't worry about it, we've all been there at some stage!