Page 1 of 1
Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 9:48 am
by 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...
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 3:26 pm
by 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
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 4:27 pm
by madocallie
Kia wrote: ↑Thu Nov 02, 2017 3:26 pm
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?
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 4:31 pm
by Imperf3kt
You can insert images in text using the {image=""} function
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 4:49 pm
by madocallie
Imperf3kt wrote: ↑Thu Nov 02, 2017 4:31 pm
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?
Kia wrote: ↑Thu Nov 02, 2017 3:26 pm
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..?
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 5:57 pm
by 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"}
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 6:15 pm
by madocallie
Imperf3kt wrote: ↑Thu Nov 02, 2017 5:57 pm
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!
Re: Chatroom-like layout in Ren'py?
Posted: Thu Nov 02, 2017 10:51 pm
by Divona
madocallie wrote: ↑Thu Nov 02, 2017 4:49 pm
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.
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 7:50 am
by madocallie
Divona wrote: ↑Thu Nov 02, 2017 10:51 pm
madocallie wrote: ↑Thu Nov 02, 2017 4:49 pm
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?)
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 8:57 am
by 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.
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 10:06 am
by madocallie
Divona wrote: ↑Fri Nov 03, 2017 8:57 am
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...
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 10:56 am
by Kia
try:
you might want to fiddle with the position and alignment to get it right though
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 2:01 pm
by madocallie
Kia wrote: ↑Fri Nov 03, 2017 10:56 am
try:
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...
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 3:32 pm
by Kia
madocallie wrote: ↑Fri Nov 03, 2017 2:01 pm
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
Re: Chatroom-like layout in Ren'py?
Posted: Fri Nov 03, 2017 3:43 pm
by madocallie
Kia wrote: ↑Fri Nov 03, 2017 3:32 pm
madocallie wrote: ↑Fri Nov 03, 2017 2:01 pm
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!
