[SOLVED!] Popups appearing above highlighted objects

[ileikturtles]

I want one of three popups (Use, Talk or View) to appear when hovering over interact-able objects or people (which are imagebuttons).

In the image example, you can see the USE popup appearing over the desk, showing the player that clicking on the desk will make the character "use" it.

I've managed so far with ShowTransient("USE"), and defining a screen called USE which holds the popup. However, I've only managed to give this popup an absolute location at the bottom centre of the screen.

Code: Select all

screen USE:
    image "ASSETS/UI/popupUSE.png":
        xalign 0.5 yalign 0.95

I have 2 questions. I suppose the most direct way to do it would be to give the ShowTransient location properties, but I can't figure out (or find code examples) which show the correct syntax.

On the other hand, I'm wondering if I can somehow program these locations to calculate themselves in order to appear centred and slightly above the highlighted object (like xalign 0.5 and ypos -0.1, for example).

[Ocelot]

You can add parameters to your screen:

Code: Select all

screen USE(xvalue, yvalue):
    image "ASSETS/UI/popupUSE.png" align (xvalue, yvalue)

# . . .
ShowTransient("USE", xvalue=.5, yvalue=.95)

[ileikturtles]

You can add parameters to your screen:

Code: Select all

screen USE(xvalue, yvalue):
    image "ASSETS/UI/popupUSE.png" align (xvalue, yvalue)

# . . .
ShowTransient("USE", xvalue=.5, yvalue=.95)

THANK YOU!

One follow up question, I find it difficult to wrap my head around xalign, xpos and xanchor. I currently have to work out the location based on the 0,0 of the popup, which is tricky as it's an odd shape. Can I add something into the code for Screen USE in order to align it to the pointing tail of the speechbubble? So, bottom centre of the icon?

Code: Select all

imagebutton idle "ASSETS/CABIN/OBJ - desk hover.png" xpos 246 ypos 448 hovered [tt.Action("\"The Campbell Corp. mobile command centre.\"\n\n> CHECK WRITING DESK"), ShowTransient("USE", xvalue=246, yvalue=448)] unhovered Hide("USE") action Jump("Desk") focus_mask True # DESK

I gave the ShowTransient my exact coordinates, which I'll do per item.

Code: Select all

screen USE(xvalue, yvalue):
    image "ASSETS/UI/rectUSE.png"  pos (xvalue, yvalue)

PS I used pos(xvalue, yvalue) because with align the screen didn't seem to show up.

[Ocelot]

Yes, anchor property. Anchor is a point on image which is used as base, for example, *pos statements will ensure that anchor of your image will be positioned in place described by *pos. align just sets pos and anchor to the same value (and it should really be used only with relative values, not absolute ones: your screen probably did show up, but it was just outside of window)

So you can use similar code:

Code: Select all

screen USE(xvalue, yvalue):
    image "ASSETS/UI/rectUSE.png":  
        anchor (30, 27) # Replace (30, 27) with coordinates of bubble tail
        pos (xvalue, yvalue)

[ileikturtles]

Yes, anchor property. Anchor is a point on image which is used as base, for example, *pos statements will ensure that anchor of your image will be positioned in place described by *pos. align just sets pos and anchor to the same value (and it should really be used only with relative values, not absolute ones: your screen probably did show up, but it was just outside of window)

So you can use similar code:

Code: Select all

screen USE(xvalue, yvalue):
    image "ASSETS/UI/rectUSE.png":  
        anchor (30, 27) # Replace (30, 27) with coordinates of bubble tail
        pos (xvalue, yvalue)

THANK YOU! It works brilliantly! For anyone wishing to implement popups, this is the code I ended up with:

Code: Select all

screen USE:#(xvalue, yvalue):
    image "ASSETS/UI/rectUSE.png" anchor (50, 100) pos (xvalue, yvalue)
    
screen TALK:#(xvalue, yvalue):
    image "ASSETS/UI/rectTALK.png" anchor (50, 100) pos (xvalue, yvalue)
    
screen VIEW:#(xvalue, yvalue):
    image "ASSETS/UI/rectVIEW.png" anchor (50, 100) pos (xvalue, yvalue)
    
screen MOVE:#(xvalue, yvalue):
    image "ASSETS/UI/rectMOVE.png" anchor (50, 100) pos (xvalue, yvalue)

I hid (xvalue, yvalue): and it works fine. So I guess that bit isn't vital.

Then, in my interaction screen, which holds all the imagebuttons for the items and people you can interact with, I have this;

Code: Select all

