Customizing the NVL Textbox.triplementordue wrote:I'd like to make a story where the character switches between NVL and textbox modes, I'd like the text to cover only part of the screen, and I like to think I'm pretty capable with Photoshop.
NOTE: this only works with the original Default style!
For those of you working with the New GUI style, Go Here:
viewtopic.php?f=51&t=17232&p=435206#p435182
and viewtopic.php?f=51&t=17232&p=435209#p435209
(Thank you, Ryue!)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
First you need to make a textbox.
-- However, when making it, you should consider:
- Is my NVL text box going to be Consistent? As in, will the text ALWAYS be in the exact same place?
- Is my NVL text box going to need to change shape and/or location depending on whether a character is speaking, or whether the narrator (no one) is speaking?
If your textbox IS going to be consistent; in the exact same location every time, you'll only need to make One NVL textbox, and the box needs to be the full page in size -- that includes the empty (transparent) space.
One option is to make a box that covers almost the entire page, like this:
Screen size = 1024x768 Another option is to make one the exact size and shape you need, like this:
Screen size = 1024x768 By the way, you're welcome to use either of these boxes in your own projects, if you like. I don't needed to be credited; I just made them on the fly.
Save your boxes in your GAME folder.
-- If you choose to save them in a different folder, you're going to need to add that folder's name when you invoke them.
Example:
-- Saved in Game folder:
Code: Select all
## ----------- Framed NVL box ------------------------
style.nvl_window.background = Frame("NVLbox01.png", 0, 0)
## ---------- No Frame Nvl Box--------------------
# style.nvl_window.background = "NVLbox02.png"
Code: Select all
## ----------- Framed NVL box ------------------------
style.nvl_window.background = Frame("GUI/NVLbox01.png", 0, 0)
## ---------- No Frame Nvl Box--------------------
# style.nvl_window.background = "GUI/NVLbox02.png"
To find (or change) the size and shape of your game, look in options.rpy near the top of the page:
Code: Select all
## These control the width and height of the screen.
config.screen_width = 1024
config.screen_height = 768
In Options.rpy:
Code: Select all
#########################################
## These settings let you customize the window containing the
## dialogue and narration, by replacing it with an image.
## The background of the window. In a Frame, the two numbers
## are the size of the left/right and top/bottom borders,
## respectively.
## ------------- NVL Font ---------------------------
# If you want a different Font for your NVL text.
style.nvl_dialogue.font = "LIBSA1.TTF"
# If you want a different Color for your NVL text.
style.nvl_dialogue.color = "#ffffcc"
# If you want a different Size for your NVL text.
style.nvl_dialogue.size = 30
# If you want a Drop Shadow for your NVL text, 1 pixel to the right and 1 pixel down.
style.nvl_dialogue.drop_shadow = [(1, 1)]
# if you want a different Drop Shadow Color.
style.nvl_dialogue.drop_shadow_color = "#330000"
## ------ Framed (adjustable) NVL box ---------
style.nvl_window.background = Frame("NVLbox01.png", 0, 0)
## ---- No Frame (non-adjustable) Nvl Box------
# style.nvl_window.background = "NVLbox02.png"
## margins ------------------------------------
# Changes the shape of the BOX.
style.nvl_window.top_margin = 50
style.nvl_window.bottom_margin = 50
style.nvl_window.left_margin = 50
style.nvl_window.right_margin = 50
## padding ---------------------------------
# Changes the placement of the TEXT.
style.nvl_window.top_padding = 50
style.nvl_window.bottom_padding = 50
style.nvl_window.left_padding = 50
style.nvl_window.right_padding = 50
## Interblock spacing: ------------------
# The space between Blocks of paragraphs.
style.nvl_vbox.box_spacing = 10
###############################################
Code: Select all
define story = Character(None,
kind = nvl,
ctc="ctc_blink",)
Code: Select all
story "When you wish upon a star, makes no difference who you are, anything your heart desires, will come to you..."
story "If your heart is in your dream, no request is too extreme. When you wish upon a star, as dreamers do."
story "Fate is kind. She brings to those who love, the sweet fulfillment of, their secret longing..."
story "Like a bolt out of the blue, Fate steps in and sees you through."
story "When you wish upon a star, your dreams come true."
nvl clear
window hide
-- Unlike ADV mode, NVL mode does not automatically clear it's text when it gets to the bottom of the textbox. You must use nvl clear to manually set the textbox to clear for more text.
If you don't use nvl clear, not only will the text run right off the bottom of the box, the next time you use NVL text all that text will pop right back up in your textbox.
Also...!
Use window hide when you are done with your NVL text.
-- If you don't use window hide the nvl box will STAY THERE empty of text, and covering your images.
I find it best just to simply type them both at the same time.
Code: Select all
story2 "When you wish upon a star, your dreams come true."
nvl clear
window hide
In Options.rpy:
Code: Select all
#########################################
## These settings let you customize the window containing the
## dialogue and narration, by replacing it with an image.
## The background of the window. In a Frame, the two numbers
## are the size of the left/right and top/bottom borders,
## respectively.
## ------------- NVL Font ---------------------------
# If you want a different Font for your NVL text.
style.nvl_dialogue.font = "LIBSA1.TTF"
# If you want a different Color for your NVL text.
style.nvl_dialogue.color = "#ffffcc"
# If you want a different Size for your NVL text.
style.nvl_dialogue.size = 30
# If you want a Drop Shadow for your NVL text, 1 pixel to the right and 1 pixel down.
style.nvl_dialogue.drop_shadow = [(1, 1)]
# if you want a different Drop Shadow Color.
style.nvl_dialogue.drop_shadow_color = "#330000"
## ------ Framed (adjustable) NVL box ---------
style.nvl_window.background = Frame("NVLbox02.png", 0, 0)
## ---- No Frame (non-adjustable) Nvl Box------
# style.nvl_window.background = "NVLbox02.png"
## margins ------------------------------------
# Changes the shape of the BOX.
style.nvl_window.top_margin = 0
style.nvl_window.bottom_margin = 30
style.nvl_window.left_margin = 0
style.nvl_window.right_margin = 0
## padding ---------------------------------
# Changes the placement of the TEXT.
style.nvl_window.top_padding = 50
style.nvl_window.bottom_padding = 0
style.nvl_window.left_padding = 530
style.nvl_window.right_padding = 30
## Interblock spacing: ------------------
# The space between Blocks of paragraphs.
style.nvl_vbox.box_spacing = 15
Code: Select all
define story2 = Character(None,
kind = nvl,
ctc="ctc_blink",)
Code: Select all
story2 "When you wish upon a star, makes no difference who you are, anything your heart desires, will come to you..."
story2 "If your heart is in your dream, no request is too extreme. When you wish upon a star, as dreamers do."
story2 "Fate is kind. She brings to those who love, the sweet fulfillment of, their secret longing..."
story2 "Like a bolt out of the blue, Fate steps in and sees you through."
story2 "When you wish upon a star, your dreams come true."
nvl clear
window hide
Actually, you CAN, but it's a bit of a pain in the butt.Mazz0ne wrote:This is great. Thanks you so much!
-- So... just so I'm sure I understand: there is no way to have two or more different NVL windows right now?
First, let's cover what Can't be done.
-- Supposedly, you can change the shape of the NVL textbox to suit different characters, by doing it this way:
Code: Select all
define story2 = Character(None,
kind = nvl,
window_left_margin = 300,
window_right_margin = 5,
window_left_padding = 300,
window_right_padding = 5,
ctc="ctc_blink",)
Unfortunately, in NVL mode that will only give you This: The ONLY place you can change the shape of a NVL textbox is in the Options.rpy file, which means you get the same shape and position every single time you use: kind=nvl -- no matter how you fiddle with the character definitions, (and I have tried Everything.)
Having more than one style of NVL box CAN be done, just not that way.
-- In fact, there are TWO ways to do it: you can Fake It using ADV Mode, or you can jump through a few more hoops and actually use NVL Mode.
Faking It with ADV Mode:
First, make the individual boxes: Code each one the same way you would an ordinary text-box in the Character Definitions.
(Pay attention to your COMMAS!!! If you forget one, you'll get an Error message.)
Code: Select all
define sh = Character('Shino',
color="9966cc",
window_background = Frame("textbox3.png", 0, 0), #Your custom textbox.
window_left_margin = 320,
window_right_margin = 10,
window_top_margin = 70,
window_bottom_margin = 500,
window_left_padding = 60,
window_right_padding = 10,
window_top_padding = 70,
window_bottom_padding = 75,
ctc="ctc_blink",)
Code: Select all
show quickBox with dissolve
#This is the box around the Quick Links.
sh "Hi, I'm Shino and I live in Okinawa.\n
Like my textbox? I sure do! Amazing what Renpy can do, ne?"
sh "However, the bottom stays static. If you have a lot of dialogue, the {i}top{/i} expands to fit all the text. 'Kay?"
play music "mu/Wish Upon a Star_Instr.mp3" fadeout 1.0
sh "When you wish upon a star, makes no difference who you are\n
Anything your heart desires, will come to you...\n
If your heart is in your dream, no request is too extreme.\n
When you wish upon a star, as dreamers do."
sh "Fate is kind. She brings to those who love...\n
The sweet fulfillment of, their secret longing..."
sh "Like a bolt out of the blue, Fate steps in and sees you through...\n
When you wish upon a star, your dreams come true."
sh "Sayonara!"
hide quickBox with dissolve
hide shino with moveoutleft
The results looks like this: Two or More Textboxes in NVL Mode:
Unlike ADV mode, NVL mode's source code is built so that it only allows for One background image. The way around this is to set the base (NVL background) image (in options.rpy) to be completely transparent --none.png-- also, clear out all your NVL settings except Top Margin.
Code: Select all
## ---------- No Frame Nvl Box--------------------
style.nvl_window.background = "ui/none.png"
# margins ---------------------------------
style.nvl_window.top_margin = 80
style.nvl_window.bottom_margin = 0
style.nvl_window.left_margin = 0
style.nvl_window.right_margin = 0
# padding ---------------------------------
style.nvl_window.top_padding = 0
style.nvl_window.bottom_padding = 0
style.nvl_window.left_padding = 0
style.nvl_window.right_padding = 0
WARNING: Do Not Use Bottom Margin or Top or Bottom PADDING!!! They add space between the individual paragraphs.
The Left and Right padding CAN be used, however those settings go in the "Character Definitions" that define the individual NVL boxes.
Code: Select all
define st = Character(None,
kind=nvl,
window_left_padding = 780,
window_right_padding = 80,
ctc="ctc_blinkNVL",
ctc_position="fixed",
)
define st2 = Character(None,
kind=nvl,
what_color="ffffff",
window_left_padding = 80,
window_right_padding = 80,
ctc="ctc_blinkNVL",
ctc_position="fixed",
)
-- First, make sure the NVL box is the EXACT SIZE and SHAPE you plan to use on a transparent background that is the exact size of your game. My test game for this was 1280x720 so that's how large I made both NVL text boxes. Declare your NVLbox images the same way you would any other image you intend to use in your game.
Code: Select all
########################################
# Declare images used by this game.
init:
image NVLbox = "ui/NVLbox.png"
image NVLbox2 = "ui/NVLbox2.png"
Code: Select all
label star:
play music "mu/!When You Wish Upon a Star_0.mp3" fadeout 1.0
show NVLbox with dissolve
st "When you wish upon a star, makes no difference who you are. Anything your heart desires will come to you."
st "If your heart is in your dream, no request is too extreme -- when you wish upon a star as dreamers do."
st "Fate is kind. She brings to those who love, the sweet fulfillment of -- their secret longing."
st "Like a bolt out of the blue, fate steps in and sees you through. When you wish upon a star, your dreams come true."
st "When you wish upon a star, makes no difference who you are. Anything your heart desires will come to you."
nvl clear
hide NVLbox with dissolve
window hide
show NVLbox2 with dissolve
st2 "When you wish upon a star, makes no difference who you are. Anything your heart desires will come to you."
st2 "If your heart is in your dream, no request is too extreme -- when you wish upon a star as dreamers do."
st2 "Fate is kind. She brings to those who love, the sweet fulfillment of -- their secret longing."
st2 "Like a bolt out of the blue, fate steps in and sees you through. When you wish upon a star, your dreams come true."
st2 "When you wish upon a star, makes no difference who you are. Anything your heart desires will come to you."
nvl clear
hide NVLbox2 with dissolve
window hide
-- I've tried finding other (more elegant) ways to do this, but NVL mode simply does not work the same way as ADV mode.
~~~~~~~~~~~~~~~~~~~~~
Click here for:
Making a CTC (Click to Continue) Blinking Arrow
Enjoy.