Multiple frames? Boxes? Screens? and managing [SOLVED]

[trooper6]

Hello!

I'm a brand new VN creator and I'm procrastinating on my tenure book...um, I mean, I'm making a short VN in my spare time. I'm adapting a one act play and I'm trying to use it as a way to teach myself ren'py coding before I go all crazy with a longer sort of game. It is a test run, as it were. I've set up the project and entered in all of the text, added some music, and done some basic text manipulation...but right now I'm trying to figure out UI/screen/frame stuff and thought I'd ask for some help.

I was inspired by the base ui layout from Magical Diary.


What do I like about it? That there are 3 separate frames/boxes/windows on the screen (I'm a bit unsure of the differences between those three objects) and for my game, what I'd like to do is have a similar sort of setup...but with some specific interactive needs.

Here is a basic, basic mock-up of what I'm thinking about for my game:


Okay the gray area is the frame/window/box(?) where all the stuff is shown, and the blue box is the text area. I have implemented those two things by adding a bg image to the game and customized the text box (though I haven't put a continue arrow in it...and I might not). So far, so good.

But now I'm trying to figure out how how to add the side frame/window. I don't want it to lay on top of the image frame/window and cover up some of the background image like the say window currently does, I want it to sit next to it, side by side.

In the side frame (a vbox? or a frame with 3 vbox children?) I imagine an analogue clock on the top (I noticed the analogue clock code in the cookbook), 1 or 2 buttons on the bottom, and the menu choices showing up in the middle.

Those buttons on the bottom? I want them to advance the text in the say box. In other words, I don't want the user to be able to click randomly on the screen to advance the text, I want them to either click a continue button (either in the side frame or an arrow in the say box, I don't care which), or to click an interrupt button which will interrupt the slow scrawling text, but upset the speaker who is being interrupted.

I read through the Screen Language section of the Ren'py documentation and it said what happens in a screen cannot have artifacts outside of that screen. Okay. So this probably means that each of these three frames/windows/etc can't be screen objects, right? That is for things like Menu Screen, Game Screen, Save Screen...right? So I will be having one screen--(the game screen? which is defined where exactly?) with three frames? windows? Boxes? What should those objects be? How do I add them to the...um...game menu?? I'm a bit unclear on what the name of the base screen and where it is defined.

And how do I make sure that the menu choices show up in my side frame/window/box not in the image frame/window/box? How to I make sure that the player can only advance the dialogue through the buttons rather than by clicking on the game screen? In the game the player is dealing with an NPC is who talking slowly in order to try and stall the conversation...but the PC needs to get to a meeting and doesn't have lots of time...so the player needs to decide when/how often/if he wants to let the NPC finish his sentences (i.e. wait until the continue button is activated) or push the interrupt button. And I want to be able to track that through button clicks adding to an "Interrupt" variable...which will lead to some different conversations.

How do I have a continue button that is only active when the text has finished being printed? (again, it can be an arrow that shows up in the say box or a button that is enabled/disabled in the side frame).

I've looked through the forums and the tutorial and the documentation, but I'm still not quite sure how to do this...I suspect it is pretty basic, but I'm not just not getting it...especially, in which of the files I'm supposed to define the box/frame/windows...in the screens file? the Options file? the script file? Should each box/frame/window be its own file?

Anyhow, thanks for any help you ren'py masters and mistresses can give!

trooper6

[chewpower]

Hi, trooper6. I'm also new in RenPy but I think I'll give it a shot.

now I'm trying to figure out how how to add the side frame/window.

This can be done with screens. As you might have already read, screens have purpose to display information (text, images, bars, etc) and to allow user to interact with the game. The most basic code of how to create a screen is:

Code: Select all

screen side_frame:
    add "side_frame_img.jpg" xpos 700 ypos 0

label start:
    show screen side_frame

and the screen will be displayed forever until you decide to hide them.

I don't want it to lay on top of the image frame/window and cover up some of the background image like the say window currently does, I want it to sit next to it, side by side.

I'm not sure if this is possible, but if you're worried about the background image being blocked off then you can try to cheat it by customizing the backgound file itself so that there is enough space for the side frame to sit on top of it.

I read through the Screen Language section of the Ren'py documentation and it said what happens in a screen cannot have artifacts outside of that screen. Okay. So this probably means that each of these three frames/windows/etc can't be screen objects, right? That is for things like Menu Screen, Game Screen, Save Screen...right? So I will be having one screen--(the game screen? which is defined where exactly?) with three frames? windows? Boxes? What should those objects be? How do I add them to the...um...game menu?? I'm a bit unclear on what the name of the base screen and where it is defined.

The best way to learn screen, in my personal experience, is by observing how it's done in simpler and working project. For example, if you make a new project, it can be immediately launched even though it only contains "welcome to renpy" text. Just go and see screens.rpy and see how it works. You'll notice how screens are made, customized, and at least have a basic idea of how screen is made of.

One of the lesson I learned is that the quick menu placed in the bottom (tiny text buttons Q.Save, Q.Load, Save, Skip, Auto, Prefs) is actually a screen that is inserted within a say screen. In other words, yes you can make more than one screen and placed them all together in your game. You don't have to know where the "base screen" is defined, you can always just "show" some screens in your code with "show screen screen_name" as I said before.

Next step to learn screen is, of course, to give it a try to code them. Try to make it step-by-step process. For example, first you only want to show the side frame image. Then, you add the analog clock within that screen and see if it works. Then, proceed with another objects (depends on what you need). If you have a difficulty in the process, you can always ask the forum and people here are really generous as long as you describe the problem clearly.

If you're interested of how screen can totally change the look of your game, this is a topic that covers amazing possible implementation using screen http://lemmasoft.renai.us/forums/viewto ... 51&t=14237 (though I myself hadn't been able to read the whole thing)

