[Tutorial] Customizing the NVL Textbox

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
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

[Tutorial] Customizing the NVL Textbox

#1 Post by OokamiKasumi » Sat Sep 22, 2012 10:21 pm

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.
Customizing the NVL Textbox.
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?
or
  • 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 you need different shapes and/or locations for your textbox, you're going to need to make a NEW box for each one.

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
NVLbox01.png
Another option is to make one the exact size and shape you need, like this:

Screen size = 1024x768
NVLbox02.png
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"
-- Saved in folder named GUI:

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"
For Option One, a full page box...

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
This is the size you need to make your NVL box PLUS the empty (transparent) space around it.

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
    
    ###############################################
Then, in Script.rpy, define the nvl box this way:

Code: Select all

define story = Character(None, 
    kind = nvl, 
    ctc="ctc_blink",)
And then call your nvl box like This:

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
The results looks like this:
NVLbox01_ex.jpg
Never Forget to put "nvl clear" at the end of your text!
-- 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
For Option Two, a specifically shaped and placed box...

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
Then in Script.rpy, define the nvl box this way:

Code: Select all

define story2 = Character(None, 
    kind = nvl, 
    ctc="ctc_blink",)
And then call your nvl box like This:

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
The results looks like this:
NVLbox01_ex2.jpg
Two or More NVL TextBoxes
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?
Actually, you CAN, but it's a bit of a pain in the butt.

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",)
This is how one normally changes the textbox in ADV mode.

Unfortunately, in NVL mode that will only give you This:
NVLbox01_ex4.jpg
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:
textbox3.png
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",)
In Script.rpy, to call the box, just call the character.

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 
Just so you know, \n at the end of the lines is a signal to make a New Line -- without pausing for the player to hit the SpaceBar.

The results looks like this:
TXTbox_ex3.jpg
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
The top_margin keeps your words from appearing against the top of the screen. Expect to make adjustments as needed.

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", 
        )
To call your NVL box images...
-- 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.
NVLbox.png
NVLbox2.png
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"
When you use NVL mode, show the specific nvl box background:

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
It looks like this:
2 NVLBoxesA.jpg
2 NVLBoxesB.jpg
This is the only way I know to use more than one NVL box without errors.
-- 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.
Last edited by OokamiKasumi on Tue Nov 22, 2016 4:05 pm, edited 24 times in total.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

CheeryMoya
Miko-Class Veteran
Posts: 892
Joined: Sun Jan 01, 2012 4:09 am

Re: NVL textbox tutorial

#2 Post by CheeryMoya » Sun Sep 23, 2012 1:34 am

Oh my god thank you for posting this up ;u; NVL mode is so hard to adjust for your needs so most people either tend to use it plainly or avoid it altogether.

User avatar
Blane Doyle
Miko-Class Veteran
Posts: 809
Joined: Mon Dec 21, 2009 10:00 am
Organization: Autumn Eclectic
Location: Mountains
Contact:

Re: NVL textbox tutorial

#3 Post by Blane Doyle » Sun Sep 23, 2012 1:44 am

......................... *screaming*

I HAVE NEEDED THIS IN MY LIFE SINCE FOREVER THANK YOU 8D

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: NVL textbox tutorial

#4 Post by OokamiKasumi » Sun Sep 23, 2012 2:47 am

CheeryMoya wrote:Oh my god thank you for posting this up ;u; NVL mode is so hard to adjust for your needs so most people either tend to use it plainly or avoid it altogether.
Oh...? I almost skipped putting this in here because I figured it was something everyone already knew... I mean, it was one of the first things I learned, so I just assumed...? Never mind. Anyway...

NVL mode can be a little tricky, especially since the way you adjust regular text boxes doesn't quite work the same in nvl mode.
Blane Doyle wrote:......................... *screaming*
I HAVE NEEDED THIS IN MY LIFE SINCE FOREVER THANK YOU 8D
!!! Okay... You're welcome?
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
saguaro
Miko-Class Veteran
Posts: 556
Joined: Sun Feb 12, 2012 9:17 am
Completed: Locked-In, Sunrise, The Censor
Projects: ?
Organization: Lucky Special Games
Tumblr: saguarofoo
itch: saguarofoo
Location: USA
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#5 Post by saguaro » Sun Sep 23, 2012 12:57 pm

Very cool, thanks for posting this.

User avatar
kkffoo
Regular
Posts: 133
Joined: Wed Sep 22, 2010 3:17 am
Completed: Tea For Two [KN]
Location: UK
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#6 Post by kkffoo » Sun Sep 23, 2012 3:44 pm

