Customizing the text box and other features?

[Nio]

I'm sure these things have been asked a billion times. Hopefully I'm not being a bother.

So I started to finally take some time to learn Ren'Py. I have the basics understood. I'm at the point where I want to start to customize the look of things so I have a few questions.

I looked over the documentation, but to be honest it was quite overwhelming.

As a side note, I'm coding on Mac OSX.

1) I have a text box (frame) that is 772x148. I'm a little confused by what the numbers do. The example is:

Code: Select all

style.window.background = Frame("frame.png", 12, 12)

Using this the image is distorted going to the edges of the screen.

2) Is there a way to have a drop shadow on the text?

3) I'd like to use images for the character names is there a way to do that?

4) Is there a way to place buttons over the text box? Buttons for, say, skip, back, menu etc.

5) I would like to have mouse right click hide the text box and text (to show the images without an interface) instead of go to the menu. Is that doable?

6) How can I use an image for menu buttons (choices)?

7) Can you customize the cursor? Change it with a custom image or better yet an animated filmstrip?

8 ) I tried to add a cutscene with this code:

Code: Select all

$ renpy.movie_cutscene("demo.mpg", 146.22)

But I get this error:

Code: Select all

On line 29 of /Applications/renpy-6.3.1/Test/game/script.rpy: one-line python statement does not expect a block. Please check the indentation of the line after this one.
$ renpy.movie_cutscene("demo.mpg", 146.22)

9) I added a fixed ctc from the demo does that have to be added for each character declaration or can it be set up as a default look/setting for everyone?

10) One other thing that has nothing to do with customization, but I'd like to have running variables to then later evaluate. For example over the corse of the game the player obtains X amount of point for picking certain answers. At the end I'd like to evaluate that like:

Code: Select all

if (points >= 100) then jump good_ending 

How would you do that in Ren'Py syntax? Would the progress of that be saved in a game save?

11) Is it better to keep the game script in one file or split it up similar to the demo, which has been a great help btw? I can imagine that the init setup of images and characters could get very long as with a long story. So I guess dividing the file up would be a good thing, I just need to learn how to do that.

Sorry for the noob questions and I'm sure I'll have more as I try to unravel this thing.

Can anyone recommend a better Mac text editor for this beside Text Edit, which doesn't have line numbers? I've been using Dreamweaver for now. How can I change the default editor anyway?

[PyTom]

0) Welcome back! Are you bringing back Blue Crush, or do you have a new concept?

1) I have a text box (frame) that is 772x148. I'm a little confused by what the numbers do. The example is:

Code: Select all

style.window.background = Frame("frame.png", 12, 12)

Using this the image is distorted going to the edges of the screen.

Assuming you don't want the text box to scale with the height of the text in it, you'll use code like:

Code: Select all

init:
    $ style.window.background = "frame.png"
    $ style.window.xmargin = 14
    $ style.window.ymargin = 14
    $ style.window.yminimum = 148 + 14 * 2

Frame scales its contents to be a requested size. The numbers are the size of the left/right and top/bottom borders, which don't get scaled.

2) Is there a way to have a drop shadow on the text?

Yes. You can put it on all text with:

Code: Select all

init:
    $ style.default.drop_shadow = (1, 1)
    $ style.default.drop_shadow_color = "#000"

The (1, 1) is the offset of the drop shadow in the x and y directions.

3) I'd like to use images for the character names is there a way to do that?

Yes. You'll want to write something like:

Code: Select all

init:
    $ e = Character("eileen_name.png", image=True)

4) Is there a way to place buttons over the text box? Buttons for, say, skip, back, menu etc.

Yes. http://www.renpy.org/wiki/renpy/doc/coo ... _Game_Menu

has some code you can use.

5) I would like to have mouse right click hide the text box and text (to show the images without an interface) instead of go to the menu. Is that doable?

Center-click already hides the text box and text, as does the 'h' key. You can change this, but I recommend against it, as it makes learning the interface for each game harder.

6) How can I use an image for menu buttons (choices)?

You need to make your menu out of imagebuttons.

Code: Select all

$ ui.imagebutton("choice_1.png", "choice_1_hover.png", clicked=ui.jumps("chose1"), xpos=100, ypos=100)
$ ui.imagebutton("choice_2.png", "choice_2_hover.png", clicked=ui.jumps("chose2"), xpos=100, ypos=200)
$ ui.interact()