How do I have a continue button that is only active when the text has finished being printed? (again, it can be an arrow that shows up in the say box or a button that is enabled/disabled in the side frame).

I found this in the cookbook. I haven't tried it yet, though. http://lemmasoft.renai.us/forums/viewtopic.php?p=124280 in "click to continue icon" part

in which of the files I'm supposed to define the box/frame/windows...in the screens file? the Options file? the script file? Should each box/frame/window be its own file?

The screens can be placed in any .rpy file. I haven't tried putting it on options.rpy but it works in screens.rpy, script.rpy, or any .rpy file you create. But some people prefer neat and organized coding though, so it's okay to always put screens in screens.rpy and the rest of .rpy contains other things. In the newly created renpy project, the screens.rpy file contains lots of screens, so they don't have to be in their own file.

I apologize if this doesn't clear things up, but what you're asking covers a lot of things that can't simply be put in easy way. The game you're describing is totally possible, though, so let us know if there's anything the forum can help with

[Alex]

You can change the appearence of all your BGs - http://lemmasoft.renai.us/forums/viewto ... er#p266459

To make click-to-continue buttons you'll need to disable the "dismiss" action of Ren'Py and make a button that will return anything when clicked.

Code: Select all

define e = Character('Eileen', color="#c8ffc8", window_right_margin=90)

image ctc_img = anim.Filmstrip("sakura.png", (20, 20), (2, 1), .30)

screen one:
    textbutton "next" action Return("smth") xalign 1.0 yalign 0.0

init -2 python:
    config.keymap["dismiss"] = None
    
# The game starts here.
label start:

    show screen one
    e "You've created a new Ren'Py game."

    e "Once you add a story, pictures, and music, you can release it to the world!"

    return

also, in screens.rpy

Code: Select all

screen say:

    # Defaults for side_image and two_window
    default side_image = None
    default two_window = False

    # Decide if we want to use the one-window or two-window varaint.
    if not two_window:

        # The one window variant.        
        window:
            id "window"

            has vbox:
                style "say_vbox"
                xfill True               # To be shure that button will be placed at right side of text window

            if who:
                text who id "who"

            text what id "what"
            button:
                background None
                xalign 1.0
                add "ctc_img"
                action Return("smth")

As for menus, you could modify the choice screen the way you need (set the position for menu vbox and also its maximum width to fit your frame).

http://www.renpy.org/wiki/renpy/doc/reference/Keymap
http://www.renpy.org/doc/html/screens.html#button
http://www.renpy.org/doc/html/style.htm ... properties
("sakura.png" from tutorial game)

sakura.png (1.44 KiB) Viewed 10344 times

[trooper6]

So I used the layer manipulation and added a screen to get the game to look how I generally want it to look...but I have a couple more questions about the interaction.

