[CODE] Glossary Screen Implementation

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.
Message
Author
RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

[CODE] Glossary Screen Implementation

#1 Post by RLinZ »

I came across the need to implement a glossary screen for my current project and would like to share the code here in case someone could adapt and reuse it for their project :D The idea is to store terms and their definitions inside a dictionary and have a screen to scroll through the terms and display its definition when a term is clicked on.

ImageImageImage

Screen definition:

Code: Select all

screen glossary():
    text "Glossary" size 40 xalign 0.5 ypos 20
    hbox spacing 200:
        viewport:
            xpos 50 ypos 100 xsize 300 ysize 500
            child_size (None, 4000)
            scrollbars "vertical"
            spacing 5
            draggable True
            mousewheel True
            arrowkeys True
            add "#000c"
            vbox spacing 20:
            	# use sorted(glossary_dict.keys()) instead of glossary_dict
            	# to arrange the terms in alphabetic order
                for word in glossary_dict:
                    textbutton word:
                        action SetVariable("display_desc", word)
        vbox ypos 100 xsize 650 ysize 500 box_wrap True:
            text glossary_dict.get(display_desc, "")
Dictionary:

Code: Select all

init -1 python:
    display_desc = ""
    glossary_dict = \
    {'Absurdity': 'A statement or belief manifestly inconsistent with',
     'Academe': 'An ancient school where morality and philosophy were',
     ...
     }
---

Download here or view the code on github.
glossary.zip
(640.76 KiB) Downloaded 284 times
Thanks for reading!
Last edited by RLinZ on Sun Sep 30, 2018 6:54 pm, edited 1 time in total.

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#2 Post by bonnie_641 »

Thank you for sharing. :D
This code is easier to read and to implement.

A question:
How can I hide the words and have the option to unlock once I see them?

Example:

Code: Select all

label start:
	[b]The word "Cook" = ???'[/b] <------------------------------------------------- ¿?
	mimi  "You Learned the word 'Cook'"
	[b]Persistence code to unlock the word: 'Cook'[/b] <---------------------- ¿?
	jump next_label
PD: The English language is not my native language. I speak and write in Spanish. Sorry about that.
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

Re: [CODE] Glossary Screen Implementation

#3 Post by RLinZ »

Hi there, thanks for the comment. Your English is great so no worries~

You could make use of persistent data:

- script

Code: Select all

$ persistent.unlocked = [] # empty word list
label start:
	[b]The word "Cook" = ???'[/b]
	$ persistent.unlocked.append('Cook')
	mimi  "You Learned the word 'Cook'"
	jump next_label
- screen

Code: Select all

# instead of looping over glossary dict, loop over persistent.unlocked
# or use sorted(persistent.unlocked) to display words alphabetically
for word in persistent.unlocked:
	textbutton word:
		action SetVariable("display_desc", word)
Just note that you still need to have the full glossary dict in init -1 python. Any question, let me know :D

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#4 Post by bonnie_641 »

Thank you for reply :D


script.rpy

Code: Select all

init -1 python:
	display_desc = ""
   	glossary_dict = \
   	 {'Cook': '(def1)',
     	'Cut': '(def2)',
     ...
     }

	$ persistent.unlocked = [] # empty word list

label start:
	call screen unlock_words
	# [b]The word "Cook" = ???'[/b]
	$ persistent.unlocked.append('Cook')
	mimi  "You Learned the word 'Cook'"
	jump next_label

screen.rpy

Code: Select all

screen unlock_words:
	#(...) <------------------------------- ¿Code?
	# instead of looping over glossary dict, loop over persistent.unlocked
	# or use sorted(persistent.unlocked) to display words alphabetically
	for word in persistent.unlocked:
		textbutton word:
			action SetVariable("display_desc", word)
	
I searched several pages and I don't understand about persistence data
I don't know if I should add more code to make working ...
Thanks for your attention :)
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

Re: [CODE] Glossary Screen Implementation

#5 Post by RLinZ »

You are doing the right thing in script.rpy.
Replace screens.rpy with the following (yes, we are still modifying screen glossary() instead of defining another screen)

Code: Select all

screen glossary():
    text "Glossary" size 40 xalign 0.5 ypos 20
    hbox spacing 200:
        viewport:
            xpos 50 ypos 100 xsize 300 ysize 500
            child_size (None, 4000)
            scrollbars "vertical"
            spacing 5
            draggable True
            mousewheel True
            arrowkeys True
            add "#000c"
            vbox spacing 20:
         	# loop over persistent here
                for word in sorted(persistent.unlocked):
			textbutton word:
				action SetVariable("display_desc", word)
        vbox ypos 100 xsize 650 ysize 500 box_wrap True:
            text glossary_dict.get(display_desc, "")
