Adding a namebox image to the history screen

[Maou Zenigame]

Now for the next issue here.

For my GUI, I have a pair of images that are supposed to be seated behind the speaker's name (when there is one) in the History screen, alternating with every other speaker:

And the finished product is supposed to look like this:

But how would I go about doing this?


Here's the current code for the screen:

Code: Select all

## History screen ##############################################################
##
## This is a screen that displays the dialogue history to the player. While
## there isn't anything special about this screen, it does have to access the
## dialogue history stored in _history_list.
##
## https://www.renpy.org/doc/html/history.html

screen history():
    tag menu
    add "gui/History/history_bg.png"
    imagemap:
                hover "gui/History/history_idle.png"
                idle "gui/History/history_hover.png"
                
                alpha False
                # This is so that everything transparent is invisible to the cursor. 
                
                hotspot (639, 641, 81, 21) action Return()

    predict False

    side "c":
        area (40, 100, 1600, 450)
        
        viewport id "vp":
            scrollbars "vertical"
            draggable True
            mousewheel True
            arrowkeys True
            yinitial 1.0
            area (50, 70, 1110, 470)
            
            vbox:
                for h in _history_list:
                    if h.who:
                        label h.who:
                            style "history_name"
                            
                            ## Take the color of the who text from the Character, if
                            ## set.
                            if "color" in h.who_args:
                                text_color h.who_args["color"]
                    frame background None bottom_margin 50: # add this line
                        text h.what outlines [ (1, "#000000", 0, 0), (0, "#000000", 2, 2) ]

                if not _history_list:
                    label _("The dialogue history is empty.")

## This determines what tags are allowed to be displayed on the history screen.

define gui.history_allow_tags = set()


style history_window is empty

style history_name is gui_label
style history_name_text is gui_label_text
style history_text is gui_text

style history_text is gui_text

style history_label is gui_label
style history_label_text is gui_label_text

style history_window:
    xfill True
    ysize gui.history_height

style history_name:
    xpos gui.history_name_xpos
    xanchor gui.history_name_xalign
    ypos gui.history_name_ypos
    xsize gui.history_name_width

style history_name_text:
    min_width gui.history_name_width
    text_align gui.history_name_xalign
    font "NEXT ART_Regular.otf"
    size 20
    color "#ffffff"

style history_text:
    xpos gui.history_text_xpos
    ypos gui.history_text_ypos
    xanchor gui.history_text_xalign
    xsize gui.history_text_width
    min_width gui.history_text_width
    text_align gui.history_text_xalign
    layout ("subtitle" if gui.history_text_xalign else "tex")

style history_label:
    xfill True

style history_label_text:
    xalign 0.5

[MaydohMaydoh]

You could use enumerate on _history_list for loop to get a number and display each image depending on if the number is even or odd.

Code: Select all

for i, h in enumerate(_history_list):
    if h.who:
        label h.who:
            if i % 2: ## If i is odd
                background 'purple name'
            else: ## if i is even
                background 'blue name'
            style "history_name"

[Per K Grok]

Now for the next issue here.

For my GUI, I have a pair of images that are supposed to be seated behind the speaker's name (when there is one) in the History screen, alternating with every other speaker:
history_name1.png
history_name2.png

And the finished product is supposed to look like this:
4-3 - Log On Black BG.png

But how would I go about doing this?

---------

You could try this

Code: Select all

            $ type=1           
	    for h in _history_list:
                if h.who:
                    frame:  
                        if type==1:  
                            background "history_name1"    
                            $ type=0    
                        else:
                            background "history_name2"
                            $ type=1


                        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"]

[Maou Zenigame]

Thanks, that got the images in there and alternating properly.

Though now everything's misaligned:

How would I go about getting everything lined up to where it's supposed to be?

Just in case, here's my current code:

Code: Select all

## History screen ##############################################################
##
## This is a screen that displays the dialogue history to the player. While
## there isn't anything special about this screen, it does have to access the
## dialogue history stored in _history_list.
##
## https://www.renpy.org/doc/html/history.html

screen history():
    tag menu
    add "gui/History/history_bg.png"
    imagemap:
                hover "gui/History/history_idle.png"
                idle "gui/History/history_hover.png"
                
                alpha False
                # This is so that everything transparent is invisible to the cursor. 
                
                hotspot (639, 641, 81, 21) action Return()

    predict False

    side "c":
        area (40, 100, 1600, 450)
        
        viewport id "vp":
            scrollbars "vertical"
            draggable True
            mousewheel True
            arrowkeys True
            yinitial 1.0
            area (50, 70, 1110, 470)
            
            vbox:
                $ type=1           
                for h in _history_list:
                    if h.who:
                        frame:  
                            if type==1:  
                                background "gui/History/history_name1.png"    
                                $ type=0    
                            else:
                                background "gui/History/history_name2.png"
                                $ type=1


                            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"]
                    frame background None bottom_margin 50: # add this line
                        text h.what outlines [ (1, "#000000", 0, 0), (0, "#000000", 2, 2) ]

                if not _history_list:
                    label _("The dialogue history is empty.")

