UI customization issues

[Brendan Just]

Hello, I'm just getting started so please forgive me my amateurishness.

I'm trying to customize UI, in particular buttons and menus, and was following this tutorial. The problems I have is that:

A) While trying to manage styling, I notice that the examples look like this

while on my end the area looks like this

I understand the changes, but it eludes me how and where to apply the example, nothing seem to work. As in:

B) Where do you have to place your custom UI images? In the same folder as characters etc.?

Thank you.

[Keinart]

A) It's the same, it's just that using colon lets you put all the properties in different lines, while the = makes you put it all in the same line. But it's the same. Now, you don't having the background button one is normal, it's not included, you have to add it to your code. Feel free to just copy paste it right below the others, and don't worry about having some with colons and some others without it, it's the same.

If you are not understanding what styling is in general or what exactly they do read this. Basically the buttons for the preferences menu are called "pref_buttons", so if you want to edit it you have to change it's properties. The background one is applying a background to the button is it uses an image instead of a color fill to create your button, but in my opinion if you are gonna use images for your buttons is easier to go for imagebuttons or imagemaps, that way you can forget about the style properties for every little thing. Recommended tutorials for those you can find them here and here. The first one comes with examples and everything so it's a must have that it's kinda hidden so no many new users know about it.

B) Anywhere inside your folder game, really. People usually make a new folder in the root called UI then you put it all there. Then when using them just make sure it's written like "UI/yourimage.png" and not just yourimage.

C) A small tip, when trying to use code in the forum you don't need to take screenshots of everything, feel free to copy paste inside [ code] [/ code] without the spaces, that way people can copy paste and stuff to help you out better.

Code: Select all

It will look like this when using code.

[Brendan Just]

Wow, thanks a lot! That game tutorial should be stickied or something, makes things so much easier to grasp)

Got everything to work.

[Brendan Just]

Got everything to work.

Okay, not exactly everything

I got everything to work except for choice menus.

If this is the default code how exactly do you apply an imagebutton here?

Code: Select all

screen choice(items):

    window:
        style "menu_window"
        xalign 0.5
        yalign 0.9

        vbox:
            style "menu"
            spacing 2

            for caption, action, chosen in items:

                if action:

                    button:
                        action action
                        style "menu_choice_button"

                        text caption style "menu_choice"

                else:
                    text caption style "menu_caption"

init -2:
    $ config.narrator_menu = True

    style menu_window is default

    style menu_choice is button_text:
        clear

    style menu_choice_button is button:
        xminimum int(config.screen_width * 0.75)
        xmaximum int(config.screen_width * 0.75)

[philat]

Without some working knowledge of Renpy's innards, you shouldn't. If you just want to customize the way the buttons look, change the style of "menu_choice_button" (for instance, give it a background image).

[Brendan Just]

If you just want to customize the way the buttons look, change the style of "menu_choice_button" (for instance, give it a background image).

Yeah, that's what I want, I just can't figure out how exactly to change it in this instance.

Like if this, let's say, a line for the start button in the main menu

Code: Select all

imagebutton auto "gui/main_start_%s.png" action Start() xpos 490 ypos 190 focus_mask True

how should one look here?

[Keinart]

Well, the thing is that the choice screen is kinda premade in renpy so can add your choices and stuff ingame during the script, is a bit harder than all the other menus. Still I think you can just follow what the last user here says and it should work. Haven'ts tried it myself though.

[Brendan Just]

Well, the thing is that the choice screen is kinda premade in renpy so can add your choices and stuff ingame during the script, is a bit harder than all the other menus. Still I think you can just follow what the last user here says and it should work. Haven'ts tried it myself though.

Thanks. The code in the last post there works great, but the choices don't appear over the buttons, instead when you hover a cursor over the buttons they appear in the dialog window.

[philat]

Find style menu_choice_button and modify it.

Code: Select all

# if you want to use an image with a Frame (can change size according to length of choice)
    style menu_choice_button is button:
        xminimum int(config.screen_width * 0.75)
        xmaximum int(config.screen_width * 0.75)
        background Frame("image path here", 10, 10) # adjust numbers as necessary

