NaNoRenO Support Thread

[PyTom]

This is the official thread for support of issues that come up when creating a NaNoRenO/IntRenAiMo game using Ren'Py. While I will be checking other threads and providing support, if you post in this thread the board will email me and you'll get support that much sooner. I'll break any interesting discussion off into its own thread if it gets too long.

I'm getting a head start on my game so I can handle support requests. So with ****** **** about to come out, the global flyer about to take off, and NaNoRenO starting in 8 and a half hours (in Kiritimati, the first place where it can start), all I can say is:

Bully!

[chronoluminaire]

Hiya. I'm wanting to use an overlay to display the current date in-game. I've set up the following code in an init block:

Code: Select all

    $ style.window.background = Frame("frame.png", xborder=10, yborder=10)
[...]
    python hide:
        def date_overlay():
            if showdate != 0:
                ui.sizer(maxwidth=80, maxheight=80)
                ui.window(xpos=0, xanchor="left",
                         ypos=0, yanchor="top", xmargin=0, ymargin=0,
                         xpadding=0, ypadding=0, xborder=4, yborder=4)
                ui.vbox()
                ui.text(currday, size=12,
                         xpos=20, xanchor="center", ypos=0, yanchor="top")
                ui.text(currdate, size=30,
                         xpos=20, xanchor="center", ypos=0, yanchor="top")
                ui.text(currmonth, size=12,
                         xpos=20, xanchor="center", ypos=0, yanchor="top")
                ui.close()

        config.overlay_functions.append(date_overlay)

And I update it in-game with lines like this:

Code: Select all

$ currday = "Monday"
$ currdate = "14"
$ currmonth = "Oct"
$ showdate = 1

My problem is, the overlay is positioned and sized fine horizontally, but it insists on being much larger vertically than the text or ui.sizer request of it. I think it's coming out 140 pixels high, the same height as the actual frame image on disk - despite the sizer supposedly forcing it to 80 pixels. Any ideas how I can squash this unruly frame?

