History box/screen, how do I change mine?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
DeletedUser160413

History box/screen, how do I change mine?

#1 Post by DeletedUser160413 »

Hi! I was reading a couple of posts about how to make a history box/screen. So far I've made one but I can't seem to change some things. Here's a post that I feel is similar to my problem, but I didn't feel like I got the right answer while reading it! My game is also 1280 x 700 if someone would like to help! :)
Alaina93 wrote:I'd like to create a history screen for my game, which is a 1280x800 resolution screen. I want to be able to have a scroll bar, but the scroll bar keeps changing the more text there is, so it kind of gets hidden when there's too much text.

I'd like a history box like in the VN Taraadin by Cyanide Tea. With a functioning scroll bar, and text that is very neatly divided etc.

Image
This is how my textbox looks like:
example.png
This is my code so far:

Code: Select all

# readback.rpy
# drop in readback module for Ren'Py by delta
# simplified/updated around Ren'Py version 6.13.12
# this file is licensed under the terms of the WTFPL
# see http://sam.zoy.org/wtfpl/COPYING for details

init -3 python:

    # Styles.
    style.readback_window.xminimum = 800
    style.readback_window.yminimum = 700
    style.readback_window.align = (0, 0)

    style.readback_frame.background = "black.png"   
    style.readback_frame.align = (0, 0)

    style.create("readback_button", "readback_text")
    style.readback_button.background = None
    
    style.readback_text.color = "#fff"
    style.readback_text.size = 21
    style.readback_label.align = (0, 0)

    style.create("readback_button_text", "readback_text")
    style.readback_button_text.selected_color = "#f12"
    style.readback_button_text.hover_color = "#f12"

    style.readback_label_text.bold = False
    style.readback_label_text.size = 40
    style.readback_label_text.font = "fonts/Tangerine_R.ttf"
    style.readback_label_text.color = "#FF4277"
    

    # starts adding new config variables
    config.locked = False

    # Configuration Variable for Text History
    config.readback_buffer_length = 100 # number of lines stored
    config.readback_full = True # completely replaces rollback, False = readback accessible from game menu only (dev mode)
    config.readback_disallowed_tags = ["size"] # a list of tags that will be removed in the text history
    config.readback_choice_prefix = ">> "   # this is prefixed to the choices the user makes in readback

    # end
    config.locked = True

init -2 python:

    # Two custom characters that store what they said
    class ReadbackADVCharacter(ADVCharacter):
        def do_done(self, who, what):
            store_say(who, what)
            super(ReadbackADVCharacter, self).do_done(who, what)
            return

        def do_extend(self):
            delete_last_line()
            super(ReadbackADVCharacter, self).do_extend()
            return

    class ReadbackNVLCharacter(NVLCharacter):
        def do_done(self, who, what):
            store_say(who, what)
            super(ReadbackNVLCharacter, self).do_done(who, what)
            return

        def do_extend(self):
            delete_last_line()
            super(ReadbackNVLCharacter, self).do_extend()
            return

    adv = ReadbackADVCharacter()
    nvl = ReadbackNVLCharacter()
    NVLCharacter = ReadbackNVLCharacter

    # overwriting standard menu handler
    # Overwriting menu functions makes Text History log choice which users choose.
    def menu(items, **add_input):
        rv = renpy.display_menu(items, **add_input)

        # logging menu choice label.
        for label, val in items:
            if rv == val:
                store_say(None, config.readback_choice_prefix + label)
        return rv

    # Overwriting nvl menu function
    builtin_nvl_menu = nvl_menu
    def nvl_menu(items):
        rv = builtin_nvl_menu(items)
        for label, val in items:
            if rv == val:
                store_say(None, config.readback_choice_prefix + label)
        return rv

    readback_buffer = []

    def store_say(who, what):
        global readback_buffer
        new_line = (preparse_say_for_store(who), preparse_say_for_store(what))
        readback_buffer.append(new_line)
        readback_prune()

    def delete_last_line():
        global readback_buffer
        del readback_buffer[-1]
        
    # remove text tags from dialogue lines
    disallowed_tags_regexp = ""
    for tag in config.readback_disallowed_tags:
        if disallowed_tags_regexp != "":
            disallowed_tags_regexp += "|"
        disallowed_tags_regexp += "{"+tag+"=.*?}|{"+tag+"}|{/"+tag+"}"

    import re
    readback_remove_tags_expr = re.compile(disallowed_tags_regexp) # remove tags undesirable in readback
    def preparse_say_for_store(input):
        global readback_remove_tags_expr
        if input:
            return re.sub(readback_remove_tags_expr, "", input)

    def readback_prune():
        global readback_buffer
        while len(readback_buffer) > config.readback_buffer_length:
            del readback_buffer[0]

    # keymap overriding to show text_history.
    def readback_catcher():
        ui.add(renpy.Keymap(rollback=(SetVariable("readback_yvalue", 1.0), ShowMenu("text_history"))))
        ui.add(renpy.Keymap(rollforward=ui.returns(None)))

    if config.readback_full:
        config.rollback_enabled = False
        config.overlay_functions.append(readback_catcher)

init python:
    readback_yvalue = 1.0
    class ReadbackAdj(ui.adjustment):
        def change(self,value):
            if value > self._range and self._value == self._range:
                return Return()
            else:
                return ui.adjustment.change(self, value)

    def readback_store_yvalue(y):
        global readback_yvalue
        readback_yvalue = int(y)

