Making PIXI shapes clickable in RPG Maker MV

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
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

Code:
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.
 
Last edited:

Poryg

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,125
Reaction score
10,639
First Language
Czech
Primarily Uses
RMMV
This code will unlock pixi interactive (credit: anisoft):

Code:
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

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
This code will unlock pixi interactive (credit: anisoft):

Code:
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

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,125
Reaction score
10,639
First Language
Czech
Primarily Uses
RMMV
It should be working fine as a plugin. Maybe it clashes with some other plugins you're using.
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
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

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,125
Reaction score
10,639
First Language
Czech
Primarily Uses
RMMV
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).
Code:
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";
}
 
Last edited:

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
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

Dark Lord of the Castle of Javascreeps
Veteran
Joined
Mar 23, 2017
Messages
4,125
Reaction score
10,639
First Language
Czech
Primarily Uses
RMMV
Made one more edit to the code in the previous post. If it still doesn't work, I'm probably going to sleep.
 

standardplayer

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
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

Keeper of Kitties
Veteran
Joined
Apr 6, 2016
Messages
698
Reaction score
3,448
First Language
English
Primarily Uses
N/A
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"
 
Last edited:

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Profile Posts

YES! officially released my games soundtrack on Itunes, Spotify, and Amazon..... kinda cool!

Another old age version of Reid. Trying out different style.
Hey everyone! Not sure how many people know about Cafofo Music on Itch.io, but I highly recommend their Sound Effects! It is amazing quality AND quantity and best of all, they are having a 50% sale! I can't express how much I love sales.
Wow.... My last map GIF got 47 likes, 16 retweet and 2,105 views on Twitter in 24 hours. My game thread here's only got 3k views in 6-7 months. I guess building my Twitter was insanely worth it. :LZSexcite:

Forum statistics

Threads
105,594
Messages
1,014,883
Members
137,264
Latest member
ZeoValinferno
Top