Lemma Soft Forums

Supporting creators of visual novels and story-based games since 2003.

Visit our new games list, blog aggregator, IRC channel, and Discord (new).
Activation problem? Email pytom@bishoujo.us.
It is currently Tue Jun 27, 2017 3:16 pm

All times are UTC - 5 hours [ DST ]


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.



Post new topic Reply to topic  [ 132 posts ]  Go to page 1, 2, 3, 4, 5 ... 9  Next
Author Message
PostPosted: Mon Jan 31, 2011 5:29 pm 
Lemma-Class Veteran
User avatar

Joined: Fri May 23, 2008 2:11 pm
Posts: 2677
Organization: happyB
Twitter: @Aleema
Tumblr: happybackwards
Image

Table of Contents:
  1. Using frames
  2. Using pre-fitted images
  3. Making character-specific textboxes
  4. Styling Text
  5. Styling the Names
  6. Click-to-Continue icon

---

Before we can explain how to customize your dialogue box, you need to design it first. The easiest way to do this is to render a mock of a dialogue box in your photo editor. Get it to look exactly how you want, text included. Even if it takes a little bit more work, it's possible to recreate most mock-ups.


There are two ways you can save your design to be incorporated into Ren'Py:
  1. Frames: Create a box that will be chopped up and sized automatically
  2. Pre-fitted Images: Simply drop in your image that you've created to already be the size you want

Image

Dialogue boxes that use Frame look for the corners of the image, and then stretch whatever's in between to fit the proportions you give it in the code.
Image
Code:
style.window.background = Frame("PinkBox.png", 25, 25)

This line of code is already in your options.rpy file, except with a filler file. Replace the name and size of your corners with your image's info. Be sure to uncomment the code by removing the # mark before it.

Of course, Ren'Py didn't automatically fix my margins or text for me! Straight out of a new game, your new framed dialogue box will need a lot of tweaking. Most everything you need is already there for you, but it is commented out.

Go to your options.rpy file. Find these lines of code:
Code:
    ## Margin is space surrounding the window, where the background
    ## is not drawn.

    # style.window.left_margin = 6
    # style.window.right_margin = 6
    # style.window.top_margin = 6
    # style.window.bottom_margin = 6

    ## Padding is space inside the window, where the background is
    ## drawn.

    # style.window.left_padding = 6
    # style.window.right_padding = 6
    # style.window.top_padding = 6
    # style.window.bottom_padding = 6

    ## This is the minimum height of the window, including the margins
    ## and padding.

    # style.window.yminimum = 250

Again, uncomment what you use by deleting the # marks.

The Margin of the box is for how far away the dialogue box is from the edges of the screen. This is what our PinkBox looks like with large margins (padding untouched):

Image

Padding of the box is how far away the text is from the edges of the dialogue box. Here is what is looks like with large padding (margin back to default):

Image

yminimum forces the box to be a certain amount of pixels high. Use it to define how tall the box must be at all times (but it can get taller if it needs to be). This is an important property for the pre-fitted image dialogue boxes next.

With your new frame box in Ren'Py, it is up to you to play around with padding and margin until it looks exactly how you want it to. Trial and error is sometimes the only path here. To make your life easier, you can take advantage of the refresh feature by hitting SHIFT+R to reload the game to see your changes immediately.

Image

The other type is easier to implement because you have already placed it how you want it to look in your photo editor. The downside is that this isn't flexible and you will need to make new images for every alteration you want. The upside is that it's quick, easy, and you get the exact look you want.

To make this easy on you, do NOT crop your image to just the dialogue box in your editor. Instead, include the spaces around the edge (up to the top of the box) so that you don't have to alter margins within Ren'Py. This means that your resulting image should be as wide as your game (default: 800px).

Just insert your file name into the style.window.background property already in your options.rpy.

You'll need to make sure your yminimum is set to be the exact height of your image, and that your padding is altered so that it fights into your box (again, trial and error might be the only way). Set all your margins to 0. When you start your game, you should see your box! That was easy, wasn't it?

Attachment:
dialoguebox_yminimum.jpg
dialoguebox_yminimum.jpg [ 61.05 KiB | Viewed 61692 times ]

In this example, you can see the box already has its margins in the image itself. The height of the image is 155 pixels, so that's what I'll set my yminimum. I also want to make sure that the text starts 35 pixels from the left, so the left_padding would be 35, and do the same amount to the right_padding for symmetry, and make sure the text never falls out of the box, so the bottom_padding of 35, too. If you want. You can just make sure you never write that much!

