[Tutorial] Customizing the NVL Textbox

[OokamiKasumi]

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

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"

-- 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:

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:

Two or More NVL TextBoxes

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:

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",)

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:

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.

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:

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.

[CheeryMoya]

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.

[Blane Doyle]

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

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

[OokamiKasumi]

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.

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

!!! Okay... You're welcome?

[saguaro]

Very cool, thanks for posting this.

[kkffoo]

Really useful, thank you!

[OokamiKasumi]

Very cool, thanks for posting this.

Really useful, thank you!

You're welcome. Glad I could offer something useful.

[Geckos]

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

[AERenoir]

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?

[OokamiKasumi]

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

[AsHLeX]

Thank you so much for this tutorial

[OokamiKasumi]

Thank you so much for this tutorial

You're very welcome. I'm always happy to be of assistance.

[Mazz0ne]

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?

[OokamiKasumi]

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.

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:

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.

[PyTom]

You could also set a variable, and then modify the nvl screen to check that variable and lay itself out appropriately.