[SOLVED] Scrollbar in the 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
shiolily
Newbie
Posts: 18
Joined: Fri Aug 20, 2021 5:10 am
Deviantart: shiolily
Contact:

[SOLVED] Scrollbar in the music room

#1 Post by shiolily »

Hello! I want to implement a scroll bar in the music room but all the posts and examples I've found have totally broken the music room with all the buttons stacked on top of each other.

This is what I have now (sorry I had to blur out some spoilers)
https://media.discordapp.net/attachment ... nknown.png

What I am trying to achieve:
https://media.discordapp.net/attachment ... nknown.png
(they are scrollbars in the box)

Ideally I'd like to consolidate the boxes to two instead of three so the screen isn't so crowded.

here is the music room code:

Code: Select all

        screen music_room:

    tag menu
    window:
        background "images/bg shrine night.jpg"
        xalign 0.0
        yalign 0.0

    frame: #these positioning changes depending on your layout
        xpos 100
        ypos 15
        has vbox:
            xalign 0.5
            yalign 0.5
        textbutton "Return" action Return()

    frame: #these positioning changes depending on your layout
        xpos 1100
        ypos 15
        has vbox:
            xalign 0.5
            yalign 0.5
        textbutton "Main Menu" action MainMenu()
    frame: #these positioning changes depending on your layout
        xpos 112
        ypos 90
        has vbox:
            xalign 0.5
            yalign 0.5

        
        # The buttons that play each track.  MUST CORRESPOND TO THE TRACK LIST ABOVE
        textbutton "1.placeholder" action mr.Play("audio/wa.ogg")
        textbutton "2.placeholder" action mr.Play("audio/gs.ogg")
        textbutton "3.placeholder" action mr.Play("audio/introplaceholder.ogg")
        textbutton "4.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "5.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "6.placeholder" action mr.Play("audio/placeholder")
        textbutton "7.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "8.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "9.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "10.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "11.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "12.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "13.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "14.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "15.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "16.placeholder" action mr.Play("audio/placeholder.ogg")


    frame: #these positioning changes depending on your layout
        xpos 500
        ypos 90
        has vbox:
            xalign 0.5
            yalign 0.5

        #seconded

        textbutton "17.placeholder" action mr.Play("audio/wa.ogg")
        textbutton "18.placeholder" action mr.Play("audio/gs.ogg")
        textbutton "19.placeholder" action mr.Play("audio/introplaceholder.ogg")
        textbutton "20.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "21.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "22.placeholder" action mr.Play("audio/placeholder")
        textbutton "23.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "24.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "25.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "26.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "27.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "28.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "29.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "30.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "31.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "32.placeholder" action mr.Play("audio/placeholder.ogg")

    frame: #these positioning changes depending on your layout
        xpos 850
        ypos 90
        has vbox:
            xalign 0.5
            yalign 0.5

        #seconded
        textbutton "33.placeholder" action mr.Play("audio/wa.ogg")
        textbutton "34.placeholder" action mr.Play("audio/gs.ogg")
        textbutton "35.placeholder" action mr.Play("audio/introplaceholder.ogg")
        textbutton "36.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "37.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "38.placeholder" action mr.Play("audio/placeholder")
        textbutton "39.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "40.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "41.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "42.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "43.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "44.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "45.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "46.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "47.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "48.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "49.placeholder" action mr.Play("audio/placeholder.ogg")
        textbutton "50.placeholder" action mr.Play("audio/placeholder.ogg")
    frame:
        xpos 600
        ypos 15
        has hbox:
            xalign 0.5
            yalign 0.5
    frame:
        xpos 600
        ypos 15
        has hbox:
            xalign 0.5
            yalign 0.5

        # Buttons that let us advance tracks.
        textbutton "<<|" action mr.Previous()
        textbutton "||" action mr.Stop()
        textbutton "|>>" action mr.Next()
        textbutton "{font=fonts/kelvsym.ttf}↻{/font}" action ToggleField(mr, "single_track")

    # Start the music playing on entry to the music room.
    on "replace" action mr.Play()

    # Restore the main menu music upon leaving.

    on "replaced" action If(persistent.op2, true=Play("music", "audio/gs.ogg"), false=Play("music", "audio/wa.ogg"))
