Hover animation problems [SOLVED]

[yumepeh]

Hello there, I'm trying to make a visual novel using Ren'py and I've been stuck for hours, trying to figure out house to make a header to show up when hovered. After some time, this is what I got, and kinda worked:

Code: Select all

image header one:
    "header.png"
    size(1270, 169)
    
image header two:
    "headerbutton.png"
    size(213, 108)

default header_toggle = False

screen pull_header:
    if header_toggle:
        add "header one"
    else:
        add "header two"
        
    imagebutton:
        idle "headerbutton_idle.png" 
        xalign 0.5
        yalign 0
        hovered [SetVariable("header_toggle", True), With(slidedown)]
        unhovered [SetVariable("header_toggle", False), With(slidedown)]
        focus_mask None
        action NullAction()

but the major problem is: when I hover to the headerbutton, not only the header slides down, but also the whole screen! (like, with the character, text screen, background, and all of them).

secondly, there's two headerbuttons instead of one; one at the upper left of the game, and one at the middle; when i only wanted one headerbutton at the middle

what happened and how can I fix it? thanks in advance!! :')

[Empish]

Looks like you followed my hovering tutorial. I tested it out with slidedown for an individual component and you're right, it does the transition on the whole screen. I tried it with a transform and that got it to slide down once, but not again after that. I'll look into this. Sorry for not realizing it before I made the tutorial.

[IrinaLazareva]

Code: Select all

image header one:
    "header.png"
    size(1270, 169)
    
image header two:
    "headerbutton.png"
    size(213, 108)

transform ff:
    yalign - 1.0
    linear 1 yalign 0.0
screen puone():
    tag pull
    add "header one" at ff
screen putwo():
    tag pull
    add "header two" at ff
    
screen pull_header():
    imagebutton:
        idle "headerbutton_idle.png" 
        xalign 0.5
        yalign 0
        hovered Show('puone')
        unhovered Show('putwo')
        focus_mask None
        action NullAction()
    on 'show' action Show('putwo') #set default (optional)

doc:
https://www.renpy.org/doc/html/atl.html ... n-language
https://www.renpy.org/doc/html/screens. ... -statement
https://www.renpy.org/doc/html/screen_actions.html#Show

[yumepeh]

by Empish » Wed Jan 03, 2018 1:23 am

Looks like you followed my hovering tutorial. I tested it out with slidedown for an individual component and you're right, it does the transition on the whole screen. I tried it with a transform and that got it to slide down once, but not again after that. I'll look into this. Sorry for not realizing it before I made the tutorial.

aaa yes i did follow your tutorial!! no need to say sorry, it's my fault anyway because i tried doing things that are out of my own capability.. haha
your videos are my the source of my knowledge <3
i look forward to more of your videos!!

by IrinaLazareva » Wed Jan 03, 2018 2:49 am

image header one:
"header.png"
size(1270, 169)

image header two:
"headerbutton.png"
size(213, 108)

transform ff:
yalign - 1.0
linear 1 yalign 0.0
screen puone():
tag pull
add "header one" at ff
screen putwo():
tag pull
add "header two" at ff

screen pull_header():
imagebutton:
idle "headerbutton_idle.png"
xalign 0.5
yalign 0
hovered Show('puone')
unhovered Show('putwo')
focus_mask None
action NullAction()
on 'show' action Show('putwo') #set default (optional)
doc:
https://www.renpy.org/doc/html/atl.html ... n-language
https://www.renpy.org/doc/html/screens. ... -statement
https://www.renpy.org/doc/html/screen_actions.html#Show

wow this is exactly what i needed!! it works perfectly now
no words can express how thankful i am for your help :'D aaaaa thank you so much!

[IrinaLazareva]

wow this is exactly what i needed!! it works perfectly now
no words can express how thankful i am for your help :'D aaaaa thank you so much!

You are welcome