This is the last article in a series of making a complete GUI from start to finish (Let's make a beautiful GUI for the VN Together!) - the History screen that I almost forgot - after the History screen is finished, your GUI will be completely !
The 1st article can be viewed here (Cover/Settings Screen/About and Help Screen)
The 2nd article can be found here ( Load, save screen/ textbox& namebox / Choice etc.)
I see the code part is not really clear since they all have the same color and size. It's a little bit confusing for some people to recognize the code so I made some change. I hope it's clear now (。・ω・。)
(I added some color to the codes)
Thank you for the reminder (*ﾉωﾉ) ♡
--------- divider ---------
This article starts here !
First of all, to make a history screen is to have the images - you can use any image editing software (like Medibang, Krita or Photoshop...etc.) to make your History screen background image
It can looks like this:
After you have the picture, you can open screen.rpy to find screen history(): delete the code below screen history (delete everything till you see --> ## Help screen ################################################################# )
Put on the imagemap and the corresponding hotspot
Ex. Imagemap:
imagemap:
ground 'gui/hist idle.png'
idle 'gui/hist idle.png'
hover 'gui/hist hover.png'
hotspot (xxxx, xxxx, xxxx, xxxx)action Return()
hotspot (xxxx, xxxx, xxxx, xxxx) action ShowMenu("load")
hotspot (xxxx, xxxx, xxxx, xxxx) action ShowMenu("preferences")
hotspot (xxxx, xxxx, xxxx, xxxx) action ShowMenu("about")
hotspot (xxxx, xxxx, xxxx, xxxx) action ShowMenu("help")
Then copoy the codes below
vbox:
xpos # where the text appears ( X-axis )
ypos # where the text appears ( Y-axis )
viewport id "vpgrid":
mousewheel True # Allows the player to use the mouse to scroll up or down
xmaximum # The farthest position the text can go from left to right
ymaximum # The farthest position the text can go from top to bottom
After the location is processed, the following paragraph is needed
vbox:
for h in _history_list:
$ what = renpy.filter_text_tags(h.what, allow=gui.history_allow_tags)
text what:
substitute False
if h.who:
text "— " + h.who xalign 1.0 text_align 1.0
add "gui/divider.png" xalign 0.5
if not _history_list:
label _("The dialogue history is empty.")
Where the line is drawn in a special color is where I will write a little more about them
text "— " - Here's what the character name would look like with "—":
If changed to text "+ " it would look like this:
Text Position
xalign 1.0 text_align 1.0 - where the name appears
1.0 is right, 0.0 is left, 0.5 is middle
If you change 1.0 to 0.0 it will look like this:
Change it to 0.5 and it will look like this (the name will appear in the middle):
Divider
add "gui/divider.png" xalign 0.5 - The space between lines of characters
If you use this picture :
as divider it will looks like this:
If you change xalign 0.5 to 0.0 the divider line will appear on the left
If it is changed to 1.0, it will be on the right
To avoid the scrollbar appear now there is 2 ways to do it ( At least I only know 2 ways )
xalign 0.0:
Empty History
label _("The dialogue history is empty.")
- The text in parentheses is the text that the player will see when there is no dialogue recorded.
If you change to label _("Nothing here OwO")
- Then when there is no dialogue record, the player will see this word / text :
If you add xpos or ypos after ("Nothing here OwO") the sentence will appear elsewhere
for example label _("Nothing here OwO") xpos 400
- Update 2022-02-05 -
About Scrollbar
Maybe you will like to add a scrollbar to your history screen
- it was a pretty hard work for me - I spent a lot of time to learn and success to put a scrollbar on my screen - So here is a little tutorial of how to add a scrollbar to history screen
How to add a scrollbar to history screen
If you dont know what I mean - Scrollbar
This is a scrollbar:
You can use the following code to create a Scrollbar on you history screen:
vpgrid:
ypos -number-
xpos -number-
cols 1
yinitial 1.0
draggable -True or False -
mousewheel -True or False -
scrollbars "vertical"
xmaximum - number-
ymaximum - number-
for h in _history_list:
window:
has fixed:
yfit True
if h.who:
label h.who:
style "history_name"
$ what = renpy.filter_text_tags(h.what, allow=gui.history_allow_tags)
text what
if not _history_list:
text "There's no dialogue now~" xpos - number - line_spacing - number -
(Everything red and between - and - are things that you need to customize according to your image)
Scrollbar issue (Appears while it's not scrollable)
After you copy and paste the codes to your screen history - you might find out a problem - the scrollbar also appear even though its not scrollable
1. Add this code below your screen history:
style vscrollbar:
unscrollable "hide"
If you also want this apply on other screen you can use 2nd methode
2. Add unscrollable "hide" in the last a few lines
You can use Crtl. + F to find " style vscrollbar: "
Then add unscrollable "hide" below this 2 codes:
base_bar Frame("gui/phone/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
thumb Frame("gui/phone/scrollbar/vertical_[prefix_]thumb.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
Then the scrollbar should disappear when it is not scrollable
Like this:
In this way, the entire GUI is completed.
The 1st article can be viewed here (Cover/Settings Screen/About and Help Screen)
The 2nd article can be found here ( Load, save screen/ textbox& namebox / Choice etc.)
Before you leave this post, Would you like to give me a Like?
【Renpy Tutorial #09】 Let's make a beautiful GUI for the VN Together! 【III】
Reviewed by NingNing
on
August 26, 2021
Rating:
Reviewed by NingNing
on
August 26, 2021
Rating:
Thank you
ReplyDelete