Moving an ImageButton to the foreground

[rjrhodeswrites]

Hi everybody. I'm working on a UI that shows a bunch of polaroids on the screen - they're placed semi randomly, and will occasionally overlap a bit. When you hover over one, it zooms in larger, which causes it to overlap the others around it even more.

My problem is since the depth is defined by the order the buttons are placed, the one you want to click is sometimes displayed behind the other buttons.



I'd like to make this to where when you hover over the imagebutton (such as the one that is pink here), it zooms in and moves to the front of the stack. Currently my code looks like this:

Code: Select all

transform izzytilted():
    on idle: 
        rotate izzytilt
        easeout 0.2 zoom 1.0
    on hover: 
        rotate izzytilt
        easein 0.5 zoom 1.3

Then I just apply the transform to the imagebutton when posted. I was hoping that I could just do something like zpos here, but I could not get that to work, and after researching, I think maybe perspective doesn't work on Imagebuttons?

I'm a little stumped at this point. Any suggestions welcome! Thank you!

[rjrhodeswrites]

I just figured this out.

I made it to where when hovered on, it would ShowTransient a screen that contained the same imagebutton.

A bit of a workaround, but it seems to be working right!

Would still be open to any other suggestions that might be cleaner.

[Ocelot]

Yeah that works. Other way is to store all button data in a list and on hover bring button data to the front of the lis and redraw screen.

Also you could use 3D stage and literally move button closer to the camera.