[Solved] Tooltips on the quick menu (transform/ATL)

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
017Bluefield
Regular
Posts: 93
Joined: Mon Dec 30, 2013 1:55 am
Projects: Project Bluefield - Origins
Organization: Autumn Rain
Deviantart: playerzero17
itch: autumn-rain
Contact:

[Solved] Tooltips on the quick menu (transform/ATL)

#1 Post by 017Bluefield »

So I'm working on putting a tooltip element on one side of the quick_menu, with ATL that makes the text appear/disappear with alpha and xoffset. However, only the on show: part of the transform is visibly working, which means that the tooltip slides/fades into view, but doesn't do the reverse on hide:. I'm assuming this might have something to do with how it's structured right now.

Here's the screen quick_menu() code as it is right now, with any extraneous elements removed:

Code: Select all

screen quick_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    if quick_menu:

        if GetTooltip() == None:
            $ quick_tooltip = ""
        else:
            $ quick_tooltip = GetTooltip()

        showif quick_tooltip is not "":
            text quick_tooltip at quick_tooltip_text:
                color "#FF3"
                text_align 1.0
                italic True
        else:
            text "" at quick_tooltip_text:
                text_align 1.0
                italic True

        hbox align(0.5,1.0):
            style_prefix "quick"

            imagebutton auto "gui/step-backward-%s.png" style "quick_imagebutton" action Rollback():
                tooltip "back"
            imagebutton auto "gui/history-%s.png" style "quick_imagebutton" action ShowMenu('history'):
                tooltip "history"
            imagebutton auto "gui/skip-%s.png" style "quick_imagebutton" action Skip() alternate Skip(fast=True, confirm=True):
                tooltip "skip"
            imagebutton auto "gui/auto-toggle-%s.png" style "quick_imagebutton" action Preference("auto-forward", "toggle"):
                tooltip "auto-Forward"

            null width 16

            imagebutton auto "gui/save-%s.png" style "quick_imagebutton" action ShowMenu('save'):
                tooltip "save"
            imagebutton auto "gui/quicksave-%s.png" style "quick_imagebutton" action QuickSave():
                tooltip "quickSave"
            imagebutton auto "gui/quickload-%s.png" style "quick_imagebutton" action QuickLoad():
                tooltip "quickLoad"
            imagebutton auto "gui/cogs-%s.png" style "quick_imagebutton" action ShowMenu("preferences"):
                tooltip "settings"


transform quick_tooltip_text:
    align (1.0,1.0)
    xoffset -30
    yoffset 0
    alpha 0.7
    on appear:
        alpha 1.0
    on show:
        parallel:
            alpha 0.0
            time 0.02
            linear 0.28 alpha 0.7
        parallel:
            xoffset -60
            linear 0.30 xoffset -30
    on hide:
        parallel:
            alpha 0.7
            time 0.02
            linear 0.28 alpha 0.0
        parallel:
            xoffset -30
            linear 0.30 xoffset 30
Last edited by 017Bluefield on Sat May 11, 2019 11:34 pm, edited 1 time in total.

017Bluefield
Regular
Posts: 93
Joined: Mon Dec 30, 2013 1:55 am
Projects: Project Bluefield - Origins
Organization: Autumn Rain
Deviantart: playerzero17
itch: autumn-rain
Contact:

Re: Tooltips on the quick menu (transform/ATL)

#2 Post by 017Bluefield »

This is an updated version of the quick_tooltip_text transform, which uses the hover and idle states. It doesn't produce quite the effect I'm looking for, but it's definitely closer.

Thanks to AdamJ1664 on the Ren'Py Discord server for pointing me in the right direction.

Code: Select all

transform quick_tooltip_text():
    align (1.0,1.0)
    xoffset -30
    yoffset 0
    alpha 0.7
    on appear:
        alpha 1.0
    on show, hover:
        parallel:
            alpha 0.0
            linear 0.3 alpha 0.7
        parallel:
            xoffset -60
            linear 0.30 xoffset -30
    on hide, idle:
        parallel:
            alpha 0.7
            linear 0.3 alpha 0.0
        parallel:
            xoffset -30
            linear 0.30 xoffset -60 # 30
Now I just need to figure out how to make the effect kick in for hovering over adjacent quick_menu buttons (such as Back and History).

017Bluefield
Regular
Posts: 93
Joined: Mon Dec 30, 2013 1:55 am
Projects: Project Bluefield - Origins
Organization: Autumn Rain
Deviantart: playerzero17
itch: autumn-rain
Contact:

Re: Tooltips on the quick menu (transform/ATL)

#3 Post by 017Bluefield »

Final version of the code. Kudos again goes to AdamJ1664 for his invaluable help.
  • Using hovered Show() and unhovered Hide() instead of simply tooltip.
  • Using a separate tooltip_text(t) screen, and setting its zorder to be above 100 in order for it to display over the reused notify.png on the quick menu.

Code: Select all

screen quick_menu():

    ## Ensure this appears on top of other screens.
    zorder 100

    if quick_menu:
        add im.Scale("gui/button/choice_idle_background.png",800,30) at center
        add im.Flip(im.Scale("gui/notify.png",195,28), horizontal=True) at right

        hbox align(0.5,1.0):
            style_prefix "quick"

            imagebutton auto "gui/step-backward-%s.png" style "quick_imagebutton" action Rollback():
                hovered Show("tooltip_text", None, "back")
                unhovered Hide("tooltip_text")
            imagebutton auto "gui/history-%s.png" style "quick_imagebutton" action ShowMenu('history'):
                hovered Show("tooltip_text", None, "history")
                unhovered Hide("tooltip_text")
            imagebutton auto "gui/skip-%s.png" style "quick_imagebutton" action Skip() alternate Skip(fast=True, confirm=True):
                hovered Show("tooltip_text", None, "skip")
                unhovered Hide("tooltip_text")
            ...

screen tooltip_text(t):
    zorder 120
    text t:
        at quick_tooltip_text
        color "#FF3"
        italic True

transform quick_tooltip_text():
    align (1.0, 1.0)
    offset (-30, 0)
    alpha 1.0
    on show, hover:
        parallel:
            alpha 0.0
            linear 0.1 alpha 0.75
        parallel:
            xoffset -60
            linear 0.1 xoffset -30
    on hide: # , idle
        parallel:
            alpha 0.75
            linear 0.1 alpha 0.0
        parallel:
            xoffset -30
            linear 0.1 xoffset -60 # 30

Post Reply

Who is online

Users browsing this forum: No registered users