Investigation using image buttons?

[feisty_wizard]

First off im a very new creator and i'm trying to figure some stuff out before the game jam I signed up with starts on the 22nd so any help would be greatly appreciated!

What i'm looking for sounds pretty simple but im having trouble knowing where to start. I want a room as a background with many "items" as imagebuttons over it that, once clicked, will bring up dialogue from another character.

1/ I want there to be an outline and hover text of the name of what the object is when you hover over it. I'd also like the option to change the object name after the dialogue is done

2/ I dont want to use image maps because it seems they can be more restraining BUT if what i want can be done with them im willing to try it out

3/ I'm also going to want to do normal dialogue text at the bottom when prompted and the normal character sprite. Not sure if having image buttons there would get in the way of this or it would just act as an overlay?

[Milkymalk]

1. You can separately define idle and hover images for an imagebutton in order to have an outline. Remember to leave space around the non-outlined version so it has the same dimensions and doesn't change its placement.
https://www.renpy.org/doc/html/screens. ... magebutton
You can define a hover image including text by using a LiveComposite image:
https://www.renpy.org/doc/html/displaya ... eComposite
You can incorporate text with Text():

Code: Select all

$ boxtext = Text(gamelist[i].data.name, bold=True, color='#cfcfff', outlines=[(absolute(3), '#000030', absolute(0), absolute(0))])
$ namedboxart = LiveComposite(
    (boxartx, boxarty),
    (0, 0), boxart,
    (50, 50), boxtext
    )

In this example, if boxtext is changed, so does the text in the image.

2. An imagemap would be so much easier if the clickable objects are part of a large image, but if you are willing to put in the extra work for pixel-perfect placement, it can be done.

3. You can display the screen with the imagebuttons behind the characters sprites using layers:
https://www.renpy.org/doc/html/displayi ... html#layer
https://www.renpy.org/doc/html/config.h ... fig.layers

[feisty_wizard]

Ah ty so much!! I'll try all of this out in a test game and come back if I have any problems!

[Milkymalk]

I think all this can be done with an imagemap too. The only restriction I can think of would be that the (virtual) rectangles surrounding the hotspots (including the glow/outline) can't overlap.

[feisty_wizard]

Hi, I;m very sorry but is there any chance you can show some example code of how to actually get it started?? as of right now I cant get anything to work and i'm really confused over it ):

This is what I have for test code but im obviously doing it wrong or something.

"file "game/script.rpy", line 160: u'idle' is not a keyword or valid child for the screen statement."

Code: Select all

screen minigame:
        tag minigame
        add "start.jpg"
        
        imagebutton
        idle "fish.png"
        hover "fish_hover.png"
        clicked jump("fish")
        xpos 300 ypos 300 focus_mask True 
        
        label fish:
            show speakt
            t "this is a dump fish isn't it?"

was also trying to use this to help me as well but im not sure if its helping or not:
viewtopic.php?f=51&t=22410

[Milkymalk]

Try more like this:

Code: Select all

screen minigame:
    tag "minigame"
    add "start.jpg"
        
    imagebutton:
        idle "fish.png"
        hover "fish_hover.png"
        clicked Jump("fish")
        xpos 300
        ypos 300
        focus_mask True

In screen language (and Ren'Py and Python in general), anything that is related to a specific element goes in a block under that element.

Also note that actions (from a button etc.) always start with caps and are sometimes VERY different from the Ren'Py statements they represent.

[feisty_wizard]

okay so the game actually launched this time which is an improvement but the actual button isn't showing up

(btw thanks so much im deff gonna have to give you a shoutout when my game is done!)

[Milkymalk]

Not sure if this is the reason, but I realized that the "clicked" attribute is wrong - it should be "action".

[feisty_wizard]

looks like the problem might be is that it jumps to "fish" before you even have the option to click it?

[Milkymalk]

That shouldn't happen with "action Jump('fish')"
Maybe the screen isn't shown at all?

Do you SHOW or CALL the screen?

[feisty_wizard]

Neither? the code I showed you is all i have for it atm. I haven't tried to do the LiveComposite, I just wanted to get the basics of actually getting it to show up before I added the more difficult stuff

PS I did change it to action! still the same thing is happening. Should I initially hide the dialog box in till needed? Would that be causing an error?

[Milkymalk]

If you define a screen, it's just sitting in the code waiting to be used. If you don't "show screen NAME" or "call screen NAME", it will never appear

[feisty_wizard]

ahhh okay im sorry i'm having so much trouble with this but I really appreciate your continued help!

So I would be putting the initial code in screen not script?
if so, how much code of the screen goes there? do I already set it up with all the image buttons + dialogue and then call it to the script when needed?

big, super big question. Where should I START with this code cuz i all kinds of confused im so sorry orz Like of course I should start with the foundation but im unsure what that actually includes.

as of right now I just want to figure ut a skeleton code that I can use to implement in the actual game

[Milkymalk]

It's much better in the long run to actually learn these things than be told how they work. The documentation is, at least for those basics, very good: https://www.renpy.org/doc/html/
Read at least the basics ("Quickstart" and "Screens and Screen Language" under "Customizing Ren'Py", or you will come back with really simple questions all the time. If you have specific questions about something, I'm happy to help. But before that, you should at least know how things work in theory

First, all init blocks are executed. Then the game starts from the label "start" and follows through, only diverted by calls and jumps. All screen, transforms, transitions, Python classes and Python functions are declared wherever you want, outside the normal flow, and are then used inside by calling (call screen SCREENNAME), showing (show screen SCREENNAME), calling a function (anything you see with () after it) or applying transforms or transitions (see: "at", "with")

If you want a screen to show up, you define it outside the flow and then use call screen or show screen to "activate" it. Show screen just shows it and keeps following the script while the screen is visible, while call screen waits for a Return() action, which closes the screen and resumes the script.