(If I'm doing other things wrong in this code, pointing them out would be much appreciated also. Thanks!)

[PyTom]

The problem is that the window yminimum is being set to 150 by the default style file. So the window is taking on that minimum size... which overrides the sizer.

You probably shouldn't be reusing the main window style for anything other than a menu or dialogue window. Instead, it makes sense to define your own window style, and use that.

Write code like:

Code: Select all

init:
    $ style.create('date_window')
    $ style.date_window.background = ...

Then in the overlay function, you can use code like:

Code: Select all

            $ ui.window(style='date_window', xpos=...

And all will be well. This also lets you put a different background on the date window, if that's something you'll want to do.

In this case, the window may actually shrink below 80 pixels. You may have to giver it alternate xminimum and yminimum arguments to ensure that it is at least a certain size.

The only other issue I have is with the absolute xpos combined with the user of xanchor='centered'... normally, xpos=0.5 in that case. But if it looks good, go with it.

[chronoluminaire]

Cool, thanks. How do I get rid of the yminimum in this new style I create? Will it just being something different to the main window style do that automatically?

[PyTom]

Cool, thanks. How do I get rid of the yminimum in this new style I create? Will it just being something different to the main window style do that automatically?

That's right. Alternatively, you can set it to zero or some other number.

[PixelWrangler]

Okay... I'm fairly sure there's a way to do this, but I'm running up against the NNRO time limit, and would appreciate a boost in the right direction.

I'm looking to "modularize" my character graphics to cut down on file size. That is to say, I want to have a single "graphic" that actually consists of several pieces laid on top of each other. Since transparency will be key, those pieces will be PNGs.

My major concerns are positioning the pieces and transitioning them as one.

For positioning, I'd like to cut the graphics in the image-editing program and position them relative to the others using Ren'Py (example... the top-left corner of the head graphic is placed [x] to the left/right and [y] up/down from the top-left corner of the body graphic). This would allow me to not have to cut a full-sized graphic for a single, small element or facial expression. I'm guessing it's as straightforward as assigning the x or y position of the new graphic to the x or y of the already-placed graphic, plus or minus the amount desired, but what are the specific code bits/object references I would need to use to do this?

Positioning structure example:

body graphic position: [x,y]
arms graphic position: [body graphic [x] position - x, body graphic [y] position - y]
head graphic position: [body graphic [x] position - x, body graphic [y] position - y]
facial expression graphic position: [head graphic [x] position - x, head graphic [y] position - y]

For transitioning, assuming I have several overlays comprising a single graphic, is it possible to transition (dissolve/show/hide) them as one, avoiding the scenario of "body dissolves, then facial expression, then head, etc..."? I'm not sure the following would work:

hide cface_happy with fade
hide chead_lookup with fade
hide arms_vsign with fade
hide cbody_cutepose with fade

Hopefully my description isn't too confusing... if it is, let me know. Thanks in advance for your help.

P.W.

[PyTom]

The best way to do what you want is to make all of the components of an image the same size, and use PNG transparency to do the compositing. All the images align in the upper-left corner, and then you can write:

Code: Select all

image girl happy = Image(("girl_body.png", "girl_happy.png"))
image girl sad = Image(("girl_body.png", "girl_sad.png"))

Since transparency compresses well, this should lead to fairly small file sizes.

There really isn't a good way of positioning one image relative to another, apart from this.

In this case, all of the pictures will transition out together. But, in general, if you want multiple pictures to transition at once, you can write:

Code: Select all

with None
scene park
show girl happy
with dissolve

And it should work.

[PixelWrangler]

The best way to do what you want is to make all of the components of an image the same size, and use PNG transparency to do the compositing. All the images align in the upper-left corner, and then you can write:

Code: Select all

image girl happy = Image(("girl_body.png", "girl_happy.png"))
image girl sad = Image(("girl_body.png", "girl_sad.png"))

I think I've got it. So basically, every graphic (PNG) in a Ren'Py Image will contain the area from the top-left corner of the entire graphic's area to the bottom-left corner of the graphic itself, correct?

Also, there's no way to substitute out a specific element, just replace a Ren'Py Image that consists of several graphics with another Ren'Py Image, correct?

Essentially, to create modularity, you assemble individually-cut graphics in Ren'Py using the Image command.

Since transparency compresses well, this should lead to fairly small file sizes.

There really isn't a good way of positioning one image relative to another, apart from this.

In this case, all of the pictures will transition out together. But, in general, if you want multiple pictures to transition at once, you can write:

Code: Select all

with None
scene park
show girl happy
with dissolve

And it should work.

In this case, the "with None" binds all of the elements on the same line together, allowing them to transition as one even though they are separate objects (Image 1 (BG), Image 2 (character), etc.), correct?

If this is true, wouldn't using a "with None" statement allow you to substitute/transition elements of a character graphic separately, while retaining the ability to show/hide them all at once? As in:

Code: Select all

with None
show girl1body
show girl1head
show girl1face happy
with dissolve

girl1 "I'm happy right now."

show girl1face sad with dissolve

girl1 "...but now I'm sad"

with None
hide girl1body
hide girl1head
hide girl1face sad
with dissolve

This would cut down on the amount of separate character Image declarations needed and allow true modularity. Of course, I could be way off...

P.W.

P.S. - Wow, thanks for the quick response!

[PyTom]

I think I've got it. So basically, every graphic (PNG) in a Ren'Py Image will contain the area from the top-left corner of the entire graphic's area to the bottom-left corner of the graphic itself, correct?

Yes, with the caveat that the background needs to be bigger than all of the rest of the layers. (Technical reason.)

Also, there's no way to substitute out a specific element, just replace a Ren'Py Image that consists of several graphics with another Ren'Py Image, correct?

Essentially, to create modularity, you assemble individually-cut graphics in Ren'Py using the Image command.

This understanding seems to be correct.

In this case, the "with None" binds all of the elements on the same line together, allowing them to transition as one even though they are separate objects (Image 1 (BG), Image 2 (character), etc.), correct?

Okay, basically, the with statement (with at the start of a line) causes a transition to occur, from whatever was last shown to the current scene. "with None" is a special case of that, simply updating what was last shown to the current scene.

The with clause on a show, scene, or hide statement is the same thing as preceding that statement with "with None" and following it with "with transition" (for some transition).

If this is true, wouldn't using a "with None" statement allow you to substitute/transition elements of a character graphic separately, while retaining the ability to show/hide them all at once? As in:

Code: Select all

with None
show girl1body
show girl1head
show girl1face happy
with dissolve

girl1 "I'm happy right now."

show girl1face sad with dissolve

girl1 "...but now I'm sad"

with None
hide girl1body
hide girl1head
hide girl1face sad
with dissolve

This would cut down on the amount of separate character Image declarations needed and allow true modularity. Of course, I could be way off...

This will work, assuming all the images are the same size, or you otherwise deal with the positioning issue. You'll also need to take care that the images are shown in the right order, so that the face doesn't get below the head. Doable, but perhaps fairly annoying.

Image declarations are actually fairly cheap, and they pre-composite images to make the game run faster, where as your method will cause three images to be blitted to the screen, slowing it down a little.

P.S. - Wow, thanks for the quick response!

Would of been faster, had it not been for this thrice-damned sun type 6 keyboard.

[PixelWrangler]

I think I've got it. So basically, every graphic (PNG) in a Ren'Py Image will contain the area from the top-left corner of the entire graphic's area to the bottom-left corner of the graphic itself, correct?

Yes, with the caveat that the background needs to be bigger than all of the rest of the layers. (Technical reason.)

Quick points of clarification... by "background", do you mean a scene background Image, or the bottom graphic in an Image? And by "bigger", do you mean file size, x and/or y width, or total image pixels?

Also, is the order of display (Image declaration or other) Lowest First or Lowest Last?

In this case, the "with None" binds all of the elements on the same line together, allowing them to transition as one even though they are separate objects (Image 1 (BG), Image 2 (character), etc.), correct?

Okay, basically, the with statement (with at the start of a line) causes a transition to occur, from whatever was last shown to the current scene. "with None" is a special case of that, simply updating what was last shown to the current scene.

The with clause on a show, scene, or hide statement is the same thing as preceding that statement with "with None" and following it with "with transition" (for some transition).

Another terminology question: does "Current scene" refer to a scene as defined by the "scene" statement, or just the current state of the screen itself? In other words, would a different character Image over the same scene background be a new "scene"?

Now, as to "with"... I'm still a little bit confused. What, if any, is/are the difference(s) between using a "with" statement before and after a statement? In other words, how does

Code: Select all

with dissolve show Eileen happy

differ from

Code: Select all

show Eileen happy with dissolve
(or "with None show Eileen happy with dissolve")

I know that one thing I've been wanting to do in some instances is fade the text box away instead of having it disappear. Would the command

Code: Select all

with dissolve hide text

do the trick?

Sorry to be such a pest... I just want to try to nail down the semantics so that, once I get rolling with the script, I won't get bogged down in the details. (I killed a day just trying to figure out how to change menu colors in the "init:" section...)

Thanks again for all your help. It is greatly appreciated.

P.W.

[PyTom]

Yes, with the caveat that the background needs to be bigger than all of the rest of the layers. (Technical reason.)

Quick points of clarification... by "background", do you mean a scene background Image, or the bottom graphic in an Image? And by "bigger", do you mean file size, x and/or y width, or total image pixels?

The bottom graphic file in an image. By bigger, I mean in dimensions, so bigger in both x and y. (Otherwise, the higher layers will get cropped to the bottommost one.)

Also, is the order of display (Image declaration or other) Lowest First or Lowest Last?

In general, in Ren'Py the first thing to be mentioned will be placed furthest away from the user. So it's lowest first.

Another terminology question: does "Current scene" refer to a scene as defined by the "scene" statement, or just the current state of the screen itself? In other words, would a different character Image over the same scene background be a new "scene"?

The current scene refers to the current state of the various scene lists. (The scene statement clears these lists.) So, adding a new character image will change the current scene.

When that scene is shown to the user (with a "with" statement, or a menu or say statement), the last shown scene is updated to the current scene.

Now, as to "with"... I'm still a little bit confused. What, if any, is/are the difference(s) between using a "with" statement before and after a statement? In other words, how does

Code: Select all

with dissolve show Eileen happy

differ from

Code: Select all

show Eileen happy with dissolve
(or "with None show Eileen happy with dissolve")

Well, the former is invalid code.

Code: Select all

show Eileen happy with dissolve

is equivalent to:

Code: Select all

with None
show Eileen happy
with dissolve

while:

Code: Select all

scene whitehouse with dissolve
show eileen happy with dissolve

is the same as:

Code: Select all

with None
scene whitehouse
with dissolve
with None
show eileen happy
with dissolve

Which executes two dissolve transitions. Compare this to:

Code: Select all

with None
scene whitehouse
show eileen happy
with dissolve

Which will dissolve both pictures in in a single transition.

I know that one thing I've been wanting to do in some instances is fade the text box away instead of having it disappear. Would the command

Code: Select all

with dissolve hide text

do the trick?

No.

The way to do that is to put a with statement after the say statement that you want to fade out:

Code: Select all

e "That's all folks" 
with dissolve

If you want to fade in a say box, you can add a with clause to it:

Code: Select all

e "Welcome" with dissolve

If you want a transition between every say statement, look at default_transition. But don't use that, it's really annoying.

Sorry to be such a pest... I just want to try to nail down the semantics so that, once I get rolling with the script, I won't get bogged down in the details. (I killed a day just trying to figure out how to change menu colors in the "init:" section...)

It's better to ask rather than spending a day on it.

[Guest]

The way to do that (fade out a text box) is to put a with statement after the say statement that you want to fade out:

Code: Select all

e "That's all folks" 
with dissolve

So a blank line with a transition affects the text box, while a "hide" command with transition affects other elements...

Code: Select all

e "I have to leave now..."
with dissolve
hide Eileen with dissolve

...would have Eileen say "I have to leave now", then, when the mouse is clicked, fade the text box, then fade Eileen. But how would you have it fade Eileen first? Would the following work?

Code: Select all

e "I have to leave now..."
hide Eileen with dissolve
$ renpy.pause(0.5)
with dissolve

If you want to fade in a say box, you can add a with clause to it:

Code: Select all

e "Welcome" with dissolve

I've actually already done that in a few places. Since the "with" command works the same as with graphics, it was a bit more intuitive.

If you want a transition between every say statement, look at default_transition. But don't use that, it's really annoying.

I can definitely see how that would get a bit obnoxious.

It's better to ask rather than spending a day on it.

...and I appreciate your taking time out of your day to answer.

P.W.

[PixelWrangler]

blah, blah, blah...

P.W.

Argh... sorry... forgot to log in... that was actually me. Obvious, I know, but I hate when I do that.

P.W.

[PyTom]

So a blank line with a transition affects the text box, while a "hide" command with transition affects other elements...

Okay, I think you have a misunderstanding. The text box automatically hides itself after the say statement finishes. The with statement (with on a line by itself) transitions the screen from the last thing that was shown to the user to whatever it is when the with statement executes.

So if you make any changes to the screen before the with statement, they will occur at the same time.

...would have Eileen say "I have to leave now", then, when the mouse is clicked, fade the text box, then fade Eileen. But how would you have it fade Eileen first? Would the following work?

Code: Select all

e "I have to leave now..."
hide Eileen with dissolve
$ renpy.pause(0.5)
with dissolve

No. Since the text box automatically hides itself at the end of the say statement, it will be gone when the dissolve of Eileen begins.

The short answer is that there isn't a good way to dissolve graphics before text. The long answer is you can do it like:

Code: Select all

e "I have to leave now."
hide Eileen
$ e("I have to leave now", interact=False) # re-shows the text, but doesn't pause.
with dissolve
$ renpy.pause(0.5)
with dissolve

But that's fairly insane code, and I should point out I haven't tested it since I'm on a break at work. (And work has nukes, so I shouldn't piss them off.)

[chronoluminaire]

Yeah, the syntax of the "with" clauses and statements is really confusing. I was able to figure it out from the demo game, just about. But it's not the most friendly API. I think transitioning in more than one thing is sufficiently common that it'd be nice to have a simpler way to do it

However, that's completely by the by. This post is to ask you how one changes the colour of menu items, including the game main menu as well as in-game choices. The doc provides this example code, but it's broken:

Code: Select all

init:

    # Selected menu choices should be yellow and solid.
    $ style.menu_choice_selected.color = (255, 255, 0, 255)
    
    # Unselected menu choices should be cyan and translucent.
    $ style.menu_choice_unselected = (0, 255, 255, 128)

And even removing the erroneous ".color" still doesn't seem to alter the colours in either the main menu, in-game menu or preferences menus. Could you point me at how to change that? Thanks!