stackable messages using phone template

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
DarthJMG2003
Newbie
Posts: 7
Joined: Thu Aug 20, 2020 11:21 pm
Location: Mexico City
Contact:

stackable messages using phone template

#1 Post by DarthJMG2003 »

Hi i was using this phone template for a project, it works like a charm, but i want to make the message stack like in whatsapp, any ideas on how can i accomplish this??? thanks...
Image

this is the code:

Code: Select all

screen phone_message(who, what):
    vbox at incoming_message:
        style_group "phone_message"
        add "images/bubble-tip.png" at phone_message_bubble_tip
        
        frame:
            style_group "phone_message"
            
            vbox:
                style "phone_message_contents"
                text who style "phone_message_who"
                text what style "phone_message_what"

screen phone_message2(who, what):
    vbox at incoming_message:
        style_group "phone_message"
        #xoffset -584
        xoffset -515        
        xalign 1.0
        # this one adds the triangular tip for the bubble, if you change colors you change this images too
        add "images/bubble-tip2.png" at phone_message_bubble_tip2
        
        frame:
            style_group "phone_message2"
            background Solid("#78E8A0")
            xsize 200
            
            vbox:
                style "phone_message_contents"
                text who style "phone_message_who"
                text what style "phone_message_what"
                
screen phone_message3(what):
    vbox at incoming_message:
        style_group "phone_message"
        #xoffset -584
        xoffset -515        
        xalign 1.0
        # this one adds the triangular tip for the bubble, if you change colors you change this images too
        add "images/bubble-tip2.png" at phone_message_bubble_tip2
        
        frame:
            style_group "phone_message2"
            background Solid("#78E8A0")
            xsize 200
            
            vbox:
                style "phone_message_contents"
                ##text who style "phone_message_who"
                text what style "phone_message_what"
                
screen phone_reply(reply1, label1, reply2, label2):
    modal True
    vbox:
        xalign 0.5
        yalign 0.8
        spacing 5
        
        textbutton "[reply1]" action Jump(label1) style "phone_reply"
        textbutton "[reply2]" action Jump(label2) style "phone_reply"

screen phone_reply3(reply1, label1, reply2, label2, reply3, label3,):
    modal True
    vbox:
        xalign 0.5
        yalign 0.8
        spacing 5
        
        textbutton "[reply1]" action Jump(label1) style "phone_reply"
        textbutton "[reply2]" action Jump(label2) style "phone_reply"
        textbutton "[reply3]" action Jump(label3) style "phone_reply"
        

style phone_reply_text:
    xalign 0.5

screen phone_message_image(who, what, img):
    vbox at incoming_message:
        style_group "phone_message"
        # this one adds the triangular tip for the bubble, if you change colors you change this images too
        add "images/bubble-tip.png" at phone_message_bubble_tip
        
        frame:
            style_group "phone_message"
            
            vbox:
                style "phone_message_contents"
                text who style "phone_message_who"
                text what style "phone_message_what"
                add img

DarthJMG2003
Newbie
Posts: 7
Joined: Thu Aug 20, 2020 11:21 pm
Location: Mexico City
Contact:

Re: stackable messages using phone template

#2 Post by DarthJMG2003 »

this is the code for the options:

Code: Select all

label phone_start:
    window hide
    #show phone at phone_pickup
    show phone with dissolve
    $ renpy.pause(0.2)
    return
    
label phone_msg:
    $ renpy.pause()
    hide screen phone_message
    $ renpy.pause(0.1)
    return
        
label phone_msg2:
    $ renpy.pause()
    hide screen phone_message2
    $ renpy.pause(0.1)
    return
        
label phone_msgi:
    $ renpy.pause()
    hide screen phone_message_image
    $ renpy.pause(0.1)
    return


label phone_after_menu:
    hide screen phone_message
    hide screen phone_message2
    hide screen phone_message3
    hide screen phone_message_image
    $ renpy.pause(0.1)
    return    
    
label phone_end:
    $ renpy.pause()
    hide screen phone_message
    hide screen phone_message2
    hide screen phone_message3
    hide screen phone_message_image
    #show phone at phone_hide
    show phone with dissolve
    $ renpy.pause(0.2)
    return

label message(who, what):
    $ renpy.pause()
    hide screen phone_message
    hide screen phone_message2
    hide screen phone_message3
    hide screen phone_message_image
    $ renpy.pause(0.1)
    # if you want to change the players name to be something else than "me" you can change it here
    if who.lower() == "me":
        show screen phone_message2(who, what)
    else:
        show screen phone_message(who, what)
    return
    
label reply_message(what):
    $ renpy.pause()
    hide screen phone_message
    hide screen phone_message2
    hide screen phone_message3
    hide screen phone_message_image
    $ renpy.pause(0.1)
    show screen phone_message3(what)
    return

label message_img(who, what,img):
    $ renpy.pause()
    hide screen phone_message
    hide screen phone_message2
    hide screen phone_message3
    hide screen phone_message_image
    $ renpy.pause(0.1)
    show screen phone_message_image(who, what,img)
    return


label message_start(who, what):
    # if you want to change the players name to be something else than "me" you can change it here
    if who.lower() == "me":
        show screen phone_message2(who, what)
    else:
        show screen phone_message(who, what)
    return    

DarthJMG2003
Newbie
Posts: 7
Joined: Thu Aug 20, 2020 11:21 pm
Location: Mexico City
Contact:

Re: stackable messages using phone template

#3 Post by DarthJMG2003 »

and the script.rpy code:

Code: Select all

label start:

call phone_start

call message_start("nadia", "hey, this is a phone texting thingy")


call reply_message("oh really? what does it do lol")

call message_img("nadia", "it works with images too!","images/pic1.png")
call message_img("nadia", "receive cute pics from your friend","images/pic2.png")
call message("nadia", "the text box changes depending on how much content there is. dont put too big images or its gonna look weeeeiiiird")
call message("nadia", "you can also do menus here")
call screen phone_reply("awesome!","choice1","lame","choice2")

label choice1:    

    call phone_after_menu

    call message_start("me", "awesome")
    call message("nadia", "i hope you like it")

    jump aftermenu
    
label choice2:
    call phone_after_menu
    call message_start("me", "lame")
    call message("nadia", "well, its a shame but your feelings are valid")
    
    jump aftermenu

label choice3:
    call phone_after_menu
    call message_start("me", "im gay")
    call message("nadia", "nice")
    
    jump aftermenu    
    
label aftermenu:
    call message("nadia", "check the code for comments on how the code works, thanks for your time!")
    call message("nadia", "the base for this code and this stretched phone background comes from cute demon crashers")
    call message("nadia", "the images were drawn by my gf @sloppydraws")
    
    call phone_end

Post Reply

Who is online

Users browsing this forum: Amazon [Bot], Google [Bot], Nightpxel