Lemma Soft Forums

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); ^ 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; 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. 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!

Nice tutorial. Hopefully this helps a lot of people struggling to understand the new GUI.

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

oh cool! I'm glad you made this

Scribbles wrote:oh cool! I'm glad you made this

Thanks, I hope it'll be useful ^.^

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

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.

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.

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.

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.

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!)