Page 1 of 1

Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Fri Nov 08, 2019 6:25 pm
by Adabelitoo
I want to change the default "Are you sure you want to quit?" message and box for a much cooler imagemap with a few links. I searched here before opening this thread but most of the results were from 2013 or before and I couldn't find most of the things they were mentioning so I thought that things changed in this 6 years and I should ask again.

Re: Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Fri Nov 08, 2019 8:02 pm
by papillon
obligatory: is there a specific reason you want to use an imagemap instead of redesigning the box and buttons themselves, or is it just because you found a really old topic somewhere that claimed imagemaps were easy and/or the only way to change things? :)

What version of RenPy are you using?

The best (IMO) way to customise things like that is going to involve screens, but there is a little bit of a learning curve if you've never touched screens before.

Re: Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Fri Nov 08, 2019 8:19 pm
by Adabelitoo
I want to use an imagemap because I know it's possible to do it and I saw it in other games and those seem cool as heck. I know it isn't the only way to change things and I not really looking for the easy way, it's not like I'm trying to do things just because they are difficult either, if I find an easier way to do what I want would be great,

I'm using Ren'Py 7.2.2.491

Re: Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Fri Nov 08, 2019 11:43 pm
by Adabelitoo
I made it!

Now I have a new problem that I didn't thought it could be a problem so I didn't ask it before. I made 5 differents images for the imagemap (the imagemap and the hotspots are always the same) and I want the game to show one of those five images randomly so I thouhgt I could use renpy.random.randint(1, 5) to pick a random number and them make an if ramdom == x: assigning one number to each image, the problem is that it seems like the ramdon function shuffle two times because it first shows me one image and then shows me another in less than a second. This is my code. It also seems to happen if a minimize the game and then re-open it.

Code: Select all

screen confirm(message, yes_action, no_action):

    modal True
    $ num_random = renpy.random.randint(1, 5)
    imagemap:
        if num_random == 1:
            idle 'images/imagemaps/exit_screen01 idle.png'
            hover 'images/imagemaps/exit_screen01 hover.png'
        elif num_random == 2:
            idle 'images/imagemaps/exit_screen02 idle.png'
            hover 'images/imagemaps/exit_screen02 hover.png'
        elif num_random == 3:
            idle 'images/imagemaps/exit_screen03 idle.png'
            hover 'images/imagemaps/exit_screen03 hover.png'
        elif num_random == 4:
            idle 'images/imagemaps/exit_screen04 idle.png'
            hover 'images/imagemaps/exit_screen04 hover.png'
        elif num_random == 5:
            idle 'images/imagemaps/exit_screen05 idle.png'
            hover 'images/imagemaps/exit_screen05 hover.png'

        #Link 1
        hotspot (12, 531, 181, 180) action yes_action
        #Link 2
        hotspot (203, 531, 181, 180) action yes_action
        #Link 3
        hotspot (392, 531, 181, 180) action yes_action

        #Yes - Quit
        hotspot (1051, 629, 73, 35) action yes_action #activate_sound "Buttonexit.mp3"
        #No - Quit
        hotspot (1156, 629, 51, 36) action no_action #activate_sound "Buttonexit.mp3"
EDIT: I just realised that this is messing with every YES-NO question in the game so now I can't load a save, how can I distinguish those things?