label chose1:
     "You chose choice 1."

label chose2:
     "You chose choice 2."

7) Can you customize the cursor? Change it with a custom image or better yet an animated filmstrip?

Yes. To make it an animated cursor, you want to write code like:

Code: Select all

init:
    $ config.mouse = { }
    $ config.mouse['default'] = [ 
        ("mouse1.png", 0, 0),
        ("mouse2.png", 0, 0),
        ("mouse3.png", 0, 0),
        ("mouse4.png", 0, 0),
        ]

The images are played back at 20 fps. The numbers are the offset of the hotspot from the top and left of the image.

Code: Select all

On line 29 of /Applications/renpy-6.3.1/Test/game/script.rpy: one-line python statement does not expect a block. Please check the indentation of the line after this one.
$ renpy.movie_cutscene("demo.mpg", 146.22)

Check the indentation of line 30 of your script. This is the error you get if you've written something like:

Code: Select all

$ renpy.movie_cutscene("demo.mpg", 146.22)
    "Hello, world!"

You need to line things up, like this:

Code: Select all

$ renpy.movie_cutscene("demo.mpg", 146.22)
"Hello, world!"

9) I added a fixed ctc from the demo does that have to be added for each character declaration or can it be set up as a default look/setting for everyone?

Your best bet is to create one character, and copy it. Something like:

Code: Select all

init:
    $ narrator = Character(None, ctc=...)
    $ e = narrator.copy("Eileen")
    $ l = narrator.copy("Lucy")

10) One other thing that has nothing to do with customization, but I'd like to have running variables to then later evaluate. For example over the corse of the game the player obtains X amount of point for picking certain answers. At the end I'd like to evaluate that like:

Code: Select all

if (points >= 100) then jump good_ending 

How would you do that in Ren'Py syntax? Would the progress of that be saved in a game save?

Yes. You want to initialize the variable right after the start label:

Code: Select all

label start:
    $ points = 0

You can then add points:

Code: Select all

    $ points += 10

take them away:

Code: Select all

    $ points -= 10

and branch based on them:

Code: Select all

    if points > 100:
        jump good_ending

11) Is it better to keep the game script in one file or split it up similar to the demo, which has been a great help btw? I can imagine that the init setup of images and characters could get very long as with a long story. So I guess dividing the file up would be a good thing, I just need to learn how to do that.

Basically, Ren'Py will read in all the .rpy files in the game directory. It more-or-less treats them as if they were one big .rpy file. So it's up to you how many files you want.

[Nio]

Thank you so much for all the answers. I hope it wasn't a bother. I can be lazy sometimes.

I managed to get a couple working too.

As for the choice buttons I'd have to have a static button for each choice? That could add up to many many images. You can't just have a custom image behind the text kinda like the text box frame? Is there any way to change the default look?

I fixed the cutscene error. It is right under my label_start:. Thing is now I can hear it but I don't see it, it just stays on the menu screen and if I click it will jump to the first scene of the game. Could be the mpg is not right for Ren'Py. Though, it says it's mpeg1.

As for your question, my writer has since gone to other things. So I'm kinda on my own. I have nothing actually planned right now. I'm just trying to learn the basics of Ren'Py and see if I think I can do something worth while.

We shall see. ^^

Thanks again. I'm sure I'll be back with many more annoying questions.

[PyTom]

As for the choice buttons I'd have to have a static button for each choice? That could add up to many many images. You can't just have a custom image behind the text kinda like the text box frame? Is there any way to change the default look?

Oh, sure. I misunderstood what you wanted. By customizing style.menu_choice_button, you can add a picture behind each menu choice.

Code: Select all

init:
     $ style.menu_choice_button.background = "background.png"
     $ style.menu_choice_button.hover_background = "hover_background.png"

There are a bunch of other properties you can customize, as well. xminimum and yminimum set the minimum size of buttons, for example.

[Nio]

I've managed to get a lot of things I wanted working. I'm actually having a lot of fun with Ren'Py now that I'm getting a better grasp of it.

I've added a presplash, splash sequence, custom main menu, text box menu, point based variables and some other things. It's easy once you get the basic understanding down. Of course with much thanks to PyTom. ^^ I think I did pretty good for my first day with it.

I do, however, have a couple more little blips I'm stumped on.

It's mainly with the button_game_menu.

I added it as its own file and it does work, but there are some issues. Here the code:

Code: Select all

init python:

    # Give us some space on the right side of the screen.
    style.window.right_padding = 100

    def toggle_skipping():
        config.skipping = not config.skipping

    def button_game_menu():
        
        # to save typing
        ccinc = renpy.curried_call_in_new_context

        ui.hbox(xpos=390, ypos=558, xanchor=0, yanchor=0)
        ui.textbutton("Skip", clicked=toggle_skipping, xminimum=87)
        ui.imagebutton("menubuttonoff.png", "menubuttonon.png", clicked=ccinc("_game_menu_save"), xminimum=87)
        ui.imagebutton("qloadbuttonoff.png", "qloadbuttonon.png", clicked=ccinc("_game_menu_load"), xminimum=87)
        ui.imagebutton("prefbuttonoff.png", "prefbuttonon.png", clicked=ccinc("_game_menu_preferences"), xminimum=87)
        ui.close()


    config.overlay_functions.append(button_game_menu)

The problem however is that the menu buttons above show during the splashscreen sequence. How can I hide it during that?

This is the splash screen code, which works fine except that you can see the menu I coded above show over the images.

Code: Select all

init:

    image logo = "logo.png"
    image warning = "warning.png"

label splashscreen:

     scene black
     with None

     scene logo
     with dissolve
     with Pause(3.0)

     scene black
     with dissolve

     scene warning
     with dissolve
     with Pause(3.0)

     scene warning
     with dissolve

     return

On top of that I noticed that when I use a character "at left with move" command the text box image and dialogue text disappears during the move animation but the menu above does not. So it looks sloppy. I'd rather the text box not disappear at all during the character move. Is there a way to set that?

Also how can I get the menu buttons in the above code to play a click.wav sound. Adding that to the options.rpy doesn't seem to work for those only the built-in buttons use that sound.

Next is to try and customize the load and pref menus and add a CG gallery. I'm a graphic artist I can't help my urge to customize.

Again thanks for all the help.

[monele]

I use this occasion to ask : was a style visual editor ever planned? (I kinda remember something like that, but...)

[PyTom]

The problem however is that the menu buttons above show during the splashscreen sequence. How can I hide it during that?

Code: Select all

init python:

    # Give us some space on the right side of the screen.
    style.window.right_padding = 100

    def toggle_skipping():
        config.skipping = not config.skipping
 
    show_button_menu = False

    def button_game_menu():

        if not show_button_menu:
            return
       
        # to save typing
        ccinc = renpy.curried_call_in_new_context

        ui.hbox(xpos=390, ypos=558, xanchor=0, yanchor=0)
        ui.textbutton("Skip", clicked=toggle_skipping, xminimum=87)
        ui.imagebutton("menubuttonoff.png", "menubuttonon.png", clicked=ccinc("_game_menu_save"), xminimum=87)
        ui.imagebutton("qloadbuttonoff.png", "qloadbuttonon.png", clicked=ccinc("_game_menu_load"), xminimum=87)
        ui.imagebutton("prefbuttonoff.png", "prefbuttonon.png", clicked=ccinc("_game_menu_preferences"), xminimum=87)
        ui.close()


    config.overlay_functions.append(button_game_menu)

This code now has a new variable, show_button_menu. You can set this variable to True when you want the menu shown, and to False to hide the menu.

You'd probably want code like:

Code: Select all

label start:
    $ show_button_menu = True

In your game.

On top of that I noticed that when I use a character "at left with move" command the text box image and dialogue text disappears during the move animation but the menu above does not. So it looks sloppy. I'd rather the text box not disappear at all during the character move. Is there a way to set that?

Sure. Set _window_during_transitions to True, and an empty window will be shown during transitions.

Also how can I get the menu buttons in the above code to play a click.wav sound. Adding that to the options.rpy doesn't seem to work for those only the built-in buttons use that sound.

To make all buttons make that sound, you want to add:

Code: Select all

init:
    $ style.button.activate_sound = "click.wav"

to your game.

monele>>> No style visual editor has been planned, at least not for anytime soon.

[DaFool]

Golly, I am so bookmarking this thread...
it's a one-stop shop of answers!

[Nio]

Nice! This is working out well.

The click sound code below was already active before I asked about the button click sound. It doesn't play on any of the custom button images. It does work on default buttons.

The code

Code: Select all

style.button.activate_sound = "sounds/click.wav"