The reason why we are using persistent.unlocked instead of just a list named unlocked is that the user will have access to all words they have unlocked even if they are starting a new game etc. Hope this helps!

Ren'Py documentation on persistent data.

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#6 Post by bonnie_641 »

Thank you very much! :D

After fighting with the notepad for 2 hours, it finally works.

Although, I don't know if it's because of the Ren'py version, there is a small difference in the way it writes the variable.

Screen.rpy (or adding the name you want)

Code: Select all

screen glossary():
    text "Glossary" size 40 xalign 0.5 ypos 20
    hbox spacing 200:
        viewport:
            xpos 50 ypos 100 xsize 300 ysize 500
            child_size (None, 4000)
            scrollbars "vertical"
            spacing 5
            draggable True
            mousewheel True
            arrowkeys True
            add "#000c"
            vbox spacing 20:
                #glossary_dict
                #use sorted(glossary_dict.keys())
                for word in sorted(persistent.unlocked):
                    textbutton word:
                        action SetVariable("display_desc", word)
        vbox ypos 100 xsize 650 ysize 500 box_wrap True:
            text glossary_dict.get(display_desc, "")
Script.rpy

Code: Select all

init -1 python:

    display_desc = ""
    
    #add words to the dictionary
    glossary_dict = \
        {'Cook': '(def1)',
        'Cut': '(def2)',
    }

define persistent.unlocked = [] # empty word list WITH define

label start:
    "..."
    $ persistent.unlocked = [] # remove the contents of the dictionary if the demo was executed before (to avoid duplicate elements)
    show screen glossary
    "¿?"
    "¿Nothing?"
    hide screen glossary
    "Don't work?"
    "Maybe..."
 

label checking_words:
    "Let's see..."
    # Adding '$ persistent.unlocked.append('Cook')', it should appear on the screen.
    $ persistent.unlocked.append('Cook')
    show screen glossary
    "There it is!"
    "'Cook' adding! Yay!!!! ♥"
    hide screen glossary
    "If I add 'Cut'..."
    # Adding '$ persistent.unlocked.append('Cut')', it should appear on the screen.
    $ persistent.unlocked.append('Cut')
    show screen glossary
    "..."
    "¡¡¡¡¡AAAAHHHHHH!!!!! It's working!!!!!  :D"
    hide screen glossary
    "FIN."

    return

I found several curious things:

1.- For 'persistent.unlocked' to work, the word 'define' must be prefixed (I do not know why, but it fulfills its role.)

2.- For the screen 'glossary' to appear and disappear without putting extra buttons, the word 'show' and 'hide' are prefixed respectively.

Example:
show screen glossary
...
hide screen glossary


I reiterate my thanks to you. I finally managed to add this part of the game to my project :D

Greetings ♥.
Last edited by bonnie_641 on Tue Oct 02, 2018 9:59 pm, edited 1 time in total.
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

Re: [CODE] Glossary Screen Implementation

#7 Post by RLinZ »

You are most welcome and thank you for sharing your inputs on this ;)

Wataru2
Newbie
Posts: 12
Joined: Sat Sep 29, 2018 11:04 am
Contact:

Re: [CODE] Glossary Screen Implementation

#8 Post by Wataru2 »

Just want to say this is really simple and effective to use. I found another way this can come in handy besides using it as a Glossary. It can also be used as a simple one way mail system where we only receive incoming mails.

One problem I encounter with unlockable glossary is that if we rewind the game like below, we'd be appending multiple of the same word. How do we check for duplicates? Then restrict append if word is already there?

Code: Select all

label start:
    "Hello, World"
    $ persistent.unlocked.append('HelloMotto')
    show screen glossary
    "Added to your glossary"

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#9 Post by bonnie_641 »

Code: Select all

label start:
    "Hello, World"
    $ persistent.unlocked.append('HelloMotto')
    show screen glossary
    "Added to your glossary"
[/quote]

Remove all inventory at the end of the game with "$ persistent.unlocked = []".
When you add that variable to the end of the game, you avoid duplicates of the items when the game is restarted

Example:

Code: Select all

label start:
	"Hello, World"
    	$ persistent.unlocked.append('HelloMotto')
    	show screen glossary
   	 "Added to your glossary"
   	 "This is the end of game"
    	$ persistent.unlocked = []  #<------------------ here
    	"The end"
