Mobile phone text-message system

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Mobile phone text-message system

#1 Post by littanana » Thu Sep 08, 2016 11:58 am

Image
Hey everyone, I based this on the code and assets that were provided in Cute Demon Crashers. Basically I had the struggle to copy the system to my own game, and then I wanted the ability to "text back". I played around and managed to implement a system that lets you use a basic menu system to select a reply, and based on the reply it will jump to a new label and continue from there. Most of the modification came from me setting up a different color box which will be the players reply and positioning it.

The code is cleaned up a lot and I have commented it so you can hopefully see what's going on.
I use a 1920x1080 so all the numbers will be very off if you have a different dimension, but I'm sure you can manage to play around and fix it! I may not be able to help with problems you all come up with, but I hope just sharing this some people will find it useful and be able to play around and make it work to your needs as I managed with the original code.

I have uploaded the code as an example game in a .zip file which you can download and run.

It looks like this in the code now;

Code: Select all

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")
Download here:
https://nadianova.itch.io/phone-message ... -for-renpy
Last edited by littanana on Mon Feb 26, 2018 1:16 pm, edited 6 times in total.

User avatar
gas
Veteran
Posts: 439
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Mobile phone text-message system

#2 Post by gas » Thu Sep 08, 2016 6:15 pm

Quick, minimal and nice!

I'll try to add a system to reply by the phone itself, just for personal fun.
10 ? "RENPY"
20 GOTO 10

RUN

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#3 Post by littanana » Thu Sep 08, 2016 9:44 pm

gas wrote:Quick, minimal and nice!

I'll try to add a system to reply by the phone itself, just for personal fun.
If you get it to work, please share! :>

User avatar
gas
Veteran
Posts: 439
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Mobile phone text-message system

#4 Post by gas » Fri Sep 09, 2016 2:20 pm

Tried. Anyway the effect is not really fancy XD.

The screen.rpy code with changes:

Code: Select all

init:
    style phone_message_vbox:
        xalign 0.5
        yalign 0
        ypos 480
        xsize 240
        xoffset -10
        
    style phone_message_frame:
        background Solid("#d9398c")
        ypadding 10
        xpadding 10
        
    style phone_message_frame2:
        background Solid("#78E8A0")
        ypadding 10
        xpadding 10

    style phone_message_contents:
        spacing 10

    style phone_message is say_dialogue:
        xoffset 0
        outlines []
        
    style phone_message2 is say_dialogue:
        xoffset 0
        outlines []
        
        
    style phone_message_who is phone_message:
        color "#ecf0f1"
        size 18

    style phone_message_what is phone_message:
        color "#ffffff"
        size 18
    style phone_reply is default:
        size 18
        xalign 0.5
        xsize 200
        background Solid("#666")
        hover_background Solid("#78E8A0")
        ypadding 10
        xpadding 10
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 -480
        
        xalign 1.0

        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.96
        spacing 5
        textbutton "[reply1]" action Jump(label1) style "phone_reply"
        textbutton "[reply2]" action Jump(label2) style "phone_reply"

And this is the new script.

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"

# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")

image phone = "images/phone.png"


# Picking up the phone
transform phone_pickup:
    yalign 1.0 xalign 0.5
    yoffset 600
    easein 0.3 yoffset 200

    on hide:
        easeout 0.2 yoffset 600

transform phone_message_bubble_tip:
    xoffset 10
    yoffset 1
    
transform phone_message_bubble_tip2:
    xoffset 165
    yoffset 1

transform scrolling_out_message:
    easeout 0.1 yoffset -30 alpha 0
        
transform incoming_message:
    yoffset 100
    alpha 0
    parallel:
        easein 0.1 alpha 1
    parallel:
        easein 0.2 yoffset 0

    on hide:
        scrolling_out_message

# The game starts here.
label start:

    e "Time to check out my phone!"
    
## Add cellphone screen here
show phone at phone_pickup



$ renpy.pause(0.2)
show screen phone_message("mom", "have you eaten breakfast")
$ renpy.pause(0.2)
call screen phone_reply("umm no","nobreakfast","totally!","yesbreakfast")



label yesbreakfast:
    hide screen phone_message
    $ renpy.pause(0.1)
    
    show screen phone_message2("Me", "yes i did mom ty love u")
    $ renpy.pause()

    hide screen phone_message2
    $ renpy.pause(0.1)

    show screen phone_message("mom", "good!! love mom")
    $ renpy.pause()

    hide screen phone_message
    hide phone

    $renpy.pause(0.2)
    jump continues
    
label nobreakfast:
    hide screen phone_message
    $ renpy.pause(0.1)
    show screen phone_message2("Me", "haha no i havent  lol")
    $ renpy.pause()

    hide screen phone_message2
    $ renpy.pause(0.1)

    show screen phone_message("mom", "ok. well eat some then")
    $ renpy.pause()

    hide screen phone_message
    hide phone

    $renpy.pause(0.2)
    jump continues    
        
##Hide cellphone screen

    
    