## This determines what tags are allowed to be displayed on the history screen.

define gui.history_allow_tags = set()


style history_window is empty

style history_name is gui_label
style history_name_text is gui_label_text
style history_text is gui_text

style history_text is gui_text

style history_label is gui_label
style history_label_text is gui_label_text

style history_window:
    xfill True
    ysize gui.history_height

style history_name:
    xpos gui.history_name_xpos
    xanchor gui.history_name_xalign
    ypos gui.history_name_ypos
    xsize gui.history_name_width

style history_name_text:
    min_width gui.history_name_width
    text_align gui.history_name_xalign
    font "NEXT ART_Regular.otf"
    size 20
    color "#ffffff"

style history_text:
    xpos gui.history_text_xpos
    ypos gui.history_text_ypos
    xanchor gui.history_text_xalign
    xsize gui.history_text_width
    min_width gui.history_text_width
    text_align gui.history_text_xalign
    layout ("subtitle" if gui.history_text_xalign else "tex")

style history_label:
    xfill True

style history_label_text:
    xalign 0.5

[Per K Grok]

Thanks, that got the images in there and alternating properly.

Though now everything's misaligned:
historyexample2.png

How would I go about getting everything lined up to where it's supposed to be?

-----

I think you could fix that by adding a top and left margin to this line

frame background None bottom_margin 50:


What values, you have experiment to find out.

For the namebox part you should take a look at Maydohmaydoh´s code above. It's a more elegant solution than mine.

[Maou Zenigame]

A top margin fixed it somewhat, and then I was able to properly line it up within the box by adjusting the values here:

Code: Select all

## The position, width, and alignment of the label giving the name of the
## speaking character.
define gui.history_name_xpos = 180
define gui.history_name_ypos = 8
define gui.history_name_width = 155
define gui.history_name_xalign = 1.0

So now it looks like this:

The only text-related issue left with this is that I'm not able to adjust the size or position of anything other than the names.
Even if I directly add a size to the history_text style, it doesn't change at all. And the same goes for when I try to move it over by adjusting the gui.history_text_xpos, even though that's exactly what worked to get the names in the proper position.

Does anyone out there know how to fix this?


My current code:

Code: Select all

## History screen ##############################################################
##
## This is a screen that displays the dialogue history to the player. While
## there isn't anything special about this screen, it does have to access the
## dialogue history stored in _history_list.
##
## https://www.renpy.org/doc/html/history.html

screen history():
    tag menu
    add "gui/History/history_bg.png"
    imagemap:
                hover "gui/History/history_idle.png"
                idle "gui/History/history_hover.png"
                
                alpha False
                # This is so that everything transparent is invisible to the cursor. 
                
                hotspot (639, 641, 81, 21) action Return()

    predict False

    side "c":
        area (30, 100, 1600, 450)
        
        viewport id "vp":
            scrollbars "vertical"
            draggable True
            mousewheel True
            arrowkeys True
            yinitial 1.0
            area (50, 70, 1110, 470)
            
            vbox:
                $ type=1           
                for h in _history_list:
                    if h.who:
                        frame:  
                            if type==1:  
                                background "gui/History/history_name1.png"    
                                $ type=0    
                            else:
                                background "gui/History/history_name2.png"
                                $ type=1


                            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"]
                    frame background None top_margin 30 bottom_margin 50: # add this line
                        text h.what outlines [ (1, "#000000", 0, 0), (0, "#000000", 2, 2) ]

                if not _history_list:
                    label _("The dialogue history is empty.")

## This determines what tags are allowed to be displayed on the history screen.

define gui.history_allow_tags = set()


style history_window is empty

style history_name is gui_label
style history_name_text is gui_label_text
style history_text is gui_text

style history_text is gui_text

style history_label is gui_label
style history_label_text is gui_label_text

style history_window:
    xfill True
    ysize gui.history_height

style history_name:
    xpos gui.history_name_xpos
    xanchor gui.history_name_xalign
    ypos gui.history_name_ypos
    xsize gui.history_name_width

style history_name_text:
    min_width gui.history_name_width
    text_align gui.history_name_xalign
    font "NEXT ART_Regular.otf"
    size 20
    color "#ffffff"

style history_text:
    xpos gui.history_text_xpos
    ypos gui.history_text_ypos
    xanchor gui.history_text_xalign
    xsize gui.history_text_width
    min_width gui.history_text_width
    text_align gui.history_text_xalign
    layout ("subtitle" if gui.history_text_xalign else "tex")

style history_label:
    xfill True

style history_label_text:
    xalign 0.5

[MaydohMaydoh]

You need to add style_prefix to the screen to give everything their proper styles else they'll only receive the defaults.

Code: Select all

screen history():
    tag menu
    style_prefix 'history'

[Maou Zenigame]

Wow, that was a depressingly simple fix.
Thanks!