Setting a menu background using the new GUI?

[Imperf3kt]

The documentation is not very helpful in this regard, and I can't see any topics on the new GUI, so I'd like some help.

In the old GUI, I was finding it easy as, but the new GUI is very confusing to me, and I'm finding it takes far more time trying to figure out how to use GUI functions, than actually spending time working on more important stuff.

I have created a music room and I'd like to customise it to use the navigation on the left, as it does:

And I'd like to add a different background to the right side. Maybe a radio or something, haven't got that far.

Code: Select all

init python:

    mr = MusicRoom(channel='music', fadeout=1.0, fadein=0.0, loop=True, single_track=True, shuffle=False, stop_action=None)

    mr.add("music/ui/Anguish.mp3", always_unlocked=True)
    mr.add("music/Dark Times.mp3", always_unlocked=True)


screen music_room:

    tag menu
    
    use game_menu(_("Music Room"), scroll="viewport"):
        textbutton "Anguish" action mr.Play("music/ui/Anguish.mp3")
        textbutton "Dark Times" action mr.Play("music/Dark Times.mp3")

        null height 20

        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()
        textbutton "Pause" action PauseAudio("music", value="toggle") ## Causes major lag if inside a frame

At first I tried defining gui.mr_menu_background in gui.rpy and then creating a screen, setting the background and using the screen, but this did not work.

Code: Select all

screen music_menu(title, scroll=None):

    # Add the backgrounds.
    if main_menu:
        add gui.main_menu_background
    else:
        add gui.music_menu_background

    style_prefix "music_menu"

    frame:
        style "music_menu_outer_frame"

        hbox:

            # Reserve space for the navigation section.
            frame:
                style "music_menu_navigation_frame"

            frame:
                style "music_menu_content_frame"

                if scroll == "viewport":

                    viewport:
                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        vbox:
                            transclude

                elif scroll == "vpgrid":

                    vpgrid:
                        cols 1
                        yinitial 1.0

                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        transclude

                else:

                    transclude

    use navigation

    textbutton _("Return"):
        style "return_button"

        action Return()


style music_menu_outer_frame is empty
style music_menu_navigation_frame is empty
style music_menu_content_frame is empty
style music_menu_viewport is gui_viewport
style music_menu_side is gui_side
style music_menu_scrollbar is gui_vscrollbar

style music_menu_label is gui_label
style music_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

style music_menu_outer_frame:
    bottom_padding 30
    top_padding 120

    background "gui/overlay/game_menu.png"

style music_menu_navigation_frame:
    xsize 280
    yfill True

style music_menu_content_frame:
    left_margin 40
    right_margin 20
    top_margin 10

style music_menu_viewport:
    xsize 920

style music_menu_vscrollbar:
    unscrollable gui.unscrollable

style music_menu_side:
    spacing 10

style music_menu_label:
    xpos 50
    ysize 120

style music_menu_label_text:
    size gui.title_text_size
    color gui.accent_color
    yalign 0.5

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -30
    
init python:

    mr = MusicRoom(channel='music', fadeout=1.0, fadein=0.0, loop=True, single_track=True, shuffle=False, stop_action=None)

    mr.add("music/ui/Anguish.mp3", always_unlocked=True)
    mr.add("music/Dark Times.mp3", always_unlocked=True)

  
screen music_room:

    tag menu
    
    use music_menu(_("Music Room"), scroll="viewport"):
        textbutton "Anguish" action mr.Play("music/ui/Anguish.mp3")
        textbutton "Dark Times" action mr.Play("music/Dark Times.mp3")

        null height 20

        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()
        textbutton "Pause" action PauseAudio("music", value="toggle") ## Causes major lag if inside a frame

Adding gui.mr_menu_background beneath the use screen argument, only replaced the image in the frames borders and did not replace the background. It pushed all text below it as well.

I read through the documentation, but, frankly... its useless.

Game and Main Menu Background Images
The images used by the GUI can be found in the game/gui directory, which can be opened by choosing "Open Directory: gui" from the launcher. The relevant files are:

gui/main_menu.png
A file that contains an image that is used in the background of all screens of the main menu.
gui/game_menu.png
A file that contains an image that is used in the background of all screens of the game menu.

Overlay Images
There are also a pair of overlay images. These are used to darken or lighten the background image to make buttons and other user interface components more readable. These images are in the overlay directory:

gui/overlay/main_menu.png
The overlay used by the main menu screen.
gui/overlay/game_menu.png
The overlay used by game-menu-like screens, including load, save, preferences, about, help, etc. This overlay is selected by the screen in question, and is used even when at the main menu.
gui/overlay/confirm.png
The overlay used in the confirm screen to darken the background.

Well that explains a lot that I didn't already figure out.

Total GUI Replacement
Advanced creators can replace some or all of screens.rpy in its entirely. When doing so, some or all of the code in gui.rpy may become redundant. It's probably a good idea to call gui.init() to reset styles - but after that, a creator can do whatever they want. It usually makes sense to include some or all of the special screens, to make sure players can have access to all the functionality Ren'Py provides.

Okay... And how exactly does one learn how to do this?
file:///C:/Program%20Files%20(x86)/renpy/renpy-6.99.11-sdk/doc/screen_special.html#screen-special
Oh, nice, no wait, this is for the old GUI. I already know how to do this. It doesn't work with the new GUI.


Any help? I'm pulling my hair out over something that seems like it should be very basic.
All I want is to learn how to make a game menu screen (in the new GUI), that doesn't use the main menu image, but instead - it's own. I can't wrap my head around it.
I figured it out in the old GUI and was having a blast animating things, defining functions, etc. But the new GUI is just a headache.

E: I found a cheap and dirty solution.

Code: Select all

use navigation
    add "gui/mr.png"

Then define frames etc.
It's not what I wanted, but at least it works.

[Divona]

It look like you're over thinking thing. It look like you just copy a whole code from "screen game_menu()" and try to make your own screen from that, instead of working it like Lego block. If you're using screen menus that come with default new project, you can simply add or replace background in "screen game_menu()":

Code: Select all

screen game_menu(title, scroll=None):

    style_prefix "game_menu"

    if main_menu:
        add gui_main_menu_background
    else:
        ## Make an edit here to change game_menu background
        add "my_new_background.png"

Or just go into the "/game/ui/" directory and replace "game_menu.png" with your own image.

If you want more flexible in changing background for each menu screen, then just delete the "else" lines:

Code: Select all

screen game_menu(title, scroll=None):

    style_prefix "game_menu"

    if main_menu:
        add gui_main_menu_background

Then, in your own screen just use "add" before "use game_menu( ... )" to add your own background image:

Code: Select all

screen music_room():
    
    tag menu

    add "music_room_background.png"

    use game_menu(_("Music Room"), scroll="viewport"):
        . . .

This way, background image in "game_menu" won't draw on top of your own background image you just add. The game_menu here is reusable screen. If you don't want to use Ren'Py default game menu, you could just get rid of it and code your own.

Another way is to allow passed of background image into game menu itself:

Code: Select all

screen game_menu(title, scroll=None, custom_background=None):

    style prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        if custom_background != None:
            add custom_background
        else:
            add gui.game_menu_background

    . . .

And in your own screen:

Code: Select all

screen music_room():

    tag menu

    use game_menu(_("Music Room"), scroll="viewport", custom_background="music_room_background.png")
        . . .

I'm reading through your post, and confusing on what do you want to achieve exactly. It read like frustrated rant instead of questions. If you could help summary it all down into list I could help answer each steps.

Meanwhile, I suggest you read through Screens and Screen Language to learn more on how to making your own screen.

[Imperf3kt]

Ha ha, sorry. I really should jump off the computer for ten minutes before posting questions.

I'll reword it, though I think you may have already covered it.

In the simplest terms, I wish to keep everything as it is in the default 'new project' and additionally, include a custom background, per additional menu I added.

The last thing I managed to do (by writing it from scratch) was exactly what I wanted, but it layered over the navigation, darkening the left side.

I'll sleep on it and try your suggestions tomorrow.
The new GUI will just take some getting used to.

[Divona]

The last thing I managed to do (by writing it from scratch) was exactly what I wanted, but it layered over the navigation, darkening the left side.

The code are read from top to bottom, and draw stacking up. The reason what you wrote layered over the navigation could be because you write them after "use navigation".

This will make background image layer on top of navigation:

Code: Select all

use navigation

add "background_image.png"

This will make background image layer behind navigation:

Code: Select all

add "background_image.png"

use navigation

[Imperf3kt]

I thought of that.
I used this (last night)

Code: Select all

init python:

    mr = MusicRoom(channel='music', fadeout=1.0, fadein=0.0, loop=True, single_track=True, shuffle=False, stop_action=None)

    mr.add("music/ui/Anguish.mp3", always_unlocked=True)
    mr.add("music/Dark Times.mp3", always_unlocked=True)


screen music_room:

    tag menu
    add "gui/mr.png"
    use navigation
        
    style_prefix "muro"
    
    frame:
        style "game_menu_outer_frame"

        hbox:

            # Reserve space for the navigation section.
            frame:
                style "game_menu_navigation_frame"

            frame:
                style "game_menu_content_frame"
                
                vbox:
                    textbutton "Anguish" action mr.Play("music/ui/Anguish.mp3")
                    textbutton "Dark Times" action mr.Play("music/Dark Times.mp3")

                    null height 20

                    textbutton "Next" action mr.Next()
                    textbutton "Previous" action mr.Previous()
                    textbutton "Pause" action PauseAudio("music", value="toggle") ## Causes major lag if inside a frame


style muro_label is gui_label
style muro_label_text is gui_label_text
style muro_text is gui_text

style muro_label_text:
    size gui.label_text_size

and the result was this:

using this image:
http://puu.sh/t5XJV/fba71b320e.png

If I put anything at all in the left half, it covers the navigation - yes, including blank alpha.

I tried all the suggestions you made, but they didn't work either.

I just get errors.

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/screens.rpy", line 1495, in execute
    screen music_room:
  File "game/screens.rpy", line 1495, in execute
    screen music_room:
  File "game/screens.rpy", line 1498, in execute
    use game_menu(_("Music Room"), scroll="viewport", custom_background="gui/mr.png")
Exception: Unknown keyword arguments: custom_background

-- Full Traceback ------------------------------------------------------------

Full traceback:
  File "renpy/common/_layout/screen_main_menu.rpym", line 28, in script
    python hide:
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\ast.py", line 805, in execute
    renpy.python.py_exec_bytecode(self.code.bytecode, self.hide, store=self.store)
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\python.py", line 1641, in py_exec_bytecode
    exec bytecode in globals, locals
  File "renpy/common/_layout/screen_main_menu.rpym", line 30, in <module>
    ui.interact()
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\ui.py", line 278, in interact
    rv = renpy.game.interface.interact(roll_forward=roll_forward, **kwargs)
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\core.py", line 2508, in interact
    scene_lists.replace_transient()
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\core.py", line 795, in replace_transient
    self.remove(layer, tag)
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\core.py", line 1082, in remove
    self.hide_or_replace(layer, remove_index, "hide")
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\core.py", line 1006, in hide_or_replace
    d = oldsle.displayable._hide(now - st, now - at, prefix)
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\screen.py", line 438, in _hide
    self.update()
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\display\screen.py", line 573, in update
    self.screen.function(**self.scope)
  File "game/screens.rpy", line 1495, in execute
    screen music_room:
  File "game/screens.rpy", line 1495, in execute
    screen music_room:
  File "game/screens.rpy", line 1498, in execute
    use game_menu(_("Music Room"), scroll="viewport", custom_background="gui/mr.png")
  File "C:\Program Files (x86)\renpy\renpy-6.99.11-sdk\renpy\ast.py", line 136, in apply
    raise Exception("Unknown keyword arguments: %s" % ( ", ".join(values.keys())))
Exception: Unknown keyword arguments: custom_background

Windows-7-6.1.7601-SP1
Ren'Py 6.99.11.1749
unnamed project 1.0

[Divona]

You get that error because you haven't change:

Code: Select all

screen game_menu(title, scroll=None):

    style prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background

To:

Code: Select all

