Changing over from PIXI v4.0.0 interactivity to PIXI v4.4.1?

[Sarlecc]

So in one of the plugins I am making I am adding a command window to the map scene. I want it to be inactive until the mouse hovers over and then become inactive again when the mouse leaves. I had this working in version 4.0.0 of PIXI:

Spoiler

//when mouse goes over command rect this is called by pixi
myWindow_Command.prototype.mouseover = function () {
    this.opacity = 255;
    this.activate();
};

//when mouse leaves command rect this gets called by pixi
myWindow_Command.prototype.mouseout = function () {
    this.opacity = 128;
    this.deactivate();
};

//how it gets added to the map
Scene_Map.prototype.createCommandWindow = function () {
    this._commandWindow = new myWindow_Command(0, 0);
    this.addChild(this._commandWindow);
    this._commandWindow.interactive = true;
    this._commandWindow.deactivate();
}

As of v4.4.1 the above method simply does nothing.
Now I have looked at the new demos for PIXI interactivity, which uses the on (or addListener) function and events like in socket.io. However I have been unsuccessful in getting it to register that the mouse is hovering/leaving the command rect. One of the things I have tried is:

Spoiler

Scene_Map.prototype.createCommandWindow = function () {
    this._commandWindow = new myWindow_Command(0, 0);
    this.addChild(this._commandWindow);
    this._commandWindow.interactive = true;
    var self = this._commandWindow;
    this._commandWindow.on('mouseover', function() {
        self.opacity = 255;
        self.activate();
        });
    this._commandWindow.deactivate();
}

Now it won't run the event upon mouse over; however I do know the event has been added by calling:
SceneManager._scene._commandWindow._events.mouseover.fn().
So my question is what do I need to change in order for it to work the way how I had it working? Is there a way I could possibly use document.addEventListener instead?

 

[LTN Games]

I use document.addEventListener for my touch events. I've tried using the PIXI interactive but it seems they enable and disable it all the time so I stopped using it due to inconsistency. I currently don't have time to show you how I do it but It's fairly easy to accomplish I'm sure you can figure it out.
All you need is a method which updates the mouse position, and another method which checks if the mouse position is relative to the window you want to touch.
Here is my isButtonTouching for my social media buttons plugin.. Sorry it's in ES6 but the general idea is there.

    isButtonTouching () {
      if (!this._mousePos.x || !this._mousePos.y) { return false }
      const x = this.canvasToLocalX(Graphics.pageToCanvasX(this._mousePos.x))
      const y = this.canvasToLocalY(Graphics.pageToCanvasY(this._mousePos.y))
      return x >= 0 && y >= 0 && x < this.width && y < this.height
    }

The mouse position is updated via the event listener.

document.addEventListener('mousemove', this.updateMousePos())

All you have to do is change things around a bit. Also, make sure you remove the event listener when you terminate the scene because eventListeners are great for memory leaks lol

 

[Sarlecc]

Okay thanks LTN I will try that later today after work.
Just wish I could use my old method was so simple lol.

Thank you once again @LTN Games I decided on a little bit different approach which I think may avoid the memory leak problems. Here's the code for a more interactive mouse in case anyone is interested for their projects:

(function (TI) {
    TI._moreEventHandlers = TI._setupEventHandlers;
    TI._setupEventHandlers = function() {
        TI._moreEventHandlers.call(this);
        document.addEventListener('mousemove', this._updateMouseCoors.bind(this));
    };
    
    TI._updateMouseCoors = function (event) {
        this._x = Graphics.pageToCanvasX(event.pageX);
        this._y = Graphics.pageToCanvasY(event.pageY);
    };
    
    
    /**
     * called like so in a windows update method
     * TouchInput.isMouseOver(this, this.myFunction1, this.myFunction2);
     * @param {Object} item
     * @param {function} fn1 this decides what you want to happen when mouse is over the window
     * @param {function} fn2 this decides what you want to happen when mouse is not over the window
     */
    TI.isMouseOver = function (item, fn1, fn2) {
        if (this._x >= item.x && this._x <= item.width + item.x &&
            this._y >= item.y && this._y <= item.height + item.y) {
            if (typeof fn1 === 'function') {
                fn1(item);
            }
        } else {
            if (typeof fn2 === 'function') {
                fn2(item);
            }
        }
    };
    
})(TouchInput);

 

[mlogan]

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.