But if you want to detect and control every item repeated ... I don't know how to do it :oops:
Maybe with '$ persistent.unlocked.pop'
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

RLinZ
Newbie
Posts: 17
Joined: Wed Jul 18, 2018 9:34 pm
Contact:

Re: [CODE] Glossary Screen Implementation

#10 Post by RLinZ »

You could use a set data structure instead of a list, as set does not allow for duplicates. Like list.append(item), use set.append(item). Also, as a note, unlike list which is ordered by the time an item is added, set is un-ordered.

Also with set, please do not clear out the data with $ persistent.words = set() at the end of program execution - we are using persistent in hope of retaining user data so that they have access to all unlocked words when they replay the game or load from an earlier point.

Code: Select all

>>> s = set()
>>> s.add('apple')
>>> s.add('banana')
>>> s.add('pear')
>>> s.add('apple')
>>> s
set(['pear', 'apple', 'banana'])

Code: Select all

>>> l = list()
>>> l.append('apple')
>>> l.append('banana')
>>> l.append('pear')
>>> l.append('apple')
>>> l
['apple', 'banana', 'pear', 'apple']

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#11 Post by bonnie_641 »

:oops: :oops: :oops: :oops: :oops: :oops:
I have trouble implementing 'set' in dictionary (although in the examples it appears without having a key value)
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

Human Bolt Diary
Regular
Posts: 111
Joined: Fri Oct 11, 2013 12:46 am
Contact:

Re: [CODE] Glossary Screen Implementation

#12 Post by Human Bolt Diary »

While you're free to build and use whatever you want, I think everything you need has already been accomplished with the Encylopaedia Framework I developed a while ago:

viewtopic.php?f=51&t=25204
https://renpy-encyclopaedia.readthedocs ... index.html

User avatar
bonnie_641
Regular
Posts: 133
Joined: Sat Jan 13, 2018 10:57 pm
Projects: Código C.O.C.I.N.A.
Deviantart: rubymoonlily
Contact:

Re: [CODE] Glossary Screen Implementation

#13 Post by bonnie_641 »

Human Bolt Diary wrote: Sun Oct 07, 2018 1:15 pm While you're free to build and use whatever you want, I think everything you need has already been accomplished with the Encylopaedia Framework I developed a while ago:

viewtopic.php?f=51&t=25204
https://renpy-encyclopaedia.readthedocs ... index.html
Thank you very much :D
Could you give a small example of how to use it, please?

Greetings.

EDIT:
The encyclopedia v1.5 works great (it's complex, but I'll manage it), however version 2 does not work (I do not know if it's Renpy's version or it's my mistake).
Thanks for answering.
I speak and write in Spanish. I use an English-Spanish translator to express myself in this forum. If I make any mistakes, please forgive me.
I try my best to give an answer according to your question. :wink:

Human Bolt Diary
Regular
Posts: 111
Joined: Fri Oct 11, 2013 12:46 am
Contact:

Re: [CODE] Glossary Screen Implementation

#14 Post by Human Bolt Diary »

bonnie_641 wrote: Sun Oct 07, 2018 7:54 pm
Human Bolt Diary wrote: Sun Oct 07, 2018 1:15 pm While you're free to build and use whatever you want, I think everything you need has already been accomplished with the Encylopaedia Framework I developed a while ago:

viewtopic.php?f=51&t=25204
https://renpy-encyclopaedia.readthedocs ... index.html
Thank you very much :D
Could you give a small example of how to use it, please?

Greetings.

EDIT:
The encyclopedia v1.5 works great (it's complex, but I'll manage it), however version 2 does not work (I do not know if it's Renpy's version or it's my mistake).
Thanks for answering.
I don't recommend using 1.5. 2.0 is much easier to use and maintain, has more features, and has documentation. If you have issues getting it to work, post what you've tried in the topic for the Encyclopaedia.

User avatar
isobellesophia
Miko-Class Veteran
Posts: 979
Joined: Mon Jan 07, 2019 2:55 am
Completed: None
Projects: Maddox and Friends! (AI Teacher friend), Friendly Universities! (Soon)
Organization: Friendly Teachers series
Deviantart: SophBelle
itch: Child Creation
Location: Philippines, Mindanao
Contact:

Re: [CODE] Glossary Screen Implementation

#15 Post by isobellesophia »

Thanks @RLinZ!

I can finally work on with my new glossary screen! :D
I am a friendly user, please respect and have a good day.


Image

Image


Post Reply

Who is online

Users browsing this forum: No registered users