Choice Menu Background and Textbox [SOLVED]

[BitticusRex]

Hello!

I've been searching for hours and hours now, and I haven't been able to figure out exactly how to customize the choices menu like I want it.

My designer has made a mockup of what he wants the "choices" menu to look like:



I've gotten the choice buttons to appear correctly, but there are a few things I'm having trouble with.

First of all, I can't for the life of me figure out how to overlay the "background" image for the choices screen. Basically I have that opaque .png background I'd like to overlay over the screen whenever a choice is being made.

Additionally, is there a way to make the text box remain during the choices screen as well? Preferably "underneath" the overlay, while the choice buttons should be on top of the overlay. I hope this makes sense.

Thanks in advance for your assistance!!

[Divona]

It's as simple as add the overlay to "screen choice". To have dialogue show during choice menu, add such dialogue as the first line inside "menu".

screens.rpy

Code: Select all

transform fade(start, end, duration):
    alpha start
    linear duration alpha end

screen choice(items):
    style_prefix "choice"

    # Show overlay in choice menu.
    on "show" action Function(renpy.show, "choice_overlay.png", at_list=[fade(0, 1, 0.5)])
    on "hide" action Function(renpy.show, "choice_overlay.png", at_list=[fade(1, 0, 0.5)])

    # The rest of default code
    . . .

script.rpy

Code: Select all

grant = Character("Grant")

label start:

    "I have to make this decision. Now or never."

    menu:
        grant "What should I be...?"

        "...be a cop":
            jump be_a_cop

        "...be a robber"
            jump be_a_robber

label be_a_cop:

    "I want to be a cop!"
    
label be_a_robber:

    "I want to be a robber!"

[BitticusRex]

So this seems to do the trick, but I've come across a few more problems with this.

1. No matter what I do, it doesn't seem to recognize the file that I'm using for my overlay. It just comes up with the generic anime girl silhouette. I've tried using custom filenames and I've tried using the same one you did and adjusting my file name. The image is located in the same directory as all my other image assets and everything else works fine. It just doesn't want to recognize the overlay.

2. The overlay image still seems to be appearing "beneath" the text box. Since I can only see the silhouette, this may change once I can figure out how to get Ren'py to recognize the image, but I'd like the layers to be Buttons > Overlay > Text Box if I can manage that.

3. Thanks for the assistance with getting the text box showing through the menu's. Glad I got this in the project's earlier stages, as there is only about 30-40 menus for me to edit now, which helps quite a bit.

Here's an update as to what my progress is after adding the code you suggested.

[Divona]

1. No matter what I do, it doesn't seem to recognize the file that I'm using for my overlay. It just comes up with the generic anime girl silhouette. I've tried using custom filenames and I've tried using the same one you did and adjusting my file name. The image is located in the same directory as all my other image assets and everything else works fine. It just doesn't want to recognize the overlay.

Sorry, my bad. "renpy.show" accept displayable image instead of a direct path to the image file. So you will have to define the Image somewhere before hand.

Code: Select all

image choice_overlay = "choice_overlay.png"

2. The overlay image still seems to be appearing "beneath" the text box. Since I can only see the silhouette, this may change once I can figure out how to get Ren'py to recognize the image, but I'd like the layers to be Buttons > Overlay > Text Box if I can manage that.

We will have to rearrange the layer for say screen in that case, as both say and choice screens are showing on the same layer "screens". "zorder" doesn't seem to work. First, we have to define all the layers to use in Ren'Py. Then set "say" screen to display on a layer below "choice_overlay" layer that we going to use to show the background overlay of choice screen.

options.rpy

Code: Select all

define config.layers = [ "master", "transient", "say", "choice_overlay", "screens", "overlay" ]
define config.say_layer = "say"

Now, display the background overlay in "choice_overlay".

screens.rpy

Code: Select all

screen choice(items):

    . . .

    # Show overlay in choice menu.
    on "show" action Function(renpy.show, "choice_overlay", at_list=[fade(0, 1, 0.5)], layer="choice_overlay")
    on "hide" action Function(renpy.show, "choice_overlay", at_list=[fade(1, 0, 0.5)], layer="choice_overlay")

This should do the trick, but since we separate the say screen from it usual layer, I'm not sure what can of worm that we open. So bug hunting and adjusting other layers accordingly when the time come.

[BitticusRex]

So all this code worked perfectly for getting the choice menus to look just right.

Thank you!!

However, there is a new problem that has cropped up after adding the code.

Anytime the scene changes using the "scene" command, I get an exception has occured.

Code: Select all

I'm sorry, but an uncaught exception occurred.

While running game code:
  File "game/script.rpy", line 119, in script
    with fade
Exception: Parameter 'new_widget' is not known by ATL Transform.

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

Full traceback:
  File "game/script.rpy", line 119, in script
    with fade
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\ast.py", line 1275, in execute
    renpy.exports.with_statement(trans, paired)
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\exports.py", line 1381, in with_statement
    return renpy.game.interface.do_with(trans, paired, clear=clear)
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2096, in do_with
    clear=clear)
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2526, in interact
    repeat, rv = self.interact_core(preloads=preloads, trans_pause=trans_pause, **kwargs)
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\display\core.py", line 2746, in interact_core
    new_widget=layers_root)
  File "C:\Users\XBit1\Desktop\Renpy\renpy-6.99.12.4-sdk\renpy\atl.py", line 413, in __call__
    raise Exception('Parameter %r is not known by ATL Transform.' % k)
Exception: Parameter 'new_widget' is not known by ATL Transform.

Windows-8-6.2.9200
Ren'Py 6.99.12.4.2187
project aego 0.0

This can be ignored, but it seems to come up every time the scene changes and the "with fade" command is used. If I change it to "with dissolve" then there is no exception.

Did this code somehow break the normal "fade" command? This exception was not occurring at all until the code was adjusted to customize the choice menu.

Thanks for your help!

EDIT: Did a bit more testing, and I believe this is being caused by the following code, as when I use hashtags to comment that code out, the fades work as normal (however the menus stop working altogether without this code.

Code: Select all

    transform fade(start, end, duration):
        alpha start
        linear duration alpha end

I also tried adding a start, end, and duration to a few of my "fade" commands but that just caused a full crash.

[Divona]

It seems like the name fade is duplicated with pre-existing one. Just change the transform name to another one.

Code: Select all

    transform fade_overlay(start, end, duration):
        alpha start
        linear duration alpha end

And

Code: Select all

    on "show" action Function(renpy.show, "choice_overlay", at_list=[fade_overlay(0, 1, 0.5)], layer="choice_overlay")
    on "hide" action Function(renpy.show, "choice_overlay", at_list=[fade_overlay(1, 0, 0.5)], layer="choice_overlay")

[BitticusRex]

This worked like a charm!

Thank you so much for all your help.

I haven't seen anything acting strange as a result of separating the say screen from it's usual layer, but I will stay vigilant.

Menus are working perfectly now.

[duck-and-wolf]

So I followed the above instructions, and now when my choice screen appears, nothing different happens, but when you do make a choice, the overlay image appears immediately and starts to fade out. So it looks like

Code: Select all

on "hide" action Function(renpy.show, "choice_overlay", at_list=[choice_fade(1, 0, 20)])

works as intended, but

Code: Select all

on "show" action Function(renpy.show, "choice_overlay", at_list=[choice_fade(0, 1, 20)])

ain't doin' nothin'. (I jacked up the duration just to be sure)

Has something changed in the past two years since this thread was originally started?

[duck-and-wolf]

Also, just to be extra difficult, is it possible for the next dialogue box to not fade in until after this overlay image is done fading away?

Like, for instance, when you transition between scenes, the game waits for the new scene background image to fade in before then fading in the dialogue box and continuing play, but with the above code that is working, the 'on "hide" action', the fade-out starts simultaneously with the next dialogue box fading in, and when I jack up the duration to something ridiculous, like 20 seconds as shown above, that fade-out takes place while the rest of the game continues on. Is it possible to not return control of the game until after the fade in or out has occurred?

[hell_oh_world]

Also, just to be extra difficult, is it possible for the next dialogue box to not fade in until after this overlay image is done fading away?

Like, for instance, when you transition between scenes, the game waits for the new scene background image to fade in before then fading in the dialogue box and continuing play, but with the above code that is working, the 'on "hide" action', the fade-out starts simultaneously with the next dialogue box fading in, and when I jack up the duration to something ridiculous, like 20 seconds as shown above, that fade-out takes place while the rest of the game continues on. Is it possible to not return control of the game until after the fade in or out has occurred?

You can edit these lines in options.rpy:
These will control the transition that will occur after the scene statement is finished. Set the seconds to longer duration, that is for the delay before appearing after the scene.

Code: Select all

## Transitions used to show and hide the dialogue window

define config.window_show_transition = Dissolve(.2)
define config.window_hide_transition = Dissolve(.2)

[duck-and-wolf]

That's awesome, thank you so much! (I don't suppose you have any idea about the solution for the problem in my post above that one, do you? )