label continues:    
    e "My mom is great."
    return
Attachments
2016-09-09 20_19_15-Lemma Soft Forums • Post a reply.png
10 ? "RENPY"
20 GOTO 10

RUN

Mimiruns
Regular
Posts: 48
Joined: Sun Jan 17, 2016 3:32 am
Contact:

Re: Mobile phone text-message system

#5 Post by Mimiruns » Sat Sep 10, 2016 4:09 pm

This is a really nifty effect and exactly something I was looking for! thank you for making it!!

I only have one question. I would like to use this effect for the text boxes. Is there any way to lower the incoming message transformation so it happens on the bottom of the stage? Whenever I try the code, it just puts the text box at the top of the screen.

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#6 Post by littanana » Sun Sep 11, 2016 8:40 pm

gas wrote:Tried. Anyway the effect is not really fancy XD.

The screen.rpy code with changes:

Code: Select all

init:
    style phone_message_vbox:
        xalign 0.5
        yalign 0
        ypos 480
        xsize 240
        xoffset -10
        
    style phone_message_frame:
        background Solid("#d9398c")
        ypadding 10
        xpadding 10
        
    style phone_message_frame2:
        background Solid("#78E8A0")
        ypadding 10
        xpadding 10

    style phone_message_contents:
        spacing 10

    style phone_message is say_dialogue:
        xoffset 0
        outlines []
        
    style phone_message2 is say_dialogue:
        xoffset 0
        outlines []
        
        
    style phone_message_who is phone_message:
        color "#ecf0f1"
        size 18

    style phone_message_what is phone_message:
        color "#ffffff"
        size 18
    style phone_reply is default:
        size 18
        xalign 0.5
        xsize 200
        background Solid("#666")
        hover_background Solid("#78E8A0")
        ypadding 10
        xpadding 10
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 -480
        
        xalign 1.0

        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.96
        spacing 5
        textbutton "[reply1]" action Jump(label1) style "phone_reply"
        textbutton "[reply2]" action Jump(label2) style "phone_reply"

And this is the new script.

Code: Select all

# You can place the script of your game in this file.

# Declare images below this line, using the image statement.
# eg. image eileen happy = "eileen_happy.png"

# Declare characters used by this game.
define e = Character('Eileen', color="#c8ffc8")

image phone = "images/phone.png"


# Picking up the phone
transform phone_pickup:
    yalign 1.0 xalign 0.5
    yoffset 600
    easein 0.3 yoffset 200

    on hide:
        easeout 0.2 yoffset 600

transform phone_message_bubble_tip:
    xoffset 10
    yoffset 1
    
transform phone_message_bubble_tip2:
    xoffset 165
    yoffset 1

transform scrolling_out_message:
    easeout 0.1 yoffset -30 alpha 0
        
transform incoming_message:
    yoffset 100
    alpha 0
    parallel:
        easein 0.1 alpha 1
    parallel:
        easein 0.2 yoffset 0

    on hide:
        scrolling_out_message

# The game starts here.
label start:

    e "Time to check out my phone!"
    
## Add cellphone screen here
show phone at phone_pickup



$ renpy.pause(0.2)
show screen phone_message("mom", "have you eaten breakfast")
$ renpy.pause(0.2)
call screen phone_reply("umm no","nobreakfast","totally!","yesbreakfast")



label yesbreakfast:
    hide screen phone_message
    $ renpy.pause(0.1)
    
    show screen phone_message2("Me", "yes i did mom ty love u")
    $ renpy.pause()

    hide screen phone_message2
    $ renpy.pause(0.1)

    show screen phone_message("mom", "good!! love mom")
    $ renpy.pause()

    hide screen phone_message
    hide phone

    $renpy.pause(0.2)
    jump continues
    
label nobreakfast:
    hide screen phone_message
    $ renpy.pause(0.1)
    show screen phone_message2("Me", "haha no i havent  lol")
    $ renpy.pause()

    hide screen phone_message2
    $ renpy.pause(0.1)

    show screen phone_message("mom", "ok. well eat some then")
    $ renpy.pause()

    hide screen phone_message
    hide phone

    $renpy.pause(0.2)
    jump continues    
        
##Hide cellphone screen

    
    
label continues:    
    e "My mom is great."
    return
Hey this is really amazing! I think it looks great! I'll definitely use this in my game! :>
Mimiruns wrote:This is a really nifty effect and exactly something I was looking for! thank you for making it!!

I only have one question. I would like to use this effect for the text boxes. Is there any way to lower the incoming message transformation so it happens on the bottom of the stage? Whenever I try the code, it just puts the text box at the top of the screen.
Sorry I don't know! I just made a slight edit on the original code which I found from the cute demon crashers! I'm a total beginner so I honestly have no idea!

borrowed
Newbie
Posts: 10
Joined: Thu Apr 07, 2016 1:12 pm
Contact:

Re: Mobile phone text-message system

#7 Post by borrowed » Mon Sep 19, 2016 3:49 am

need some advice what did i do wrong i tried to test and put in my game but turn out like this using renpy new gui theme

