Two column NVL? [SOLVED]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Message
Author
User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Two column NVL? [SOLVED]

#1 Post by wonderland »

Hello! I'm sorry for my questions but-

Okay is it possible to do something like this:

Image

So this is the code I'm using right now..:

Code: Select all

   ## ------------- NVL Font --------------------------- 
    # If you want a different Font for your NVL text. 
    style.nvl_dialogue.font = "VlaanderenChiseledNF.ttf"
    
    # If you want a different Color for your NVL text. 
    style.nvl_dialogue.color = "#ffffff"
    
    # If you want a different Size for your NVL text. 
    style.nvl_dialogue.size = 20
    
    # 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 = "#000000"

    
    ## ------ Framed (adjustable) NVL box ---------
    style.nvl_window.background = Frame("page 9.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 = 0
    style.nvl_window.left_margin = 0
    style.nvl_window.right_margin = 0
    
    ## padding ---------------------------------
    # Changes the placement of the TEXT.

    style.nvl_window.top_padding = 245
    style.nvl_window.bottom_padding = 125
    style.nvl_window.left_padding = 35
    style.nvl_window.right_padding = 448
    
    
    ## Interblock spacing: ------------------
    # The space between Blocks of paragraphs. 

    style.nvl_vbox.box_spacing = 10

Is this possible? If not is there an easy solution?

Thank you so much! (:
Last edited by wonderland on Mon Jan 28, 2013 11:46 pm, edited 1 time in total.
"Keep your head up princess, if not the crown falls.."
Image

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#2 Post by Kinsman »

Yes, it's possible.

What you can do is edit the NVL screen so that it uses two windows, instead of one.

Currently, the NVL screen loops through a list of dialogue entries it has to display, and puts down each one in the same window. So, you'd rewrite the screen to loop through the list twice - only putting down "early" entries in one window, and then putting down "late" entries in the second. You can use a special code of some sort to let the NVL screen know the difference.

Anyways, I made an example project.
Image

Here's the project file.

Two Column Test
Flash To Ren'Py Exporter
See the Cookbook thread

User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL?

#3 Post by wonderland »

Er my gosh thank you!
And I like the little ending you did in the script (: "a now a new page of the story begins.. that poor little seed it never wins" can i use that? :O
Okay so this is the code now:

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 = "VlaanderenChiseledNF.ttf"
    
    # If you want a different Color for your NVL text. 
    style.nvl_dialogue.color = "#ffffff"
    
    # If you want a different Size for your NVL text. 
    style.nvl_dialogue.size = 20
    
    # 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 = "#000000"

    
    ## ------ Framed (adjustable) NVL box ---------
    style.nvl_window["right"].background = Frame("Untitled3.png", 0, 0)
    style.nvl_window["left"].background = Frame("Untitled 2.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["left"].top_margin = 0
    style.nvl_window["left"].bottom_margin = 0
    style.nvl_window["left"].left_margin = 0
    style.nvl_window["left"].right_margin = 0
    style.nvl_window["left"].xpadding = 0
    style.nvl_window["left"].ypadding = 0
    
    style.nvl_window["right"].top_margin = 0
    style.nvl_window["right"].bottom_margin = 0
    style.nvl_window["right"].left_margin = 0
    style.nvl_window["right"].right_margin = 0
    style.nvl_window["right"].xpadding = 0
    style.nvl_window["right"].ypadding = 0
 
    
    
    ## padding ---------------------------------
    # Changes the placement of the TEXT.

    style.nvl_window["left"].top_padding = 245
    style.nvl_window["left"].bottom_padding = 125
    style.nvl_window["left"].left_padding = 35
    style.nvl_window["left"].right_padding = 448
    
    style.nvl_window["right"].top_padding = 105
    style.nvl_window["right"].bottom_padding = 236
    style.nvl_window["right"].left_padding = 450
    style.nvl_window["right"].right_padding = 31


    ## Interblock spacing: ------------------
    # The space between Blocks of paragraphs. 

    style.nvl_vbox.box_spacing = 10
EDIT:


Okay so I fixed the previous problem.. However the screens don't show up:
Image
"Keep your head up princess, if not the crown falls.."
Image

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#4 Post by Kinsman »

I'm guessing that "NVLBox02.png" is the storybook page, and the two Untitled.pngs are meant to be transparencies for the storybook?

1. You set NVLBox02.png to be the background of nvl_window, and then set other backgrounds for the "left" and "right" variations. What happened is that the background of the "left" and "right" versions overrode the background of the parent. The NVL screen displays two windows, the "left" and "right" variation, and so it isn't going to bother with NVLBox02.png.

When I wrote the NVL screen, I figured that the storybook page was a basic background that your NVL windows would be overlaid on top of, sorry.

Go to where the NVL screen is defined in screens.rpy, and make it start like this..

Code: Select all

screen nvl:

    add "NVLBox02.png":
        xpos 20 ypos 20

    window:
        style style.nvl_window["left"]
I don't know the exact xpos or ypos you need, but you'll figure it out. I bet it's 0,0.


2. I don't know what the Untitled.png pictures do, but I'd recommend you define the size and shape of your NVL windows using the 'margin' property instead of the 'padding' property. "Margin" is like "page margin": it lets you define the zone where your text is going to be. "Padding" defines an inner border so that the text inside your zone looks more comfortable, instead of squashed up against the edges.

It's especially important because window backgrounds respect margin, not padding - as far as the background is concerned, your two NVL windows are identical.
Sure, you can use that line if you want.
Flash To Ren'Py Exporter
See the Cookbook thread

User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL?

#5 Post by wonderland »

Err- Sorry I messed up! There's no "NVL.png"

The untitleds are these: PICTURE REMOVED


So I'm confused (sorry!) I go to the screens and I put one of the pictures in or both? (Thank you so much for doing this for me!)
Oh yay! I'll be sure to credit you for ALL your help!

And this is the code:

Code: Select all

    ## ------------- NVL Font --------------------------- 
    # If you want a different Font for your NVL text. 
    style.nvl_dialogue.font = "VlaanderenChiseledNF.ttf"
    
    # If you want a different Color for your NVL text. 
    style.nvl_dialogue.color = "#ffffff"
    
    # If you want a different Size for your NVL text. 
    style.nvl_dialogue.size = 20
    
    # 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 = "#000000"
    
    style.nvl_window["left"].background = Frame("Untitled 22.png", 0, 0)
    
    style.nvl_window["right"].background = Frame("Untitled23.png", 0, 0)
    
    ## margins ------------------------------------
    # Changes the shape of the BOX.
    
    style.nvl_window["left"].top_margin = 0
    style.nvl_window["left"].bottom_margin = 0
    style.nvl_window["left"].left_margin = 0
    style.nvl_window["left"].right_margin = 400
    style.nvl_window["left"].xpadding = 0
    style.nvl_window["left"].ypadding = 0
    
    style.nvl_window["right"].top_margin = 0
    style.nvl_window["right"].bottom_margin = 0
    style.nvl_window["right"].left_margin = 400
    style.nvl_window["right"].right_margin = 0
    style.nvl_window["right"].xpadding = 0
    style.nvl_window["right"].ypadding = 0
 
    
    
    ## padding ---------------------------------
    # Changes the placement of the TEXT.

    style.nvl_window["left"].top_padding = 245
    style.nvl_window["left"].bottom_padding = 125
    style.nvl_window["left"].left_padding = 35
    style.nvl_window["left"].right_padding = 448
    
    style.nvl_window["right"].top_padding = 105
    style.nvl_window["right"].bottom_padding = 236
    style.nvl_window["right"].left_padding = 450
    style.nvl_window["right"].right_padding = 31


    ## Interblock spacing: ------------------
    # The space between Blocks of paragraphs. 

    style.nvl_vbox.box_spacing = 10
    
    #########################################
Last edited by wonderland on Tue Jan 29, 2013 1:18 am, edited 1 time in total.
"Keep your head up princess, if not the crown falls.."
Image

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#6 Post by Kinsman »

All right, so you have two background images that you want to use for your NVL window as a whole.

Now, you *could* just set those to be the backgrounds of your two NVL windows - and then use the "margin" properties to create a (let's see..) 403x634 space for each window, centered on the left side or right side of the screen.

However, I see that there's a little window on each background pic. I'm guessing that's where you want to place small illustrations at certain points of the story? OK, in that case, we can use the 'padding' properties to define the inner zone of the windows, such that we avoid writing text over the illustration windows.

Let's do some math.. back in a minute..
Flash To Ren'Py Exporter
See the Cookbook thread

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#7 Post by Kinsman »

OK. So first, you don't need that extra "add" statement in the NVL screen anymore. We can use the backgrounds we defined for the individual NVL windows.

Image

Here's what I figured out for the values of margin and padding. Now, you might not be entirely happy with the final result, and might want to push something 10 pixels this way or that way; that's fine. But hopefully this code should give you some guidance on how to do it.

Code: Select all

    # Let's define the styles for the two nvl windows here.
    style.nvl_window["left"].top_margin = 0
    style.nvl_window["left"].bottom_margin = 0
    style.nvl_window["left"].left_margin = 0
    style.nvl_window["left"].right_margin = 400-2
    style.nvl_window["left"].background = "bg_L.png"
    
    # A nice inner window goes from 40,260 inside this image, and stretches 320 px wide, 325 px high
    style.nvl_window["left"].left_padding = 40
    style.nvl_window["left"].right_padding = 402 - 40 - 320
    style.nvl_window["left"].top_padding = 260
    # The image may be 633 px high, but the whole screen is only 600 px, so we'll use 600.
    style.nvl_window["left"].bottom_padding = 600 - 260 - 325
    
    style.nvl_window["right"].top_margin = 0
    style.nvl_window["right"].bottom_margin = 0
    style.nvl_window["right"].left_margin = 400-3
    style.nvl_window["right"].right_margin = 0
    style.nvl_window["right"].background = "bg_R.png"
    
    # A nice inner window goes from 40,70 inside this image, and stretches 320 px wide, 315 px high
    style.nvl_window["right"].left_padding = 40
    style.nvl_window["right"].right_padding = 403 - 40 - 320
    style.nvl_window["right"].top_padding = 70
    style.nvl_window["right"].bottom_padding = 600 - 70 - 315
Flash To Ren'Py Exporter
See the Cookbook thread

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#8 Post by Kinsman »

On a side note - 402 by 633? Really? I like your sense of graphic design, but it's a good idea to make your images so that their dimensions are nice even numbers, and so that they match the screen you're designing for.
Flash To Ren'Py Exporter
See the Cookbook thread

User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL?

#9 Post by wonderland »

I copied the code exactly but there is still no change, am I doing something wrong?

Code: Select all

 ## ------------- NVL Font --------------------------- 
    # If you want a different Font for your NVL text. 
    style.nvl_dialogue.font = "VlaanderenChiseledNF.ttf"
    
    # If you want a different Color for your NVL text. 
    style.nvl_dialogue.color = "#ffffff"
    
    # If you want a different Size for your NVL text. 
    style.nvl_dialogue.size = 20
    
    # 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 = "#000000"
    
    # Let's define the styles for the two nvl windows here.
    style.nvl_window["left"].top_margin = 0
    style.nvl_window["left"].bottom_margin = 0
    style.nvl_window["left"].left_margin = 0
    style.nvl_window["left"].right_margin = 400-2
    style.nvl_window["left"].background = "Untitled 22.png"
    
    # A nice inner window goes from 40,260 inside this image, and stretches 320 px wide, 325 px high
    style.nvl_window["left"].left_padding = 40
    style.nvl_window["left"].right_padding = 402 - 40 - 320
    style.nvl_window["left"].top_padding = 260
    # The image may be 633 px high, but the whole screen is only 600 px, so we'll use 600.
    style.nvl_window["left"].bottom_padding = 600 - 260 - 325
    
    style.nvl_window["right"].top_margin = 0
    style.nvl_window["right"].bottom_margin = 0
    style.nvl_window["right"].left_margin = 400-3
    style.nvl_window["right"].right_margin = 0
    style.nvl_window["right"].background = "Untitled23.png"
    
    # A nice inner window goes from 40,70 inside this image, and stretches 320 px wide, 315 px high
    style.nvl_window["right"].left_padding = 40
    style.nvl_window["right"].right_padding = 403 - 40 - 320
    style.nvl_window["right"].top_padding = 70
    style.nvl_window["right"].bottom_padding = 600 - 70 - 315

    ## Interblock spacing: ------------------
    # The space between Blocks of paragraphs. 

    style.nvl_vbox.box_spacing = 10
    

Thank you so much for helping/ being patient with me!
"Keep your head up princess, if not the crown falls.."
Image

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#10 Post by Kinsman »

1. You're using "Untitled 22.png" and "Untitled23.png", but those names are different from the images you mentioned before. Is that important?

2. Are you sure you copied 'screens.rpy' from my example into your own project?
Flash To Ren'Py Exporter
See the Cookbook thread

User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL?

#11 Post by wonderland »

Err- Why am I so stupid! Okay everything was working amazing! One last question:

My text just went:

Image



Bleh! I'm sorry for wasting your time! :3
"Keep your head up princess, if not the crown falls.."
Image

Kinsman
Regular
Posts: 130
Joined: Sun Jul 26, 2009 7:07 pm
Location: Fredericton, NB, Canada
Contact:

Re: Two column NVL?

#12 Post by Kinsman »

Only guess I have is that you're setting box_spacing, while I'm using the default.

Try commenting out the box_spacing line and see what happens.

Or failing that, just share the project file and I'll take a look at it directly.
Flash To Ren'Py Exporter
See the Cookbook thread

User avatar
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL?

#13 Post by wonderland »

Still isn't working :/ I sent you a PM.. Sorry/Thank you!
"Keep your head up princess, if not the crown falls.."
Image

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

Re: Two column NVL? [SOLVED]

#14 Post by OokamiKasumi »

Hey Wonderland,
-- After playing a bit with Kinsman's code and your results, I came up with this:
screenshot.jpg
This is the full file, including the Graphics I used.
-- (Open inside your main Renpy folder and use the Launcher to execute.)
TwoColumnTest.zip
(1.19 MiB) Downloaded 60 times
The biggest change is in how the Graphics were used.
-- Instead of using Untitled3 and Untitled2 as Textboxes, I used a blank, as in Transparent png.

In options.rpy:

Code: Select all

    ## ------------- NO Textbox -----------------
    # Because the game demands a graphic for the textbox, 
    # simply use a completely clear png for this. 

    style.nvl_window.background = Frame("bg/blank.png", 0, 0)
Then in the script.rpy file:

Code: Select all

## ---------- images --------------
image bg_main = "bg/bg.png"
image left_pg = "bg/Untitled2.png"
image right_pg = "bg/Untitled3.png"

## ------------------------------------

define narrator = Character(None, kind=nvl)
I activated the images this way:

Code: Select all

# The game starts here.
label start:
    scene black with fade
    show bg_main with dissolve
    show left_pg at left with dissolve
    show right_pg at right with dissolve

    "This is not a love story."
    "The story's conflict began with love, but bloomed with hate."
    "A seed of lust, planted by evil."
    "A seed that thrived during the seasons of spring, summer, and fall."
    "Then winter came to call."
    "Under the Snow--"
    " --Flowers die."
    
    columnbreak ""
    
    "A story of love, it is not."
    "Its conflict? Begun with love, but bloomed with hate."
    "The seed? One of lust, planted by evil."
    "When will it grow? In spring, summer, and fall"
    "But when winter comes to call...?"
    "Under the snow, the flower that bloomed will surely Die."
    
    nvl clear
    
    "And now a new page of the story begins."
    "That poor little seed, it just can't win."

    scene black with fade

    return
I also changed the Quick Menu to fit better.

In screens.rpy:

Code: Select all

# Quick Menu
#
# A screen that's included by the default say screen, and adds quick access to
# several useful functions.
screen quick_menu:

    # Add an in-game quick menu.
    hbox:
        style_group "quick"
    
        xalign 1.0
        yalign 1.0

        textbutton _("Q.Save") action QuickSave()
        textbutton _("Q.Load") action QuickLoad()
        textbutton _("Save") action ShowMenu('save')
        textbutton _("Skip") action Skip()
        textbutton _("Auto") action Preference("auto-forward", "toggle")
        textbutton _("Prefs") action ShowMenu('preferences')
        
init -2 python:
    style.quick_button.set_parent('default')
    style.quick_button.background = None
    style.quick_button.ypadding = 10
    style.quick_button.xpadding = 10

    style.quick_button_text.set_parent('default')
    style.quick_button_text.size = 16
    style.quick_button_text.outlines = [(1, "#663300", 0, 0)]
    style.quick_button_text.drop_shadow = [(1, 1)]
    style.quick_button_text.drop_shadow_color = "#000000"

    style.quick_button_text.idle_color = "#996633"
    style.quick_button_text.hover_color = "#fff"
    style.quick_button_text.selected_idle_color = "#cc08"
    style.quick_button_text.selected_hover_color = "#cc0"
    style.quick_button_text.insensitive_color = "#999999"
    
    # Set a default value for the auto-forward time, and note that AFM is
    # turned off by default.
    config.default_afm_time = 10
    config.default_afm_enable = False
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
wonderland
Regular
Posts: 70
Joined: Mon Dec 31, 2012 12:22 am
Projects: Fairy Tale Stupor [GxB] [Fantasy] [Adventure]
Contact:

Re: Two column NVL? [SOLVED]

#15 Post by wonderland »

Yes, Kinsman wonderfully looked at my script and fixed it! (; So, it's all good, but thank you so much for helping me, both of you! :D
"Keep your head up princess, if not the crown falls.."
Image

Post Reply

Who is online

Users browsing this forum: No registered users