[question] use an interpolated transform on 'hover'

[Vaendryl]

So I got this working:

Code: Select all

imagebutton:
    idle im.MatrixColor('img.jpg',im.matrix.brightness(.1))
    hover im.MatrixColor('img.jpg',im.matrix.brightness(0.3))

which allows me to use a single image and just control the brightness for each state, but I'd like to make it fancier make the hover effect a little more gradual. I'm thinking of something like this:

Code: Select all

hover:
    im.MatrixColor('img.jpg',im.matrix.brightness(0.3)
    linear 0.5 im.MatrixColor('img.jpg',im.matrix.brightness(0.3)

which of course doesn't work because 'hover' only accepts simple statements. so, my question is: does anyone have an idea how to accomplish something like this? I've been eyeballing the Transform() class but I don't really get how it works...
bonus points if it's possible to make the return to idle state interpolated too!

[i1abnrk]

I'm still new but I would have a three step solution which basically is replacing the whole options menu with yours. First step is to make your image into an imagemap and put it on the overlay layer with the 'onlayer' keyword. Second step is to connect your menu buttons to the same actions you want to replace. The third step is to put your menu in the list in option.rpy using config.game_menu and you can remove the the default menu if you want too.

[Vaendryl]

thanks for the suggestion, but imagemaps are not really an option in my particular case

[Alex]

Not so helpful, but try to mess with this - http://www.renpy.org/doc/html/atl.html# ... -statement

[nyaatrap]

Transform is a displayable, so you can use your defined transform as a hover_background. sample code (not tested)

Code: Select all

init -1: #you need to define it before screen
  transform my_button(img):
    img
    linear .5 img
init 0:
  screen sample_screen:
    button hover_background my_button(img)

[Showsni]

An image manipulator isn't a transform, so I'm not sure if there even is a way to define a transform using one...

You can feed a variable to im.MatrixColor('img.jpg',im.matrix.brightness(.1)), like im.MatrixColor('img.jpg',im.matrix.brightness(mybrightness)), and then run actions upon hovering and unhovering the button to change that variable. The only action I can think of that would work is Jump, though. So you'd have to jump to a label that did nothing but slowly increment mybrightness over 0.5 seconds, and then jump back to wherever you were before.

Is there a way to do a Call from an action?

[Vaendryl]

Transform is a displayable, so you can use your defined transform as a hover_background. sample code (not tested)

Code: Select all

init -1: #you need to define it before screen
  transform my_button(img):
    img
    linear .5 img
init 0:
  screen sample_screen:
    button hover_background my_button(img)

thanks! I'll have to go try that out

[Vaendryl]

seems that although the idea had merit, no dice

Code: Select all

Exception: Expression u"im.MatrixColor(img,im.matrix.brightness(0.3))" is not an ATL transform, and so cannot be included in an ATL interpolation.

so then I thought okay, why not brute a linear myself?

Code: Select all

       transform hoverglow(img1):
        img1
        pause(0.1)
        im.MatrixColor(img1,im.matrix.brightness(.15))
        pause(0.1)
        im.MatrixColor(img1,im.matrix.brightness(.2))
        pause(0.1)
        im.MatrixColor(img1,im.matrix.brightness(.25))
        pause(0.1)
        im.MatrixColor(img1,im.matrix.brightness(.3)) 

this *does* work, but only once. I restart my game, place my mouse over my button and I see the gradual change (especially at high pause values etc).
however, after that every time I hover it goes back to instantly highest brightness. no really sure why that is. it seems a transform is only done once and after that the transform is just finished. a new event doesn't restart it.

I then tried something a little different

Code: Select all

transform hoverglow(img1):
        on idle:
            im.MatrixColor(img1,im.matrix.brightness(.08))
        on hover:
            im.MatrixColor(img1,im.matrix.brightness(.08))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.10))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.12))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.14))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.16))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.18))
            pause 0.3
            im.MatrixColor(img1,im.matrix.brightness(.20))

this really gives strange results. when I move my mouse over the image it starts blinking! when I stop moving sometimes the image will be gone. move again a pixel and it might be back and so on. this might be a ren'py bug? naw, it was still tied to the hover attribute of the imagebutton. it was being recalled every time I moved I think, so no wonder it flipped out.


in the end I settled on

Code: Select all

    transform hoverglow(img1):
        im.MatrixColor(img1,im.matrix.brightness(.10))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.11))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.12))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.13))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.14))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.15))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.16))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.15))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.14))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.13))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.12))
        pause 0.1
        im.MatrixColor(img1,im.matrix.brightness(.11))
        repeat

it gives it a fairly neat soft flashing effect while it's moused over and it also consistently works, so that's nice
leaving the mouse-over state is still fairly abrupt though.