Screen Background Changes While Hovering [Solved]

[SilverSnow]

They told me it is possible but I'm not familiar enough with codes and I think there aren't many topics regarding this matter either?

Thank you.

[namastaii]

I have no idea if this is what you're looking for but maybe it's worth a shot looking at: https://www.renpy.org/doc/html/screens. ... -mousearea

[SilverSnow]

I have no idea if this is what you're looking for but maybe it's worth a shot looking at: https://www.renpy.org/doc/html/screens. ... -mousearea

Would this work for the background screen as well? I was thinking of a static background that when hovering on each buttons changes from its original color to being layered by a series of blood stains, then reverts back to normal when unhovered.

[Donmai]

Now that you've finally explained better what you want, that seems a job for imagemaps (a namastaii's favorite ) or imagebuttons. https://www.renpy.org/doc/html/screens. ... statements
https://www.renpy.org/doc/html/screens.html#imagebutton
Do a search and you will find tons of threads about imagemap/imagebutton use use.

[SilverSnow]

Now that you've finally explained better what you want, that seems a job for imagemaps (a namastaii's favorite ) or imagebuttons. https://www.renpy.org/doc/html/screens. ... statements
https://www.renpy.org/doc/html/screens.html#imagebutton
Do a search and you will find tons of threads about imagemap/imagebutton use use.

Thank you for the help.

My friend did found a way to make this function work but we can't figure out how to move the overlay a top the BG and not a top the UI.

Here's the code.

[namastaii]

If I were you, (and Idk how well this would work because I'd probably need to test it out and mess with it a bit) I'd make it so when you hover each thing, it just changes a variable instead of showing the screen. if that makes sense. Tell it to SetScreenVariable (which you could keep as my_picture) to true or false or 1 or 2 (whatever works better for you) and on the gui tooltip screen (or maybe even just put this on the save/load screen instead of having multiple screens) just have it change the ground image depending on what the screen variable is. Does this make sense?

From my understanding, you're just trying to change one image to a different version right? Have a normal background and then hover to have a background with blood splatters?

[namastaii]

(just to warn you, I'm not necessarily the best at these things and there could be a better way to do this)
What seems to work in my own version is something like this.

Define my_picture somewhere. I think putting it in the beginning of your screen is fine but I like to put these variables with the rest of my variables to make sure it's picked up.

Code: Select all

default my_picture = False

and if I were you, I'd just make one file picker page for both the save and load. It's less text and more organized (assuming the save and load pages are basically identical)

Code: Select all

screen file_picker:
    
    if my_picture is True:
        imagemap:

            ground "ground_with_splatters.png" #Let's say this is the blood splatter picture for the background (the ground shouldn't be anything more than just the image in the back anyway)
            hover "hover.png"
            idle "idle.png"
            selected_idle "selected_idle.png"
            selected_hover "selected_hover.png"  
 
            cache False
            alpha False
    
            hotspot (100,460,100,130) at buttonfade action FilePagePrevious() 
            hotspot (850,460,100,130) at buttonfade action FilePageNext(max=5)
            
            
          
            hotspot (205, 460, 100, 130) at buttonfade clicked FilePage("1") 
            hotspot (305, 460, 100, 130) at buttonfade clicked FilePage("2")
            hotspot (450, 460, 100, 130) at buttonfade clicked FilePage("3")
            hotspot (590, 460, 100, 130) at buttonfade clicked FilePage("4")
            hotspot (730, 460, 100, 130) at buttonfade clicked FilePage("5")
            
            hotspot(920,260,290,72) action MainMenu()
            hotspot(920,330,290,72) action Quit(confirm=True)
            
            hotspot(50,590,400,200) action Return() at buttonfade
            
            
            hotspot (140,160,250,300) clicked FileAction(1) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=1)
                key "save_delete" action FileDelete(1)
            hotspot (395,160,250,300)   clicked FileAction(2) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=2)
                key "save_delete" action FileDelete(2)
            hotspot (650,160,250,300)   clicked FileAction(3) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=3)
                key "save_delete" action FileDelete(3)
            
        
    if my_picture is False:
        imagemap:
            ground "ground_normal" #the unhovered version
            hover "hover.png"
            idle "idle.png"
            selected_idle "selected_idle.png"
            selected_hover "selected_hover.png"  

            cache False
            alpha False
    
            hotspot (100,460,100,130) at buttonfade action FilePagePrevious() 
            hotspot (850,460,100,130) at buttonfade action FilePageNext(max=5)
            
            
            #hotspot (100, 460, 100, 130) at buttonfade clicked FilePage("auto") 
            hotspot (205, 460, 100, 130) at buttonfade clicked FilePage("1") 
            hotspot (305, 460, 100, 130) at buttonfade clicked FilePage("2")
            hotspot (450, 460, 100, 130) at buttonfade clicked FilePage("3")
            hotspot (590, 460, 100, 130) at buttonfade clicked FilePage("4")
            hotspot (730, 460, 100, 130) at buttonfade clicked FilePage("5")
            
            hotspot(920,260,290,72) action MainMenu()
            hotspot(920,330,290,72) action Quit(confirm=True)
            
            hotspot(50,590,400,200) action Return() at buttonfade
            
            
            hotspot (140,160,250,300) clicked FileAction(1) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=1)
                key "save_delete" action FileDelete(1)
            hotspot (395,160,250,300)   clicked FileAction(2) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=2)
                key "save_delete" action FileDelete(2)
            hotspot (650,160,250,300)   clicked FileAction(3) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=3)
                key "save_delete" action FileDelete(3)

