Page 1 of 1

Separated History Screen

Posted: Mon Feb 26, 2018 8:59 pm
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.

Re: Separated History Screen

Posted: Tue Feb 27, 2018 2:51 pm
by Andredron
Thank you for a great example!!!

Re: Separated History Screen

Posted: Fri Mar 02, 2018 10:19 pm
by rayminator
thanks for sharing

Re: Separated History Screen

Posted: Sat Mar 03, 2018 12:34 am
by wyverngem
Should you keep or toss the defined styles from the screens menu for this?

Re: Separated History Screen

Posted: Sat Mar 03, 2018 11:35 am
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

Re: Separated History Screen

Posted: Sat Mar 03, 2018 6:31 pm
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!

Re: Separated History Screen

Posted: Sun Mar 11, 2018 8:51 pm
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.

Re: Separated History Screen

Posted: Wed Jul 04, 2018 12:02 pm
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.

Re: Separated History Screen

Posted: Fri Sep 18, 2020 11:44 pm
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.

Re: Separated History Screen

Posted: Sat Sep 19, 2020 1:00 am
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

Re: Separated History Screen

Posted: Sat Sep 19, 2020 1:07 pm
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.

Re: Separated History Screen

Posted: Mon Mar 28, 2022 5:48 pm
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.