[Solved] Hotspot image value

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

[Solved] Hotspot image value

#1 Post by senisanti »

Code: Select all

screen thedeck1():
    imagemap:
        idle "deckzonecard"
        hover "deckzonecard"

        hotspot (307, 475, 455, 690) action Show("character")

screen character():
    imagemap:
        idle "blackdeck"
        hover "blackdeck"

        if iknowzeina == True:
            add "zeinadeckb" align (0.02,0.05)
            textbutton "Zeina" action Show("zeinacardselect"):
                xalign 0.03
                yalign 0.01


screen zeinacardselect():
    add "zeinabase"
    imagebutton auto "icon/drag_%s.png" action


Hey, guys.

I'm looking to add an image to the hotspot.
But not a simple image.

On my last screen you can see that the code is not finished.
I want this code to allow the player to click on a button and that button to display an image on the hotspot area.

In the second screen, *screen characters* I will create many more characters.
*if iknowzeina == True* the same but with others characters than zeina.

In the last screen *screen zeinacardselected*
I want to create a code that allows me to give a value to the image.
My idea is that every time the player comes on this screen he can change the image that will appear on the hotspot area.
If the player goes on zeina's screen then he can put zeina's image on the hotspot area if he goes on another character then he can put the image of this other character.
But I can't do better than putting an image, I can't give it an editable value that can be changed by the player.

thanks for help!
Last edited by senisanti on Sat Jun 06, 2020 10:26 am, edited 1 time in total.

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: Hotspot image value

#2 Post by namastaii »

I believe you can have the idle layer BE the layer with the characters (put all the character art on one layer) and have the hotspot cover the entire body/section you want it to instead of placing an image on top and use a true/false to whether that hotspot is there or not and if it's false, you won't be able to see what is there. Right now, you're using the same image for both the "ground" and "idle"
If that makes sense.

correction: you're not using a ground image right now but you could use your current idle as the ground instead.

Here's more info on imagemaps https://www.renpy.org/doc/html/screens. ... p#imagemap

you'd format it like so:

Code: Select all

if iknowzeina:
    hotspot #etc...
"if iknowzeina:" is the same as "if iknowzeina == True"

User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

Re: Hotspot image value

#3 Post by senisanti »

I can't use the whole image for the hotspot that sends to the second screen because, sorry I forgot to specify that I have to put six characters on the deck.
On my code I put only one hotspot but I'm going to add 5 more.

The 5 must be represented by a different character.

You pointed out that the error was not in the last screen but in the first one so I modified it by making the idea you gave me with the true/false.

Code: Select all

screen thedeck1():
    imagemap:
        idle "deckzonecard"
        hover "deckzonecard"

        if character1 == False:
            hotspot (307, 475, 455, 690) action Show("character")
        if zeinahaschoosen == True:
            hotspot (307, 475, 455, 690) action Show("character") alt "zeinadeckcard"
        if donnahaschoosen == True:
            hotspot (307, 475, 455, 690) action Show("character") alt "donnadeckcard"

        if character2 == False:
            hotspot (500, 475, 567, 690) action Show("character")
        if zeinahaschoosen == True:
            hotspot (500, 475, 567, 690) action Show("character") alt "zeinadeckcard"
        if donnahaschoosen == True:
            hotspot (500, 475, 567, 690) action Show("character") alt "donnadeckcard"


screen character():
    imagemap:
        idle "blackdeck"
        hover "blackdeck"

        if iknowzeina == True:
            add "zeinadeckb" align (0.02,0.05)
            textbutton "Zeina" action Show("zeinacardselect"):
                xalign 0.03
                yalign 0.01
        if iknowdonna == True:
            add "donnadeckb" align (0.12,0.05)
            textbutton "Donna" action Show("donnacardselect"):
                xalign 0.13
                yalign 0.01

screen zeinacardselect():
    imagemap:
        idle "blackdeck"
        hover "blackdeck"

        add "zeinadeckcard" align (0.44,0.40)
        $ zeinahaschoosen = True
        $ character1 = True
        textbutton "SelectZeina" action Show("thedeck1"):
            xalign 0.64
            yalign 0.20
I don't think it's possible to make the image appear with ALT but I couldn't test it.
If I have to do otherwise, please explain it to me.

