How do I add a music room to my game's menu?

[SapphireChao]

I'd like to have the option of playing my game's music from the main menu, but the tutorials and guides provided only confuse me more. I'd really appreciate some help.

[DaFool]

You know what, let's edit and customize the main menu portion in screens.rpy so it can use nice buttons (which I place in /game/gui/):

Code: Select all

screen main_menu:

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    frame:
        background None
        style_group "mm"
        xoffset 25
        yoffset 150

        has vbox

        imagebutton:
            action Start()
            idle "gui/New1.png"
            hover "gui/New2.png"
        imagebutton:
            action ShowMenu("load")
            idle "gui/Continue1.png"
            hover "gui/Continue2.png"
        imagebutton:
            action ShowMenu("preferences")
            idle "gui/Options1.png"
            hover "gui/Options2.png"
        imagebutton:
            action ShowMenu("music_room")
            idle "gui/Music1.png"
            hover "gui/Music2.png"
        imagebutton:
            action Quit(confirm=False)
            idle "gui/Quit1.png"
            hover "gui/Quit2.png"

Hmmm, so now there's a button leading to the music room! (It's a similar process if you want to add a button to your Gallery)

But I need to
1.) Tell the system I have music tracks
2.) Set up a basic player layout to play them

Put this anywhere (but usually at the bottom of options.rpy or screens.rpy, your choice). Let's assume for a moment you only have 4 tracks, all of them in /game/music subfolder.

Code: Select all

#Hey Renpy I got some music tracks...
init python:
    # Step 1. Create a MusicRoom instance.
    mr = MusicRoom(fadeout=1.0)
    # Step 2. Add music files.
    mr.add("music/introvoiceless.ogg", always_unlocked=True)
    mr.add("music/intro.ogg", always_unlocked=True)    
    mr.add("music/insecure.ogg", always_unlocked=True)     
    mr.add("music/explore.ogg", always_unlocked=True)

#Hey Renpy now I gotta make a player to play em...
screen music_room:

    tag menu
    window:
        background "gui/musicroombg.jpg"

    imagebutton: #I need a way to get back to the main menu
        action Return()
        idle "gui/Return1.png"
        hover "gui/Return2.png"
        xanchor 0 yanchor 0
        xpos 5 ypos 15               
        
    frame: #these positioning changes depending on your layout
        xpos 350
        ypos 10
        has vbox:
            xalign 0.5 
            yalign 0.5

        # The buttons that play each track.  MUST CORRESPOND TO THE TRACK LIST ABOVE
        textbutton "Voiceless Intro" action mr.Play("music/introvoiceless.ogg")
        textbutton "Voiced Intro" action mr.Play("music/intro.ogg")
        textbutton "Insecure Theme" action mr.Play("music/insecure.ogg")
        textbutton "Exploration Theme" action mr.Play("music/explore.ogg")
        
    frame:
        xpos 350
        ypos 410
        has hbox:
            xalign 0.5
            yalign 0.5
        
        # Buttons that let us advance tracks.
        textbutton "|<<" action mr.Previous()        
        textbutton ">>|" action mr.Next()

    # 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 Play("music", "music/maintitletheme.ogg")

[Camille]

Ok sorry if anyone saw my post before I deleted it. I remembered that there's a screen-based Music Room that was more or less added in a recent Ren'Py release, so I read through that first and this one's much easier to implement than the cookbook version. Follow along with this page from the documentation.

Here are the steps according to the documentation. The elaboration is my own.

1. Create an instance of MusicRoom. The MusicRoom constructor takes parameters to control the channel on which music is played back, and how long it takes to fade music out and back in.
Following the documentation, you just have to put in this code somewhere:

Code: Select all

init python:

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

As long as it's in a .rpy file, it should be fine. Feel free to add it to an existing .rpy file or make a new one if it'll help with organization. Make sure you watch your indentation. The fadeout=1.0 part is the parameter that tells "how long it takes to fade music out and back in". So the higher the number, the longer the fade/transition.

2. Add music files to the instance.
Note that these should still be in the init python block and underneath previous code. So all told, it should look like this:

Code: Select all

init python:

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

    # Step 2. Add music files.
    mr.add("track1.ogg", always_unlocked=True)
    mr.add("track2.ogg")
    mr.add("track3.ogg")

Add all the tracks of your game here in that format. Again, watch indentation. If you want the track to always be unlocked, add that always_unlocked=True parameter. If it's not there, then the track will only show up if the player has already heard it in the game in at least one playthrough.

3. Create a screen that uses the MusicRoom instance to create actions for buttons, imagebuttons, or hotspots. These actions can pick a track, the next or previous track, or stop and start the music.
This is uh basically where you create the actual music room screen. The documentation gives a good sample code that you can use:

Code: Select all

screen music_room:

    tag menu

    frame:
        has vbox

        # The buttons that play each track.
        textbutton "Track 1" action mr.Play("track1.ogg")
        textbutton "Track 2" action mr.Play("track2.ogg")
        textbutton "Track 3" action mr.Play("track3.ogg")

        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")

    # 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 Play("music", "track1.ogg")

Personally I would place this in the screens.rpy file with all the other screen definitions, but again you can put this anywhere. And again, you should be careful with your indentation. The # notes explain pretty much what every bit of used code in this screen does. Please note that pausing is not currently supported in Ren'Py so you can only stop, play, and skip forwards or backwards a track. "Note that the actions used are members of a MusicRoom instance, so if the MusicRoom instance is named mr, then mr.Play("track1.ogg") is how you'd use the play action." If you use this exact code, you don't have to worry about this part, but if you change that very first definition, ie:

Code: Select all

musiroo = MusicRoom(fadeout=1.0)

Then all the resulting code would be musiroo.X instead of mr.X, if that makes sense.

4. Add the music room screen to the main menu, or an extras menu.
Well DaFool beat me to the punch while I was typing this up and pretty much nicely explained this step, so just listen to him. xD Basically you just add a button to your main_menu screen in the screens.rpy file.

[SapphireChao]

Well, do I need to actually make the images for all this??
I try and script this all out but the button still doesn't show up.

[DaFool]

Yes, you need to have all the files, images and music ready.

[Nejisa]

Ok sorry if anyone saw my post before I deleted it. I remembered that there's a screen-based Music Room that was more or less added in a recent Ren'Py release, so I read through that first and this one's much easier to implement than the cookbook version. Follow along with this page from the documentation.

Here are the steps according to the documentation. The elaboration is my own.

1. Create an instance of MusicRoom. The MusicRoom constructor takes parameters to control the channel on which music is played back, and how long it takes to fade music out and back in.
Following the documentation, you just have to put in this code somewhere:

Code: Select all

init python:

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

As long as it's in a .rpy file, it should be fine. Feel free to add it to an existing .rpy file or make a new one if it'll help with organization. Make sure you watch your indentation. The fadeout=1.0 part is the parameter that tells "how long it takes to fade music out and back in". So the higher the number, the longer the fade/transition.

2. Add music files to the instance.
Note that these should still be in the init python block and underneath previous code. So all told, it should look like this:

Code: Select all

init python:

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

    # Step 2. Add music files.
    mr.add("track1.ogg", always_unlocked=True)
    mr.add("track2.ogg")
    mr.add("track3.ogg")

Add all the tracks of your game here in that format. Again, watch indentation. If you want the track to always be unlocked, add that always_unlocked=True parameter. If it's not there, then the track will only show up if the player has already heard it in the game in at least one playthrough.

3. Create a screen that uses the MusicRoom instance to create actions for buttons, imagebuttons, or hotspots. These actions can pick a track, the next or previous track, or stop and start the music.
This is uh basically where you create the actual music room screen. The documentation gives a good sample code that you can use:

Code: Select all

screen music_room:

    tag menu

    frame:
        has vbox

        # The buttons that play each track.
        textbutton "Track 1" action mr.Play("track1.ogg")
        textbutton "Track 2" action mr.Play("track2.ogg")
        textbutton "Track 3" action mr.Play("track3.ogg")

        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")

    # 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 Play("music", "track1.ogg")