Re: Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Sat Nov 09, 2019 9:55 pm
by Adabelitoo
Hi everyone, the guy from the OP here. I think I managed to make it work WITHOUT breaking anything else. I will explain what I did in case it helps others BUT have in mind that I'm not super super good at these things, so maybe I broke something else and I didn't realised it yet (also english isn't my first language so sorry for my engrish) and I'm not good at teaching either. With that being said, let's start with it.

My goal was to create good looking imagemaps instead of the classic "Are you sure you want to quit?" message and box. I will put a picture about what I wanted to do but my game is NSFW so I will put and edited picture with the same functions but different to make it SFW because everyone here are good boys and girls :D

This is the imagemap I wanted to show when the player wants to quit: https://ibb.co/HCQ9STg

As you see, the important things are the 3 links and the YES-NO. That YES-NO was aslo in the image and work as hotspots, they aren't textbuttons. If you read my post above this one, you will know that previously I was messing with the entire YES-NO confirmation message, so I couldn't load a file or go back to the main menu because it will show this new imagemap and the YES-NO won't work properly in anything besides when I'm actuaylly trying to quit the game.

By that moment I already knew that I wanted to aim at the "Quit" textbutton and the "X" up in the right corner but I didn't know how to do it. So I started UnRenping some games who did the same thing I wanted to do and see how they did it, and this it what I found.

Code: Select all

screen navigation():

    vbox:
        style_prefix "navigation"

        xpos gui.navigation_xpos
        yalign 0.5

        spacing 20

        if main_menu:

            textbutton _("Start") action Start()

        else:

            textbutton _("History") action ShowMenu("history")

            textbutton _("Save") action ShowMenu("save")

        textbutton _("Load") action ShowMenu("load")

        textbutton _("Configurations") action ShowMenu("preferences")

        textbutton _("Patreon") action ShowMenu("patreon")

        if _in_replay:

            textbutton _("End Replay") action EndReplay(confirm=True)

        elif not main_menu:

            textbutton _("Main Menu") action MainMenu()

        textbutton _("About") action ShowMenu("about")

        if renpy.variant("pc"):

            ## Help isn't necessary or relevant to mobile devices.
            textbutton _("Help") action ShowMenu("help")

            #textbutton _("Quit") action Quit(confirm=not main_menu)			#This was the default code line
            textbutton _("Quit") action Show("quitconfirmscreen")			#This is what I did
To change the action from the "Quit" textbutton in the menu, I changed these last two lines, so now the "Quit" text button will send us to a new screen instead of the default action, This is in the defaul screen navigation, placed in the screens file.

Code: Select all

init python:
    config.quit_action = Show("quitconfirmscreen")
To change the action from the "X" in the top right, I put those lines in the options file. Now the "X" will send us to that screen instead of the default action.

Now both the "Quit" and "X" are sending us to the new screen instead of the "Are you sure you want to quit?" box. Let's create this new screen.

Code: Select all

screen quitconfirmscreen():

    modal True						# Without this, if you came to this imagemap from a previous 
    							# imagemap, the previous imagemap will interact with the new one
    
    $ num_random = renpy.random.randint(1, 5)		# This isn't important. I wanted to generate a random chance to show
    							# one of 5 images but the hotspots are the same for all of them 
    
    imagemap:
        if num_random == 1:
            idle 'images/imagemaps/exit_screen01 idle.png'
            hover 'images/imagemaps/exit_screen01 hover.png'
        elif num_random == 2:
            idle 'images/imagemaps/exit_screen02 idle.png'
            hover 'images/imagemaps/exit_screen02 hover.png'
        elif num_random == 3:
            idle 'images/imagemaps/exit_screen03 idle.png'
            hover 'images/imagemaps/exit_screen03 hover.png'
        elif num_random == 4:
            idle 'images/imagemaps/exit_screen04 idle.png'
            hover 'images/imagemaps/exit_screen04 hover.png'
        elif num_random == 5:
            idle 'images/imagemaps/exit_screen05 idle.png'
            hover 'images/imagemaps/exit_screen05 hover.png'

        #Link 1 - This isn't anything complicated, just a regular hotspot
        hotspot (25, 541, 158, 158) action OpenURL("Link 1 goes here")
        #Link 2 - This isn't anything complicated, just a regular hotspot
        hotspot (208, 541, 158, 158) action OpenURL("Link 2 goes here")
        #Link 3 - This isn't anything complicated, just a regular hotspot
        hotspot (391, 541, 158, 158) action OpenURL("Link 3 goes here")

        #Yes - Quit
        hotspot (1048, 627, 78, 38) action Quit(False)
        #No - Quit
        hotspot (1156, 627, 54, 38) action Hide("quitconfirmscreen")
Besides the "modal True" line that I explained in the same line, these last 2 lines are the most important things to talk about. The "action Quit(False)" makes the game close (the whole reason why we did everything so far) and the "action Hide("quitconfirmscreen")" close the screen and allows us to go back at the previous label/screen/place where we were before pressing "Quit" or the "X".

That's it. Once again I'm not a pro at these things, I just copied what others did and modified to make it work with my game. Maybe I broke something else and I'm not aware of that yet. I hope this looong post will help someone else.

Please mark this thread as SOLVED. Thanks for everything.

Re: Changing the "Are you sure you want to quit?" box for an imagemap

Posted: Sun Nov 10, 2019 8:31 am
by liagel
Thanks to you for telling us how you did it. It might be helpful to some people ;)