# if you want to use a fixed image (simpler, just have to make sure the choices don't overflow)
    style menu_choice_button is button:
        xsize 500 # the number is a placeholder, make it the size of your image
        background "image path here"

[Brendan Just]

Find style menu_choice_button and modify it.

This works but I really like the imagebutton method from above. Just need to find a way to display choices over buttons.

[Keinart]

Well, the thing is that the choice screen is kinda premade in renpy so can add your choices and stuff ingame during the script, is a bit harder than all the other menus. Still I think you can just follow what the last user here says and it should work. Haven'ts tried it myself though.

Thanks. The code in the last post there works great, but the choices don't appear over the buttons, instead when you hover a cursor over the buttons they appear in the dialog window.

The issue with imagebuttons is that they are full images, no text, so that's why the text appears below the buttons. So you have to create the images with the text already in them, then in the code don't add any text. Same if you try to do it with imagemaps.

In the other hand, if you want to be able to have the text in the code you'll have to follow the other way to create buttons. So at the end it depends of what you need, if you're going to have a lot of choices it's better to create a standard button so then you only have to change the text for each, but if you only will have a couple choices or each choice will be completely different imagebutton or imagemap is easier.

I guess you could also make it in a way you combine the two of them, leaving the imagebuttons below and creating a style for the choice buttons without background or anything, just text, then putting it over the imagebutton, but I don't think that would be useful.

[Brendan Just]

Well, the thing is that the choice screen is kinda premade in renpy so can add your choices and stuff ingame during the script, is a bit harder than all the other menus. Still I think you can just follow what the last user here says and it should work. Haven'ts tried it myself though.

Thanks. The code in the last post there works great, but the choices don't appear over the buttons, instead when you hover a cursor over the buttons they appear in the dialog window.

The issue with imagebuttons is that they are full images, no text, so that's why the text appears below the buttons. So you have to create the images with the text already in them, then in the code don't add any text. Same if you try to do it with imagemaps.

In the other hand, if you want to be able to have the text in the code you'll have to follow the other way to create buttons. So at the end it depends of what you need, if you're going to have a lot of choices it's better to create a standard button so then you only have to change the text for each, but if you only will have a couple choices or each choice will be completely different imagebutton or imagemap is easier.

I guess you could also make it in a way you combine the two of them, leaving the imagebuttons below and creating a style for the choice buttons without background or anything, just text, then putting it over the imagebutton, but I don't think that would be useful.

I see, that makes sense. I have a lot of choices so I'll go with choice button modification for text choices and leave imagebuttons for visuals choices.

With that I have, hopefully, the last issue - I got everything working with menu choice button, but the text in the choice buttons, while working just fine, doesn't highlight as you hover the mouse over it.

[Keinart]

Add this in your init -2 in the choice section of your screen.rpy file

Code: Select all

style.menu_choice_text.hover_color = "#FFFFFF"

You can change the "#FFFFFF" for any color you want.

[Brendan Just]

Hmm, I'm getting an error:

Code: Select all

File "game/screens.rpy", line 104: expected 'word' not found.
    style.menu_choice_text.hover_color = "#FFFFFF"

or

Code: Select all

File "game/screens.rpy", line 104: expected 'simple_expression' not found.
    style menu_choice_text hover_color = "#FFFFFF"

I went over style properties tutorials and tried several things, but this keeps happening. I kinda circumvented the problem by making the buttons themselves highlight, but I just wanna find out why this doesn't work for me, seems like such a simple command.

[Keinart]

Whoops sorry my fault, the style for choices doesn't need the text part. I got it wrong because usually for every menu you have differenciate text from the rest, but not for this one. So just leave it like this.

style.menu_choice.hover_color = "#WhateverColor"

Still, even if you had it as I mentioned in my previous post no error message should come out, so if something keeps going wrong make sure it's correctly written within the code, with the same margin as the rest style properties and all that jazz.