But I say I can't test if it works because the third screen doesn't work.
the button "selectzeina" is not clickable, why?

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: Hotspot image value

#4 Post by namastaii »

you can have all of the characters on one layer with individual hotspots. the individual hotspots will be hidden/shown based on your booleans even though they're the same png layer

You can use my free template I have on itch as reference https://lunalucid.itch.io/free-characte ... -for-renpy

See how I use the layers for the imagemaps. If you put a boolean above one of the hotspots (and the boolean is false) then that part of the layer isn't shown

Code: Select all

screen dress_keri():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"

        ##Skin Color##
        if 3 == 1:
            hotspot(267, 112, 80, 80) action SetVariable("skin_color", 1)
        hotspot(364, 112, 80, 80) action SetVariable("skin_color", 2)
        hotspot(461, 112, 80, 80) action SetVariable("skin_color", 3)
        hotspot(558, 112, 80, 80) action SetVariable("skin_color", 4)
        hotspot(655, 112, 80, 80) action SetVariable("skin_color", 5)
Image

Skin color box 1 is hidden.

I've attached the "idle" layer image so you can see what I mean by having all items on one layer.
Attachments
idle.png

User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

Re: Hotspot image value

#5 Post by senisanti »

I don't understand anything.

If I use the imagemap like you do, I get all the images.
I have to define the viable skin_color... but the main question how I get one of the characters to come to the hotspot area, my question remains the same.

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: Hotspot image value

#6 Post by namastaii »

The template is just an example for how imagemaps work. The variables used and such are just for the project specifically. I'm just talking about putting all your characters on one layer (because this is how imagemaps work - you're not using imagemaps correctly) and using a boolean to make them (the parts of the images within the hotspots) visible/clickable or not

User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

Re: Hotspot image value

#7 Post by senisanti »

No, that's not what I want to do, I can't put my characters on a single layer.
I have 40 characters, only 6 must be selected by the player to appear on the 6 hotspot zones.

User avatar
namastaii
Eileen-Class Veteran
Posts: 1350
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: Hotspot image value

#8 Post by namastaii »

You're not understanding how hotspots/imagemaps work and I'm not sure how to help you understand. I suggest watching a tutorial on imagemaps
I'm not saying put all 40 characters on a layer. I'm talking about your card/selection screen and the hiding/showing of the characters like you described. You don't need to add an image on top of the imagemap. Why are you using an imagemap if you aren't utilizing it? the hotspots work for the imagemap layers - not images you put on top of it

you make a layer in photoshop with all 6 characters the way you'd like it to be laid out. then determine the hotspots for those - set that image as the "idle" for the imagemap and attach the appropriate hotspots with the appropriate booleans

the first hotspot will only outline the first character, and the second outlines the second character and so forth. if the boolean is false, you won't visibly see THAT part of the layer inside that hotspot - until you make that boolean true

I actually suggest you just use imagebuttons that appear based on booleans instead if imagemaps are too confusing.

User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

Re: Hotspot image value

#9 Post by senisanti »

next!
Last edited by senisanti on Sat Jun 06, 2020 5:45 am, edited 1 time in total.

User avatar
senisanti
Regular
Posts: 94
Joined: Tue May 07, 2019 4:37 am
Projects: Allball, Smash scrap metal, Santi...
Location: Rennes
Contact:

Re: Hotspot image value

#10 Post by senisanti »

Once again, sorry Namastaii, you are an angel to be patient with me.

Remember six months ago, you yelled at me and told me to go learn python.
I did what you told me, you know that in six months we can't learn python, especially me...

But I still learned a lot.
I also forgot that I hated hotspots, I've never used them before and I'll never use them again.
It's not your explanation or imagemap I don't understand, it's just this ******* hotspot I don't understand.
So I did what I always do, imagebutton.
I did what you told me but with imagebuttons to replace the hotspot, of course, I had to modify a couple of things to make the imagebuttons work, but I finally managed to get my code to work.
I've been trying for 12 hours doing with hotspots without success what I managed to do with an imagebutton in 1 hour.

It took you a lot of patience again and I thank you very much for that.
I don't want to break your morale for today but I'll say you *see you soon*.

Post Reply

Who is online

Users browsing this forum: Sugar_and_rice