How can I apply a scrolbar into my Music Room?

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
loller231
Newbie
Posts: 7
Joined: Fri Mar 25, 2016 5:03 am
Contact:
Contact loller231

How can I apply a scrolbar into my Music Room?

#1 Post by loller231 »

Hello! loller231 here!

Recently I just learned how to make a music room for my game, but now since I used a of music tracks for my game most of them won't fit inside the screen anymore. So I tried looking into a few tutorials and documentations but none of them helped me understand how to create them.

Here is my current code for my music room.

Code: Select all

# Music Room

init python:

    # Step 1. Create a MusicRoom instance.
    mr = MusicRoom(fadeout=1.0)

    # Step 2. Add music files.
    mr.add("Noctis.MP3", always_unlocked=True)
    mr.add("Lorelei.MP3")
    mr.add("Innocence.MP3")
    mr.add("After Dark.MP3")
    mr.add("Dreamwalker.MP3")
    mr.add("Familiar Warmth.MP3")
    mr.add("Faraway.MP3")
    mr.add("Hamari.MP3")
    mr.add("In a Dream.MP3")
    mr.add("Lazy Days.MP3")
    mr.add("Midnight.MP3")
    mr.add("Spiral.MP3")
    mr.add("Refrain.MP3")
    mr.add("Distant Memory.MP3")
    mr.add("Cantabile.MP3")
    mr.add("Amefuri.MP3")
    mr.add("Sleepy Canon.MP3")
    mr.add("Evening Waltz.MP3")
    mr.add("Moonlit Night Loop.WAV")
    mr.add("Alone.MP3")
    mr.add("BWV 587.MP3")
    mr.add("Despair.MP3")
    mr.add("There is Only You.MP3")
    mr.add("RoganisP - Awkward Situation.MP3")
    mr.add("RoganisP - Doute et Suspicion.MP3")

# Step 3. Create the music room screen.
screen music_room:

# The background of the music room.
    window:
        style "gm_root"

    tag menu

    frame:
        xalign 0.0
        yalign 0.0

        has vbox

        # The buttons that play each track.
        
        textbutton "Noctis - Alcaknight" action mr.Play("Noctis.MP3")
        textbutton "Lorelei - Alcaknight" action mr.Play("Lorelei.MP3")
        textbutton "Innocence - Alcaknight" action mr.Play("Innocence.MP3")
        textbutton "After Dark - Alcaknight" action mr.Play("After Dark.MP3")
        textbutton "Dreamwalker - Alcaknight" action mr.Play("Dreamwalker.MP3")
        textbutton "Familiar Warmth - Alcaknight" action mr.Play("Familiar Warmth.MP3")
        textbutton "Faraway - Alcaknight" action mr.Play("Faraway.MP3")
        textbutton "Hamari - Alcaknight" action mr.Play("Hamari.MP3")
        textbutton "In a Dream - Alcaknight" action mr.Play("In a Dream.MP3")
        textbutton "Lazy Days - Alcaknight" action mr.Play("Lazy Days.MP3")
        textbutton "Midnight - Alcaknight" action mr.Play("Midnight.MP3")
        textbutton "Refrain - Alcaknight" action mr.Play("Refrain.MP3")
        textbutton "Distant Memory - Alcaknight" action mr.Play("Distant Memory.MP3")
        textbutton "Cantabile - Alcaknight" action mr.Play("Cantabile.MP3")
        textbutton "Amefuri - Alcaknight" action mr.Play("Amefuri.MP3")
        textbutton "Sleepy Canon - Alcaknight" action mr.Play("Sleepy Canon.MP3")
        textbutton "Evening Waltz - Alcaknight" action mr.Play("Evening Waltz.MP3")
        textbutton "Moonlit Night Loop Ver.- Alcaknight" action mr.Play("Moonlit Night Loop.WAV")        
        textbutton "BWV 587 Music Box ver. - Alcaknight" action mr.Play("BWV 587.MP3")
        textbutton "There is Only You - Alcaknight" action mr.Play("There is Only You.MP3")      
        
        # The Second Box of the Music Room.
    frame:
        xalign 1.0
        yalign 0.0
        
        has vbox
        
        textbutton "Spiral - Alcaknight" action mr.Play("Spiral.MP3")
        textbutton "Despair - Alcaknight" action mr.Play("Despair.MP3")
        textbutton "Alone - Alcaknight" action mr.Play("Alone.MP3")
        textbutton "Awkward Situation - RoganisP" action mr.Play("RoganisP - Awkward Situation.MP3")
        textbutton "Doute et Suspicion - RoganisP" action mr.Play("RoganisP - Doute et Suspicion.MP3")

        null height 20

        # Buttons that let us advance tracks.
        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()

        null height 20

        # The button that lets the user exit the music room.
        textbutton "Main Menu" action ShowMenu("main_menu")
Now I need to apply a scroll bar to make all of the tracks fit inside.

Now, how will I create a scroll bar for my music room? Thank you.
Top
User avatar
Divona
Miko-Class Veteran
Posts: 678
Joined: Sun Jun 05, 2016 8:29 pm
Completed: The Falconers: Moonlight
Organization: Bionic Penguin
itch: bionicpenguin
Contact:
Contact Divona

Re: How can I apply a scrolbar into my Music Room?

