Mouse over irregular shapes

[Nakoruru]

I am thinking of making a map divided into regions that are irregular in shape i.e. not square.
When mouse is over the shape, it highlights it.
Is there any way of setting the "clickable" area of that shape so that when mouse cursor is outside, it no longer highlights?

 

[gstv87]

technically yes, as every shape can be translated to a mathematical expression, and that expression checked against the position of the mouse.
BUT,..... that's some complex maths there, and I doubt javascript could handle that.

I know that some web pages use either javascript, or CSS, or something, to make parts of it highlight-able, and I've seen it working with irregular shapes, so it IS possible.
is it possible for mv? ... no idea.

 

[Llareian]

Actually, with PIXI, you should be able to do this (if you are comfortable with JavaScript). You'll need to do some digging into how to get it done, though. It's not something as easy as saying, "Oh yeah, just do X and you're done."

I just did a little bit of searching and found that you can define an interactive sprite's hitArea as any PIXI polygon. There may be more methods than this, but it might be a place to start looking.

 

[Poryg]

@Llareian I hate to disappoint you... Not possible in MV.

I have delved into touch input a bit, I'm even talking about it in my last tutorial. Although that only highlights regular shapes.
@gstv87 you can hardcode pretty much any math in javascript. But that is not the problem.
The problem is... If I had to name one thing that MV completely messed up... It's touch input, in particular mouse.
Under normal conditions there are event listeners available even for other canvas elements, not just PIXI (onmousedown, onmouseover, onmouseout). If you don't know what is an event listener, that thing is, if I say it overly simplified, responsible for handling input. However, due to certain HTML/CSS elements these event listeners are completely disabled. MV handles these things through brute force btw.
I talk about it in my last tutorial video from DIY series, where I also mentioned one obstacle, but that is the easier one.
MV by default limits mouse coordinates only on click. So unless you're clicking, the mouse won't even bother about its' screen coordinates, meaning that until you unlock it, any hovering won't have effect on anything. But that has an easy fix.

In short what this means is, if you want to have highlighted things on mouse hover, you have to hardcode it. Brute force.
As @Llareian said, PIXI has interactive element, which makes things simple on normal conditions... But in MV it will not work.

@Llareian I would cover interactive in my PIXI tutorials if you could use it in MV

 

[Galv]

This might be of interest. Helped me while doing a plugin:
http://jsfromhell.com/math/is-point-in-poly

 

[Poryg]

Thanks to @Anisoft I now know how to make PIXI interactive elements available! ^_^
It requires a removal of certain html/css tags:

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

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

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

So with this it should be possible even in MV to have interactive polygons... And much more, even PIXI basic elements interactive to mouse. I can't even describe how glad I am to hear that!