Image Maps & UI

[wannabedamned]

This may be a stupid question, but I am learning as I go!

I'm using other peoples shared code from the forums, and I'm adapting it for my own use. Learning along the way ofcourse!

So I have an image map built and this works perfectly, however I now want to have a user interface. Stat Bars, etc.

The problem I'm facing is both the bar and the image maps are called by "Call\Show Screen"

So call screen Player_House_IM and show screen thebar appear to be over shadowing each other.

My Code:

Code: Select all

screen thebar:
    $ ui.bar(100, barvariable, xmaximum=400, ymaximum=15, left_bar=Frame("temp.png", 10, 0), right_bar=Frame("temp.png", 10, 0), xalign=0.0, yalign=0.0, thumb="temp.png", thumb_shadow=None)

Code: Select all

screen player_bedroom_IM:
    imagemap:
        ground '/Player_Bedroom/Player_Bedroom.jpg'
        idle '/Player_Bedroom/Wardrobe_Icon.png'
        hover '/Player_Bedroom/Wardrobe_Hover.png'

        alpha False

        hotspot(54,278,110,110) clicked Jump("wardrobe_start")
        hotspot(414,167,110,110) clicked Jump("wardrobe_start")
        hotspot(312,288,110,110) clicked Jump("wardrobe_start")
        hotspot(815,276,110,110) clicked Jump("wardrobe_start")
        hotspot(1131,460,110,110) clicked Jump("wardrobe_start")
        hotspot(555,626,110,110) clicked Jump("Player_House_Map")

The UI shows fine here:

Code: Select all

label wardrobe_start:
    show player wardrobe
    show screen thebar
    jump wardrobe_menu

But that's because that particular game element isnt an image map, just a basic label and menu.

Hopefully I'm making a stupid mistake, that can be pointed out and amended? Also, keep in mind the abundance of "wardrobe_starts" in the code are there until I update them to new destinations. Placeholders, essentially.

[vollschauer]

That's perhaps pretty old code you found in the forum, some things like "ui.bar" and "clicked" are obsolete I think and there are better ways to do it by now.
I would recommend you to take a look at the current doc's "screen language", and yeah I wouldn't use imagemap, use buttons or imagebuttons and Bar...
(thats just how I would do it, without knowing how you issue looks like)

https://www.renpy.org/doc/html/screens. ... n-language

[Imperf3kt]

Not just obsolete, but not recommended as ui.x has been deprecated.
If you see anything with ui.something - it is no longer compatible with Renpy and needs to be updated.

[wannabedamned]

Thank You for that! Searching forums for answers can have its bad side effects afterall!

But that link above has put me on the right path, My own fault. I'm renowned for jumping in at the deep end, instead of reading through the beginner material. Set myself up for failure!

[Dookiesh0ez]

I'm sure this isn't the best way to do it, but I simply manually added a bar to every imagemap where the UI would be accessible and gave them hotspots.

i.e.

Code: Select all

screen forest:
    imagemap:
        ground "images/BG_Forest_Map.png"
        hover "images/BG_Forest_Map_Hover.png"
        hotspot(20,4,60,49) action Jump("stats")
        hotspot(81,1,59,51) action ShowMenu("preferences")

where those hotspots are on the same spot for each imagemap.

or, or possibly in addition to, you could use zorder. Here is how I used it on my stat screen to move things forward and backward. Once again not the greatest way as I'm calling several screens at once, but it works.

Code: Select all

screen stats:
    zorder 2
    imagemap:
        ground "images/statscreen_Map.png"
        hover "images/statscreen_Map_Hover.png"
        hotspot (739,20,62,69) action Rollback()
screen money:
    zorder 3
    text "{size=+24}{color=#ff0000}[money]{/size}" xpos 260 ypos 380
screen strength:
    zorder 3
    text "{size=+24}{color=#ff0000}[strength]{/size}" xpos 300 ypos 210
screen intelligence:
    zorder 3
    text "{size=+24}{color=#ff0000}[intel]{/size}" xpos 300 ypos 160

[wannabedamned]

Thank you very much for your responses, I've actually managed to get something working without using image maps.

I've used image_buttons and a hbox\vbox with x\y positioning.

It works fine, but its always on. I'm wanting to turn the code on and off depending on location?

I was thinking the below should work.

Code: Select all

init python:
    if player_location == player_bedroom:
        show_image_button = True
        else:
            show_image_button = False

However I keep getting told I have invalid syntax for the else part of the code.

So it works, I just cant figure out how to toggle it on and off

[SundownKid]

The else has to be on the same indent as the if branch.

[wannabedamned]

The else has to be on the same indent as the if branch.

ah, Such stupid mistakes. haha.

Thank You! It's now working!