How to make a screen like Christine Love's 2007 CPLL?

[sunTARIA]

Christine Love's CPLL....while I'm not really a fan of the story, I just LOVE the way she made it.
Does anyone know how she made the screen like this?
EXAMPLES OF SCREEN BELOW:




-------------------------------------------------
Please help me?

[xela]

Which part confuses you? This is basic screen design without any magic that I can see. You'll have to read the section on screens in the documentation and maybe some guides in the cookbook section.

All this is are 3 fonts, couple of images and a couple of frames filled with Solids.

[sunTARIA]

Which part confuses you? This is basic screen design without any magic that I can see. You'll have to read the section on screens in the documentation and maybe some guides in the cookbook section.

All this is are 3 fonts, couple of images and a couple of frames filled with Solids.

I need help on how she made the screen look how it looked; how she had the battery, and textbox big, kinda like the game collage, and how she made the box of the ongoing messages, and how she made the words for the day.I wanna make a game like Collage as well, like she did, but I don't know how to, and I thought her's would be a good example since her game is also based on collage.

[Taleweaver]

Moved to Ren'Py questions.

[xela]

but I don't know how to

I figured that but you can learn all about it here (more specifically look for info on Characters, Images, Screens and Fonts. Also Styles if you want code to look clean.). There is nothing here that looks remotely problematic or complicated.

[sunTARIA]

but I don't know how to

I figured that but you can learn all about it here (more specifically look for info on Characters, Images, Screens and Fonts. Also Styles if you want code to look clean.). There is nothing here that looks remotely problematic or complicated.

well um how would i be able to make like a battery and put it on the top but have something for the battery
like you see how there's two "textboxes" the orange one at bottom and then like a tiny one at top and the one at top holds battery and time
how would i be able to do that plz

[xela]

I recon battery is just an image he/she drew or otherwise found online (you can create screens and use add statement to put them on the screen). Each Character I was talking about can be styled individually (so two different layouts is not an issue). I guess is that a Solid() colors were used for most of the interface (you get Ren'Py to draw backgrounds for you instead of using images).

So:

- Battery on top = Simple, plain screen with a couple of Solid frames and images.
- Two textboxes = Two Characters with separate styles. (or maybe also unique screens, both ways will work perfectly without glitches).
- "How" == You read the documentation, some examples from cookbook and make an interface. We generally try to answer tricky questions about Ren'Py on this forum, nothing about this interface seems remotely problematic or difficult (as I've told you several times before).