Thanks again for all the answers and patients. Your devotion to Ren'Py is immense. I dunno if people know how lucky they are to have you constant assistance. ^^

[PyTom]

Sorry, the code you want is:

Code: Select all

style.image_button.activate_sound = "click.wav"

In a moment of temporary insanity, I had forgotten you were using imagebuttons.

[Nio]

Yup! That makes sense too now that I look at it.

Well I spent several hours playing around with my little test game.

I got a lot of cool things working, but I still have questions.

1) I've managed to make a static custom main menu. I changed the bg image in the options.rpy and then used some code I found to add my own image buttons. I'd like to see if I can take that a step further and have the main menu animated. IE use the features like pan and zoom on the main menu to have a looping image in the background, say, like clouds passing by. This would mean using a large background image and a transparent logo and buttons positioned on top etc. Also it would be nice if I could dissolve in each element, logo, buttons etc. Just like you can when making the actual game part.

This is what I'm using now for my custom menu button with static background image. It works great but I have no idea how to take this to something like I mention above.

Code: Select all

label main_menu:
    $ ui.keymap(toggle_fullscreen = renpy.toggle_fullscreen)
    
    $ ui.window(style='mm_root')
    $ ui.null()

    $ ui.imagebutton("menu/new_game_off.png", "menu/new_game.png", clicked=ui.jumpsoutofcontext("start"), xpos=323, ypos=346)
    $ ui.imagebutton("menu/load_game_off.png", "menu/load_game.png", clicked=_intra_jumps("_load_screen", "main_game_transition"), xpos=320, ypos=385)
    $ ui.imagebutton("menu/settings_off.png", "menu/settings.png", clicked=_intra_jumps("_prefs_screen", "main_game_transition"), xpos=336, ypos=463)
    $ ui.imagebutton("menu/quit_off.png", "menu/quit.png", clicked=ui.jumps("_quit"), xpos=362, ypos=525)
  
    $ ui.interact(suppress_overlay=True,
                         suppress_underlay=True,
                         mouse="mainmenu")

It would be nice if you could do something like this:

Code: Select all

##Pseudo Code
label main_menu:
    show bg with pan
    show logo (xpos=xxx, ypos=xxx) with dissolve
    show ui.imagebutton(XXX) with disolve
etc...

2) I'd also like to customize the pref and load/save screens with my own images. I don't really even need to move anything around, Just replace things like buttons and sliders with my own images. I can't find an example of this anywhere.

3) The game menu. This one seems like it would be similar to the main menu code I'm using above, but I've yet to get this to work. I think the fact that some buttons have an inactive state makes it more complex and it seem like the right mouse click is not going to my code. So this is another one.

4) Having a different background image for the pref and load/save screen would be nice. Kinda like my pseudo code where I have called the bg image there.

5) I was thinking of adding a "hide" button to the game dialogue box menu. I don't know what the code for hiding the interface on a button would be.

6) The big one that scares me is the CG gallery. Granted I haven't even tried to use the example yet so I'm being lazy here. But again this would be a thing of having a custom look and setup in a way that I could edit it for each game from my template game. Same with the stuff above.

I know I'm being a total pain, but I feel like I'm getting a lot closer to where I want to be. I've been testing basic game mechanics like a selection map, point system, custom transitions, custom character positions etc, which is all working great. I think the last big thing after these menus is the cg gallery, which looks a little scary.

[JQuartz]

Can only help out with one, you have to wait for Pytom or Monele for the rest...

1. Replace ui.window and ui.null with your pseudocode in the game_menu (remove the label game_menu from your psudocode first)

Code: Select all

label main_menu:
    $ ui.keymap(toggle_fullscreen = renpy.toggle_fullscreen)
    
    show bg at Pan(parameters here)
    show logo (xpos=xxx, ypos=xxx) with dissolve
    show ui.imagebutton(XXX) with disolve
    etc...
    $ ui.imagebutton("menu/new_game_off.png", "menu/new_game.png", clicked=ui.jumpsoutofcontext("start"), xpos=323, ypos=346)
    $ ui.imagebutton("menu/load_game_off.png", "menu/load_game.png", clicked=_intra_jumps("_load_screen", "main_game_transition"), xpos=320, ypos=385)
    $ ui.imagebutton("menu/settings_off.png", "menu/settings.png", clicked=_intra_jumps("_prefs_screen", "main_game_transition"), xpos=336, ypos=463)
    $ ui.imagebutton("menu/quit_off.png", "menu/quit.png", clicked=ui.jumps("_quit"), xpos=362, ypos=525)
  
    $ ui.interact(suppress_overlay=True,
                         suppress_underlay=True,
                         mouse="mainmenu")

    

