Can you add button masks for non rectangular buttons?

[Vorion]

Hi,

do you plan on adding button masks for gui buttons, so that we can have buttons that are only clickable on the desired areas?

Here's an example:

http://www.babylonjs-playground.com/#WWBIKZ

The button image is a circle, but the clickable area is actually a rectangle. Buttons can also have other different shapes, like cut off edges.

I guess the best way would be to add some kind of button mask, maybe an optional second image that contains information about the clickable/hover area (like white color => clickable, alpha=0 => gets ignored)

Thanks.

[Guest]

This is not something that we have in the roadmap so far but everything is possible

[Wingnut]

Hey @Deltakosh... if we had a control.getPixelColorUnderPointer() -> color4...

..then in the onPointerDownObserver.add...  first line...

if (control.getPixelColorUnderPointer().a === 0)  { return }

THAT would reject clicking upon the control's canvas... wherever it was transparent.  (I think)

Wise?  Doable?  Pain-in-the-butt to do?  Am I forgetting something?   (thx)

Would this solve Vorion's issue?  I think so. 

This would allow precision color-filtering, too.  if (control.getPixelColorUnderPointer() == { r: 255, g: 127, b: 64, a: 128 })  { return }

This would also work for onEnter and onOut filtering.  (For ensuring that the CSS cursor doesn't change to a fingerpointer when upon transparent background area.  Only changes to fingerpointer when entering/exiting ACTUAL colored-button area.)

When using this method, user would likely want to disable the automatic default onEnter button action.  (seen here when pointer-entering the control's background area).  In the docs, I think it's called

• pointerEnterAnimation
• pointerOutAnimation
• pointerDownAnimation
• pointerUpAnimation

Ya know... maybe we just need a flag.    control.disallowObservationsOverTransparentAreas = true/false.   Wow.  What would be the far-reaching ramifications of THAT puppy?  heh  Hmm... if user had a button image with a transparent hole in the middle, user could get an onOut observation by mousing over it... and it's right in the middle of a button image!  Weird. 

I like my first idea better.  With precision color filtering, user could make 10 buttons with one image... separating them by discrete colors.  User could know WHICH color was entered, exited, or clicked-upon... all on a single imagebutton.  WOW!  Crazy Wingnut ideas. 

I still need help with Arbrakan's wanted SCENE.getPixelColorUnderPointer(), too.  [PG]  I'm getting color numbers @console, but not the correct colors.  hmm.  My whole life is about getting pixel colors under pointers, these days, it seems. 

[Guest]

This is doable for sure but will require time to code it

Adding a mask to a button require to know how to apply the mask: is it stretched? how does the image fills the button..Then knowing this, we will need to read from the data array on every click / move. So definitely not something to do without thinking about it

I recommend adding an issue on the repo so we can discuss implementation there

[Vorion]

Thank you both for your input. I've created a github issue as suggested: https://github.com/BabylonJS/Babylon.js/issues/3897

[Wingnut]

3 hours ago, Deltakosh said:

need to read from the data array on every click / move.

Yeah.  It's CPU heavy/slow.  hmm.  Thx for reminder, Dk.

Need something at hardware level/speeds, if possible.  Darn.

[Gijs]

@Wingnut

Here is what you talked about:
http://www.babylonjs-playground.com/#WWBIKZ#4

[Wingnut]

haha.  NICE!!!  Thx Gijs.

Just now, I was trying something similar... https://www.babylonjs-playground.com/#742772#16  line 60.  Interesting!  getImageData works much better than readPixels, it seems. 

Very cool.

 

[Gijs]

@Wingnut

 SCENE.getPixelColorUnderPointer() seems to work if you invert pointerY:
https://www.babylonjs-playground.com/#742772#17

[Wingnut]

Excellent!!!  haha.  VERY GOOD!  THANKS!

Please go tell Arbrakan, too... in his thread.  http://www.html5gamedevs.com/topic/36104-get-pixel-color/?tab=comments#comment-207214

(thx).  You'll be a hero to him/her.

Wow, nice work.  Looks pretty fast, too, but like I would know.

For CSS cursor-changing, I went experimenting with control-based gPCUP() for onEnter and onOut observers... https://www.babylonjs-playground.com/#WWBIKZ#5

hehe.  Gijs... your code works fine.  My hopes... not so good. 

When pointer crosses onto blue circle, BJS GUI says... "Sorry, I already generated an onEnter back when you crossed the Trump wall (the edge of the square).  Only one onEnter per customer."  heh.  Oh well, it sounded good in theory, and still works for pointerDown.

[Gijs]

@Wingnut

Yes, I will tell him/her. In that thread I see you've been very busy with the color picking! I think it's difficult with all the events, and GUIs being so flexible that they can be either a texture on a mesh or a 2d canvas image

[Wingnut]

Yeah, and when it IS a texture... phew... the color is affected by lighting and shading and... colors get "summed" with other colors.  Precision color testing becomes impossible (not like it was a good idea in the first place, though).    But yeah, sometimes folks ask questions (like Arbrakan and Vorion), and answers are slow-coming... so I jump-in with a limp/bad answer.  Essentially, it is a "we're looking for an answer" comment, sometimes with a Wingnut-provided complimentary testing-PG.

Then, I "get-in" over my head... trying to find answers to things which I am not qualified to answer.  *sigh*.  Then I start begging for help, and everyone runs, fast and far. 

Thx for working on these two issues with us, G!  You gave us the tools to test the limits of the idea.  Perfect. 

[aWeirdo]

aWeirdo randomly starts blabbering about optimization..
Do we really need that new color4 on every click?

http://www.babylonjs-playground.com/#WWBIKZ#7