Page 1 of 1
How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 5:39 am
by SLim_Games
Hi,
so I'm making a phone in my game where you get messages from time to time and now I want to add text bubbles like in whatsapp or imessage.
I could make them in photoshop and add every line of text in there, but there is a way to do in renpy right?
my current code for this:
Code: Select all
frame:
xalign 0.5016
yalign 0.23
background Solid("#ffffff")
side ("c r"):
area (1,0,355,335)
viewport id "my_scroller2": #REMEMBER YOUR VIEWPORT ID SO THE SCROLLBAR IS PLACED FOR IT
draggable True mousewheel True yinitial 1000000
vbox:
text "this is my text."
text "this is my text."
text "this is my text."
text "this is my text."
vbar value YScrollValue("my_scroller2") #TAKES YOUR VIEWPORT ID AS THE ARG
null height 20 #just a height set.
That's what I'm looking for:
- renpyforum3.png (31.84 KiB) Viewed 1375 times
this is how it looks currently:
Re: How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 5:50 am
by kivik
My guess is:
- create two frames in photoshop, one for sender and one for receiver (left and right). This is situation is quite cool actually because it's the first time I've seen a reason for asymmetric Borders() for a frame!
- create two styles for said frames, make the background the frame image above with suitable borders.
- put the text inside the frames.
Now I don't know whether you're generating the text dynamically with a list or not - but so long as the list contains the name of the style that you can extract as a variable, you can style them correctly programmatically.
It'd be really cool to see what you end up with
Re: How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 5:57 am
by SLim_Games
Ok, I'm not the best coder, but I'll give it a shot
thank you
Re: How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 6:55 am
by SLim_Games
kivik wrote: ↑Tue Apr 24, 2018 5:50 am
My guess is:
- create two frames in photoshop, one for sender and one for receiver (left and right). This is situation is quite cool actually because it's the first time I've seen a reason for asymmetric Borders() for a frame!
- create two styles for said frames, make the background the frame image above with suitable borders.
- put the text inside the frames.
Now I don't know whether you're generating the text dynamically with a list or not - but so long as the list contains the name of the style that you can extract as a variable, you can style them correctly programmatically.
It'd be really cool to see what you end up with
I came up with a weird solution:
Code: Select all
frame:
xalign 0.5016
yalign 0.23
background Solid("#ffffff")
side ("c r"):
area (1,0,355,335)
viewport id "my_scroller2": #REMEMBER YOUR VIEWPORT ID SO THE SCROLLBAR IS PLACED FOR IT
draggable True mousewheel True yinitial 1000000
vbox:
textbutton "{color=#ffffff}this is my textarino cappuccino,... hmmmm.":
background Solid("#3399cc")
textbutton "{color=#ffffff}Haha tha'ts so funny.":
background Solid("#999999")
xalign 3.0
It's not very pretty, but it gets the job done.
this is what it looks like:
Re: How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 7:23 am
by kivik
Looking good! However I think it'll be a nightmare to code later on if you keep the styling with the buttons. Also I assume you're forcing the text colour because the textbutton was giving you insensitive colour. So I'd strongly suggest you use styles:
Code: Select all
style chat_right:
background Solid("#999")
style chat_left:
background Solid("#39c")
# I think the text inside the button will inherit style names into chat_right_text > if not use style inspector (Shift + I) to double check
style chat_right_text
color "#fff"
style chat_left_text
color "#fff"
...
vbox:
spacing 5 # add some spacing between them
textbutton "text here" style chat_left
textbutton "text here" style chat_right
I would personally do something like this (untested):
You may need to set the xsize, and maybe have to set xfill and yfill to False (can't remember what the default is)
Code: Select all
style chat_right_frame:
background Frame("right_frame.png",15,15,25,15) # assuming the frame has the speech bubble tail on the right that makes it 25px
margin(5,5)
padding(5,5)
style chat_left_frame:
background Frame("right_frame.png",25,15,15,15) # assuming the frame has the speech bubble tail on the left that makes it 25px
margin(5,5)
padding(5,5)
# I think style_prefix makes the text inside the frame chat_right_text, it may be chat_right_frame_text > double check with style inspector
style chat_right_text:
color "#fff"
style chat_left_text:
color "#fff"
...
vbox:
frame style_prefix "chat_right_frame":
text "blah blah blah"
frame style_prefix "chat_left_frame":
text "blah blah blah"
...
Re: How would you make a chat speech bubble?
Posted: Tue Apr 24, 2018 7:25 am
by SLim_Games
kivik wrote: ↑Tue Apr 24, 2018 7:23 am
Looking good! However I think it'll be a nightmare to code later on if you keep the styling with the buttons. Also I assume you're forcing the text colour because the textbutton was giving you insensitive colour. So I'd strongly suggest you use styles:
Code: Select all
style chat_right:
background Solid("#999")
style chat_left:
background Solid("#39c")
# I think the text inside the button will inherit style names into chat_right_text > if not use style inspector (Shift + I) to double check
style chat_right_text
color "#fff"
style chat_left_text
color "#fff"
...
vbox:
spacing 5 # add some spacing between them
textbutton "text here" style chat_left
textbutton "text here" style chat_right
I would personally do something like this (untested):
You may need to set the xsize, and maybe have to set xfill and yfill to False (can't remember what the default is)
Code: Select all
style chat_right_frame:
background Frame("right_frame.png",15,15,25,15) # assuming the frame has the speech bubble tail on the right that makes it 25px
margin(5,5)
padding(5,5)
style chat_left_frame:
background Frame("right_frame.png",25,15,15,15) # assuming the frame has the speech bubble tail on the left that makes it 25px
margin(5,5)
padding(5,5)
# I think style_prefix makes the text inside the frame chat_right_text, it may be chat_right_frame_text > double check with style inspector
style chat_right_text:
color "#fff"
style chat_left_text:
color "#fff"
...
vbox:
frame style_prefix "chat_right_frame":
text "blah blah blah"
frame style_prefix "chat_left_frame":
text "blah blah blah"
...
thanks, I never used style before so I was a bit afraid.. I'm gonna try