Bind mouse event to PIXI Object

[Gamefall Team]

Hello guys, I want to discuss with you today about a problem that I noticed in all the version of pixi.js that are inserted in Rpg Maker MV.
Maybe I make something wrong, but I can't find any way to make it works.

My problem is related to bound a mouse event to a Sprite (or PIXI.Sprite) or another PIXI object (like Graphics, container etc...).
For example:

var sprite = new Sprite() (or new PIXI.Sprite() )
sprite.texture = PIXI.loader.resources['myResource'].texture
sprite.position.set(0,0)
sprite.interactive = true //This is needed for make the mouse events works;
sprite.on('mousedown', function() {console.log('myEvent') })
this.addChild(sprite)

This is a pretty basic code and as you can see I have bound to "mousedown" event an anonymous function that should pop-up a log inside the console.
However, this event (or all the other in all the forms: "pointerdown" etc...) does not seem to work or trigger anything, but checking the object properties inside console it looks like the events are bound to the related callback.

I have tried to:
• Make the container (Scene) interactive, too.
• Tried to change the prevent event default inside the Graphics._renderer;
• Try to bind the callback directly to a function

Ex sprite.mousedown = function() { console.log('myEvent') }

So, Am I missing something? Have you my same problem or It should be coded in a different way?

Thank you in advance for the help!

 

[Jonforum]

hum.. i never make more test but what about hack the stage?

Stage.prototype.initialize = function() {
    PIXI.display.Stage.call(this);

    // The interactive flag causes a memory leak.
    this.interactive = true; //hack with true
};

* and also its work if your change the pointer-event to none for the div elements?
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
related info here from ivan
http://www.html5gamedevs.com/topic/...n-rpg-maker-mv/?do=findComment&comment=213302

take a look to edit the css style of for the current div id="GameCanvas"
Am really noit sure if it the good box, but if thsi can give you good way to find the issue!

style="z-index: 1; position: absolute; margin: auto; top: 0px; left: 0px; right: 0px; bottom: 0px; width: 816px; height: 624px; touch-action: none; cursor: inherit;"

i see touch-action none here... humm maybe it a clue ? tell me

 

[Poryg]

I have covered this problem in a youtube video. I don't take any credit for it, because it's not my solution, I only worked it into a video.


There is some trouble with certain canvas elements that need to be removed before you can use interactive. Remove them and interactive will work just fine.
However, I have found an interesting bug. It will allow interactive for map. In order to allow it on scenes though there needs something more to be done.

 

[Gamefall Team]

Thank you so much @Jonforum and @Poryg !
Thanks to you guys I'm finally able to use PIXI.interactive api!

Thanks for the video Poryg, It works like a charm

 

[Jonforum]

Thank you so much @Jonforum and @Poryg !
Thanks to you guys I'm finally able to use PIXI.interactive api!

Thanks for the video Poryg, It works like a charm

show your solution, am curious !
Also did you know if the pixi interactive are more fast than basic listener to document?
in my side i use the bound check

element._boundsRect.contains(mX,mY);

it also work good for collision check.

    function hitCheck(a, b){
        var ab = a._boundsMap._pad
        var bb = b._boundsMap
        return ab.x + ab.width > bb.x && ab.x < bb.x + bb.width && ab.y + ab.height > bb.y && ab.y < bb.y + bb.height;
    };

I wonder if it would be good for me to go to the API İnteractiviter?

 

[Gamefall Team]

I followed the code suggested by Poryg!

var Gamefall = Gamefall || {};
Gamefall.Test = Gamefall.Test || {};

(function($) {
    $.GraphicsChanges = {
        modeBox: Graphics._createModeBox,
        video: Graphics._updateVideo,
        upperCanvas: Graphics._createUpperCanvas
    }

    Graphics._createModeBox = function() {
        $.GraphicsChanges['modeBox'].call(this)
        this._modeBox.style.pointerEvents = 'none'
    };

    Graphics._updateVideo = function() {
        $.GraphicsChanges['video'].call(this)
        this._video.style.pointerEvents = 'none'
    };

    Graphics._createUpperCanvas = function() {
        $.GraphicsChanges['upperCanvas'].call(this)
        this._upperCanvas.style.pointerEvents = 'none'
    };
}(Gamefall.Test)

 

[Jonforum]

I followed the code suggested by Poryg!

var Gamefall = Gamefall || {};
Gamefall.Test = Gamefall.Test || {};

(function() {
    $.GraphicsChanges = {
        modeBox: Graphics._createModeBox,
        video: Graphics._updateVideo,
        upperCanvas: Graphics._createUpperCanvas
    }

    Graphics._createModeBox = function() {
        $.GraphicsChanges['modeBox'].call(this)
        this._modeBox.style.pointerEvents = 'none'
    };

    Graphics._updateVideo = function() {
        $.GraphicsChanges['video'].call(this)
        this._video.style.pointerEvents = 'none'
    };

    Graphics._createUpperCanvas = function() {
        $.GraphicsChanges['upperCanvas'].call(this)
        this._upperCanvas.style.pointerEvents = 'none'
    };
}(Gamefall.Test)

ok thanks