Making PIXI shapes clickable in RPG Maker MV

[standardplayer]

As this question is about PIXI, this is obviously concerning RPG Maker MV.

So I'm having a difficult time getting shapes I've created with PIXI to respond to Events such as mousedown.

Here's an example of what I've tried/know

Spoiler

var exShape = new PIXI.Graphics()

exShape.lineStyle(1, 0xFFFFFF, 1);
exShape.beginFill(0xFFFFFF);

exShape.drawCircle(0, 0, 100);

exShape.graphicsData[0].shape.hitArea = new PIXI.Circle(0, 0, (exShape.graphicsData[0].shape.width / 2));
exShape.interactive = true;
exShape.buttonMode = true;
exShape.on('mousedown', exFunc);

//Define exFunc
var exFunc = function(ev) {
console.log("It worked");
}

I've researched a lot on other sites, and on here. I found a thread started by Tsukihime that was eventually answered by Hudell, but I didn't quite understand what was happening and don't think it applies to my question. Any help would be much appreciated.

 

[standardplayer]

*bump*

 

[Poryg]

This code will unlock pixi interactive (credit: anisoft):

Alias_Graphics_createModeBox = Graphics.createModeBox;
Graphics._createModeBox = function () {
Alias_Graphics_createModeBox.call(this);
this._modeBox.scale.pointerEvents = "none";
}

Alias_Graphics_updateVideo = Graphics._updateVideo;
Graphics._updateVideo = function () {
Alias_Graphics_updateVideo.call(this);
this._video.style.pointerEvents = "none";
}

Alias_Graphics_updateUpperCanvas = Graphics._updateUpperCanvas;
Graphics._updateUpperCanvas = function () {
Alias_Graphics_updateUpperCanvas.call(this);
this._upperCanvas.style.pointerEvents = "none";
}

The reason why this happens is simple, mv uses lower canvas for graphics and upper canvas for fps meter and error display. Which is fine, but it means that the upper canvas is the one that will receive pointer events and lower canvas won't receive them (it is logocal, many people would use lower canvases as background, not as the point of action).

For this reason it is necessary to deactivate all pointer events in the entire upper layer (so its children as well) for pointer events to work on lower layer.

 

[standardplayer]

This code will unlock pixi interactive (credit: anisoft):

Alias_Graphics_createModeBox = Graphics.createModeBox;
Graphics._createModeBox = function () {
Alias_Graphics_createModeBox.call(this);
this._modeBox.scale.pointerEvents = "none";
}

Alias_Graphics_updateVideo = Graphics._updateVideo;
Graphics._updateVideo = function () {
Alias_Graphics_updateVideo.call(this);
this._video.style.pointerEvents = "none";
}

Alias_Graphics_updateUpperCanvas = Graphics._updateUpperCanvas;
Graphics._updateUpperCanvas = function () {
Alias_Graphics_updateUpperCanvas.call(this);
this._upperCanvas.style.pointerEvents = "none";
}

I tried putting your code in several ways, I tried loading it from a plugin so it was available when the game started. This caused the game to crash. I loaded it via an event, and there were no errors, but when I used the code from my original post, and added it to the scene with
SceneManager._scene.addChild(exShape), the shape still wouldn't call my function.

Finally, I tried the above method but instead of an event, I loaded your code directly into the debug menu.

There must be something I'm doing wrong

 

[Poryg]

It should be working fine as a plugin. Maybe it clashes with some other plugins you're using.

 

[standardplayer]

It should be working fine as a plugin. Maybe it clashes with some other plugins you're using.

I just tried it with all other plugins disabled and it still gives me this error

TypeError
Cannot read property 'call' of undefined

 

[Poryg]

Oh, I see now!
For some reason there was a typo in that code (missing underscore. how in the world did it happen when I just copy pasted it from somewhere where this typo even wasn't, beats me).

Alias_Graphics_createModeBox = Graphics._createModeBox;
Graphics._createModeBox = function () {
Alias_Graphics_createModeBox.call(this);
this._modeBox.style.pointerEvents = "none";
}

Alias_Graphics_updateVideo = Graphics._updateVideo;
Graphics._updateVideo = function () {
Alias_Graphics_updateVideo.call(this);
this._video.style.pointerEvents = "none";
}

Alias_Graphics_updateUpperCanvas = Graphics._updateUpperCanvas;
Graphics._updateUpperCanvas = function () {
Alias_Graphics_updateUpperCanvas.call(this);
this._upperCanvas.style.pointerEvents = "none";
}

 

[standardplayer]

Now the game still crashes on startup but instead I get this error:

TypeError
Cannot set property 'pointerEvents' of undefined


Again, the only code in the plugin is the code you posted above,
and the only plugin that's even on my plugin list is the one with this code.


I also tried using the code you posted above directly into the console after the game loaded (obv without the plugin), and while I didn't receive an error, the code from my original post still didn't allow me to click the shape after I'd added it with
SceneManager._scene.addChild(exShape);

 

[Poryg]

Made one more edit to the code in the previous post. If it still doesn't work, I'm probably going to sleep.

 

[standardplayer]

The game doesn't crash, and the shape now recognizes that it's a button (the pointer changes, that's why I had button mode turned on at all), but it still isn't running the function I pass it, which is a simple console log.

Still, I'm a lot closer to solving this problem now, so I greatly appreciate everything you've done.

Either way, thank you so much for your help, sorry if it's been a bit of a headache, I'll try to figure the rest of this out.

 

[standardplayer]

Update:
I FIGURED IT OUT. While it's true that the game was crashing with the code you gave at first, the last edit you made was the solution. All I had to do was move my function declaration above the actual assignment for the 'mousedown' Event. YES!!
All hail Poryg, Pixie of the Emvee Kingdom, Duke of all things code and Imperial Scriptus for the 2nd and 1st courts of Harold!


"Ohh, there once was a hero named Poryg the Red, who came onto the forums and helped on my threaad"