If you want a separate window for your character names, you can either save a namebox as a separate file (recommended) or include it in your dialogue box as one big image. The problem with the latter is that you will need to make two versions of the same image: one with the character box, and one without. Because the narrator (when no character is speaking) will look weird with an empty name box lying around.

Image

To make two (or more) different versions of your text box, put the one you're going to use the most as the default:
Code:
style.window.background = "dialoguebox.png"

And then, for the characters you want to have a different box (in this case, the narrator because it's not a character that has a name). You can use the Frame function with this, too. Just copy whatever you did with the window.background code and put it after window_background in your character name (changing the filename):
Code:
$ narrator = Character(None, window_background="dialoguebox_noname.png")

It should retain all of the other properties you defined for the default window.

If you find you need to make specific adjustments for each character's text, you have to put properties like these into your character calls:
Code:
    $ a = Character('Name', window_top_padding=15)
    $ b = Character('Name', what_xpos=50)
    $ c = Character('Name', who_yalign=0.5)

The important parts of those code are the "window_", "what_" and "who_" prefixes. You can use about any property you want, but you have to tell the character what you're editing. "window_" is a property that edits the whole window, similar to what you did for style.window. "what_" edits the text (what's being said) and "who_" edits the character's name (who's saying it).

To save you keystrokes, you should format the default text style so you don't have to copy/paste your adjustments to every character.

Image

To edit how your text looks, look a little further down in your options.rpy for these lines of code:

Code:
    ## The file containing the default font.

    # style.default.font = "DejaVuSans.ttf"

    ## The default size of text.

    # style.default.size = 22

Uncomment those lines to change the font or size of the text. Even though it is not included in your file, you can also change just about any aspect of the styles that you want. You can change the color, add a drop_shadow, or an outline if you wanted. Here's an example of each:
Code:
    style.default.color = "#000000" #Makes text black
    style.default.drop_shadow = [(1, 1)] #Adds a shadow one pixel to the right and one pixel down
    style.default.outlines = [(4, "#ff0000", 0, 0), (2, "#fff", 0, 0)] #Adds a white outline 4 pixels thick, and then a black outline, 2 pixels thick
    style.default.xalign = 1.0 #aligned the text completely to the right

In addition to those, you can use all of the text properties seen here.

Style Inspector:
To edit specific text, like the name of the character, you need to find out what that text's style is called. An easy way to find styles is to launch your game and then hover your mouse over the text you want to change. Hit the keys SHIFT+I and a black screen will come up with all the styles and parent styles that object is using. The one that you want is the last style listed. If you see this:

Image

Then you want say_label. For styles you can't hover on, you can try to find in the Style Hierarchy by hitting SHIFT+D.

Now that you have the style's name, you can plug it into this forumla:
Code:
style.STYLE_NAME.PROPERTY = VALUE


STYLE_NAME: This would be the name you found with the style inspector, like say_label.
PROPERTY: What you want to change about that style. Again, you can find all the kinds of properties here.
VALUE: Whatever you're setting the style property to. Numbers for sizes, strings (things in quotes) for filenames, Hex values for colors, etc.

So if we wanted to edit say_label to be a different font, I would put this at the bottom of my options.rpy:
Code:
style.say_label.font = "myfont.tff"

Making sure my font is in the top level of my folder.

Image

Using everything we learned on this page, we can now put each of the elements where we want and make them look how we want, with some respect to Ren'Py's limitations. There are two ways to show your character names: embedded into one dialogue window, or to have the name in a separate window from the dialogue box. By default, the name is embedded into one window. To change this, you need to insert a piece of code into your character definitions called show_two_window. Set it to True, and do this for every character you want to have a separate window. By default, it will inherit the same background as your dialogue box.

The styles for the name and window are:
say_label
say_who_window (only if show_two_window is True)

To change the background of your namebox, you would do it exactly like how you did it for the dialogue window, except you replace the style name with say_who_window:
Code:
style.say_who_window.background = Frame("namebox.png", 15, 15)

Again, replace with your image and corner size, or don't even use a Frame at all!

Use positional properties like xalign or xpos and xanchor to place the name within the box you have made.

Image

A fun feature is to show an icon to the player when they need to click in order to advance the story. To add this to your boxes, you need to add it to the characters you want to use it, like show_two_window.

Just link to the image's call name in quotes. If you want to animate it, build the animation first, and then link to the animations call name. Also, you can have the CTC indicator embedded into the text, placed right after the last word on the screen, or you can place it in a fixed location on the screen. Here is an example of an animated CTC icon that is placed in the corner of the screen (fixed):