==>
Maybe someone can code this for you, my approach is either to try and guide people in the right direction or to help them if they made genuine effort and for some reason failed (or I have ready to use code for them, which I don't in this case).

[sunTARIA]

I recon battery is just an image he/she drew or otherwise found online (you can create screens and use add statement to put them on the screen). Each Character I was talking about can be styled individually (so two different layouts is not an issue). I guess is that a Solid() colors were used for most of the interface (you get Ren'Py to draw backgrounds for you instead of using images).

So:

- Battery on top = Simple, plain screen with a couple of Solid frames and images.
- Two textboxes = Two Characters with separate styles. (or maybe also unique screens, both ways will work perfectly without glitches).
- "How" == You read the documentation, some examples from cookbook and make an interface. We generally try to answer tricky questions about Ren'Py on this forum, nothing about this interface seems remotely problematic or difficult (as I've told you several times before).

I don't get the two textbox.How could she use that to make a textbox at the bottom, and a orange line at the top that holds the date and battery? And WIFI signal?

==>
Maybe someone can code this for you, my approach is either to try and guide people in the right direction or to help them if they made genuine effort and for some reason failed (or I have ready to use code for them, which I don't in this case).

[Donmai]

Happy hollidays, everybody . Well, while I endure a lonely Christmas night, let's see what I can do to help here. Hey, sunTARIA, xela really pointed you in the right directions. Christine's game UI is really simple (simpler than what xela thought at first, I might tell you) and, with a little knowledge of screen language, you could have a good start. First thing: to me, the most difficult part was actually finding the game to download, as it's not called CPLL, but "Cell Phone Love Letter" (duh). After finding it, and playing it a bit, I've come to some conclusions. I can't guarantee it was done this way, but I've done some tests and everything seemed to work.
There's no blue or orange screens, I believe, for a simple reason: this game was made when UI functions where "the bees knees". In fact, what we have are a set of bitmap images that take the whole screen, with this layout:

Here is a blank image so you will have a better idea:

blank-layout.jpg (8.24 KiB) Viewed 2549 times

To put the elements at the top of the screen, Christine must have used overlay functions. Probably something like the example you will find here: http://www.renpy.org/w/index.php?title= ... s&oldid=32
If you follow the link, you will see another curiosity: that "text" isn't really text, but several png images. Another overlay must have been used for the battery image. Well, today we can do all of this using simple screens (Yay!). So, let's start:
– Create your project (If you haven't done so), go to options.rpy and edit the line that defines the background of the say window:

Code: Select all

    ## The background of the window. In a Frame, the two numbers
    ## are the size of the left/right and top/bottom borders,
    ## respectively.

    style.window.background = Null()

– Now go to the bottom of your screens.rpy and add these two screens (Why not only one? Well... why not two?):

Code: Select all

        
screen show_date:
    text (_date) xanchor .0 yanchor .0 xpos .01 ypos .0
    
screen show_battery:
    add "battery.png" xanchor 1.0 yanchor .0 xpos 1.0 ypos .0

– Now go to your script.rpy.
At the very top of the script add this line:

Code: Select all

default _date = ""

This time we will be using real text to display the date. You can style the text as you prefer. After label start, put these lines:

Code: Select all

    $ _date = "Feb. 3/08" # just an example
    show screen show_date
    show screen show_battery

Continue your game showing dialogues, new locations, etc. When you want the date to change, just do another

Code: Select all

    $ _date = "Feb. 3/12" # just an example

No need to show the screen again. It will update automatically.
That's it, basically. Have fun.

[sunTARIA]

Happy hollidays, everybody . Well, while I endure a lonely Christmas night, let's see what I can do to help here. Hey, sunTARIA, xela really pointed you in the right directions. Christine's game UI is really simple (simpler than what xela thought at first, I might tell you) and, with a little knowledge of screen language, you could have a good start. First thing: to me, the most difficult part was actually finding the game to download, as it's not called CPLL, but "Cell Phone Love Letter" (duh). After finding it, and playing it a bit, I've come to some conclusions. I can't guarantee it was done this way, but I've done some tests and everything seemed to work.
There's no blue or orange screens, I believe, for a simple reason: this game was made when UI functions where "the bees knees". In fact, what we have are a set of bitmap images that take the whole screen, with this layout:

layout.jpg

Here is a blank image so you will have a better idea:

blank-layout.jpg

To put the elements at the top of the screen, Christine must have used overlay functions. Probably something like the example you will find here: http://www.renpy.org/w/index.php?title= ... s&oldid=32
If you follow the link, you will see another curiosity: that "text" isn't really text, but several png images. Another overlay must have been used for the battery image. Well, today we can do all of this using simple screens (Yay!). So, let's start:
– Create your project (If you haven't done so), go to options.rpy and edit the line that defines the background of the say window:

Code: Select all

    ## The background of the window. In a Frame, the two numbers
    ## are the size of the left/right and top/bottom borders,
    ## respectively.

    style.window.background = Null()

– Now go to the bottom of your screens.rpy and add these two screens (Why not only one? Well... why not two?):

Code: Select all

        
screen show_date:
    text (_date) xanchor .0 yanchor .0 xpos .01 ypos .0
    
screen show_battery:
    add "battery.png" xanchor 1.0 yanchor .0 xpos 1.0 ypos .0

– Now go to your script.rpy.
At the very top of the script add this line:

Code: Select all

default _date = ""

This time we will be using real text to display the date. You can style the text as you prefer. After label start, put these lines:

Code: Select all

    $ _date = "Feb. 3/08" # just an example
    show screen show_date
    show screen show_battery

Continue your game showing dialogues, new locations, etc. When you want the date to change, just do another

Code: Select all

    $ _date = "Feb. 3/12" # just an example

No need to show the screen again. It will update automatically.
That's it, basically. Have fun.

------------------------------------------



THANK YOU! Everything works, but I have a question.How do I get the textbox to show? Do I put the code in the () after Null? Or.....? Sorry if I sound stupid, I never really used Renpy seriously up until now.

[Donmai]

As I explained, Christine didn't use any background image in her text box. That's exactly what

Code: Select all

    style.window.background = Null()

does, it makes the text box background transparent. If you don't want to follow Christine's exact layout, and you prefer to put a background on your text box, then don't use that line of code. To customize your dialogue box you have the options that are documented here: http://www.renpy.org/wiki/renpy/doc/coo ... appearance
And no, you never sounded stupid to me. No question is stupid if we don't know the answer. And, as someone else once said in this forum, "the only stupid question is silence".

[sunTARIA]

As I explained, Christine didn't use any background image in her text box. That's exactly what

Code: Select all

    style.window.background = Null()

does, it makes the text box background transparent. If you don't want to follow Christine's exact layout, and you prefer to put a background on your text box, then don't use that line of code. To customize your dialogue box you have the options that are documented here: http://www.renpy.org/wiki/renpy/doc/coo ... appearance
And no, you never sounded stupid to me. No question is stupid if we don't know the answer. And, as someone else once said in this forum, "the only stupid question is silence".

Wait, huh? So how did she get the pictures in the middle, if the top and bottom parts (the top with icons, bottom with text) weren't use as a textbox? It seemed like the orange parts were a textbox, since they didn't move when the pictures in the middle moved.plz help me im so confused
https://www.flickr.com/photos/136850013 ... ed-public/
I took that pic of a example of christine love's textbox thing, but i wanna know how to get that thing to be the textbox instead of me having to put it like a background picture
I gave a link above of what it looks like so far.But I want to know how she was able to put pictures in the middle?
Also, how do I animate the heart? ;-;
Sorry for all the questions, I'm only a 13 year old girl.

[Donmai]

I think I've explained that before. One character has orange backgrounds, and the other has blue backgrounds. For every location, Christine created an image the size of the screen, where she only changed the midle picture (if it's still hard for you to understand, that's because I'm not an English speaker and sometimes my poor vocabulary isn't enough... ), Here, I've captured some images of the game and erased the elements which are not part of them so you can see how they look (click on the image for a full view):

Those colored boxes in fact helped to reduce the size of the images in bytes, because of the jpeg compression.
As I told you before, you don't need to do it that way. You can give the textbox any background you like. See here: http://lemmasoft.renai.us/forums/viewto ... =51&t=9233
The "pictures in the middle" you are saying are the character sprites? They are png images with a transparent background, probably positioned there using xpos and ypos statements. See the Ren'Py tutorial game to learn how to position things on the screen.
The heart is what we call a click-to-continue icon. You will find a tutorial here: http://lemmasoft.renai.us/forums/viewto ... 51&t=22196

What's wrong with being a 13 year old girl? Well, I've never been a girl in my life, but I was 13 year old too... 46 years ago .

[sunTARIA]

I think I've explained that before. One character has orange backgrounds, and the other has blue backgrounds. For every location, Christine created an image the size of the screen, where she only changed the midle picture (if it's still hard for you to understand, that's because I'm not an English speaker and sometimes my poor vocabulary isn't enough... ), Here, I've captured some images of the game and erased the elements which are not part of them so you can see how they look (click on the image for a full view):

diagram.jpg

Those colored boxes in fact helped to reduce the size of the images in bytes, because of the jpeg compression.
As I told you before, you don't need to do it that way. You can give the textbox any background you like. See here: http://lemmasoft.renai.us/forums/viewto ... =51&t=9233
The "pictures in the middle" you are saying are the character sprites? They are png images with a transparent background, probably positioned there using xpos and ypos statements. See the Ren'Py tutorial game to learn how to position things on the screen.
The heart is what we call a click-to-continue icon. You will find a tutorial here: http://lemmasoft.renai.us/forums/viewto ... 51&t=22196

What's wrong with being a 13 year old girl? Well, I've never been a girl in my life, but I was 13 year old too... 46 years ago .

this is my progress so far: https://www.flickr.com/photos/136850013 ... ed-public/
this is how it looks when a message is occuring: https://www.flickr.com/photos/136850013 ... ed-public/
I wanna make the message thing look, more....phonish.
Here's a example of how I wanna make it next to this statement: http://www.user-agent.org/cgi-bin/stuff ... /27/Phones You see the bottom of the phone in that picture at useragent.org? How it has a erase, send, and options mode? and how it highlighted when the person pressed send?
how do i do that? except, instead of the user sending it, for my vn, it shows the protagonist (spoilers ahead!) Arisa clicking it, and it high-lighting? i wanna add those buttons to the bottom of my screen.however, instead of the user being able to click it, when Arisa sends something, it high-lights? as if she actually clicked it?
i must be annoying to you, sorry ;-;
--------------
Also it's hard being 13 unlike others on here i am not used to using computers that advanced ;-;

[sunTARIA]

BTW, THAT PINK THING in the first picture of a example of my VN is my laptop's bar color, not in the actually VN, lol.