Looking for help replacing the textbx gui with image buttons

[TheOtherNewGuy]

Looking to replace the textbox gui with buttons with images. I'm currently using renpy 6.99.11, and have been trying to learn the language through the documentation. Trying to understand how all this works together is a bit hard for a newbie, especially since it seems all the examples ive searched for in the forums are based on older versions of renpy, and finding what the code has been changed to is like turning the lights off while trying to do a puzzle.

this is what I want to do.

I'd like to change the ui text from

to my own custom image buttons displayed here as random shapes.

from what ive read so far I suspect that all this can be done in the screens rpy? problem is I don't have enough experience with coding to make sense of broad explanations.

If anyone can give me some pointers I'd appreciate it. I've checked out the image maps tutorial in the cookbook thread and the gui documentation as well. If I can get any closer to understanding how renpy code works I'll be happy.

I'm also wondering if its possible to make these buttons curved.

thanks.

[Ocelot]

I suspect that all this can be done in the screens rpy?

Yes. In particular, you are interested in quick_menu screen. Just replace those textbutons with your imagebuttons.

I'm also wondering if its possible to make these buttons curved.

You mean, that you would need to click inside button shape and not in general rectangle? Then yes, check focus_mask style property.

[TheOtherNewGuy]

Thanks for the reply. Please bear with me, when it comes to coding i'm like a grandparent trying to use a smartphone.

so it would look something like this?

Code: Select all

screen quick_menu():

    # Ensure this appears on top of other screens.
    zorder 100

    # Add an in-game quick menu.
    hbox:
        style_prefix "quick"

        xalign 0.5
        yalign 1.0

        imagebutton auto "myimage_%s.png" action Rollback()

i read a bit about imagebuttons. so all images have to have _%s at the end of them? something to do with "auto" something.


Edit: sry I forgot to delete that sentence about not finding quick_menus.

[Ocelot]

Yes, something like that. Yes, you need to have %s in your name string, if you are using 'auto' property: it will be replaced by other strings to get image name. Here is a documentation for imagebuttons.

quick_menu is nothing special. It is just a screen. Not even a special one (like 'say' screen). This is why it is not mentioned in documentation.

[TheOtherNewGuy]

Yes, something like that. Yes, you need to have %s in your name string, if you are using 'auto' property: it will be replaced by other strings to get image name. Here is a documentation for imagebuttons.

quick_menu is nothing special. It is just a screen. Not even a special one (like 'say' screen). This is why it is not mentioned in documentation.

okay this is my test line

Code: Select all

 imagebutton auto "imagebuttons/button 2_%s.png" action Preference("auto-forward", "toggle")

It's giving me an error. "Exception: Not a displayable: None". That was the only line i changed in the screens rpy.

i made an imagebuttons folder in my game/gui folder.and there's a file called "button 2.png" in there. at first I named my file "button 2_%s" thinking I had to add the "_%s" to the actual file name (because i have no idea how to code). but i tried several names and tried several things, but guessing doesn't usually work. any idea whats going on?

[Ocelot]

I lionked to dicumentation:

Used to automatically define the images used by this button. This should be a string that contains %s in it. If it is, and one of the image properties is omitted, %s is replaced with the name of that property, and the value is used as the default for that property.

For example, if auto is "button_%s.png", and idle is omitted, then idle defaults to "button_idle.png". Similarly, if auto is "button %s", the button idle image is used.

You need to name your files button 2_idle.png, button 2_ground.png, etc.

[TheOtherNewGuy]

Okay changing it to button 2_idle.png worked.

But here's my question. How in this paragraph

Used to automatically define the images used by this button. This should be a string that contains %s in it. If it is, and one of the image properties is omitted, %s is replaced with the name of that property, and the value is used as the default for that property.

For example, if auto is "button_%s.png", and idle is omitted, then idle defaults to "button_idle.png". Similarly, if auto is "button %s", the button idle image is used.

did you read *Hey, Ren'Py user, if you want to create an image button, you must name your file 'button_idle.png', and then use the %s explained here to make it show up in game*?

I see the "button_idle.png" in there, but as far as instructions go you'd have to just be like "i give up, ill try adding _idle to the filename because I don't know what else to do but try every possible thing imaginable" to figure that out, at least from a beginner's point of view.

Is there something else that people read beforehand to make that answer jump out at them?

[Ocelot]

Okay changing it to button 2_idle.png worked.

But here's my question. How in this paragraph

did you read *Hey, Ren'Py user, if you want to create an image button, you must name your file 'button_idle.png, and then use the %s explained here to make it show up in game*?

This is simple:

Imagebutton
Creates a button consisting of images, that change state when the user hovers over them. This takes no parameters, and the following properties:
auto
Used to automatically define the images used by this button. This should be a string that contains %s in it. If it is, and one of the image properties is omitted, %s is replaced with the name of that property, and the value is used as the default for that property.

Ok, I want to see what other properties are, so I would know what I could omit/replace.

insensitive
The image used when the button is insensitive.
idle
The image used when the button is not focused.
hover
The image used when the button is focused.
selected_idle
The image used when the button is selected and idle.
selected_hover
The image used when the button is selected and hovered.

Bingo. So you now have names of properties which would be tried instead of %s to make image paths. To clear possible confusion about terminology and spare you from reading Button documentation:
focused means your mouse is pointing at it.
insensitive means that button cannot be clicked (has no action by default)
selected is not used often, but is used to show currently selected option. Used for things like checkboxes/places you currently are in/etc.

[TheOtherNewGuy]

Welp, hopefully messing with this enough will make me think like you do.

For some reason I look at all that information and the idea to *okay step number 1: at the end of your file name you type an underscore and the name of the property.* doesn't pop up. I'll definitely be using the forums to bridge my beginner gaps.

Alright then, gonna check out the focus maps now.