Separated History Screen

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
BáiYù
Regular
Posts: 131
Joined: Fri Apr 01, 2016 10:02 am
Completed: This Life Escapes Me, Up All Night, Lotus: The Self-Made Witch
Projects: Various
Organization: tofurocks, Fiendish Fiction, Spider Lily Studios
Github: baiyu-dev
itch: tofurocks
Contact:

Separated History Screen

#1 Post by BáiYù »

ImageImage
This is a code snippet that will change the way that the History Screen is shown. Instead of being a part of the Game Menu, it will be a stand-alone screen that can be pulled up from the quickmenu while playing.

You may have to adjust some of the numbers to fit your needs. The project has a 1920x1080 resolution that can be either reduced or expanded. The screen should automatically re-scale itself accordingly.

Using CTRL + F, locate the vscrollbar style definition and replace that block with the following:

Code: Select all

style vscrollbar:
    xsize gui.scrollbar_size
    base_bar Frame("gui/scrollbar/vertical_[prefix_]bar.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/scrollbar/vertical_[prefix_]thumb.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
    unscrollable "hide"
    ## Prevents Ren'Py from showing a scrollbar when there's nothing to scroll
Locate the History screen definition and replace that block with the following:

Code: Select all

screen history():

    tag menu

    predict False

    frame:

        style_prefix "history"

        ## Style this as needed in the style definitions
        label _("History")

        ## If you have a custom image you want to use for the screen, you can set it as
        ## a Frame below.
        # background Frame(["gui/frame.png"], gui.history_frame_borders, tile=True)

        ## Using margin properties will allow the screen to automatically adjust should
        ## you choose to use a different resolution than 1080p, and will always be centered. 
        ## You can also resize the screen using "xmaximum", "ymaximum", or "maximum(x,y)"
        ## if desired, but you will need to use "align(x,y)" to manually position it.

        ## xmargin essentially combines the left_margin and right_margin properties
        ## and sets them to the same value
        xmargin 200

        ## ymargin essentially combines the top_margin and bottom_margin properties
        ## and sets them to the same value
        ymargin 50

        ## xpadding essentially combines the left_padding and right_padding properties
        ## and sets them to the same value
        xpadding 50

        ## ypadding essentially combines the top_padding and bottom_padding properties
        ## and sets them to the same value
        ypadding 150

        vpgrid:

            cols 1
            yinitial 1.0

            draggable True
            mousewheel True
            scrollbars "vertical"

            vbox:

                for h in _history_list:

                    window:

                        ## This lays things out properly if history_height is None.
                        has fixed:
                            yfit True

                        if h.who:

                            label h.who:
                                style "history_name"
                                substitute False

                                ## Take the color of the who text from the Character, if
                                ## set.
                                if "color" in h.who_args:
                                    text_color h.who_args["color"]

                        $ what = renpy.filter_text_tags(h.what, allow=gui.history_allow_tags)
                        text what:
                            line_spacing 5
                            substitute False

                    ## This puts some space between entries so it's easier to read
                    null height 20

                if not _history_list:

                    text "The text log is empty." line_spacing 10
                    ## Adding line_spacing prevents the bottom of the text
                    ## from getting cut off. Adjust when replacing the
                    ## default fonts.

        textbutton "Return":
            style "history_return_button"
            action Return()
            alt _("Return") 
Make the following adjustments to the styles like so:

Code: Select all

style history_label:
    xfill True
    top_margin -100

style history_label_text:
    xalign 0.5
    ## Note: When altering the size of the label, you may need to increase the
    ## ypadding of the Frame, or separate it again into top_padding and bottom_padding

style history_return_button:
    align(1.0,1.0)
    yoffset 100
Finally, go to gui.rpy and change the following:

Code: Select all

## The height of a history screen entry, or None to make the height variable at
## the cost of performance.
define gui.history_height = None
If you'd like to download a sample project with the code implemented, please download it over at itch.io here.
Version 2.0 was uploaded on March 28, 2022 and was last tested on Ren'Py 7.4.11.
Last edited by BáiYù on Mon Mar 28, 2022 5:37 pm, edited 3 times in total.
Image
Games and supplementary Ren'Py codes

User avatar
Andredron
Miko-Class Veteran
Posts: 700
Joined: Thu Dec 28, 2017 2:37 pm
Location: Russia
Contact:

Re: Separated History Screen

#2 Post by Andredron »

Thank you for a great example!!!

rayminator
Miko-Class Veteran
Posts: 793
Joined: Fri Feb 09, 2018 12:05 am
Location: Canada
Contact:

Re: Separated History Screen

#3 Post by rayminator »

thanks for sharing

User avatar
wyverngem
Miko-Class Veteran
Posts: 615
Joined: Mon Oct 03, 2011 7:27 pm
Completed: Simple as Snow, Lady Luck's Due,
Projects: Aether Skies, Of the Waterfall
Tumblr: casting-dreams
itch: castingdreams
Location: USA
Contact:

Re: Separated History Screen

#4 Post by wyverngem »

Should you keep or toss the defined styles from the screens menu for this?

rayminator
Miko-Class Veteran
Posts: 793
Joined: Fri Feb 09, 2018 12:05 am
Location: Canada
Contact:

Re: Separated History Screen

#5 Post by rayminator »

wyverngem wrote: Sat Mar 03, 2018 12:34 am Should you keep or toss the defined styles from the screens menu for this?
you should keep the defined style they will help to style the history page

like moving text and textname up or down and left to right

User avatar
BáiYù
Regular
Posts: 131
Joined: Fri Apr 01, 2016 10:02 am
Completed: This Life Escapes Me, Up All Night, Lotus: The Self-Made Witch
Projects: Various
Organization: tofurocks, Fiendish Fiction, Spider Lily Studios
Github: baiyu-dev
itch: tofurocks
Contact:

Re: Separated History Screen

#6 Post by BáiYù »

rayminator wrote: Sat Mar 03, 2018 11:35 am
wyverngem wrote: Sat Mar 03, 2018 12:34 am Should you keep or toss the defined styles from the screens menu for this?
you should keep the defined style they will help to style the history page

like moving text and textname up or down and left to right
Yes, keep the default defined styles unless your personalized GUI customization calls for it.

Also, I am pushing a very minor update to the code that fixes a few things:
  • The scrollbar no longer appears when there aren't enough entries to scroll through
  • When there are no entries, the screen will say "The dialogue history is empty."
  • Added the Label back on the screen to indicate function
The first post has been updated accordingly. If you want to see a sample project where this is implemented, you can download that here at my itch.io page.

Thanks for checking it out!
Image
Games and supplementary Ren'Py codes

HikariJake
Newbie
Posts: 6
Joined: Thu Mar 01, 2018 9:29 pm
Contact:

Re: Separated History Screen

#7 Post by HikariJake »

This is amazing, thank you!

Now this may be too much to ask, but just in case you do know how to do this: would it be possible to activate the History screen by scrolling up with the mouse? Like most visual novels.

User avatar
BáiYù
Regular
Posts: 131
Joined: Fri Apr 01, 2016 10:02 am
Completed: This Life Escapes Me, Up All Night, Lotus: The Self-Made Witch
Projects: Various
Organization: tofurocks, Fiendish Fiction, Spider Lily Studios
Github: baiyu-dev
itch: tofurocks
Contact:

Re: Separated History Screen

#8 Post by BáiYù »

HikariJake wrote: Sun Mar 11, 2018 8:51 pm This is amazing, thank you!

Now this may be too much to ask, but just in case you do know how to do this: would it be possible to activate the History screen by scrolling up with the mouse? Like most visual novels.
Hi, I apologize for not answering your question earlier. It should be possible to do this by custom binding the keymap. However, the mouseup binding is already linked to the Rollback feature, so I did not add that to the default version of my history screen.
Image
Games and supplementary Ren'Py codes

User avatar
tiya_nofurita
Miko-Class Veteran
Posts: 669
Joined: Fri Jun 22, 2012 7:23 pm
Completed: ALLBLACK Phase 1, Heart's Blight, Last Rx., EDDA Cafe, Kohana, Half Moon
Projects: ALLBLACK Phase 2
Organization: VN Project Indonesia
Deviantart: SECONDARY-TARGET
itch: NSAID
Location: I can be everywhere
Discord: 3,4-Methylendioxymethamphetamine#4886
Contact:

Re: Separated History Screen

#9 Post by tiya_nofurita »

Is it possible to make the frame different from default? I mean I would like to keep the default frame as it is, but I want to use different frame for history screen.
Webtoon

"For what reason I live?"
Image

---
Completed project:


"What will you see when you are dead?"

Image

MY VISUAL NOVEL

User avatar
Moshibit
Regular
Posts: 50
Joined: Wed Oct 16, 2019 1:58 pm
Location: Mexico
Contact:

Re: Separated History Screen

#10 Post by Moshibit »

tiya_nofurita wrote: Fri Sep 18, 2020 11:44 pm Is it possible to make the frame different from default? I mean I would like to keep the default frame as it is, but I want to use different frame for history screen.
it is possible to change how they look by adding the background property and a string containing an image, usually a displayable named Frame is used to fill the background of the frame

Code: Select all

frame:
    background "gui/mybackground.png"
or

Code: Select all

frame:
    background Frame("gui/mybackground.png", 10, 10)
references:
https://www.renpy.org/doc/html/style_pr ... properties
https://www.renpy.org/doc/html/displayables.html#Frame

User avatar
tiya_nofurita
Miko-Class Veteran
Posts: 669
Joined: Fri Jun 22, 2012 7:23 pm
Completed: ALLBLACK Phase 1, Heart's Blight, Last Rx., EDDA Cafe, Kohana, Half Moon
Projects: ALLBLACK Phase 2
Organization: VN Project Indonesia
Deviantart: SECONDARY-TARGET
itch: NSAID
Location: I can be everywhere
Discord: 3,4-Methylendioxymethamphetamine#4886
Contact:

Re: Separated History Screen

#11 Post by tiya_nofurita »

Moshibit wrote: Sat Sep 19, 2020 1:00 am
tiya_nofurita wrote: Fri Sep 18, 2020 11:44 pm Is it possible to make the frame different from default? I mean I would like to keep the default frame as it is, but I want to use different frame for history screen.
it is possible to change how they look by adding the background property and a string containing an image, usually a displayable named Frame is used to fill the background of the frame

Code: Select all

frame:
    background "gui/mybackground.png"
or

Code: Select all

frame:
    background Frame("gui/mybackground.png", 10, 10)
references:
https://www.renpy.org/doc/html/style_pr ... properties
https://www.renpy.org/doc/html/displayables.html#Frame
Oh, thanks! But finally I resort to imagemap since using Frame is too much hassle (it extends my images in a ugly way), but the knowledge is appreciated.
Webtoon

"For what reason I live?"
Image

---
Completed project:


"What will you see when you are dead?"

Image

MY VISUAL NOVEL

User avatar
BáiYù
Regular
Posts: 131
Joined: Fri Apr 01, 2016 10:02 am
Completed: This Life Escapes Me, Up All Night, Lotus: The Self-Made Witch
Projects: Various
Organization: tofurocks, Fiendish Fiction, Spider Lily Studios
Github: baiyu-dev
itch: tofurocks
Contact:

Re: Separated History Screen

#12 Post by BáiYù »

Version 2.0 of the Separated History Screen was uploaded on March 28, 2022 and was last tested on Ren'Py 7.4.11.

Changelog:
  • Vertical spacing between individual messages are now truly variable!
  • Relevant code has been optimized with proper code comments explaining portions that may need to be adjusted to fit your project's needs
  • Text in the demo is no longer lorem ipsum. It has been replaced with actual helpful tips
This update will also be incorporated into the All-In-One GUI Template, which we are currently working on revamping as well.

Thanks for your support! Download it from the usual link here.
Image
Games and supplementary Ren'Py codes

Post Reply

Who is online

Users browsing this forum: No registered users