#2 Post by Divona »

What you're looking for is 'Viewport'.
https://www.renpy.org/doc/html/screens.html#viewport

Example:

Code: Select all

    frame:
        xalign 0.0
        yalign 0.0

        viewport:
            scrollbars "vertical"
            mousewheel True
            draggable True

            side_yfill True

            vbox:
                
                # The buttons that play each track.
                
                textbutton "Noctis - Alcaknight" action mr.Play("Noctis.MP3")
                textbutton "Lorelei - Alcaknight" action mr.Play("Lorelei.MP3")
                textbutton "Innocence - Alcaknight" action mr.Play("Innocence.MP3")
                textbutton "After Dark - Alcaknight" action mr.Play("After Dark.MP3")
                textbutton "Dreamwalker - Alcaknight" action mr.Play("Dreamwalker.MP3")
                textbutton "Familiar Warmth - Alcaknight" action mr.Play("Familiar Warmth.MP3")
                textbutton "Faraway - Alcaknight" action mr.Play("Faraway.MP3")
                textbutton "Hamari - Alcaknight" action mr.Play("Hamari.MP3")
                textbutton "In a Dream - Alcaknight" action mr.Play("In a Dream.MP3")
                textbutton "Lazy Days - Alcaknight" action mr.Play("Lazy Days.MP3")
                textbutton "Midnight - Alcaknight" action mr.Play("Midnight.MP3")
                textbutton "Refrain - Alcaknight" action mr.Play("Refrain.MP3")
                textbutton "Distant Memory - Alcaknight" action mr.Play("Distant Memory.MP3")
                textbutton "Cantabile - Alcaknight" action mr.Play("Cantabile.MP3")
                textbutton "Amefuri - Alcaknight" action mr.Play("Amefuri.MP3")
                textbutton "Sleepy Canon - Alcaknight" action mr.Play("Sleepy Canon.MP3")
                textbutton "Evening Waltz - Alcaknight" action mr.Play("Evening Waltz.MP3")
                textbutton "Moonlit Night Loop Ver.- Alcaknight" action mr.Play("Moonlit Night Loop.WAV")        
                textbutton "BWV 587 Music Box ver. - Alcaknight" action mr.Play("BWV 587.MP3")
                textbutton "There is Only You - Alcaknight" action mr.Play("There is Only You.MP3")
......
Something like that.

If you want two column then check out Vpgrid.
https://www.renpy.org/doc/html/screens.html#vpgrid
Completed:
Image
Top
loller231
Newbie
Posts: 7
Joined: Fri Mar 25, 2016 5:03 am
Contact:
Contact loller231

Re: How can I apply a scrolbar into my Music Room?

#3 Post by loller231 »

Thank you for the reply! =)
I haven't done it yet, but I will once I got the time.
Divona wrote:What you're looking for is 'Viewport'.
https://www.renpy.org/doc/html/screens.html#viewport

Example:

Code: Select all

    frame:
        xalign 0.0
        yalign 0.0

        viewport:
            scrollbars "vertical"
            mousewheel True
            draggable True

            side_yfill True

            vbox:
                
                # The buttons that play each track.
                
                textbutton "Noctis - Alcaknight" action mr.Play("Noctis.MP3")
                textbutton "Lorelei - Alcaknight" action mr.Play("Lorelei.MP3")
                textbutton "Innocence - Alcaknight" action mr.Play("Innocence.MP3")
                textbutton "After Dark - Alcaknight" action mr.Play("After Dark.MP3")
                textbutton "Dreamwalker - Alcaknight" action mr.Play("Dreamwalker.MP3")
                textbutton "Familiar Warmth - Alcaknight" action mr.Play("Familiar Warmth.MP3")
                textbutton "Faraway - Alcaknight" action mr.Play("Faraway.MP3")
                textbutton "Hamari - Alcaknight" action mr.Play("Hamari.MP3")
                textbutton "In a Dream - Alcaknight" action mr.Play("In a Dream.MP3")
                textbutton "Lazy Days - Alcaknight" action mr.Play("Lazy Days.MP3")
                textbutton "Midnight - Alcaknight" action mr.Play("Midnight.MP3")
                textbutton "Refrain - Alcaknight" action mr.Play("Refrain.MP3")
                textbutton "Distant Memory - Alcaknight" action mr.Play("Distant Memory.MP3")
                textbutton "Cantabile - Alcaknight" action mr.Play("Cantabile.MP3")
                textbutton "Amefuri - Alcaknight" action mr.Play("Amefuri.MP3")
                textbutton "Sleepy Canon - Alcaknight" action mr.Play("Sleepy Canon.MP3")
                textbutton "Evening Waltz - Alcaknight" action mr.Play("Evening Waltz.MP3")
                textbutton "Moonlit Night Loop Ver.- Alcaknight" action mr.Play("Moonlit Night Loop.WAV")        
                textbutton "BWV 587 Music Box ver. - Alcaknight" action mr.Play("BWV 587.MP3")
                textbutton "There is Only You - Alcaknight" action mr.Play("There is Only You.MP3")
......
Something like that.

If you want two column then check out Vpgrid.
https://www.renpy.org/doc/html/screens.html#vpgrid
Top
Post Reply

Return to “Ren'Py Questions and Announcements”



Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot]