Pop-up box

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
User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Pop-up box

#1 Post by zorexx » Mon Sep 12, 2011 1:57 am

Hi everyone,

I'll get straight to the point, is it possible to create pop-up boxes in Ren'Py, whereby when it's displayed, everything on screen (behind it) will still be displayed, but seize to receive any events until the pop-up box is dismissed.

For example, a quit prompt that appears as a small prompt box, when it appears (when I click close), any displayables or ui behind it will still be displayed (basically no layers will be hidden/cleared), but will not respond to any mouse clicks or keyboard keys until the quit prompt box is dismissed.

As far as I know, if I create the prompt in a new context, every layer except master layer will be cleared, which is not what I want. If I create those menus in the master layer, it will be displayed when call the prompt in a new context, but also respond to my mouse clicks.

So, is it possible to make such pop-up box in Ren'Py?

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Pop-up box

#2 Post by Aleema » Mon Sep 12, 2011 1:08 pm

Yes, screens can have "modal" set to True, which will make them display on top of everything but you can't click it. You simply need to design your screen to look like a popup window or whatever and then call it. If you're unfamiliar with screen language, then you should brush up on it here.

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#3 Post by zorexx » Mon Sep 12, 2011 2:30 pm

Cool, didn't notice there's something like "modal" available.
Thank you very much, that solves my problem, except that any layers besides "master" are still cleared when the screen is shown. (I'm using ui.gamemenus to call my quit prompt on quit)

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Pop-up box

#4 Post by Aleema » Mon Sep 12, 2011 4:17 pm

Game menus are always special since they need to replace everything on screen, so I don't doubt that using that will cause problems for you. I suggest upgrading whatever function you have to call your quit prompt to purely screen language so you can take advantage of its varied actions specifically designed to work with screens.

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#5 Post by zorexx » Mon Sep 12, 2011 4:33 pm

Yes, the quit prompt is already in screen language. I'm calling the quit prompt like this:

Code: Select all

config.quit_action = ui.gamemenus("QuitPrompt")
where QuitPrompt is the quit prompt written in screen language (screen QuitPrompt:)

Is there any better way to do this so that other layers won't be cleared?

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Pop-up box

#6 Post by Soraminako » Wed Sep 14, 2011 3:53 pm

Sorry to jump into the thread too, but I had a question concerning that code.
I can't seem to wrap my head around the screens language so I stare at that without understanding, but I was wondering, would that be the way to make a custom-looking quit menu? And where would I go to customize that and how?

I basically want an cute window (probably a graphic I'll make) with buttons atop it to show up when the person tries to close the window. There will be the usual "are you sure you want to quit" question and yes/cancel options.

I've been trying to find out how to do it but SL is still like ancient Greek for me. ^^;
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
Aleema
Lemma-Class Veteran
Posts: 2677
Joined: Fri May 23, 2008 2:11 pm
Organization: happyB
Tumblr: happybackwards
Contact:

Re: Pop-up box

#7 Post by Aleema » Wed Sep 14, 2011 4:49 pm

@zorexx: I played with the code and could not get it to function like you want. =\ I'm not sure how to get it like you want other than to maybe edit the default prompt and make the BG transparent? That *used* to show everything under it, at least.

@Soraminako: No, I don't recommend that way if you just want to change how it looks, not how it behaves. What you should do is go to your screens.rpy file and find the Yes/No prompt area. That's the screen you should edit to change the quit prompt. It's the template for all prompts. Or you could go the imagemap route (I really don't recommend this, but if you do it, then delete the Yes/No prompt from screens.rpy).

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#8 Post by zorexx » Wed Sep 14, 2011 10:29 pm

@Soraminako:
No prob. Like Aleema said, you can just edit the yesno_prompt screen in screens.rpy.
To change the background, just replace

Code: Select all

style "gm_root"
with

Code: Select all

background <your background image>
Change everything else to your liking, or leave them as is.
If you want to use an image button, just replace

Code: Select all

textbutton _("Yes") action yes_action
textbutton _("No") action no_action
with

Code: Select all

imagebutton:
    idle  <idle image for Yes>
    hover <hover image for Yes>
    action yes_action
        
imagebutton:
    idle  <idle image for No>
    hover <hover image for No>
    action no_action
Nice avatar btw.


@Aleema:
Nope, the default prompt works the same way, I removed the window: style "gm_root" part from the template to remove the background, just to see if it really shows everything behind, and found that it works the same way as mine did, everything except master layer is still hidden, basically, RenPy creates a new context for displaying prompts like these (so that it doesn't mess with the game), and when it creates a new context, everything aside from the master layer is hidden. :(

Code: Select all

screen yesno_prompt:

    modal True

    frame:
        style_group "yesno_prompt"

        xfill True
        xmargin 50
        ypadding 25
        yalign .25

        vbox:
            xfill True
            spacing 25

            text _(message):
                text_align 0.5
                xalign 0.5

            hbox:
                spacing 100
                xalign .5
                textbutton _("Yes") action yes_action
                textbutton _("No") action no_action

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Pop-up box

#9 Post by Soraminako » Fri Sep 16, 2011 12:19 am

zorexx wrote:@Soraminako:
No prob. Like Aleema said, you can just edit the yesno_prompt screen in screens.rpy.
To change the background, just replace [...]
Thank you! I'm missing something however, because when I did those replacements, the final result became a bit weird. ^^;
menugonecrazy.jpg
Please don't mind the ugly placeholder menu images I'm using, it was just for testing.
The large pink rectangle on the top left is the actual background for the menu. Should it be 800x600 with most of it transparent and only the center with a menu instead if I want a small-sized menu like that? Or is it possible to make it centered regardless of the image size?
The smaller two rectangles are the "yes/no" buttons, but for some reason the grey box behind (from the original theme) is not gone. :?

So I'm wondering what else is missing being edited so that I don't have that ugly box there, and so that the menu image is centered?

Thank you in advance, and thank you again for the help with the code!! :D
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#10 Post by zorexx » Fri Sep 16, 2011 12:50 am

I suppose what you want is removing the background and making your "background for the menu" the frame image, if that's what you want, try this:
Remove the whole window part (the window and background line).
Then change

Code: Select all

frame:
    style_group "yesno"
        
    xfill True
    xmargin .05
    ypos .1
    yanchor 0
    ypadding .05
to

Code: Select all

frame:
    style_group "yesno"

    align (0.5, 0.5)
    maximum (width, height)
        
    background <your background image>
where width and height are the width and height of your menu.
Your menu don't have to have transparent borders this way.

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Pop-up box

#11 Post by Soraminako » Fri Sep 16, 2011 2:26 am

zorexx wrote:I suppose what you want is removing the background and making your "background for the menu" the frame image, if that's what you want, try this:
Remove the whole window part (the window and background line).
Then change
[...]
Thank you! It's better now, and I think we're almost there! :D
The only problem is that now I have two of my menu, one in the wrong spot and one closer to the center. But at least the grey box is gone, so that's good!! :D
menugonecrazy.jpg
If I remove the "background "yesnomenu.png"" part from under "window", it crashes saying window cannot be empty. But if I leave it there, it shows up ugly in the top left:

Code: Select all

  screen yesno_prompt:
    modal True
    window:        
        background "yesnomenu.png" 

    frame:
        style_group "yesno"
        align (0.5, 0.5)
        maximum (350, 250)       
        background "yesnomenu.png" 

        has vbox:
            xalign .5
            yalign .5
            spacing 30
            
        label _(message):
            xalign 0.5
I'm guessing I should do something to the window area, but I'm not sure how to make the menu centered. ^^; It should already be, so I can't figure out why it isn't. Could it be because my game is 640 x 480 instead of 800 x 600? :?

Thank you so much for your help, and sorry for my noobness. ^^;
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#12 Post by zorexx » Fri Sep 16, 2011 2:43 am

Remove the whole window part, like this:

Code: Select all

  screen yesno_prompt:
    modal True

    frame:
        style_group "yesno"
        ...
See if this works, it should be centered.

Edit:
Sorry, my bad, I was testing with Solid just now, I just tested it out with image and found that you need this line:

Code: Select all

minimum (350, 250)
I used maximum because Solid takes up the whole screen by default, if you're using an image with correct size already, you can replace maximum with minimum (to allow the align to calculate correctly).
You can put both too, using maximum to give some sort of padding effect.

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Pop-up box

#13 Post by Soraminako » Fri Sep 16, 2011 3:54 am

zorexx wrote:Remove the whole window part, like this:
[...]
I used maximum because Solid takes up the whole screen by default, if you're using an image with correct size already, you can replace maximum with minimum (to allow the align to calculate correctly).
You can put both too, using maximum to give some sort of padding effect.
Awesome! It works perfectly now, thank you so much! :D :D :D

So if I want padding for some text in the yes/no prompt or something like that, I specify a maximum and a minimum?
I'm not sure I understand that part but in any case the menu works now so I'm ecstatic!
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

User avatar
zorexx
Newbie
Posts: 23
Joined: Thu Jun 23, 2011 7:15 am
Contact:

Re: Pop-up box

#14 Post by zorexx » Fri Sep 16, 2011 4:02 am

No prob, good to hear it works. I'm not too sure about the maximum part, but I guess in this case it sets the maximum space available to the contents. I notice that the hbox isn't affected though. I'll see if there's a better alternative. ;)

User avatar
Soraminako
Veteran
Posts: 277
Joined: Sun Sep 04, 2011 1:36 am
Projects: A thingie without a title. With messy code.
Contact:

Re: Pop-up box

#15 Post by Soraminako » Fri Sep 16, 2011 4:12 am

Thank you again for all the help! :D
(I drew my avatar especially to express the scary feeling I get from the code as I type it... XD)

Post Reply

Who is online

Users browsing this forum: amekoi