Click to Continue Button:
I have an image of an arrow that I want to be the button that continues the text...but I don't want it to show up until after the slow text has finished printing.
If I make an image button and place it in the say window through options, then it is always there...which means players can click continue to interrupt the slow text. And I don't want that...I want them to have to click the Interrupt button in order to interrupt the text.
If I put it at the end of the text like so:

Code: Select all

b "Why are you in such a rush? {image=ctc}" 

The arrow shows up at the end of the line, after the barber has finished speaking they way I want it to...but then it is only an image and not a button. Is there some way to make a button that shows up only after the text has finished printing? Or to disable the continue button until after the text finishes printing?

My interrupt button:
I have an Interrupt text button in a frame in my control screen. I want clicking the button to do two things:
1) Increase the "interrupts" variable
2) move text forward

I coded this, which moves the text forward:

Code: Select all

            frame:  
                id "lowercframe"
                has vbox
                textbutton "Interrupt" action Return("smth")
                text "No of interrupts: [interrupts]"
                add "bottom small"

But I can't figure out how to make the button click increase a variable. How do I do that?

One last thing! I gave the frame an id...because this is its name right?
So...what I eventually want to have happen is to be able to have conversation menus...but to have them show up in one of the frames not over the entire screen...is that possible?
There is a screen: control. That screen has a frame, id "cframe". That frame has a vbox (currently no id). That vbox has a frame, id "midcframe". So what do I have to say in my script file to add a dialogue menu to that midcframe?

Thanks!

[apricotorange]

Characters have a "callback" argument that you can use to do something fancy when the text finishes displaying; see http://www.renpy.org/wiki/renpy/chs/doc ... aracterchs for some basic documentation.

To make your interrupt button:

Code: Select all

    textbutton "Interrupt" action [SetVariable("interrupts", interrupts + 1), Return("smth")]

The way you conditionally add stuff to screens is just to use an "if" statement.

[trooper6]

Thanks everyone for the help so far, apricotorange my Interrupt button is working excellently!

I'm not getting the callback though.

I've got the function--

Code: Select all

init python:
    def arrow(event, **kwargs):
        if event == "begin" or event == "show":
            is_finished = False
        if event == "slow_done" or event == "end":
            is_finished = True
        #some sort of code that activates a click to continue image button in the say window?

And I've got a character with the callback:

Code: Select all

    $ c = Character('Customer', color="#FF9966", callback=arrow)

But...I don't know what to write in the callback function to make an image button show up that would be clickable and allow the player to move forward.
The interrupt button should probably be disabled when the continue buttoned is enabled and vice versa. So I put in an is_finished variable that should be false while the text is being printed, but if true when the text is finished. But I'm not sure how to make my interrupt button's actions part of an if statement:

Code: Select all

extbutton "Interrupt" action [SetVariable ("interrupts", interrupts +1), Return("smth")]

I think knowing how to do this will be important because I need to disable my continue/interrupt buttons when the dialogue menus are up.

And speaking of dialogue menus...

I put in a test dialogue menu:

Code: Select all

label start:    
    menu:
        "Option 1, add to interrupts.":
            $ interrupts += 1
        "Option 2, subtract to interrupts.":
            $ interrupts -= 1

and what I feared actually happened. The menu showed up centered over the entire screen, but I want the menu to be printed within a specific frame in my side frame...is there a way to do that?

Thanks again everyone!

[apricotorange]

The slightly more complicated interrupt/continue buttons:

Code: Select all

    textbutton "Interrupt" action If(not is_finished, [SetVariable("interrupts", interrupts + 1), Return("smth")])
    textbutton "Continue" action If(is_finished, Return("smth"))

For the menu, you can just edit "screen choice" in screens.rpy; set the xmaximum style on the vbox, or something like that.

On a side note, if you haven't seen it already http://lemmasoft.renai.us/forums/viewto ... 59#p266459 might be useful.

Edit: Err, I didn't see you started another thread; feel free to ignore this.

[trooper6]

Thanks for your thoughts here and in the other thread. Since you brought up the "screen choice" conundrum here, I think I should respond here.

By discussing setting maximum, are you suggesting that rather than passing my menu over the the frame, I sort of cheat? By making the menu screen fit the space of the frame...so it looks like it is in the frame, but really sits on top of it?

[apricotorange]

Basically, yes. I mean, you could do something more elaborate by defining your own "menu" function, but I don't see the point.