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

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
SapphireChao
Newbie
Posts: 2
Joined: Mon Jan 02, 2012 4:50 pm
Contact:

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

#1 Post by SapphireChao » Mon Jan 02, 2012 7:55 pm

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.

User avatar
DaFool
Lemma-Class Veteran
Posts: 4171
Joined: Tue Aug 01, 2006 12:39 pm
Contact:

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

#2 Post by DaFool » Tue Jan 03, 2012 1:16 pm

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

User avatar
Camille
Eileen-Class Veteran
Posts: 1226
Joined: Sat Apr 23, 2011 2:43 pm
Completed: Please see http://trash.moe
Projects: Spirit Parade
Organization: Cyanide Tea
Tumblr: narihira
Deviantart: crownwaltz
Skype: thievinghearts
Contact:

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

#3 Post by Camille » Tue Jan 03, 2012 1:20 pm

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.
1/2 of Cyanide Tea | Break Chance Memento (BL) | Spirit Parade (Otome) | Portfolio/List of Works/Contact
I'm not around LSF very much these days; please contact me via Skype/Twitter. Ask me things!

SapphireChao
Newbie
Posts: 2
Joined: Mon Jan 02, 2012 4:50 pm
Contact:

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

#4 Post by SapphireChao » Tue Jan 10, 2012 7:25 pm

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.

User avatar
DaFool
Lemma-Class Veteran
Posts: 4171
Joined: Tue Aug 01, 2006 12:39 pm
Contact:

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

#5 Post by DaFool » Thu Jan 12, 2012 4:27 am

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

User avatar
Nejisa
Regular
Posts: 76
Joined: Sat Oct 15, 2011 1:03 am
Projects: Third Eye
Location: Colombia
Contact:

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

#6 Post by Nejisa » Thu Jan 12, 2012 10:11 pm

Camille wrote: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.
Image

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#7 Post by OokamiKasumi » Tue Mar 13, 2012 8:37 am

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.
Attachments
ScreenShot05.jpg
ScreenShot04.jpg
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#8 Post by OokamiKasumi » Mon Jul 30, 2012 2:29 pm

This really needs to go into the Renpy Cookbook part of the Forum.
-- It's accurate and very easy to use.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Maruska23
Newbie
Posts: 2
Joined: Sat Sep 28, 2013 4:02 am
Contact:

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

#9 Post by Maruska23 » Sat Sep 28, 2013 4:09 am

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. :D

User avatar
Yukari
Regular
Posts: 119
Joined: Sun Feb 06, 2011 6:28 am
Completed: Aozora Meikyuu, Yozora Rhapsody, Imolicious, Yume Puzzle
Projects: Games&Girls, Fuyuzora Rumble
Organization: Yume Creations
Tumblr: yumecreationsvn
Location: Germany
Contact:

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

#10 Post by Yukari » Sun Oct 20, 2013 4:24 am

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

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

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

#11 Post by WildRose18 » Mon Apr 14, 2014 11:22 am

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.

User avatar
TheOneAndOnly-K
Regular
Posts: 78
Joined: Mon Apr 07, 2014 10:33 am
Contact:

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

#12 Post by TheOneAndOnly-K » Sat Apr 19, 2014 12:26 pm

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.

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

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

#13 Post by OokamiKasumi » Tue Apr 22, 2014 10:05 pm

WildRose18 wrote: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
TheOneAndOnly-K wrote: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
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

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

#14 Post by WildRose18 » Thu Apr 24, 2014 9:37 pm

OokamiKasumi wrote:
WildRose18 wrote: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
TheOneAndOnly-K wrote: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.

User avatar
WildRose18
Newbie
Posts: 9
Joined: Mon Apr 14, 2014 10:46 am
IRC Nick: Shin
Tumblr: aspie-hinata
Deviantart: wildrose18
Contact:

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

#15 Post by WildRose18 » Thu Apr 24, 2014 9:45 pm

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...

Post Reply

Who is online

Users browsing this forum: No registered users