basically just look at how I coded the hotspot for the hovered and unhovered actions and the if statements for the two different imagemaps. I wish you could just simple put an IF statement next to the ground image and not have to have two whole copies of the imagemap but I found this is the only way it works.

Then just attach that file picker to both save and load screens:

Code: Select all

screen save:
    tag menu
    use file_picker
    add "save_title.png"
screen load:
    tag menu
    use file_picker
    add "load_title.png"

If you haven't noticed, I put in an image for each of the screens to indicate which is the save screen and which is the load screen by just having a title with a transparent background
so the load screen will have a 'load' title and the save will have a 'save' title. Since everything else is identical, this is all I really needed differently for each screen.

I'm awful at explaining things so I'm hoping this wasn't too confusing. Just wanted to share what seems to work on my end. Sorry if this causes you to remake everything.

[SilverSnow]

(just to warn you, I'm not necessarily the best at these things and there could be a better way to do this)
What seems to work in my own version is something like this.

Define my_picture somewhere. I think putting it in the beginning of your screen is fine but I like to put these variables with the rest of my variables to make sure it's picked up.

Code: Select all

default my_picture = False

and if I were you, I'd just make one file picker page for both the save and load. It's less text and more organized (assuming the save and load pages are basically identical)

Code: Select all

screen file_picker:
    
    if my_picture is True:
        imagemap:

            ground "ground_with_splatters.png" #Let's say this is the blood splatter picture for the background (the ground shouldn't be anything more than just the image in the back anyway)
            hover "hover.png"
            idle "idle.png"
            selected_idle "selected_idle.png"
            selected_hover "selected_hover.png"  
 
            cache False
            alpha False
    
            hotspot (100,460,100,130) at buttonfade action FilePagePrevious() 
            hotspot (850,460,100,130) at buttonfade action FilePageNext(max=5)
            
            
          
            hotspot (205, 460, 100, 130) at buttonfade clicked FilePage("1") 
            hotspot (305, 460, 100, 130) at buttonfade clicked FilePage("2")
            hotspot (450, 460, 100, 130) at buttonfade clicked FilePage("3")
            hotspot (590, 460, 100, 130) at buttonfade clicked FilePage("4")
            hotspot (730, 460, 100, 130) at buttonfade clicked FilePage("5")
            
            hotspot(920,260,290,72) action MainMenu()
            hotspot(920,330,290,72) action Quit(confirm=True)
            
            hotspot(50,590,400,200) action Return() at buttonfade
            
            
            hotspot (140,160,250,300) clicked FileAction(1) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=1)
                key "save_delete" action FileDelete(1)
            hotspot (395,160,250,300)   clicked FileAction(2) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=2)
                key "save_delete" action FileDelete(2)
            hotspot (650,160,250,300)   clicked FileAction(3) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=3)
                key "save_delete" action FileDelete(3)
            
        
    if my_picture is False:
        imagemap:
            ground "ground_normal" #the unhovered version
            hover "hover.png"
            idle "idle.png"
            selected_idle "selected_idle.png"
            selected_hover "selected_hover.png"  

            cache False
            alpha False
    
            hotspot (100,460,100,130) at buttonfade action FilePagePrevious() 
            hotspot (850,460,100,130) at buttonfade action FilePageNext(max=5)
            
            
            #hotspot (100, 460, 100, 130) at buttonfade clicked FilePage("auto") 
            hotspot (205, 460, 100, 130) at buttonfade clicked FilePage("1") 
            hotspot (305, 460, 100, 130) at buttonfade clicked FilePage("2")
            hotspot (450, 460, 100, 130) at buttonfade clicked FilePage("3")
            hotspot (590, 460, 100, 130) at buttonfade clicked FilePage("4")
            hotspot (730, 460, 100, 130) at buttonfade clicked FilePage("5")
            
            hotspot(920,260,290,72) action MainMenu()
            hotspot(920,330,290,72) action Quit(confirm=True)
            
            hotspot(50,590,400,200) action Return() at buttonfade
            
            
            hotspot (140,160,250,300) clicked FileAction(1) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=1)
                key "save_delete" action FileDelete(1)
            hotspot (395,160,250,300)   clicked FileAction(2) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=2)
                key "save_delete" action FileDelete(2)
            hotspot (650,160,250,300)   clicked FileAction(3) hovered SetScreenVariable("my_picture", True) unhovered SetScreenVariable("my_picture", False):
                use load_save_slot(number=3)
                key "save_delete" action FileDelete(3)