Last edited by shiolily on Tue Oct 05, 2021 4:29 am, edited 1 time in total.

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Scrollbar in the music room

#2 Post by jeffster »

1. This part of your code is duplicated:

Code: Select all

    frame:
        xpos 600
        ypos 15
        has hbox:
            xalign 0.5
            yalign 0.5
    frame:
        xpos 600
        ypos 15
        has hbox:
            xalign 0.5
            yalign 0.5
2. If you want 2 columns instead of 3, remove the third column (frame) with its contents. Then you might want to increase the xpos of the second column.

3. Adding scrollbars is basically putting this in a frame:

Code: Select all


frame: # 1st column
    # Put here its parameters like xpos, ypos
    # ...
    side "c r":
        viewport id "col1":
            mousewheel True
            pagekeys true
            # Here put the content of the 1st column: vbox and so on
            # ...
        vbar value YScrollValue("col1") unscrollable "hide"

frame: # 2nd column
    # Put here its parameters like xpos, ypos
    # ...
    side "c r":
        viewport id "col2":
            mousewheel True
            pagekeys true
            # Here put the content of the 2nd column: vbox and so on
            # ...
        vbar value YScrollValue("col2") unscrollable "hide"

shiolily
Newbie
Posts: 18
Joined: Fri Aug 20, 2021 5:10 am
Deviantart: shiolily
Contact:

Re: Scrollbar in the music room

#3 Post by shiolily »

Oh the duplicate stuff happened when I copy pasted it over rip

I tried implementing it but got an error that said 'expected statement'.

Code: Select all

frame: # 1st column
    xpos 112
    ypos 90
    # Put here its parameters like xpos, ypos
    # ...
    side "c r":
        viewport id "col1":
            mousewheel True
            pagekeys true
            # Here put the content of the 1st column: vbox and so on

    has vbox:
        xalign 0.5
        yalign 0.5
    textbutton "1.Waves" action mr.Play("audio/wa.ogg")
    textbutton "2.Kazoo Syndrome (God Syndrome)" action mr.Play("audio/gs.ogg")
    textbutton "3.Intro - Falling Pinball" action mr.Play("audio/introplaceholder.ogg")
    textbutton "4.Boogie 1" action mr.Play("audio/boogie1.ogg")
    textbutton "5.Mime-Tan's Theme \n (Salade de Fruits)" action mr.Play("audio/mt_theme.ogg")
    textbutton "6.Higurashi Cries" action mr.Play("audio/higu.ogg")
    textbutton "7.Together" action mr.Play("audio/cheerful2.ogg")
    textbutton "8.1400" action mr.Play("audio/song14oo.ogg")
    textbutton "9.Boogie - Slow Mix" action mr.Play("audio/boogieslow.ogg")
    textbutton "10.Sounds of Hell" action mr.Play("audio/hellsounde.ogg")
    textbutton "11.Fascism" action mr.Play("audio/fascism.ogg")
    textbutton "12.Blue Moon #3 \n“Wednesday: the Solitude”" action mr.Play("audio/agnaldo.ogg")
    textbutton "13.Dancers 5" action mr.Play("audio/dancers5.ogg")
    textbutton "14.Crickets" action mr.Play("audio/cricket.ogg")
    textbutton "15.Underwater Noise" action mr.Play("audio/scary.ogg")
    textbutton "16.Ambient house #1\n (Rhythmless Robot Mix)" action mr.Play("audio/calm.ogg")
    textbutton "17.Cicadas" action mr.Play("audio/cicada.ogg")
    textbutton "18.Snow #4 \n“Frozen to Death”" action mr.Play("audio/tense.ogg")
    textbutton "19.Meditation #3" action mr.Play("audio/court2.ogg")
    textbutton "20.Relaxing Music" action mr.Play("audio/chill.ogg")
    textbutton "21.Inverted" action mr.Play("audio/invertt.ogg")
    textbutton "22.Horror" action mr.Play("audio/horror.ogg")
    textbutton "23.Broken Heart" action mr.Play("audio/court.ogg")
    textbutton "24.Dramatic Trailer Theme" action mr.Play("audio/memescourt.ogg")
    textbutton "25.Swift" action mr.Play("audio/swift.ogg")
    textbutton "26.New Season" action mr.Play("audio/n_season.ogg")
    textbutton "27.Kimigayo" action mr.Play("audio/kimigayo.ogg")
            # ...
        vbar value YScrollValue("col1") unscrollable "hide"