Code:
    image ctc_animation = Animation("ctc01.png", 0.2, "ctc02.png", 0.2, xpos=0.99, ypos=0.99, xanchor=1.0, yanchor=1.0)
    $ a = Character('Name', ctc="ctc_animation", ctc_position="fixed")

You can use the new ATL language to make CTC animations, too. Just plug in the name in the quotes. Make sure to put position properties into the image if you want it to be fixed on the screen somewhere.

~~~

Putting all of this together, we can make a new text box like this:
Attachment:
new_textbox.jpg
new_textbox.jpg [ 205.61 KiB | Viewed 61692 times ]

To see exactly how I made the above screen, you can download the attached sample project. You're allowed to use the graphics, except the BG. Not mine. ^^;

~~~
Files I used in this tutorial plus a sample game with it in action for those who learn that way:


Attachments:
File comment: Sample game, Windows
custom_box-win32.zip [5.42 MiB]
Downloaded 3509 times
File comment: Box for the name to go in
namebox.png
namebox.png [ 1.91 KiB | Viewed 61692 times ]
File comment: Pre-fitted text box, no name box
dialoguebox.png
dialoguebox.png [ 3.23 KiB | Viewed 39573 times ]
File comment: Box to be used with Frame()
PinkBox.png
PinkBox.png [ 2.68 KiB | Viewed 61692 times ]

_________________
How to Customize the Textbox | How to Customize Game Menus


Last edited by Aleema on Wed May 13, 2015 2:54 am, edited 2 times in total.
Top
 Profile Send private message  
 
PostPosted: Mon Jan 31, 2011 6:22 pm 
Veteran
User avatar

Joined: Sat Sep 19, 2009 9:19 pm
Posts: 370
USEFUL! Tempted to do my own gooey now for Make A Wish. d: You'd make something ten times prettier than me though. I'll just use this nifty info for Daisy Daily instead. AWESOME.

_________________
Tumblr | Queen at Arms | RockRobin


Top
 Profile Send private message  
 
PostPosted: Mon Jan 31, 2011 9:35 pm 
Regular
User avatar

Joined: Tue Oct 12, 2010 10:02 pm
Posts: 49
Thank you so much, Aleema!

Sticky the hell out of this post, please!


Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 12:08 am 
Newbie

Joined: Mon Jan 31, 2011 7:09 pm
Posts: 4
Very information. I solved to issues I had while reading this. Couldn't solve it reading the other FAQs. New people don't know much about properties, and then when they know they don't know where to put them. I spent days trying to figure out "style.nvl_window.right_padding = 270" and then some more figuring where to put it and what to do with it after I got it. But now I know thanks to this tutorial. :)

On the text subject: Can you make a blank [empty line]? For like, wanting a big space between paragraphs. For example:

Code:
"Lots of text here."
"Lots of text here."
"Lots of text here." [Point A]

[Nothing here]
[Nothing here]
[Nothing here]
[Nothing here]
[Nothing here]

"A new line begins here at the next click." [Point B]


So that after you click at point A, it will start displaying the line at point B in one click. I tried \n but that just breaks the line. I tried " " but that creates an "invisible" line which still requires the users to click and displays the ctc icon. So they'd end up clicking numerous times before reaching the middle of the NVL screen. I've spent quite a while trying to figure this out.


Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 1:20 am 
Veteran
User avatar

Joined: Sun May 31, 2009 7:15 am
Posts: 220
Location: Korea, Republic of
Cool. This tutorial is useful and has pretty example. 10 out of 10. :D

Edit: moved reply to DKnight to his topic.

_________________
렌파이 위키 Ren'Py Wiki Reference Manual(kr)
렌파이 매뉴얼 Ren'Py Documentation(kr)


Last edited by backansi on Tue Feb 01, 2011 4:57 am, edited 1 time in total.

Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 1:45 am 
Regular
User avatar

Joined: Thu Jan 24, 2008 10:33 pm
Posts: 84
Completed: Valthirian Arc
Projects: DollMaker
Thank you so much for this!I have been trying to figure this out :D

_________________
ImageImageImage
ImageImage


Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 4:38 pm 
Lemma-Class Veteran
User avatar

Joined: Fri May 23, 2008 2:11 pm
Posts: 2677
Organization: happyB
Twitter: @Aleema
Tumblr: happybackwards
Oh, cool. Glad this will be of some use. :)

@Dknight: I updated it to better explore how style config parameters are made. While they don't NEED to go anywhere, in your options.rpy is helpful to keep it all together. I put it at the bottom so I can easily find it.

_________________
How to Customize the Textbox | How to Customize Game Menus