screen CabinFree:
    default tt = Tooltip("")
    
    imagebutton idle "ASSETS/CABIN/OBJ - suitcase hover.png" xpos 866 ypos 99 hovered [tt.Action("\"Karen only let me pack a small bag...\"\n\n> CHANGE CLOTHES"), ShowTransient("USE", xvalue=1122, yvalue=112)] unhovered Hide("USE") action [Play ("sound", "ASSETS/SOUND/opening luggage sound.ogg"), Jump("Suitcase")] focus_mask True # LUGGAGE
    imagebutton idle "ASSETS/CABIN/OBJ - ash1 hover.png" xpos 1319 ypos 765 hovered tt.Action("\"Karen's ashtray. Always found in her immediate vicinity. Otherwise uninteresting.\"") action NullAction() focus_mask True # ASHTRAY
    imagebutton idle "ASSETS/CABIN/OBJ - desk hover.png" xpos 246 ypos 448 hovered [tt.Action("\"The Campbell Corp. mobile command centre.\"\n\n> CHECK WRITING DESK"), ShowTransient("USE", xvalue=443, yvalue=460)] unhovered Hide("USE") action Jump("Desk") focus_mask True # DESK
    imagebutton idle "ASSETS/CABIN/OBJ - book hover.png" xpos 1765 ypos 736 hovered tt.Action("\"{i}A Daughter's a Daughter{/i}, Agatha Christie. Some light reading for Karen whilst I do all the actual work.\"") action NullAction() focus_mask True #BOOK
    imagebutton idle "ASSETS/CABIN/OBJ - ash2 hover.png" xpos 1460 ypos 432 hovered tt.Action("\"Another one. On slow days I like to play 'spot the ashtrays' with Fredi.\"") action NullAction() focus_mask True 
    imagebutton idle "ASSETS/CABIN/OBJ - door hover.png" xpos 1605 ypos 84 hovered [tt.Action("\"If we're going with the old \"Lie your way into places you shouldn't be\" ploy, it would be through here."), ShowTransient("MOVE", xvalue=1714, yvalue=292)] unhovered Hide("MOVE") focus_mask True action NullAction() #\"\n\n> EXIT CABIN" action Jump("ExitCabin")  #DOOR
    
    imagebutton idle "ASSETS/CABIN/CHAR - karen.png" xpos 1010 ypos 314 hovered [tt.Action("\"Karen Campbell: Aunt. Mentor. Greatest threat to my personal safety.\"\n\n> CHAT WITH KAREN"), ShowTransient("TALK", xvalue=1145, yvalue=309)] unhovered Hide("TALK") action Jump("CabinKaren") focus_mask True
    imagebutton idle "ASSETS/CABIN/CHAR - fredi default sitting.png" xpos 691 ypos 227 hovered [tt.Action("\"Fredi, our stalwart manservant. Does what he's told and doesn't complain too much.\"\n\n> CHAT WITH FREDI"), ShowTransient("TALK", xvalue=760, yvalue=223)] unhovered Hide("TALK") action NullAction() #Jump("Fredi") focus_mask True

    if viewCatPainting == 2:
        imagebutton idle "ASSETS/CABIN/OBJ - painting hover.png" xpos 1791 ypos 193 hovered tt.Action("\"Might cost a bomb... but it's still ugly.\"\n\n") action NullAction() focus_mask True # PAINTING 
    else: 
        imagebutton idle "ASSETS/CABIN/OBJ - painting hover.png" xpos 1791 ypos 193 hovered [tt.Action("\"Whoa, that's one ugly painting.\"\n\n"), ShowTransient("VIEW", xvalue=1868, yvalue=191)] unhovered Hide("VIEW") action [Play ("sound", "ASSETS/SOUND/paper rustle.mp3"), Jump("CatPainting")] focus_mask True # PAINTING 
    
    image "ASSETS/CABIN/CHAR - scottie default.png" xpos 425 ypos 275

    use quick_menu
    text tt.value style "tooltipcaption":
        xalign 0.5

So basically, the imagebutton states which of the 4 popups it should show in hover mode, and xvalue and yvalue show where the bubble should point.

Thanks again Ocelot!! I wouldn't have figured this out by myself for sure

[Ocelot]

I hid (xvalue, yvalue): and it works fine. So I guess that bit isn't vital.

It isn't vital, but it is:
1) Allows for better performance
https://www.renpy.org/doc/html/screen_o ... meter-list
2) Documents screen parameters: you would know what you should provide and what can be tuned by a single glance on screen header.

[ileikturtles]

I hid (xvalue, yvalue): and it works fine. So I guess that bit isn't vital.

It isn't vital, but it is:
1) Allows for better performance
https://www.renpy.org/doc/html/screen_o ... meter-list
2) Documents screen parameters: you would know what you should provide and what can be tuned by a single glance on screen header.

I can't say I fully understand but I see that it's better to use them, so I will Thanks once again!