Really useful, thank you!

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#7 Post by OokamiKasumi » Sun Sep 23, 2012 11:53 pm

saguaro wrote:Very cool, thanks for posting this.
kkffoo wrote:Really useful, thank you!
You're welcome. Glad I could offer something useful. :)
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
Geckos
Veteran
Posts: 469
Joined: Fri Aug 17, 2012 8:33 am
Completed: Brilliant Shadows, Perceptions of the Dead, The Phantom Icecream Truck
Projects: Embers of Magic, Pale Spectrum, Perceptions of the Dead
Organization: Ithaqua Labs
Tumblr: geckosart
Deviantart: sitaart
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#8 Post by Geckos » Tue Dec 04, 2012 3:42 am

This is lovely. Thank you for taking the time to put it up!
Image ImageImage

User avatar
AERenoir
Veteran
Posts: 300
Joined: Fri May 27, 2011 8:23 pm
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#9 Post by AERenoir » Sun Jan 06, 2013 12:54 pm

How do I specify how much text shows up each time I click? Does it default to showing 2-3 sentences each or do I make a specific call or what?

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#10 Post by OokamiKasumi » Sun Jan 06, 2013 1:33 pm

AERenoir wrote:How do I specify how much text shows up each time I click? Does it default to showing 2-3 sentences each or do I make a specific call or what?
It posts Everything between the quotation marks, just like ADV. However, if you want to post several paragraphs or a whole page of text, use \n to make line and/or paragraph breaks.

Just be aware that unlike ADV, NvL does not clear it.

ADV mode is set to automatically clear at the end of each sentence.

NVL mode does not automatically clear. 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 will 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:

Code: Select all

    story2 "When you wish upon a star, your dreams come true."

    nvl clear
    window hide
Last edited by OokamiKasumi on Sat Jan 25, 2014 6:50 pm, edited 1 time in total.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
AsHLeX
Veteran
Posts: 488
Joined: Wed Dec 25, 2013 1:09 pm
Completed: Starlight Dreamers, Mysterious Melody, Town of Memories, Marked, To Fly, The Change, Him From The Past, A Forgotten Memory
Projects: Cafe Mysteria
Location: Malaysia
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#11 Post by AsHLeX » Fri Jan 24, 2014 10:12 am

Thank you so much for this tutorial :D
Image

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#12 Post by OokamiKasumi » Sat Jan 25, 2014 6:40 pm

AsHLeX wrote:Thank you so much for this tutorial :D
You're very welcome. I'm always happy to be of assistance.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Mazz0ne
Newbie
Posts: 6
Joined: Tue Mar 25, 2014 11:17 am
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#13 Post by Mazz0ne » Fri Mar 28, 2014 10:48 am

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?

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1775
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

[Tutorial] Using 2 NVL Textboxes in the same game.

#14 Post by OokamiKasumi » Sun Mar 30, 2014 11:55 am

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?
Actually, you CAN, but it's a bit of a pain in the butt.
-- 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
The reason you want to set the top_margin is so that your words don't appear against the top of the screen. Do Not Use Top or Bottom PADDING!!! If you use Padding, you'll get that much padding between the individual paragraphs.

Instead, the padding settings for the individual boxes 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", 
        )
To use your NVL box images,
-- 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 is 1280x720 which is how large I made both NVL text boxes.
NVLbox.png
NVLbox2.png
Declare those 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"
When you use NVL mode, show the specific nvl box background:

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
It looks like this:
2 NVLBoxesA.jpg
2 NVLBoxesB.jpg
This is the only way I know to use more than one NVL box without errors.
-- I've tried finding other (more elegant) ways to do this, but NVL mode simply does not work the same way as ADV mode.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
PyTom
Ren'Py Creator
Posts: 15447
Joined: Mon Feb 02, 2004 10:58 am
Completed: Moonlight Walks
Projects: Ren'Py
IRC Nick: renpytom
Github: renpytom
itch: renpytom
Location: Kings Park, NY
Contact:

Re: [Tutorial] Customizing the NVL Textbox

#15 Post by PyTom » Mon Mar 31, 2014 1:28 pm

You could also set a variable, and then modify the nvl screen to check that variable and lay itself out appropriately.
Supporting creators since 2004
(When was the last time you backed up your game?)
"Do good work." - Virgil Ivan "Gus" Grissom
"Silly and fun things are important." - Elon Musk
Software > Drama • https://www.patreon.com/renpytom

Post Reply

Who is online

Users browsing this forum: No registered users