Ren'Py Help with overlaying text onto an imagemap.*

[deadend]

EDITED* changed screen to image map.

Hello, I'm looking to overlay text onto an open image map. I have a button which opens up a menu that I'd like to display status of relationships and amount of money. However I'm just not sure how to do this, my ren'py knowledge ain't the best.

(What it looks like.)



(What I want it to display.)


(Excuse the shoddy buttons, its a WIP lol.) If anyone could help me out that'd be awesome, thanks.

 

[Epadder]

If you have problems like this in the future it would be better to ask in the

You must be registered to see the links

section

Regardless, using a screen like you originally intended is the better way to go about this.

For screens it layers from bottom(first) to top(last) by default.

So:

screen examplescreen():
    add "GrayBackground.png"
    text "Money: [nameofmoneyvariable]" font "nameoffont.ext" size 35 xalign 0.3 yalign 0.3
    text "Time: [timeofdayvariable]" font "nameoffont.ext" size 35 xalign 0.7 yalign 0.3
    ##etc

To get the positioning exactly like you want it you can use a combination of hbox/vbox or a grid, the limitation of a grid is you have to be specific about the amount of columns and rows.

You can read more about this on the

You must be registered to see the links

section of the documentation.

 

[deadend]

If you have problems like this in the future it would be better to ask in the

You must be registered to see the links

section

Regardless, using a screen like you originally intended is the better way to go about this.

For screens it layers from bottom(first) to top(last) by default.

So:

screen examplescreen():
    add "GrayBackground.png"
    text "Money: [nameofmoneyvariable]" font "nameoffont.ext" size 35 xalign 0.3 yalign 0.3
    text "Time: [timeofdayvariable]" font "nameoffont.ext" size 35 xalign 0.7 yalign 0.3
    ##etc

To get the positioning exactly like you want it you can use a combination of hbox/vbox or a grid, the limitation of a grid is you have to be specific about the amount of columns and rows.

You can read more about this on the

You must be registered to see the links

section of the documentation.

Whoops, wasn't sure where to ask! Thanks so much for the help, this is perfect.

 

[Epadder]

No problem

 

[wurg]

Here is some code I wrote to practice, I used the code from Dating my Daughter as a reference on how to do it, and the image beings I can't make my own. I just lined everything up like you would do on any other screen. The only thing that is not part of the imagemap is the return button at the bottom.

 

[osanaiko]

Don't forget that the original

You must be registered to see the links

are still active and have a lot of helpful "cookbook" information already present:

You must be registered to see the links

 

[OhWee]

Besides the aligns (xalign, yalign), you can also use xpos/ypos, and xoffset/yoffset. This can depend on the situation. I personally like the xpos/ypos approach because you get finer control (i.e. per pixel) vs. 'guessing' with the xalign and yalign, but there's nothing wrong with the aligns, if that's your preference.

I like to use icons with overlayed text on hud screens, hence my desire for finer control. Like this save screen that I did for my now obsolete DMD mod.

In this case, the 'day oval', starburst, circle, and heart icons for each save slot are actually all part of the same overlay .gif (which is positioned, as is the 'x' box in the corner), with the numbers positioned/aligned using the appropriate tags.
I did this a long time ago, though, so don't ask me how I got the 'hover here to add text' thing to work, 'cuz it was a bit of a frankenstein, and it wasn't quite the implementation I had hoped for anyways. But I digress.

You can also do weird things like put text on top of a slider bar using positioning/align. Like this thing I did here for Brothel King...

Note the +5 to mood on top of the upkeep bar. The 'girl buttons' also have a number of positioning elements in play.
This mod is also about to be obsolete, as Goldo (the game designer) has incorporated some of my ideas into the game.