Imagebuttons

[Niteowl]

HI guys.....

So, I started learning to code in renpy a few months ago. I learned a lot (thanks to the help of many, including posters on this forum)

Now it's time to add a few more bells and whistles to my game, specifically a shop.
I understand imagebuttons would be a fairly practical way of making my shop.... so I could have an image for every outfit in the shop etc.

SO, one problem, I've been looking at tutorials online but they're all very confusing and either incomplete or that assumed too much knowledge on the part of the reader. (Generally speaking, though, I have been using screens so I"m familiar with some concepts involved)

Anyways, image buttons: I understand we normally need three images (maybe more but let's start with three)
let's say I have OutfitX in the shop......
I seem to understand I would need three images: idle, hover, and locked (after the item was bought)
so let's say I have
OutfitX_idle.png (Does the name need to have idle in it? In any order or does idle have to be first or second? like OutfitX_idle.png or idle_OutfitX.png?)
OutfitX_hover.png
OutfitX_???? first issue, not sure how to define a locked image.

Anyways, I don't really understand how to tell Renpy that those are the three images that need to be used, or connect the button to buying it (I guess something like action jump to label for the buying and selling exchange)...

I'm trying to say that I think I understand the general concept, but I"m stumped as to how to actually code it. |Does anyone have a sample code that could help me, or could be applied to something like what I"m trying to do?

IF my question is confusing, basically I want to understand how to use imagebuttons....I understand the idea, but the specific code is not clear... Any examples that could help me get it?

[Niteowl]

Guys, please, any input at all?

I mean, I'm not asking you to write the code for me.... just one simple example of how to create an image button that works, for whatever purpose, would be enough... I can figure out the rest.
Or a link to an example....something... please....

[Per K Grok]

Guys, please, any input at all?

I mean, I'm not asking you to write the code for me.... just one simple example of how to create an image button that works, for whatever purpose, would be enough... I can figure out the rest.
Or a link to an example....something... please....

A small example that might get you started.

Code: Select all

default buyX=0

screen shop():
    if buyX==0:
        imagebutton idle "images/buttons/red.png" hover "images/buttons/blue.png" action Jump("buy")
    else:
        imagebutton idle "images/buttons/green.png" action Jump("soldOut")


label start:

    show screen shop

    pause
    return

label buy:
    menu:
        "Do you want to buy X?"

        "Yes":
            $ buyX=1
            jump start
        "No":
            jump start


label soldOut:
    "Sorry. That item is sold out."
    jump start
    

[Niteowl]

Guys, please, any input at all?

I mean, I'm not asking you to write the code for me.... just one simple example of how to create an image button that works, for whatever purpose, would be enough... I can figure out the rest.
Or a link to an example....something... please....

A small example that might get you started.

Code: Select all

default buyX=0

screen shop():
    if buyX==0:
        imagebutton idle "images/buttons/red.png" hover "images/buttons/blue.png" action Jump("buy")
    else:
        imagebutton idle "images/buttons/green.png" action Jump("soldOut")


label start:

    show screen shop

    pause
    return

label buy:
    menu:
        "Do you want to buy X?"

        "Yes":
            $ buyX=1
            jump start
        "No":
            jump start


label soldOut:
    "Sorry. That item is sold out."
    jump start
    

thanks man, that helps a lot.

I actually found something I could use after digging through the net a bit more....

Code: Select all

define s = Character('Sarah', image= 'sarah', color="#c8ffc8")
define f = Character('Frank', image= 'frank', color="#c8ffc8")
image 007 = "007.jpg"
image BlossomChat = "BlossomChat.jpg"
image FW2 = "FW2.jpg"

$ variableX = False


screen char_choice():
    modal True
    imagebutton:
        idle "images/sarah angry.jpg" 
        hover "images/sarah smile.jpg"
        xalign 0.2 yalign 0.5
        focus_mask True 
        action Jump("sarah")
    imagebutton:
        idle "images/frank angry.jpg" 
        hover "images/frank smile.jpg" 
        xalign 0.8 yalign 0.5
        focus_mask True 
        action Jump("frank")

# The game starts here.
label start:
    scene 007
    "You go to the underpass to meet your two friends. You told them you would choose one to go to the dance with."
    show screen char_choice()
    "Which one do you choose?"
    
label sarah:
    hide screen char_choice
    scene BlossomChat
    
    s "I'm glad you chose me!"
    jump ending
    
label frank:
    hide screen char_choice
    scene FW2
    
    f "I'm glad you chose me!"
    jump ending
    
label ending:
    "The dance was great."
    "The end."

it seems to work, but then I didn't know how to add conditional statements...your example seems very clear about adapting something like this to a shop (the conditional statement before the image button is something I was trying to figure out), so yeah, thanks man, I really appreciate it.

[Niteowl]

If I may ask one more question....
Is there a way to make it so that if the person buys the item, instead of the imagebutton only a static image appears? (maybe an image of the item with a 'sold' sticker on it...creating the image is not a problem, it's showing it that I"m not sure about)

[Per K Grok]

If I may ask one more question....
Is there a way to make it so that if the person buys the item, instead of the imagebutton only a static image appears? (maybe an image of the item with a 'sold' sticker on it...creating the image is not a problem, it's showing it that I"m not sure about)

I would think the easiest way to get something that works that way would be this change in the earlier code. The green.png now being the item_sold.png.

You could just add the new image as an image, but that will not clear the imagebutton function. This will.

Code: Select all

screen shop():
    if buyX==0:
        imagebutton idle "images/buttons/red.png" hover "images/buttons/blue.png" action Jump("buy")
    else:
        imagebutton idle "images/buttons/green.png" action None    #Jump("soldOut")
        

[Niteowl]

If I may ask one more question....
Is there a way to make it so that if the person buys the item, instead of the imagebutton only a static image appears? (maybe an image of the item with a 'sold' sticker on it...creating the image is not a problem, it's showing it that I"m not sure about)

I would think the easiest way to get something that works that way would be this change in the earlier code. The green.png now being the item_sold.png.

You could just add the new image as an image, but that will not clear the imagebutton function. This will.

Code: Select all

screen shop():
    if buyX==0:
        imagebutton idle "images/buttons/red.png" hover "images/buttons/blue.png" action Jump("buy")
    else:
        imagebutton idle "images/buttons/green.png" action None    #Jump("soldOut")
        

Thanks again, man. All this helps immensely.

I do have one last question, not related to my project, just to better understand how image buttons work....

in your example, you create the image button in one line, for example:
imagebutton idle "images/buttons/red.png" hover "images/buttons/blue.png" action Jump("buy")

but in the other example I found on the internet it's done a little differently - example:

Code: Select all

screen char_choice():
    modal True
    imagebutton:
        idle "images/sarah angry.jpg" 
        hover "images/sarah smile.jpg"
        xalign 0.2 yalign 0.5
        focus_mask True 
        action Jump("sarah")
        

I haven't tested your example, yet, but I have to assume it will work... the other example I found works fine too...
so, why the differences?
What does 'modal True' do? Or why isn't it needed in your example...ditto for the 'focus_mask True thingy....

Not a big deal, like I said you already helped immensely and I'll be fine with my project...but yeah, not sure I understand the differences between those two methods

[Per K Grok]

------

I haven't tested your example, yet, but I have to assume it will work... the other example I found works fine too...
so, why the differences?
What does 'modal True' do? Or why isn't it needed in your example...ditto for the 'focus_mask True thingy....

Not a big deal, like I said you already helped immensely and I'll be fine with my project...but yeah, not sure I understand the differences between those two methods

As far as I know there is no difference between the two methods of writing, in how they work.

You get a better overview with the method you found, which can be good if you have many attributes attached to the imagebutton. If you have only a few attributes it might be simpler to write everything on one line.

modal and focus_mask are not necessary for the screen to work.

modal True might be good practice to use though, whether it is strictly necessary or not.



From the manual

modal
If True, the screen is modal. A modal screen prevents the user from interacting with displayables below it, except for the default keymap.

focus_mask - multiple
A mask that's used to control what portions of the button can be focused, and hence clicked on. The type of this property determines how it is interpreted.

[trooper6]

If you make a screen modal, then the user cannot interact with anything other than that screen...and therefore cannot advance the game until that screen is gone (unless the screen itself advances the game). So if you have a HUD screen that you want present hanging out while the game continues onward...you don't want that screen to be modal. Calling a screen already makes it so that the user can only interact with a screen...so if you call a screen (rather than show it) then it doesn't need to be modal.

As for focus mask. Let's say you have a button is a circle...well..the image is a transparent square with a green circle in the middle. If you make the focus_mask True, then only the parts of the the image that aren't transparent (i.e. only the circle) will register the button click.

[Niteowl]

Thank you for the replies guys.. I learned a lot (and the project is gong fine)