How to hyperlink to footnotes

[asylumsweetie]

Hi! I'm trying to get a very specific effect. If you've played Hiveswap Friendsim Volume 12, I'm trying to replicate the way they did Galekh's footnotes.

Essentially, the dialogue should include a hyperlink which opens a small box centered on the screen which contains text. The text should be able to support additional hyperlinks for nested footnote insanity.

I know how to hyperlink, but clicking through it opens the footnote in the main text box, and I would rather have it in the separate box. I could have the hyperlink display an image, but then I don't think I could make the footnotes have footnotes.

Here's some screenshots of the effect in Friendsim:

[Qlara]

First of all, create a new screen that will serve as a design blueprint for all footnotes. We'll call it "screen footnotes".
You can do that within the existing screen file or, for a cleaner view, simply add a new file and save it as "footnotes.rpy" in the game folder.
Because I can't design the look for you, I simply took Ren'Py's generic "confirm" screen design from "screens.rpy", copied everything I needed from there and replaced "confirm" with "footnotes", so that, for example, "style confirm_frame" became "style footnotes_frame".
Here's the result:
(I simply dropped all that code into a virgin New Game)

Code: Select all

screen footnotes: # the blueprint for our footnotes

    modal True  ## if modal is True you can't interact with the screens below, like the dialogue box, until you hide the footnotes window
    style_prefix "footnotes" ## this uses the design specifications defined below by "style footnotes_" which I had copied and renamed from the confirm screen
    add "gui/overlay/confirm.png"
    frame:
        vbox:
            text "this is our footnote text"
            textbutton _("hide"):
                action Hide('footnotes')
                
## design specifications for the window/screen:
style footnotes_frame is gui_frame
style footnotes_vbox:
            xalign .5
            yalign .5
            spacing 70
style footnotes_button is gui_medium_button
style footnotes_button_text is gui_medium_button_text
style footnotes_frame:
    background Frame([ "gui/confirm_frame.png", "gui/frame.png"], gui.confirm_frame_borders, tile=gui.frame_tile)
    padding gui.confirm_frame_borders.padding
    xalign .5
    yalign .5
style footnotes_button:
        xalign 1.0
        yalign 1.0

Next up, our individual footnotes that hold the different texts. I created a new screen for each one and labeled them "screen footnoteX".
These screens will inherit the design from footnotes because "style_prefix 'footnotes'" tells them to.

Code: Select all

screen footnote1:
    modal True
    style_prefix "footnotes"
    frame:
        vbox:
            text "this is my footnote number 1"
            textbutton _("hide"):
                action Hide('footnote1')

screen footnote2:
    modal True
    style_prefix "footnotes"
    frame:
        vbox:
            text "this is my footnote number 2"
            textbutton _("hide"):
                action Hide('footnote2')

Finally, in your dialogue script file, link to the footnotes:

Code: Select all

define e = Character("Eileen")
label start:
    scene bg room
    show eileen happy
    e "First we call our blueprint screen {a=show:footnotes}Footnotes{/a}"
    e "Then {a=show:footnote1}Footnote 1{/a} Ren'Py game."
    e "Once you add a story, pictures, and music, {a=show:footnote2}Footnote 2{/a} release it to the world!"

Now, although this works, it is a rather crude way to go about things. As you can see, I'm repeating a lot of lines for all my individual footnote screens. A much more elegant solution would be to use a, well, "footnote text variable" in the blueprint screen that can take on "footnote text values". Unfortunately, I couldn't get that to work with the links, but perhaps someone else will care to refine it for you.
Lastly, you'll have to style the look of the links. (I only know how to do that inline).