How to hyperlink to footnotes

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
asylumsweetie
Newbie
Posts: 22
Joined: Sun Mar 31, 2013 2:37 am
Contact:

How to hyperlink to footnotes

#1 Post by asylumsweetie » Mon Dec 03, 2018 11:54 pm

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:

Image
Image
Image

User avatar
Qlara
Regular
Posts: 80
Joined: Fri Nov 28, 2014 10:22 am
Completed: Carmilla
Skype: kantonija
itch: visualgothic
Location: Berlin
Contact:

Re: How to hyperlink to footnotes

#2 Post by Qlara » Sat Dec 15, 2018 12:30 am

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!"
screenshot0001.jpg
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).

Post Reply

Who is online

Users browsing this forum: Danah