screen game_menu(title, scroll=None, custom_background=None):

    style prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        if custom_background != None:
            add custom_background
        else:
            add gui.game_menu_background

To get rid of game menu overlay (yes, that blank alpha), remove the following line from "style game_menu_outer_frame:".

Code: Select all

background "gui/overlay/game_menu.png"

If you're planing to use the existing game menu and navigator then, I suggest you don't abandon "use game_menu". It's there as a whole package, unless if you want to make all screens from scratch.

With the "screen game_menu" are edited like the code above, here is the code for "screen music_room":

Code: Select all

screen music_room():

  tag menu

  style_prefix "muro"

  use game_menu(_("Music Room"), scroll="viewport", custom_background="gui/mr.png"):
      vbox:
        textbutton "Anguish" action mr.Play("music/ui/Anguish.mp3")
        textbutton "Dark Times" action mr.Play("music/Dark Times.mp3")

        null height 20

        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()
        textbutton "Pause" PauseAudio("music", value="toggle")

style moru_label is gui_label
style moru_label_text is gui_label_text
style moru_text is gui_text

style moru_label_text:
    size gui.label_text_size

[Imperf3kt]

Ah, I see what I did wrong. I missed this part
screen game_menu(title, scroll=None, custom_background=None):
All I had was
screen game_menu(title, scroll=None):

However, when I change it to

Code: Select all

screen game_menu(title, scroll=None, custom_background=None):

    style prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        if custom_background != None:
            add custom_background
        else:
            add gui.game_menu_background

    style_prefix "game_menu"

I get the following:

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 431: expected a keyword argument or end of line.
    style prefix "game_menu"
                 ^

Ren'Py Version: Ren'Py 6.99.11.1749

Using the code you wrote at the end, I get

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 431: expected a keyword argument or end of line.
    style prefix "game_menu"
                 ^

File "game/screens.rpy", line 1511: u'PauseAudio' is not a keyword argument or valid child for the textbutton statement.
    textbutton "Pause" PauseAudio("music", value="toggle")
                                 ^

Ren'Py Version: Ren'Py 6.99.11.1749

I'm really confused about all of this, and now I don't even know what I've done. I didn't really make a backup, so I'm gonna have to redo it from the start.

Thanks for trying to help though.
Here's the full screens.rpy

screens.rpy

Current screens.rpy

(40.11 KiB) Downloaded 40 times

[Divona]

Sorry, there were typo in my code. It was written around 4 AM in the morning after all.

In "screen game_menu", change:

Code: Select all

style prefix "game_menu"

To:

Code: Select all

style_prefix "game_menu"

And remove the duplicate you have added after if/else.

In "screen music_room", I forgot to add "action" in textbutton. Here how it should be:

Code: Select all

textbutton "Pause" action PauseAudio("music", value="toggle")

Those traceback error report you've seen/posted are pointing to all those mistake, though.

Code: Select all

File "game/screens.rpy", line 431: expected a keyword argument or end of line.
    style prefix "game_menu"
                 ^

File "game/screens.rpy", line 1511: u'PauseAudio' is not a keyword argument or valid child for the textbutton statement.
    textbutton "Pause" PauseAudio("music", value="toggle")

[Imperf3kt]

-user gives up-
I'm going back to the old GUI.

The new GUI has wasted three days. I could have had my menu and all related functions finished by now.
Should have just stuck with vn-canvas.

[Imperf3kt]

After calming down from earlier, I've gone back to this and further tried to get it to work.

Before I go any further, I fixed the spelling errors pointed out in the previous post, but it didn't fix anything. The game still fails to do as expected.

So I really looked at the menu and how it works. I eventually discovered that what I want to change, is not the background, but the overlay.
I ended up trying the following:

Code: Select all

screen game_menu(title, scroll=None):

    if main_menu:
        frame:
            style "game_menu_outer_frame"
    if 'Music Room':
        frame:
            style "music_room_outer_frame"

            hbox:

                # Reserve space for the navigation section.
                frame:
                    style "game_menu_navigation_frame"

                frame:
                    style "game_menu_content_frame"

                    if scroll == "viewport":

                        viewport:
                            scrollbars "vertical"
                            mousewheel True
                            draggable True

                            side_yfill True

                            vbox:
                                transclude

                    elif scroll == "vpgrid":

                        vpgrid:
                            cols 1
                            yinitial 1.0

                            scrollbars "vertical"
                            mousewheel True
                            draggable True

                            side_yfill True

                            transclude

                    else:

                        transclude

    use navigation

    textbutton _("Return"):
        style "return_button"

        action Return()

    label title

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")


