Backgrounds on in-game buttons

[Qu-ko]

Hi, another moment of temporary stupidity at 2 AM that I cannot for the life of me un-stupify.

So I've implemented the in-game buttons:

Code: Select all

init python:

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

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

        ui.vbox(xpos=0.99, ypos=0.97, xanchor='right', yanchor='bottom')
        ui.textbutton(u"スキップ", clicked=toggle_skipping, xminimum=80, yminimum=45)
        ui.textbutton(u"セーブ", clicked=ccinc("_game_menu_save"), xminimum=80, yminimum=45)
        ui.textbutton(u"ロード", clicked=ccinc("_game_menu_load"), xminimum=80, yminimum=45)
        ui.textbutton(u"CG", clicked=ccinc("_gm_image"), xminimum=80, yminimum=45)
        ui.close()


    config.overlay_functions.append(button_game_menu)

with the "Prefs" option changed to "CG" to display the image behind the text with greater ease, rather than having to go to the game menu and do it. (Yes, it's a Japanese language game, for the curious, because I wanted to practice my moon language.)

But my question does not actually involve that. Rather, it involves... well, how the hell do I put backgrounds on these buttons? I removed the roundrect template because I wanted to implement my own styles, and I've been doing so, but I just can't figure out how to put a background, which I styled similarly to the window frame, on these buttons so they don't look so plain.

Help desu! Please?

(...Knowing me it's most likely a simple thing I'm not getting, since I'm still rather inexperienced with this language. So, apologies if this is indeed the case.)

[JQuartz]

You can try sticking the following code into your ui.textbutton properties:

Code: Select all

background=Frame(filename of frame when not selected, 1, 1), hover_background=Frame(filename of frame when hovered, 1, 1),  

like for example...

Code: Select all

init python:

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

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

        ui.vbox(xpos=0.99, ypos=0.97, xanchor='right', yanchor='bottom')
        ui.textbutton(u"スキップ", background=Frame('normal background.png', 1, 1), hover_background=Frame('highlighted background.png', 1, 1),  clicked=toggle_skipping, xminimum=80, yminimum=45)
        ui.textbutton(u"セーブ", background=Frame('normal background.png', 1, 1), hover_background=Frame('highlighted background.png', 1, 1),  clicked=ccinc("_game_menu_save"), xminimum=80, yminimum=45)
        ui.textbutton(u"ロード", background=Frame('normal background.png', 1, 1), hover_background=Frame('highlighted background.png', 1, 1),  clicked=ccinc("_game_menu_load"), xminimum=80, yminimum=45)
        ui.textbutton(u"CG", background=Frame('normal background.png', 1, 1), hover_background=Frame('highlighted background.png', 1, 1),  clicked=ccinc("_gm_image"), xminimum=80, yminimum=45)
        ui.close()


    config.overlay_functions.append(button_game_menu)

This isn't the most efficient way but if you just plan to use it on this few buttons, it'll do.

(...Knowing me it's most likely a simple thing I'm not getting, since I'm still rather inexperienced with this language. So, apologies if this is indeed the case.)

This is one of the things that is quite difficult(relatively speaking) to learn. Otherwise known as 'properties' (Under 'properties and style' in the documentation).

[Qu-ko]

Okay, thank you, that worked, but... one question: how do I center the text in the background (basically, move it down to the center)?

The attachment is what it looks like, and I want the text to be centered vertically. How do I do this? I've tried using ypos and yanchor, but that didn't work (or maybe I just wasn't doing it right, I dunno).

EDIT: Also, another thing: when I click the "CG" button to hide everything on the screen, the text box disappears, but the side buttons stay visible. Is there any way I can change this so the game buttons disappear temporarily as well?

[PyTom]

Probably, your buttons are smaller than your background. In that case, what you'd want to do is something like (assuming your backgrounds are 30 pixels high)

ui.textbutton(..., yalign=0.5, yminimum=30)

what code are you running for the cg button? The right argument should be:

clicked=ccinc("_hide_windows")

which takes care of hiding the overlay as well.

[Qu-ko]

The _hide_windows code worked perfectly, thank you. I was using the code that was given in the Cookbook, which I have no idea how it works, but it apparently only covered the dialogue frame and not the custom buttons, so.

However, my buttons' text are still aligning at the top, even with something like:

Code: Select all

ui.textbutton(u"スキップ", background=Frame('gmbutton.png', 1, 5), hover_background=Frame('gmbutton.png', 1, 5), clicked=toggle_skipping, xminimum=80, yalign=0.5, yminimum=35)

Is there an alternative way to do it? Or is it possible I'm doing something wrong with the image? The image itself is 44px high, with 1px of space on all sides. So do I need to have it exactly 35px, or can it still work with a bigger image like the one I'm using?

[PyTom]

Oh, duh.

You need to give the yalign attribute to the button text, not the button proper. You do this by editing style.button_text, to be something like:

Code: Select all

init:
    $ style.button_text.valign = 0.5

[Qu-ko]

Oh, duh.

You need to give the yalign attribute to the button text, not the button proper. You do this by editing style.button_text, to be something like:

Code: Select all

init:
    $ style.button_text.valign = 0.5

I believe you mean "yalign".

And yes, that worked. Hopefully that's all the problems I have for a while, so... thank you very much for all the help. :3