Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Ren'Py: Achievements/Endings Screen + Tooltips

Preface:

This isn't an actual tutorial with step-by-step explanation, it's written in the sense of documentation so that I remember for next time why code worked in a specific way. If you have questions about the snippets I posted, feel free to ask in the comments.

- My code snippets are not to encourage clean coding or what runs most efficiently on the machine. For the most time it's either sloppy coding rushed for a VN Jam or it's what I found to work at the time while investigating. I recommend Feniks' website if you want some primers and good habits on Ren'Py coding: https://feniksdev.com/navigation/ (Yes, I am very aware I use a lot of hard-coded string and this isn't recommended in programming)

- Since it's a pain to format code alignment or even normal text in a DevLog, I'll only show some screenshots of my code, unless the code is a single line.

- The code shown in this DevLog isn't from the actually released build of https://gaming-variety-potato.itch.io/even-the-silver-knight-panics. For me it's less about 'finishing' or updating the game to build v1.1 (...I sincerely hope nobody is waiting for it), the project just gives me an excuse to look at a random Ren'Py topic at a time.

Tooltips:

This is the official Ren'Py page about tooltips: https://www.renpy.org/doc/html/screen_actions.html#tooltips Sometimes in Ren'Py games you can hover over for example text or image and text appears. Tooltips are in-built functionality you can easily use to achieve this effect. I thought about incorporating an 'Endings Screen' this time that would show which endings you have already seen and an optional tip if the player needs a guide on how to reach this ending. 

It's basic, but at the moment I've applied a matrixcolor transform on the icon to indicate that:

- Grey: ending has not been seen yet. (Definition of bw_matrix is stored elsewhere but is not really relevant for this post.)

- Dark Blue: you are hovering over the icon, so the tooltip should be displayed. (Definition of night_matrix is stored elsewhere but is not really relevant for this post.)


There are also conditions applied on the two lines of text below, it's either grey or white, depending on if you have unlocked the condition in the description.



If you went to the tooltips link, you will encounter this code example. I based my code on it for Ren'Py 8.1.3 and can confirm that it works without issues.



- The only difference is that I have images instead of textbutton, so the closest equivalent would be an imagebutton.

- It should be a button variant so that tooltip attribute can be used for it.

- Clicking on the image doesn't do anything, but the action is probably still necessary, because with that it can be registered when the button is focused. If clicking your button isn't suppose to do anything, use this:

action NullAction()



Python function I added that picks between the normal image or locked variant with transform applied to it to make it grey.

Extra note: With this syntax in python you can get a displayable with the transform applied on it.

transform_name(image_path_string)


More about sets and the .add() method:

https://www.w3schools.com/python/python_sets.asp

Sets do not allow duplicates. Duplicates are automatically ignored with .add(), which means that you don't add an item once again if it already exists within the set.

1. Define a label where you can initialise the persistent variables you are going to use in your Ren'Py project. It is mandatory to initialise an empty set before you can use it with .add(). The None check is to confirm if the variable has not been initialised yet.


2. Make sure to call the label to initialise the persistent variables. Do this for example within your start label but it could be done way earlier.

call initialise_persistent_variables

3. At the point where you want to add an item to the set, you can write it like this.

$ persistent.epilogues_set.add("forfeit")


Quick Testing for tooltips on touch screens:

Technically it is focus that triggers the tooltip and not necessarily hover, although for pc users with a 'mouse' it is intuitive to think of it working that way. I was wondering what it looks like for Android builds since you don't have hover for touch screens, and what gesture could possibly trigger the tooltip instead. (There is a distinction between touch screens and Android, as technically you also have Android TV, but for simplicity we refer it as a shorthand to touch screen devices like smartphones and tablets because that's where people commonly play the build for.) So via the Android emulator that comes with Ren'Py, I found out that holding the button would show the tooltip, and the tooltip disappears when you release that button. Therefore there is almost no changes required if you want to port to Android, besides maybe changing your game UI instruction text from 'hover' to more appropriate wording.

Support this post

Did you like this post? Tell us

In this post

Leave a comment

Log in with your itch.io account to leave a comment.

Mentioned in this post

FE8 fan VN - BL comedy drama: Sparring match between Seth and Cormag in which you can decide the outcome!
Visual Novel