# Text History Screen.
screen text_history:

    tag menu

    $ adj = ReadbackAdj(changed = readback_store_yvalue, step = 300)

    window:
        style_group "readback"

        side "c r":

            frame:
                $ ui.viewport(mousewheel = True, offsets=(0.0, readback_yvalue), yadjustment = adj)

                vbox:
                    null height 10

                    for line in readback_buffer:

                        if line[0]:
                            label line[0]
                        
                        text line[1]

                        null height 10

            bar adjustment adj style 'vscrollbar'

        imagebutton idle "resume_idle.png" hover "resume_hover.png" xpos 0 ypos 0 focus_mask True action Return()

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: History box/screen, how do I change mine?

#2 Post by wyverngem »

Are you asking to style the text in the history box? If that's it you need to style the group "readback".

DeletedUser160413

Re: History box/screen, how do I change mine?

#3 Post by DeletedUser160413 »

wyverngem wrote:Are you asking to style the text in the history box? If that's it you need to style the group "readback".
Yes I'm trying to style the text in the history box, but I'm also trying to style the design of the overall box, the position of the different texts (the names and the description and such) just like the picture above of the game by Cyanide Tea. I'm basically trying to change everything of the history box and make it look more like the picture above!

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: History box/screen, how do I change mine?

#4 Post by wyverngem »

Okay so here's the breakdown for the style for readback.

Code: Select all

    style.readback_window.xmaximum = 624
    style.readback_window.ymaximum = 732
    style.readback_window.align = (.5, .5)
    style.readback_window.background = "images/menu/gri_bar.png"
this is the size of the window, position, and the background image. You will use these to make a background image and palce it in game.

Code: Select all

    style.readback_frame.background = None
    style.readback_frame.xpadding = 10
    style.readback_frame.xmargin = 5
    style.readback_frame.ymargin = 5
This is the frame of the actual scrolling text of the window. Use it to position and get rid of the default background for frames.

Code: Select all

    style.readback_text.color = "49240c" # This is your speaking text.
    style.readback_text.font = "Pristina.ttf"
    style.readback_text.size = 20
    style.readback_text.xoffset = 10
This the style for the written text. It's anything that you wrote. Exp. "This was my line!"

Code: Select all

    style.create("readback_button", "readback_text")
    style.readback_button.background = None
    
    style.create("readback_button_text", "readback_text")
    style.readback_button_text.selected_color = "#fCf"
    style.readback_button_text.hover_color = "#fCf"
This bit of code codes the button at the bottom of the screen that returns you to your game.

Code: Select all

    style.readback_label_text.bold = False #This is the name of the person who said it. 
    style.readback_label.color = "#FFFFFF"
    style.readback_label.bold = False
    style.readback_label_text.underline = True
    style.readback_label.drop_shadow = [(0, 1)]
    style.readback_label.drop_shadow_color = "#FFFFFF"
    style.readback_label_text.outlines = [(2, "#49240c", 0, 0)]
    style.readback_label_text.size = 20
This is your who. Either defined as a Name of a character or blank. You can style where it is as well as the text itself. For example the underline option only work son the text, but the color works for just the lable Weird I know, but that's how it works.


If you want the text to tread like so then you need to change the botton screen to the following code.

Code: Select all

Name: These are my lines

Code: Select all

Name:
These are my lines.

Code: Select all

# Text History Screen.
screen text_history:

    #use navigation
    tag menu 
    
    if not current_line and len(readback_buffer) == 0:
        $ lines_to_show = []
        
    elif current_line and len(readback_buffer) == 0:
        $ lines_to_show = [current_line]
        
    elif current_line and not ( current_line == readback_buffer[-1] or False 
            if len(readback_buffer) == 1 else (current_line == readback_buffer[-2]) ):   
        $ lines_to_show = readback_buffer + [current_line]
        
    else:
        $ lines_to_show = readback_buffer
    
    
    $ adj = NewAdj(changed = store_yvalue, step = 300)
    
    window:
        style_group "readback"
    
        side "c r":
            
            frame:
                vbox:
                    text "{size=24}{b}{u}Text History{/size}{/b}{/u}"
                    null height 5
                    $ vp = ui.viewport(mousewheel = True, offsets=(0.0, yvalue), yadjustment = adj)
        
                    vbox:
                        null height 15
                        
                        for line in lines_to_show:
                            hbox:
                                if line[0] and line[0] != " ":
                                    label line[0] # name
            
            
                                if line[1]:
                                    # if there's no voice just log a dialogue
                                    if not line[2]:
                                        text line[1] 
                                    
                                    # else, dialogue will be saved as a button of which plays voice when clicked
                                    else: 
                                        textbutton line[1] action Play("voice", line[2] )
                            
                            null height 10
                
            bar adjustment adj style 'vscrollbar' thumb "images/menu/thumb.png"
        textbutton _("Return") action Return() align (.95, 1.0)
Change the last texbutton first "Return" to rename the button that closes the window. I hope this helps you and many others. For it took me a while to figure it out myself. Now if someone can tell me how to change the scroll bars besides just adding a thumb that would be great.

Also if you want more spacing between the characters in "screen text_history:" you need to adjust the second null height. I hope this helps you out and anyone else looking for this information.

DeletedUser160413

Re: History box/screen, how do I change mine?

#5 Post by DeletedUser160413 »

Thank you so much! I get one error though. It says "current_line is not defined" it's line 162. What should I do? Thank you again, I'm so happy you figured it out!!!

Post Reply

Who is online

Users browsing this forum: Ahrefs [Bot], Google [Bot]