Showing lyrics for the title song

[thelastsecret]

Animating the title screen isn't that trivial. Usually, there's a background image, the menu itself, and that's it. In my VN "School's out forever", the idea was to add dynamic lyrics that show up along with the title song. Here's how:

1. We defined another layer ontop that is (as the name suggests) on top of everything else:

Code: Select all

   init: define config.layers = [ 'master', 'transient', 'screens', 'overlay', 'ontop' ]

2. We define a screen on this layer that is first shown in the splashscreen phase:

Code: Select all

label splashscreen: show screen lyrics(_layer="ontop")

3. We also show it pretty much at the start of the main menu screen (maybe one of those is redundant...):

Code: Select all

screen main_menu(): timer 0.5 action Show("lyrics") repeat True

4. We need to make sure that it does not show when we are, e.g., in the preferences. To do that we need to add something like this to each action where we open something from the main menu:

Code: Select all

action [SetVariable("something_open",True),ShowMenu('preferences')]

The variable something_open has to be defined of course and should be False initially. Of course, when closing the preferences, we need to reset this variable:

Code: Select all

action [SetVariable("something_open",False),Return()]

5. When we call completely separate screens from the main menu, we can add these lines to them instead:

Code: Select all

on "show" action SetVariable("something_open",True)
on "hide" action SetVariable("something_open",False)

This did not work, e.g., for Preferences! (Probably, because they kind of invoke the main menu, but I'm guess working here, and it took me an hour to find the above mentioned workaround.)

6. The lyrics screen itself looks like this (slightly simplified):

Code: Select all

screen lyrics:
if renpy.music.get_playing()=="audio/title song.mp3" and something_open==False:
    style_prefix "centered"
    $current_music_pos=renpy.music.get_pos("music")
    $part=0
    for times in lyrics_times:
        if times<current_music_pos:
            $part+=1
    if part%2==1 and part>0:
        add "images/lyrics_bubble.png":
            xpos 50
            ypos -30
            at transform:
                parallel:
                    pause 1
                    ease 1:
                        alpha 0
                parallel:
                    ease 0.5:
                        xoffset -50
                        yoffset -30
                        zoom 1.1
                    ease 2:
                        xoffset 0
                        yoffset 0
                        zoom 1
    elif part>0:
        add "images/lyrics_bubble.png":
            xpos 680-30
            ypos 450-180
            at transform:
                parallel:
                    pause 1
                    ease 1:
                        alpha 0
                parallel:
                    ease 0.5:
                        xoffset -50
                        yoffset -30
                        zoom 1.1
                    ease 2:
                        xoffset 0
                        yoffset 0
                        zoom 1
    vbox:
        if part%2==1:
            xpos 100
            ypos 200
        else:
            xpos 700
            ypos 500
        xsize 550
        vbox:
            xalign 0.5
            yalign 0.5
            text lyrics[part]:
                color "#FFC"
                size 55
                font "HennyPenny-Regular.ttf"
                outlines [ (absolute(2), "#000", absolute(0), absolute(0)) ]
    if part>0:
        vbox:
            if part%2==1:
                xpos 700
                ypos 500
            else:
                xpos 100
                ypos 200
            xsize 550
            text lyrics[part-1]:
                color "#FFC"
                size 55
                font "HennyPenny-Regular.ttf"
                outlines [ (absolute(2), "#000", absolute(0), absolute(0)) ]
zorder 1000

This makes sure that the lyrics are displayed only if nothing else is open and the while the correct song is playing. They are displayed for odd and even numbered lines at different places (like in the screenshots above). Of course, you can chose positions, style, animations etc. to your liking. (You can also make it much simpler!) This is just an example.

7. Define and set the variables for your song: To that end measure the precise times where the lines start (e.g. with Garageband or any software that shows sub-second measures of audio files) and write them into a list. Then add the lyrics themselves into another list:

Code: Select all

default lyrics_times=[1.8,5.1]

default lyrics=["","This is the first lime","This is the second line"]

8. Define the missing style:

Code: Select all

style centered_text:
text_align 0.5

Now it should work!

[enaielei]

I don't see any questions here?
This should probably be in the Cookbook section.