[hell_oh_world]

So I followed the above instructions, and now when my choice screen appears, nothing different happens, but when you do make a choice, the overlay image appears immediately and starts to fade out. So it looks like

Code: Select all

on "hide" action Function(renpy.show, "choice_overlay", at_list=[choice_fade(1, 0, 20)])

works as intended, but

Code: Select all

on "show" action Function(renpy.show, "choice_overlay", at_list=[choice_fade(0, 1, 20)])

ain't doin' nothin'. (I jacked up the duration just to be sure)

Has something changed in the past two years since this thread was originally started?

Try this one instead:

Code: Select all

on "show" action [Show("choice_overlay"), With(dissolve)]

I don't know if this one will work because as far as I know the choice screen is not shown through the use of show statement so on "show" actions or any atl events with regards to "show" will probably not work. I'm maybe wrong but that is based on what I experienced when I tried to give my choice screen a transition or transition through atl.

[duck-and-wolf]

So now I'm reasonably certain the problem is due to the fact that the "show" event is not occurring for the choice menu, because according to the docs at https://www.renpy.org/doc/html/screens.html regarding the 'on' statement:

The on statement allows the screen to execute an action when an event occurs.

So, just screwing around, I changed the overlay reveal code to read:

Code: Select all

screen choice(items):
    style_prefix "choice"

    on "show" action Show("choice_overlay")

Again, nothing happened, per usual. But then for poops and giggles, I changed the line to this:

Code: Select all

    on "hide" action Show("choice_overlay")

...just to see what would happen. When I ran the game and got to the first time I made a choice, I got a crash, saying:

Exception: Screen choice_overlay is not known.

So what that seems to indicate is my faulty line of code was never parsed when it was attached to a "show" event. I also tried:

Code: Select all

    on "call" action Function(renpy.show, "choice_overlay", at_list=[choice_fade(0, 1, 0.28)])

...because I saw on that same docs page there's a call_screen() statement, and I thought it was worth a shot. Nothing happened, just like when it was tied to the "show" event, but maybe that's to be expected.

Anyways I'm at a total loss. :/

[duck-and-wolf]

Ha, it looks like you posted while I was writing all that out. Yeah, I think you're right, there doesn't seem to be any "show" event for choice screens. But it seems like there used to be 2 years ago? Why would that have changed?

[duck-and-wolf]

Yeah, I tried your code example, same problem as above: when it was attached to the "show" event, nothing happens, when it's attached to the "hide" event, it crashes with the same error, that Screen is not known, since the "choice_overlay" variable is an image, not a screen. Which really makes it seem like there's no "show" event.