Last edited by Aleema on Tue Feb 01, 2011 6:37 pm, edited 1 time in total.

Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 6:20 pm 
Regular
User avatar

Joined: Fri Nov 19, 2010 5:54 pm
Posts: 97
Projects: Love Buffet
Funny. I was just thinking of customizing it...

TELEPATHY. I knew I had psychic powers! 8)

(Thanks~)

_________________
La vie est un rêve, c'est le réveil qui nous tue.

Love Buffet

To read about (crackish) reviews for otome games, click here.


Top
 Profile Send private message  
 
PostPosted: Tue Feb 01, 2011 6:32 pm 
Veteran
User avatar

Joined: Mon Apr 27, 2009 4:58 pm
Posts: 461
Location: Phoenix
Wow, no matter what I did I could never figure out what the heck those two little numbers at the end of a frame definition were. This is incredibly helpful.

_________________
Current Projects:
The Isle of St Marcus


Top
 Profile Send private message  
 
PostPosted: Wed Feb 02, 2011 9:31 am 
Veteran
User avatar

Joined: Fri Dec 21, 2007 2:36 pm
Posts: 224
Location: France
Thank you Aleema, that tutorial is really helpful.


Top
 Profile Send private message  
 
PostPosted: Fri Mar 04, 2011 6:45 am 
Regular
User avatar

Joined: Thu Jan 20, 2011 2:08 am
Posts: 113
Projects: The Alumnus
Useful indeed, just made a ctc. Helps a lot to let people know when to click, and who doesn't want a little flashing arrow in their game?

_________________
ImageImage
W.I.P. Script demo available


Top
 Profile Send private message  
 
PostPosted: Fri Mar 04, 2011 10:37 am 
Miko-Class Veteran
User avatar

Joined: Sun Mar 21, 2010 3:20 am
Posts: 649
Completed: Tortichki // Zayay
Organization: SHINE
Twitter: @psyalera
Tumblr: psyalera
Deviantart: psyalera
I love this tutorial- working perfectly for me!!! >w<

Though I have a question: How do I add buttons to the textbox like 'menu''save/load' 'skip' ect. ?

_________________
Image
Games:
❤️ Zayay [Otome?][BxPlayer][NaNo 2013]
❤️ Tortichki [Drag&Drop mini game]

Other games I've worked on:
My Heart's Flame Emissary of Starlight Freedom From Silence Sickness
And many more unannounced/secret projects. (. .)


Top
 Profile Send private message  
 
PostPosted: Fri Mar 04, 2011 10:44 am 
Lemma-Class Veteran
User avatar

Joined: Fri May 23, 2008 2:11 pm
Posts: 2677
Organization: happyB
Twitter: @Aleema
Tumblr: happybackwards
There's a cookbook code for that here.

_________________
How to Customize the Textbox | How to Customize Game Menus


Top
 Profile Send private message  
 
PostPosted: Fri Mar 04, 2011 1:02 pm 
Miko-Class Veteran
User avatar

Joined: Sun Mar 21, 2010 3:20 am
Posts: 649
Completed: Tortichki // Zayay
Organization: SHINE
Twitter: @psyalera
Tumblr: psyalera
Deviantart: psyalera
Oh, thanks again!!! I'm going to try it right away. >w<

_________________
Image
Games:
❤️ Zayay [Otome?][BxPlayer][NaNo 2013]
❤️ Tortichki [Drag&Drop mini game]

Other games I've worked on:
My Heart's Flame Emissary of Starlight Freedom From Silence Sickness
And many more unannounced/secret projects. (. .)


Top
 Profile Send private message  
 
PostPosted: Sat Mar 05, 2011 6:13 am 
Eileen-Class Veteran
User avatar

Joined: Mon Sep 22, 2008 11:32 pm
Posts: 1022
Location: Somewhere
Completed: Dreams of the Skies, Anton's Vacation, Luka, The Halberd and The Tiger, Rising Angels, Pyrite Heart, Rising Angels: Reborn, The Halberd and The Fox, VN Tycoon, RA: Hope
Projects: Rising Angels: Fates, Order of Ataxia
Organization: IDHAS Studios
IRC Nick: Komi
You just made my day! I'm afraid my knowledge of working with the interface is weak, and I've spent a lot of time trying to figure out how to make this work.

_________________
My common sense is tingling!
Woah! I actually have a website now. It never updates!


Top
 Profile Send private message  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 132 posts ]  Go to page 1, 2, 3, 4, 5 ... 9  Next

All times are UTC - 5 hours [ DST ]


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Protected by Anti-Spam ACP
Powered by phpBB® Forum Software © phpBB Group