How would you make a chat speech bubble?

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
SLim_Games
Newbie
Posts: 22
Joined: Tue Mar 20, 2018 11:37 am
itch: slim-games
Contact:

How would you make a chat speech bubble?

#1 Post by SLim_Games » Tue Apr 24, 2018 5:39 am

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
renpyforum3.png (31.84 KiB) Viewed 198 times
this is how it looks currently:
renpyforum4.JPG
Play my game (nsfw) for free at: https://www.patreon.com/SLim_Games

kivik
Miko-Class Veteran
Posts: 784
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Re: How would you make a chat speech bubble?

#2 Post by kivik » 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 :)

SLim_Games
Newbie
Posts: 22
Joined: Tue Mar 20, 2018 11:37 am
itch: slim-games
Contact:

Re: How would you make a chat speech bubble?

#3 Post by SLim_Games » Tue Apr 24, 2018 5:57 am

Ok, I'm not the best coder, but I'll give it a shot :) thank you
Play my game (nsfw) for free at: https://www.patreon.com/SLim_Games

SLim_Games
Newbie
Posts: 22
Joined: Tue Mar 20, 2018 11:37 am
itch: slim-games
Contact:

Re: How would you make a chat speech bubble?

#4 Post by SLim_Games » Tue Apr 24, 2018 6:55 am

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:
renpyforum5.PNG
Play my game (nsfw) for free at: https://www.patreon.com/SLim_Games

kivik
Miko-Class Veteran
Posts: 784
Joined: Fri Jun 24, 2016 5:58 pm
Contact:

Re: How would you make a chat speech bubble?

#5 Post by kivik » 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"
...

SLim_Games
Newbie
Posts: 22
Joined: Tue Mar 20, 2018 11:37 am
itch: slim-games
Contact:

Re: How would you make a chat speech bubble?

#6 Post by SLim_Games » Tue Apr 24, 2018 7:25 am

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 :)
Play my game (nsfw) for free at: https://www.patreon.com/SLim_Games

Post Reply

Who is online

Users browsing this forum: xavimat