[Tutorial] Easy Yes/No prompt customization (no imagemaps)

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Post Reply
Message
Author
User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

[Tutorial] Easy Yes/No prompt customization (no imagemaps)

#1 Post by Kokoro Hane » Sat Apr 22, 2017 4:56 pm

Hey there guys!

So as I searched for a way to easily customise the Yes/No prompts for my Ren'Py game, I was a bit frustrated as to how difficult it seemed to do with the use of Imagemaps. I looked at some tutorials, and even got some wonderful help here, but I couldn't quite wrap my head around it. Analyzing the code, I thought "there must be an easier way", and then I had an epiphany! Okay, that was a bit dramatic, but I figured out how to do it WITHOUT the Imagemap method.

WHAT IS THE YES/NO PROMPT?
That "Are You Sure...?" question whenever you wish to quit a game, overwrite a save, etc.

All you need is;
- Simple screen language
- A custom image for your prompt
- Textbutton codes (imagebuttons should work too)

What you'll achieve;
- A custom message and graphic for all or individual prompts
- Customised Yes/No button if desired

Here's an example of what I was able to achieve (an actual screenshot, not a modified mockup);
screenshot0003.png
^ This is for the action of returning Main Menu from the save/load/prefs menu. Chibi by wingzofdarkness.


Ready? Before we start, I should let you know we'll be creating images for the following---do not worry about these codes yet, I'm just telling you what they do.

layout.ARE_YOU_SURE: ## "Are you sure...?" default, if message is unknown for action.
layout.DELETE_SAVE: ## For deleting a save.
layout.OVERWRITE_SAVE: ## for overwriting a save.
layout.LOADING: ## for loading whilst in the game, which will cause you to lose current progress.
layout.QUIT: ## for quiting the game.
layout.MAIN_MENU: ## for returning to main menu whilst in save/load/prefs menu.

NOTE: I recommend starting a Test Project rather than work directly in your current project's scripts in case anything goes wrong. You can always move the images to your game, and copy and paste the code to the proper scripts later. I'll be giving exact line locations, so it's best to start a new Test Project.


STEP 1: Create your custom image(s)
Open your favourite art creation/editing software and get to work! You'll want to make the entire image the same resolution as your game. Make the background transparent (unless you want a visible background) and put your custom textbox graphic/image with the text of what you'd like it to say, according to what it's for. If you want a solid background and have no need for transparency, feel free to save as .jpg, otherwise YOU MUST save as .png
Place your completed images directly inside your game's "game" folder.

Tip: Be sure to name your files accordingly so you know what it'll be used for. For example, I named my return to main menu prompt as "gui_mainmenu.png". I also begin all my file names with "gui_" with its function following, that way, it won't get lost in my game folder when sorted by name (that way, all things starting with gui_ are in a row).

Here's the two layers I used in my game if you'd like to use them for practice (you need to combine them into one image, they are not used separately). The transparent white overlay is the background and the black box is where I put my text. You can resize these or customise as desired. Put the textbox over the overlay in your art program and type the desired custom text in the box (leave room below for the Yes/No buttons). Feel free to use these without credit, they're just plain templates I made;
overlay.png
boxfortext.png
(4.35 KiB) Not downloaded yet
STEP 2: Implementing the code
Now that you've made your images, now it's time to work on a little code.
In screens.rpy, you'll find the confirm screen on line 1134.
Erase everything from line 1143 to line 1161.
Now, underneath line 1143, you'll want to place this code. Within the string next to add, put the name of your image file. You can also change the "Yes" and "No" to something more unique (imagebuttons should work in place of textbuttons). The xpos and ypos are the pixel locations of where these buttons will appear--adjust as needed.

Code: Select all

    
    if message == layout.ARE_YOU_SURE:
        add "gui_areyousure.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
    
    elif message == layout.DELETE_SAVE:
        add "gui_deletesave.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
        
    elif message == layout.OVERWRITE_SAVE:
        add "gui_saveoverwrite.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
        
    elif message == layout.LOADING:
        add "gui_loading.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
        
    elif message == layout.QUIT:
        add "gui_quit.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
        
    elif message == layout.MAIN_MENU:
        add "gui_mainmenu.png"
        textbutton "Yes" xpos 498 ypos 390 action yes_action
        textbutton "No" xpos 698 ypos 390 action no_action
Be sure to save!

STEP 3: Test It Out
Now you've got your images and code done, let's see how it works!

Launch your game and do all the multiple functions to which will bring up your custom Yes/No prompts (loading whilst still in game, saving over a previous save, quiting from the save/load/prefs, going to main menu from the save/load/prefs, etc.)
Does everything look OK? Adjust anything that looks out of place, and walla! You have made your own custom Yes/No prompts without needing any knowledge of Imagemaps!

I hope this was useful to you guys. I'll try to help as best I can if you run into any issues!
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2698
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#2 Post by Imperf3kt » Sat Apr 22, 2017 5:19 pm

Nice tutorial. Hopefully this helps a lot of people struggling to understand the new GUI.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Todo list:
Actually finish a project

User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#3 Post by Kokoro Hane » Sat Apr 22, 2017 5:27 pm

Imperf3kt wrote:Nice tutorial. Hopefully this helps a lot of people struggling to understand the new GUI.
Thanks, I hope so too. I never got to learn customising the old GUI (I started back on 6.12), and the Imagemap method for the Yes/No prompt seemed too taxing. Since I figured out what I feel is an easier method, I wanted to share it so no one will have to feel my pain xD
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
Scribbles
Miko-Class Veteran
Posts: 620
Joined: Wed Sep 21, 2016 4:15 pm
Completed: Pinewood Island
Projects: As We Know It, In Blood
Organization: Jaime Scribbles Games
Deviantart: breakfastdoodles
itch: scribbles
Location: Ohio
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#4 Post by Scribbles » Sun Apr 23, 2017 12:06 pm