style game_menu_outer_frame is empty
style music_room_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

style game_menu_outer_frame:
    bottom_padding 30
    top_padding 120

    background "gui/overlay/game_menu.png"
style music_room_outer_frame:
    bottom_padding 30
    top_padding 120
    
    background "gui/overlay/mr.png"

style game_menu_navigation_frame:
    xsize 280
    yfill True

style game_menu_content_frame:
    left_margin 40
    right_margin 20
    top_margin 10

style game_menu_viewport:
    xsize 920

style game_menu_vscrollbar:
    unscrollable gui.unscrollable

style game_menu_side:
    spacing 10

style game_menu_label:
    xpos 50
    ysize 120

style game_menu_label_text:
    size gui.title_text_size
    color gui.accent_color
    yalign 0.5

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -30

Code: Select all

screen music_room:

    tag menu
    use game_menu(_("Music Room"), scroll="viewport"):
        
        style_prefix "muro"
        textbutton "Anguish" action mr.Play("music/ui/Anguish.mp3")
        textbutton "Dark Times" action mr.Play("music/Dark Times.mp3")
            
        null height 20
            
        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()
        textbutton "Pause" action PauseAudio("music", value="toggle") ## Causes major lag if inside a frame


style muro_label is gui_label
style muro_label_text is gui_label_text
style muro_text is gui_text

style muro_label_text:
    size gui.label_text_size

This works almost as intended, except it replaces the image for EVERY menu other than main menu.
I initially had:

Code: Select all

    style_prefix "game_menu"

        frame:
            if main_menu:
                style "game_menu_outer_frame"
            if 'Music Room':
                style "music_room_outer_frame"

But this didn't seem to work right, so I moved it up a level as shown in the first code.

I'm really not understanding this, does anybody have any clue why this isn't working as intended?

[Divona]

That's because 'Music Room' is a string. It doesn't indicating anything, therefore it just do nothing. You should use "renpy.get_screen()" to check if "music_room" screen is showing instead.

Code: Select all

    style_prefix "game_menu"

    frame:
        if main_menu:
            style "game_menu_outer_frame"
        elif renpy.get_screen("music_room"):
            style "music_room_outer_frame"

[Imperf3kt]

That's because 'Music Room' is a string. It doesn't indicating anything, therefore it just do nothing. You should use "renpy.get_screen()" to check if "music_room" screen is showing instead.

Code: Select all

    style_prefix "game_menu"

    frame:
        if main_menu:
            style "game_menu_outer_frame"
        elif renpy.get_screen("music_room"):
            style "music_room_outer_frame"

From what I can see in the developer tools, the image is being loaded, but it's just not displaying.
With the renpy.get_screen, this is the result:

And with the code in my previous post, the result is:

(Image is just something random I drew, it holds no meaning to the project at all)
The problem is, that image shows on everything except the main menu:

According to the code, it should only display on "music_room", shouldn't it?

[Divona]

The problem is, that image shows on everything except the main menu:

According to the code, it should only display on "music_room", shouldn't it?

No, according to the code:

Code: Select all

if main_menu:
    # if this is main menu, then show game menu overlay

if 'Music Room':
    # if string 'Music Room' is true, then show music room overlay
    # this has nothing to do if 'screen music_room()' is show or not
    # therefore, it show on every screens except main menu.

[Imperf3kt]

Finally managed to get it to work.

Code: Select all

screen game_menu(title, scroll=None):

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background

    style_prefix "game_menu"

    if main_menu:
        frame:
            style "game_menu_outer_frame"
    if renpy.get_screen("music_room"):
        frame:
            style "music_room_outer_frame"

Thank you for all your help. I apologise about the lengthy and exhaustive discussion, but this has helped immensely.
The comments you made in that last code snippet were extremely helpful.