Hit Test / UI Buttons on Stage

benju

I am currently experimenting with interactive environments and interfaces with students. Every now and then we come across the issue of realising a hit test of a certain area and/or even placing "buttons" (individual graphics) on the stage. Be it for a mouse pointer, tracking of a person or buttons of user interfaces.

Figuring I'm not the first to look into this, I'd like to share this with the community and see if there are any opinions or thoughts:
Hit_Test_Buttons_210511.zip

Maybe I made some things more complicated then they need to be, is my impression ;) One thing I'm not sure about yet is the calculation of the height depending on the stage, but it seems to work that way.

I might create a User Actor out of this in the next step, though of course the question is if this isn't better hardcoded?

Is there a way to get the width and height of media (picture player, movie player) or the texture of a projector? Then you could calculate the active area automatically according to the media size.

->

jfg

@benju said:

Is there a way to get the width and height of media (picture player, movie player) or the texture of a projector? Then you could calculate the active area automatically according to the media size.

best

Jean-François

bonemap

@benju

Hi,

This demonstration patch might be of interest for you and your students. It is a prototype patch that triggers when rolling over a moving target... The trigger area doesn't have to move, but the patch recalculates the position of the rollover zone and trigger zone size - so a moving/changing target is possible. It also has bonus calculations to orient an image to the direction of the mouse movement. Following the mouse orientation was first demonstrated by @mark so mine is an adaptation...

rollover target by bonemap.zip

both the mouse orientation image and the shape image are based on using Projector actors as containers for stage objects. That way you can use a percentage of Width and Height scale of the Projector actor to determine the size of your trigger zone in relation to the overall Stage size. It then requires value scaling to align the object size and position to the centre point scaling of the Projector and Stage using a series of Calculators and Limit-Scale Value actors. What you have done with the Inside Range actors is the same in my patch.

There is an older thread from 2018 that discusses how to create a simple hotspot that triggers a looping cycle...

best wishes

Russell

benju

@bonemap

Thanks for sharing this patch, this was very interesting to see. And such a nice patch. Also of course, the calculated mouse direction is a really cool feature!

As I was already patching further, I continued with the rectangles hit test as in my first post, which, as you mentioned is basically the same approach.

I made one User Actor for a shapeable button with text:

And another one where you can place your own images as Normal, MouseOver, and MouseDown states:

Both of them are not solid yet. I planned to publish them as User Actors, but they still will need some optimization. The shapeable one has a problem when the stage was not set to "Match Output", and you are use another display aspect ratio then in the original patch.

The second one, using pictures as assets does currently only work with pictures larger in width than in height.

At the same time the patch is still a bit chaotic and not well documented.

But as I do not find time to develop further on this at the moment, I wanted to share the current state by now. It includes the current state as User Actors as well as an IZZ file with three scenes (Button shapeable, Button with images, Hit Test).

Hit_Test_Buttons_007.zip

Thoughts, feedback and further development upon welcome.