oh cool! I'm glad you made this :)
Image - Image -Image

User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#5 Post by Kokoro Hane » Sun Apr 23, 2017 12:24 pm

Scribbles wrote:oh cool! I'm glad you made this :)
Thanks, I hope it'll be useful ^.^
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

Kamos
Regular
Posts: 31
Joined: Mon Jan 02, 2017 5:18 am
Tumblr: Kamos
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#6 Post by Kamos » Fri Jul 14, 2017 10:33 am

is there any file that can be downloaded to watch actualy how it work? thanks

User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemap

#7 Post by Kokoro Hane » Tue Oct 31, 2017 10:00 pm

Kamos wrote:
Fri Jul 14, 2017 10:33 am
is there any file that can be downloaded to watch actualy how it work? thanks
My apologies for lateness!

Not right now, but I have been planning on creating a video tutorial for it as well as create a downloadable test project sometime in the near future.
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
Ibitz
Regular
Posts: 34
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemaps)

#8 Post by Ibitz » Wed Nov 01, 2017 12:29 am

Great job on posting this! I wish your post had been around when I was starting my game. This is exactly how I did mine, too. Much more easier and simpler. Wish we could give people gold star or something for awesome posts.
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemaps)

#9 Post by Kokoro Hane » Wed Mar 27, 2019 10:41 pm

Ibitz wrote:
Wed Nov 01, 2017 12:29 am
Great job on posting this! I wish your post had been around when I was starting my game. This is exactly how I did mine, too. Much more easier and simpler. Wish we could give people gold star or something for awesome posts.
Sorry for super late posts, lol, but glad you liked the tutorial. Ah, so you thought the same way and coded it like that? Awesome! I couldn't figure it out with imagemaps, so with what I DID understand of example code, I thought about it logically how I can do it with easier, then BAM! Text and imagebuttons.
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

User avatar
XxrenxX
Veteran
Posts: 265
Joined: Tue Oct 02, 2012 2:40 am
Projects: Chasing
Deviantart: bara-ettie
Location: Canada
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemaps)

#10 Post by XxrenxX » Thu Apr 04, 2019 10:54 pm

Used yours as a base though I guess mine is 100% textbutton with one image BG for all. Posting in case anyone wants? Though this probably exists somewhere in the cookbook already. I added my image (same for all) right under the screen string as add.

Code: Select all

    if message == layout.OVERWRITE_SAVE: 
        text "{b}Overwrite Data?{/b}" xpos 450 ypos 218 style "ynp_title"
        text "Previous data will be lost." xpos 450 ypos 270 style "ynp_warning"
        textbutton "Yes" xpos 490 ypos 415 action yes_action
        textbutton "No" xpos 710 ypos 415 action no_action 

Code: Select all

init python:
     style.ynp_title = Style(style.default)
     style.ynp_title.color = "#000"
     style.ynp_title.size = 33
     style.ynp_warning = Style(style.default)
     style.ynp_warning.color = "#ac0000"

style button_text:
    color "#000"
    size 33
    hover_color "#ac0000"

User avatar
Kokoro Hane
Miko-Class Veteran
Posts: 992
Joined: Thu Oct 27, 2011 6:51 pm
Completed: 30 Kilowatt Hours Left, The Only One Girl { First Quarter }, Crystal Captor: Memory Chronicle Finale, Journey of The Scroll, An Encounter ~In The Rain~
Projects: Gakusei, Final Pirate Haven: Rebellion of Gilfer's Bay, False Hope, The Only One Girl
Organization: Tofu Sheets Visual
Deviantart: kokoro-hane
itch: tofu-sheets-visual
Contact:

Re: [Tutorial] Easy Yes/No prompt customization (no imagemaps)

#11 Post by Kokoro Hane » Thu Sep 12, 2019 6:13 pm

XxrenxX wrote:
Thu Apr 04, 2019 10:54 pm
Used yours as a base though I guess mine is 100% textbutton with one image BG for all. Posting in case anyone wants? Though this probably exists somewhere in the cookbook already. I added my image (same for all) right under the screen string as add.

Code: Select all

    if message == layout.OVERWRITE_SAVE: 
        text "{b}Overwrite Data?{/b}" xpos 450 ypos 218 style "ynp_title"
        text "Previous data will be lost." xpos 450 ypos 270 style "ynp_warning"
        textbutton "Yes" xpos 490 ypos 415 action yes_action
        textbutton "No" xpos 710 ypos 415 action no_action 

Code: Select all

init python:
     style.ynp_title = Style(style.default)
     style.ynp_title.color = "#000"
     style.ynp_title.size = 33
     style.ynp_warning = Style(style.default)
     style.ynp_warning.color = "#ac0000"

style button_text:
    color "#000"
    size 33
    hover_color "#ac0000"
Oh, thanks for sharing a more textbutton based one! <3
(I'm actually planning to experiment with a game with little to no imagery, so this will be very useful!)
PROJECTS:
An Encounter ~In The Rain~ [COMPLETE][IntRenAiMo'19]
False Hope [Demo][WiP][SuNoFes'17]
Crystal Captor: Memory Chronicle Finale [COMPLETE][RPG][#1 in So Bad It's Good jam '17]
The Only One Girl [WiP][Up.5/20/2017][1stQ ver. released]
30 Kilowatt Hours Left [COMPLETE][GameJolt GDC Jam2016]

But dear God, You're the only North Star I would follow this far
Owl City "Galaxies"

Post Reply

Who is online

Users browsing this forum: No registered users