The menu screen is similiar to a normal screen so you can actually edit it like a regular one. The only difference is it preset.

EDIT:You can see the coding for the screens in the common folder located inside the renpy folder. (00mainmenu.rpy and 00gamemenu.rpy). Not sure whether you're allowed to edit it.

EDIT2:No ui.null().sorry. (i wonder whether i'm doing more harm than good when i answer these questions since i'm prone to error...)

EDIT3:It's show bg at Pan. sorry again.

[PyTom]

A response to Nio two posts back, sorry for the delay.

1) You can do the motion of the main menu background using code like:

Code: Select all

init:
    $ style.mm_root.background = Move((0, 0), (800, 0), 5.0, repeat=True)("background.jpg")

Fading or otherwise transitioning in the elements of the main menu isn't yet supported. The problem is that right now Ren'Py eliminates all transient stuff at the end of each interaction. I'll try to come up with a solution for this and add it to the next release.

2 + 3) Do you want to replace the buttons entirely with your own images, or just replace the background of the button, while keeping the text intact? There are different ways of doing each.

The game menu is significantly less flexible than the main menu, and hence harder to customize. This is because the game menu has to do much more than the main menu.

4) This is pretty easy. The variables for the different screens are:

style.gm_root['load'].baclkground
style.gm_root['save'].background
style.gm_root['prefs'].background

5) You want something like:

Code: Select all

ui.imagebutton("hidebuttonoff.png", "hidebuttonon.png", clicked=ccinc("_hide_windows"), xminimum=87)

6) The CG gallery is complicated. It's probably the easiest to customize, since you have to supply all the button images, as well as a background image, an image to use for locked buttons, and borders that go on top of unlocked images.

[JQuartz]

I managed to make a main menu that has images with Snowblossom, Pan and Dissolve effect. So I don't think it's not doable...

Code: Select all

init python:
    def JQuartz_overlay():
        if game_had_started:
            return
        elif not game_had_started:
            ui.vbox()
            ui.textbutton("Start Game", clicked=ui.jumpsoutofcontext("start"))
            ui.textbutton("Continue", clicked=_intra_jumps("_load_screen", "main_game_transition"))
            ui.textbutton("Preferences", clicked=_intra_jumps("_prefs_screen","main_game_transition"))
            ui.textbutton("Quit", clicked=ui.jumps("_quit"))
            ui.close()
    config.overlay_functions.append(JQuartz_overlay) 

label main_menu:
    
    $ ui.keymap(toggle_fullscreen = renpy.toggle_fullscreen)
    
    show bg with dissolve
    show longpicture at Pan((0, 0), (2000, 0), 15.0)
    show snowblossom 

    
    
    $ ui.interact(suppress_overlay=False,
                         suppress_underlay=True,
                         mouse="mainmenu")

[Nio]

A response to Nio two posts back, sorry for the delay.

1) You can do the motion of the main menu background using code like:

Code: Select all

init:
    $ style.mm_root.background = Move((0, 0), (800, 0), 5.0, repeat=True)("background.jpg")

Fading or otherwise transitioning in the elements of the main menu isn't yet supported. The problem is that right now Ren'Py eliminates all transient stuff at the end of each interaction. I'll try to come up with a solution for this and add it to the next release.

Okay, sounds good. What about having a logo png graphic over the background? Looks like JQuartz's code has something like that. I'll have to try it.

2 + 3) Do you want to replace the buttons entirely with your own images, or just replace the background of the button, while keeping the text intact? There are different ways of doing each.

The game menu is significantly less flexible than the main menu, and hence harder to customize. This is because the game menu has to do much more than the main menu.

I figured this would be the most difficult to work with. I'd probably like to use my own images and not the text. I don't know how this would work for the sliders though. I'm guessing this would mean almost completely rebuilding those screens. Also I forgot about the yes/no screen, but that shouldn't be too difficult I'd think.

My assumption is that there is a label for each one. Though it seems that since it's connected to the right mouse button they aren't exactly that easy. I was planning on having one rpy file with all the custom menus setup in it.

Thanks a bunch for all help so far.