Image

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#8 Post by littanana » Mon Sep 19, 2016 9:44 am

borrowed wrote:need some advice what did i do wrong i tried to test and put in my game but turn out like this using renpy new gui theme
Sorry your image doesn't work. Also I am myself trying to get it to work with the new GUI, like the whole upgrade broke this phone code thingy.

viewtopic.php?f=8&t=40387

borrowed
Newbie
Posts: 10
Joined: Thu Apr 07, 2016 1:12 pm
Contact:

Re: Mobile phone text-message system

#9 Post by borrowed » Tue Sep 20, 2016 6:21 am

just figure out what was missing thanks for the link it i read over over what gas was telling. figure it out i dont it would work on your code but here it is just debug 3 to 4 time seem working hope it work for you thank for the phone message code

style phone_message is say_dialogue:
xoffset 0
outlines []
xalign 1
yalign 0

style phone_message2 is say_dialogue:
xoffset 0
outlines []
xalign 1
yalign 0

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#10 Post by littanana » Wed Sep 21, 2016 10:14 am

Ok, I managed to build a working example version for the latest version, it is attached to the main post with the name "MobileexapleNEW.zip"

borrowed
Newbie
Posts: 10
Joined: Thu Apr 07, 2016 1:12 pm
Contact:

Re: Mobile phone text-message system

#11 Post by borrowed » Thu Sep 22, 2016 2:26 am

hello i don't want to be rude but can i also add emoji on this phone message code would love to hear your input about it thank you

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#12 Post by littanana » Thu Sep 22, 2016 2:36 pm

borrowed wrote:hello i don't want to be rude but can i also add emoji on this phone message code would love to hear your input about it thank you

You can totally add emoji, I don't know how you can but I'm sure its possible. You are free to modify the code freely! I just shared this for everyone and everyone is okay to build on it.

User avatar
haca
Newbie
Posts: 3
Joined: Thu Nov 03, 2016 12:58 pm
Projects: A Cat With No Tail
Github: euro-fly
Location: BC
Contact:

Re: Mobile phone text-message system

#13 Post by haca » Thu Nov 03, 2016 5:47 pm

I've been using this recipe a fair bit, and I've expanded the functionality somewhat. I believe someone asked about emoji support? It's not quite emoji, but displaying small images (125x125px) is doable, and you can easily modify the below code to get what you want. You'd need to have the emoji images saved in a separate directory, though.

In screens.rpy:

Code: Select all

screen phone_sticker_other(who, what):
    vbox at incoming_message:
        style_group "phone_message"
        add "images/phone/bubble-tip.png" at phone_message_bubble_tip
        frame:
            style_group "phone_message"
            xsize 145 #modify this depending on how large your images are.
            vbox:
                style "phone_message_contents"
                text who style "phone_message_who"
                if what != "":
                    add "images/stickers/" + what + ".png" #again, modify this depending on how you have your images set up.
And then you'd call this like you would a normal message, except with the "what" argument replaced with the name of whatever image/emoji/whatever you want to use.

Furthermore, with a ton of thanks to this post, you can further shorten every message to simply one line of code. Which is to say, rather than pausing, hiding the screen and showing a second screen every time, like so:

Code: Select all

    hide screen phone_message
    $ renpy.pause(0.1)
    show screen phone_message2("Me", "yes i did mom ty love u")
    $ renpy.pause()
    hide screen phone_message2
    $ renpy.pause(0.1)
    show screen phone_message("mom", "good!! love mom")
You can simply specify a label like this:

Code: Select all

label message(who, what):
    $ renpy.pause()
    hide screen phone_message
    hide screen phone_message2
    $ renpy.pause(0.1)
    if who.lower() == "me":
        show screen phone_message2(who, what)
    else:
        show screen phone_message(who, what)
    return
And call it like this:

Code: Select all

label start:
    call message("Me", "yes i did mom ty love u")
    call message("mom", "good!! love mom.")
I hope someone finds this useful!

User avatar
littanana
Regular
Posts: 48
Joined: Mon Sep 05, 2016 2:15 pm
Tumblr: girlgaymer
Contact:

Re: Mobile phone text-message system

#14 Post by littanana » Sun Nov 06, 2016 11:39 am

Ah, this is awesome. I have to collect this all into a ren'py file when I have time!

glithch
Regular
Posts: 82
Joined: Sat Jul 23, 2016 5:32 am
Contact:

Re: Mobile phone text-message system

#15 Post by glithch » Sat Dec 10, 2016 8:44 pm

! hello
im wondering is it possible to have the phone sticking out further on the screen? i mean, i know it is lol, bt some tips on how to do that maybe?
i managed to find how to have the phone itself further by editing the yalign of the transform phone pickup but i dont know how to fit the bubbles into the phone now ;/
because the message bubbles and the choices are still hanging down there
also how do i actually put the scipt into my game q-q because the cript isn't only in the script.rpy file right?

Post Reply

Who is online

Users browsing this forum: sDextra