frame: # 2nd column
    xpos 500
    ypos 90
    # Put here its parameters like xpos, ypos
    # ...
    side "c r":
        viewport id "col2":
            mousewheel True
            pagekeys true
            # Here put the content of the 2nd column: vbox and so on
    has vbox:
        xalign 0.5
        yalign 0.5
    textbutton "28.Third Eye" action mr.Play("audio/thirdeye.ogg")
    textbutton "29.34+35 (Rukatsu x Cahmen)" action mr.Play("audio/ruxca.ogg")
    textbutton "30.0000" action mr.Play("audio/fourzeroes.ogg")
    textbutton "31.Blue Moon #4 \n“Thursday: the Silence”" action mr.Play("audio/thursday.ogg")
    textbutton "32.24 Hour Cinderella TV" action mr.Play("audio/24.ogg")
    textbutton "33.Selene" action mr.Play("audio/selene_w.ogg")
    textbutton "34.Impasse" action mr.Play("audio/impasse.ogg")
    textbutton "35.Dancers 4" action mr.Play("audio/cheerful.ogg")
    textbutton "36.Agnaldo x Kevin" action mr.Play("audio/axkfinale.ogg")
    textbutton "37.Theme of Owner" action mr.Play("audio/owner.ogg")
    textbutton "38.Dawn" action mr.Play("audio/dawn.ogg")
    textbutton "39.Lie Lies-Lies Lie" action mr.Play("audio/lie.ogg")
    textbutton "40.Rainy" action mr.Play("audio/rainy.ogg")
    textbutton "41.Snow 4“Frozen to Death”\n(Variant)" action mr.Play("audio/snow4.ogg")
    textbutton "42.Meditation 1" action mr.Play("audio/med1.ogg")
    textbutton "43.Holy Night Lonely Night" action mr.Play("audio/hnln.ogg")
    textbutton "44.24 Hour Cinderella \nFuture Piss Remix" action mr.Play("audio/fu24.ogg")
    textbutton "45.Days of Children 3" action mr.Play("audio/child3.ogg")
    textbutton "46.Vaccination Anthem" action mr.Play("audio/vac.ogg")
    textbutton "47.Sunrise" action mr.Play("audio/sunrise.ogg")
    textbutton "48.Ragnarok" action mr.Play("audio/ragnarok.ogg")
    textbutton "49.2000" action mr.Play("audio/wedding.ogg")
    textbutton "50.Heartbeat Breaker" action mr.Play("audio/hbb.ogg")
            # ...
        vbar value YScrollValue("col2") unscrollable "hide"

and the error:

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 1699: expected statement.
    frame: 
         ^

File "game/screens.rpy", line 1746: expected statement.
    frame: 
         ^

Ren'Py Version: Ren'Py 7.4.8.1895
Sun Sep 26 19:23:52 2021

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Scrollbar in the music room

#4 Post by jeffster »

You can get much benefit from reading more about Ren'Py (and Python). E.g., Language Basics:

https://www.renpy.org/doc/html/language_basics.html

Indentation is meaningful in Python and Ren'Py. It's like containers. In this piece of code:

Code: Select all

frame: # 1st column
    xpos 112
    ypos 90
    # Put here its parameters like xpos, ypos
    # ...
    side "c r":
        viewport id "col1":
            mousewheel True
            pagekeys true
            # Here put the content of the 1st column: vbox and so on

    has vbox:
        xalign 0.5
        yalign 0.5
    textbutton "1.Waves" action mr.Play("audio/wa.ogg")
frame is an outer container. "side" is inside frame. Then viewport is inside of "side". vbox should be inside of viewport, and its content should be indented even more (well, or in the same level if you use the keyword "has").

So the amount of spaces matters. Usually people use 4 spaces to indent every next level.

PS. And frames must be inside screen. Correct the indentation like this:

Code: Select all

screen
    frame
        side
            viewport
                has vbox
                textbutton

shiolily
Newbie
Posts: 18
Joined: Fri Aug 20, 2021 5:10 am
Deviantart: shiolily
Contact:

Re: Scrollbar in the music room

#5 Post by shiolily »

Thank you so much!
I checked out the link you sent and have been reading, and implemented the indentation, but am stuck between two issues.

I formatted the code like this:

Code: Select all

    frame: # 2nd column
        xpos 500
        ypos 90
        # Put here its parameters like xpos, ypos
        # ...
        side "c r":
            viewport id "col2":
                mousewheel True
                pagekeys True
                # Here put the content of the 2nd column: vbox and so on
                    has vbox:
                        xalign 0.5
                        yalign 0.5
                    textbutton "28.Third Eye" action mr.Play("audio/thirdeye.ogg")
and got this error.

Code: Select all

I'm sorry, but errors were detected in your script. Please correct the
errors listed below, and try again.


File "game/screens.rpy", line 1755: Line is indented, but the preceding pagekeys statement does not expect a block. Please check this line's indentation.
    has vbox:
    ^

Ren'Py Version: Ren'Py 7.4.8.1895
Sat Oct  2 18:40:45 2021
I then removed that one indentation as such:

Code: Select all

    frame: # 2nd column
        xpos 500
        ypos 90
        # Put here its parameters like xpos, ypos
        # ...
        side "c r":
            viewport id "col2":
                mousewheel True
                pagekeys True
                # Here put the content of the 2nd column: vbox and so on
                has vbox:
                    xalign 0.5
                    yalign 0.5
                textbutton "28.Third Eye" action mr.Play("audio/thirdeye.ogg")
this yields this error:

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
Exception: A side has the wrong number of children.
I'm still a beginner, but my rudimentary guess on what's happening in the second example is that there are two sides, c and r, but the indentation of the text button makes it get counted as a third side, which doesn't exist. Indenting it should make it not get counted as a side, but that throws the other error, which seems like it shouldn't be indented. I'm not sure where to go from here.

jeffster
Veteran
Posts: 361
Joined: Wed Feb 03, 2021 9:55 pm
Contact:

Re: Scrollbar in the music room

#6 Post by jeffster »

You were right to correct the "has vbox" indentation.

Yes, side should have 2 members. The 1st is the viewport. The second should be the scrollbar.

What's inside the viewport doesn't count. As long as its indentation is correct, it's just parts of viewport.

So the correct code must be:

Code: Select all

side "c r":
    viewport id "col2":
        ...
    vbar value YScrollValue("col2") unscrollable "hide"
Check that your scrollbar is at the same indentation level as the viewport.

shiolily
Newbie
Posts: 18
Joined: Fri Aug 20, 2021 5:10 am
Deviantart: shiolily
Contact:

Re: Scrollbar in the music room

#7 Post by shiolily »

That fixed it, thank you so, so much!

Post Reply

Who is online

Users browsing this forum: No registered users