Lemma Soft Forums

xela wrote: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 wrote:but I don't know how to

xela wrote:

sunTARIA wrote: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.

xela wrote: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 wrote: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.

Donmai wrote: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".

Donmai wrote: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 .