basically just look at how I coded the hotspot for the hovered and unhovered actions and the if statements for the two different imagemaps. I wish you could just simple put an IF statement next to the ground image and not have to have two whole copies of the imagemap but I found this is the only way it works.

Then just attach that file picker to both save and load screens:

Code: Select all

screen save:
    tag menu
    use file_picker
    add "save_title.png"
screen load:
    tag menu
    use file_picker
    add "load_title.png"

If you haven't noticed, I put in an image for each of the screens to indicate which is the save screen and which is the load screen by just having a title with a transparent background
so the load screen will have a 'load' title and the save will have a 'save' title. Since everything else is identical, this is all I really needed differently for each screen.

I'm awful at explaining things so I'm hoping this wasn't too confusing. Just wanted to share what seems to work on my end. Sorry if this causes you to remake everything.

Sorry for the late reply. This works perfectly! However, the auto file page is like this*

Here's how I added the code

Code: Select all

  hotspot (1050, 298, 131, 52) clicked FilePage("auto")
            hotspot (1052, 361, 139, 58) clicked FilePage("quick")
            hotspot (301, 33, 70, 77) clicked FilePagePrevious() 
            hotspot (711, 33, 89, 74) clicked FilePageNext(max=5)

Did I do something wrong or should "auto" and "quick" become screens instead?

[namastaii]

is it working okay? The way you have it (with the hotspots going to quick/auto etc) should be fine. I just didn't include those in my example.

the quick filepage i think is just meant for picking up your last game real quick ( don't quote me on this) and the auto is autosaved games you didn't save yet.

[SilverSnow]

is it working okay? The way you have it (with the hotspots going to quick/auto etc) should be fine. I just didn't include those in my example.

No, sorry. It actually works! Thanks for the help.