Chatroom-like layout in Ren'py?

[madocallie]

Hey, I haven't been on here in quite a while, but I've been planning to make another visual novel for a game jam!

One thing I'd like it to incorporate is chatroom-like dialogue in certain scenes.

Sorta like this: https://img.itch.zone/aW1hZ2UvMTQzODk ... wzN.png (from Brianna Lei's fantastic game Butterfly Soup!)

How should I go about coding it? I have a feeling I'd need to heavily edit NVL code or something, but I'm not quite sure...

[Kia]

it seems NVL is the right choice, however, it shouldn't be that hard to make it look like chat, just add a frame around each "text d.what:" and it should look like the chat you want

[madocallie]

it seems NVL is the right choice, however, it shouldn't be that hard to make it look like chat, just add a frame around each "text d.what:" and it should look like the chat you want

cool! that's good to know!

next question:
how would i go about adding icons/images like in the example above?

[Imperf3kt]

You can insert images in text using the {image=""} function

[madocallie]

You can insert images in text using the {image=""} function

i know that can be done, but since a good portion of my game is going to take place in these chatrooms, is there a way to assign an image to a character instead of repeating the image over and over?

it seems NVL is the right choice, however, it shouldn't be that hard to make it look like chat, just add a frame around each "text d.what:" and it should look like the chat you want

also just a quick question: where do i find the "text d. what:" parts of the code..?

[Imperf3kt]

You want to emulate emoticons, right?
All I can think of is {image="smiley.png"}
Or

Code: Select all

image smiley:
    "smiley.png"
    pause 0.5
    "smiley2.png"
    pause 0.5
    repeat


{image="smiley"}

[madocallie]

You want to emulate emoticons, right?
All I can think of is {image="smiley.png"}
Or

Code: Select all

image smiley:
    "smiley.png"
    pause 0.5
    "smiley2.png"
    pause 0.5
    repeat


{image="smiley"}
[/quote]

i actually wanted to emulate user icons, but this is helpful too!

[Divona]

also just a quick question: where do i find the "text d. what:" parts of the code..?

That will be under "screen nvl_dialogue" in "screens.rpy" file.

[madocallie]

also just a quick question: where do i find the "text d. what:" parts of the code..?

That will be under "screen nvl_dialogue" in "screens.rpy" file.

excellent! thanks so much!

just to ask again, but is there also a way of incorporating user icons into the chat too..? (like in the example above?)

[Divona]

Perhaps you could assign an image to Character() and use that to add the image in front of the NVL text?

Code: Select all

define d = Character("Divona", kind=nvl, icon="divona_avatar.png")

Then in "screens.rpy" under "screen nvl_dialogue":

Code: Select all

screen nvl_dialogue(dialogue):

    for d in dialogue:

        window:
            id d.window_id

            fixed:
                yfit gui.nvl_height is None

                if "icon" in d.who_args:
                    add d.who_args["icon"] xalign 0.1

                if d.who is not None:

                    text d.who:
                        id d.who_id

                text d.what:
                    id d.what_id

Not a pretty as of now, but you get the idea.

[madocallie]

Perhaps you could assign an image to Character() and use that to add the image in front of the NVL text?

Code: Select all

define d = Character("Divona", kind=nvl, icon="divona_avatar.png")

Then in "screens.rpy" under "screen nvl_dialogue":

Code: Select all

screen nvl_dialogue(dialogue):

    for d in dialogue:

        window:
            id d.window_id

            fixed:
                yfit gui.nvl_height is None

                if "icon" in d.who_args:
                    add d.who_args["icon"] xalign 0.1

                if d.who is not None:

                    text d.who:
                        id d.who_id

                text d.what:
                    id d.what_id

Not a pretty as of now, but you get the idea.

cool! i'm gonna test this out right now.

back to the frame question by the way, but how exactly would i go about adding one to the code? I've been trying various ways without much success...

[Kia]

try:

Code: Select all

                frame:
                    text d.what:
                        id d.what_id

you might want to fiddle with the position and alignment to get it right though

[madocallie]

try:

Code: Select all

                frame:
                    text d.what:
                        id d.what_id

you might want to fiddle with the position and alignment to get it right though

how would i go about customizing it? i also want to add custom textboxes specifically for these scenes...

[Kia]

how would i go about customizing it? i also want to add custom textboxes specifically for these scenes...

here's a striped down nvl screen you can start with:

Code: Select all

screen nvl(dialogue, items=None):
    window:
        xsize 1000 xalign .5
        style "nvl_window"
        vbox:
            spacing 40
            use nvl_dialogue(dialogue)

        for i in items:
            textbutton i.caption:
                action i.action
                style "nvl_button"

    add SideImage() xalign 0.0 yalign 1.0

screen nvl_dialogue(dialogue):
    for d in dialogue:
        window:
            id d.window_id
            hbox:
                xsize 1000 xalign 1.0
                if d.who is not None:
                    frame:
                        xsize 300 background None
                        text d.who:
                            xalign 1.0
                            id d.who_id
                frame:
                    xalign 1.0 xsize 800 
                    text d.what:
                        align(.5,.5)
                        id d.what_id

define config.nvl_list_length = 10

you'll have to delete all of the styles for this screen and start styling every element from scratch. if you don't know how, you need to read through https://www.renpy.org/doc/html/style.html and https://www.renpy.org/doc/html/screens.html

[madocallie]

how would i go about customizing it? i also want to add custom textboxes specifically for these scenes...

here's a striped down nvl screen you can start with:

Code: Select all

screen nvl(dialogue, items=None):
    window:
        xsize 1000 xalign .5
        style "nvl_window"
        vbox:
            spacing 40
            use nvl_dialogue(dialogue)

        for i in items:
            textbutton i.caption:
                action i.action
                style "nvl_button"

    add SideImage() xalign 0.0 yalign 1.0

screen nvl_dialogue(dialogue):
    for d in dialogue:
        window:
            id d.window_id
            hbox:
                xsize 1000 xalign 1.0
                if d.who is not None:
                    frame:
                        xsize 300 background None
                        text d.who:
                            xalign 1.0
                            id d.who_id
                frame:
                    xalign 1.0 xsize 800 
                    text d.what:
                        align(.5,.5)
                        id d.what_id

define config.nvl_list_length = 10

you'll have to delete all of the styles for this screen and start styling every element from scratch. if you don't know how, you need to read through https://www.renpy.org/doc/html/style.html and https://www.renpy.org/doc/html/screens.html

Thanks so much!