Personally I would place this in the screens.rpy file with all the other screen definitions, but again you can put this anywhere. And again, you should be careful with your indentation. The # notes explain pretty much what every bit of used code in this screen does. Please note that pausing is not currently supported in Ren'Py so you can only stop, play, and skip forwards or backwards a track. "Note that the actions used are members of a MusicRoom instance, so if the MusicRoom instance is named mr, then mr.Play("track1.ogg") is how you'd use the play action." If you use this exact code, you don't have to worry about this part, but if you change that very first definition, ie:

Code: Select all

musiroo = MusicRoom(fadeout=1.0)

Then all the resulting code would be musiroo.X instead of mr.X, if that makes sense.

4. Add the music room screen to the main menu, or an extras menu.
Well DaFool beat me to the punch while I was typing this up and pretty much nicely explained this step, so just listen to him. xD Basically you just add a button to your main_menu screen in the screens.rpy file.

Well, if it´s not a bother, i´d like to ask you something. In the previous recipe, the one in the cookbook, you can see a "???" (or whatever you´d like to put in there) in the button when you haven´t unlocked the track yet. That was the only thing of that recipe i really liked, do you think there is a way i can do that in this recipe? You know the old recipe is written in that old language so i don´t really know how to "write it" in screen language. I´d really thank any help.

[OokamiKasumi]

Thank you so much for these excellent tutorials!

Between DaFool's and Camilla's crystal clear instructions on making a music room, plus tweeking with Camille's Crash Course in GUI design, and Aleema's menu customization tutorial, I was able to make a rather nice-looking music room that works beautifully from my Bonus page.

Thank you so much for sharing your expertise! Us lesser beings truly, truly appreciate it.

[OokamiKasumi]

This really needs to go into the Renpy Cookbook part of the Forum.
-- It's accurate and very easy to use.

[Maruska23]

For a newbie like me this seems to be really hard, but after some time and some practice it's not that hard at all.

[Yukari]

How can I add a button to stop the music playing?

[WildRose18]

I have a minor issue with my background for my vn's music room (which took me so fricking long to do)...the picture is misaligned, but everything else functions fine. If you'd like, I can provide a screen shot to show what I mean?

On another note, thanks for these tutorials...took me forever to understand, but I finally got it to work.

[TheOneAndOnly-K]

I'm having a few troubles with the placement of the 'return' button.

It's just not moving to the spot I want it, in fact, its not moving at all.

[OokamiKasumi]

I have a minor issue with my background for my vn's music room (which took me so fricking long to do)...the picture is misaligned, but everything else functions fine. If you'd like, I can provide a screen shot to show what I mean?

I had the same problem.

The way to get around this, is by changing this:

Code: Select all

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "MusicRoom.jpg"

To this:

Code: Select all

screen music_room:
    tag menu
    add "MusicRoom.jpg" # background image

I'm having a few troubles with the placement of the 'return' button.
It's just not moving to the spot I want it, in fact, its not moving at all.

There's a much MUCH easier way to pop in a return button, add: 'use navigation'

Code: Select all

screen music_room:
    tag menu
    add "MusicRoom.jpg" #background image
    use navigation

[WildRose18]

I have a minor issue with my background for my vn's music room (which took me so fricking long to do)...the picture is misaligned, but everything else functions fine. If you'd like, I can provide a screen shot to show what I mean?

I had the same problem.

The way to get around this, is by changing this:

Code: Select all

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "MusicRoom.jpg"

To this:

Code: Select all

screen music_room:
    tag menu
    add "MusicRoom.jpg" # background image

I'm having a few troubles with the placement of the 'return' button.
It's just not moving to the spot I want it, in fact, its not moving at all.

There's a much MUCH easier way to pop in a return button, add: 'use navigation'

Code: Select all

screen music_room:
    tag menu
    add "MusicRoom.jpg" #background image
    use navigation

Thank you SO much, Kasumi :') the pic fits fine now.

[WildRose18]

And unfortunately, I now have a new issue T_T is there a way to place more than one column of tracks in the music room? Because mine kinda runs off the page at this rate...