Trying to make a point and click, need button help

[KiddFox]

As the title says I wanna make a very, very simple in terms of what you do in the game-just click things and either get flavor text, go to a new screen, or get a simple yes/no prompt. From what I can understand I just need to make a buncha "map" screens for you to explore. I don't understand how to make the image an "imagemap" nor do I understand how to set clickable coordinates-although I might have found a background/"imagemap" work around in some of the games I downloaded to see if I can figure out what they did. I'm using a really simple set of scribbles I made as place holders until I get a hang of it for more detailed images. Hers' said placeholders




the first one is a very watered down "starting" spot with the windows and door clickable for flavor text for the test build, and the side going to the second screen. And basically the same for the back with the door and dog house as flavor stuff and the "front" square to get back to the first screen. Rinse repeat because no ending is meant to be there yet. I'm very, very new to programming and have only used renpy to make linear lil short story things before so this is a definite step up for me haha. I think it'll be really cool for the story I wanna make tho! Anyone have any pointers on how to do the buttons?

[Alex]

Here's kind of example with buttons - viewtopic.php?f=8&t=48359#p478985

[KiddFox]

I guess my wording was bad. Since by "button" I mean like...area you click. I'm going for a Phoenix Wright searching for evidence sorta look but without any items being removed from the scene.

[Scribbles]

I did this, but it was horribly flawed lol. I created a few screens and it sorta worked if you clicked on the textbutton to "look around" in the quick menu on the bottom of the screen it brought up this imagemap. Not exactly what you're looking for but maybe you can get a better version sorta working.

Code: Select all

screen h_o_1():

    textbutton "I'm done looking around.":
        action Return()
        xalign 0.5
        ypadding 50
        text_size 25
        text_bold True


    imagemap:
        auto "images/hidden_obj_%s.png"

        hotspot (39, 300, 96, 49) action [SetVariable("note", "These are pretty flowers."), Show("information_screen")]#Flowers
        hotspot (193, 387, 114, 151) action [SetVariable("note", "That is a cute dog."), Show("information_screen")]#Dog
        hotspot (455, 574, 76, 70) action [SetVariable("note", "I wonder if that is tea or coffee?"), Show("information_screen")]#cup
        hotspot (889, 220, 74, 144) action [SetVariable("note", "Look at all those books."), Show("information_screen")]#Books
        hotspot (1139, 351, 130, 102) action [SetVariable("note", "What a cute cat."), Show("information_screen")]#Cat


screen information_screen():

    frame:
        xalign 0.5
        yalign 0.5

        vbox:
            xalign 0.5
            yalign 0.5
            spacing 15
            text _(note) size 25
            textbutton "Done" action Hide("information_screen") xalign 1.0

[Alex]

You can use imagemap or mousearea if you already have an image for location. Or use imagebuttons to place active spots over background.
https://www.renpy.org/doc/html/screens. ... statements
https://www.renpy.org/doc/html/screens. ... -mousearea

For the imagemaps:
- create a screen and put imagemap code there, then call or show this screen to let player interact with it,
- for imagemap you need to set at least idle image (image where all hotspots drawn in inactive state) and hover image (image where all hotspots drawn like when player hovers mouse pointer over them all at once - in active state).
In code sample from documentation you can change

Code: Select all

imagemap:
        auto "gui_set/gui_prefs_%s.png"

to

Code: Select all

imagemap:
        idle "my_idle_img.png"
        hover "my_hover_img.png"

to use just 2 images.
- next thing - set the hotspots. You need to know coordinates for them. You can find them in photoshop-like program that can show the position of mouse pointer over image in pixel, or use ImageLocationPicker - run your project and press shift+d. Also set an action for the hotspot - https://www.renpy.org/doc/html/screen_actions.html

Hope this will help you make an imagemap.
If you'll got farther questions - keep asking and someone will answer.