Paper Mario Style Dialogue

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.
Post Reply
Message
Author
Bleughck
Newbie
Posts: 6
Joined: Sun Apr 13, 2014 1:35 am
Contact:

Paper Mario Style Dialogue

#1 Post by Bleughck »

I'm looking to get a similar dialogue aesthetic to the Paper Mario games. Most notably, the text is placed at the top of the screen, rather than the bottom. So far I couldn't figure out how to do this, though it seems like it should be pretty simple. XP

Image

The next thing is the dialogue box, so the white bubbly thing in this case. It always stays the same size, but Ren'Py always wants to stretch it around depending on how much text is displayed. Is there a way to ensure that the speech bubble is always drawn at the same size, no matter how much text there is?

The other issue is getting the little point on the bottom to actually point to whatever character is talking. That sounds kinda tricky. Not sure exactly how I'm gonna tackle that. Maybe I should export a bunch of speech bubble images with the bottom tail at different positions? I'll figure that out a bit later. If anyone knows any workarounds for the first two problems, that'd be awesome.

SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Paper Mario Style Dialogue

#2 Post by SundownKid »

I did a bunch of text bubbles for cutscenes in Icebound, but considering the way you want it, the better way would probably be to edit the style of window to align to the top y axis (yalign 0.0). Then you can swap the window background graphic and for the window tails, show them separately on top of the graphic.


Bleughck
Newbie
Posts: 6
Joined: Sun Apr 13, 2014 1:35 am
Contact:

Re: Paper Mario Style Dialogue

#4 Post by Bleughck »

SundownKid wrote:...edit the style of window to align to the top y axis (yalign 0.0).
Ah, thanks. The options script doesn't show yalign() by default, so I didn't think it could be used. XP
SundownKid wrote:...you can swap the window background graphic and for the window tails, show them separately on top of the graphic.
Yeah, having separate tails might be the best way to approach that. I could also switch around the position of the tail depending on who's talking, and where they're positioned on screen. It'll be a bit tricky to get it to look nice, since I've got a drop shadow under the speech bubble, but the effect won't be game breaking or anything. :P
Thanks, the margin stuff was a bit confusing. Reading this and experimenting a bit helped clear it up. The dialogue box is now nicely perched at the top of the screen, it doesn't stretch and the text sits pretty well in it. Thanks guys!

The second link you posted suggests I should use NVL mode. I honestly wasn't considering this initially, but now that I look at it, it might work better for what I want to do. It'd be really tedious in certain ways (like having to clear a line every time someone talks), but it seems to allow for a bit more precise control over its behavior.

Most notably, the speech bubble should disappear and reappear whenever a different character starts speaking. This helps differentiate who's actually talking when there are 2 or more characters involved in a conversation. I have no idea how do do this with the standard ADV mode.

I'm also curious as to whether or not I could get the reappearing speech bubble to work automatically. Like, if the character speaking switches, it automatically hides and shows the bubble (perhaps with a dissolve or quick animation). But it would stay put if the same character says several separate lines.

I'll look into NVL mode a bit more and see if it's a better option.

Bleughck
Newbie
Posts: 6
Joined: Sun Apr 13, 2014 1:35 am
Contact:

Re: Paper Mario Style Dialogue

#5 Post by Bleughck »

Alright, I've messed with NVL mode a bit, and I think I might go with it. It's kinda annoying to type- "nvl hide" and "window clear" most of the time, but there are times where having that control is really useful. I still essentially want a similar behavior to ADV mode, just with a bit more control.

I've got two main questions concerning NVL. First off, can I animate the speech bubble between characters? For now, a simple quick fade could suffice, but I'd like something to help give some separation between dialogue. More specifically, something to either replace the "window hide" command, or change it's behavior so that it fades out/animates the NVL window instead of just removing it instantly. For example:

Code: Select all

a "I'm character a!"

nvl clear

a "I'm going to keep talking."

nvl clear

#animate the NVL window out
window hide with transition

b "I'm character b."
Secondly, can I swap out different speech bubble images depending on who's talking? This way I could create a few variations of the speech bubble, each with the tail pointing in a different direction; this way I can ensure that the tail points to whatever character is talking.

It'd be really awesome to be able to reassign these, too. So if a character starts off on the right, talks, then walks over to the left and talks there, I'd want to be able to update or swap out the image accordingly.

The other solution would be to just export one tail graphic and position it dynamically under the speech bubble. That could work, but I don't think it'd fade properly with the rest of the bubble. I'd rather use the first solution if I can get it to work.

SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Paper Mario Style Dialogue

#6 Post by SundownKid »

Hmm, not sure if you can swap the bubble, but you can do a shortcut by making the speech bubble (but not the text) a screen that you can show and hide. So show and hide the bubble "screen' as needed underneath the text screen, which has no background. Might have to define a new layer and show it on that layer, or mess with the zorder. Then you can animate the screen with ATL when it's being shown and hidden.

You can add a pause between the text to give the bubble time to pop up before the text appears.

Bleughck
Newbie
Posts: 6
Joined: Sun Apr 13, 2014 1:35 am
Contact:

Re: Paper Mario Style Dialogue

#7 Post by Bleughck »

That's probably the best option. Just disable any actual ADV or NVL text boxes and manually animate my own. The problem is how ridiculously clunky this is starting to get. Just to show one dialogue interchange between two characters, this is what I'm currently dealing with...

Code: Select all

show speechBubble:
        on show:
            alpha 0.0 yzoom 0.5
            linear 0.1 alpha 1.0 yzoom 1.0
        on hide:
            alpha 1.0 yzoom 1.0
            linear 0.1 alpha 0.0 yzoom 0.5
$ renpy.pause(0.1, hard = True)
#play a sound effect for the bubble appearing

a "Here's a line of dialogue!"

nvl clear
hide speechBubble
#play another sound effect for bubble disappearing

#why should I have to redefine this animation every time?
show speechBubble:
        on show:
            alpha 0.0 yzoom 0.5
            linear 0.1 alpha 1.0 yzoom 1.0
        on hide:
            alpha 1.0 yzoom 1.0
            linear 0.1 alpha 0.0 yzoom 0.5
$ renpy.pause(0.1, hard = True)
#play a sound effect for the bubble appearing

b "Here's dialogue from another character!"

nvl clear
hide speechBubble
#play another sound effect for bubble disappearing
At this point, the sheer amount of code I have to put in between each line of dialogue is just insanely stupid. The worst part is that I have to redefine the ATL show and hide behaviors every time I use the animation. There's gotta be a better way to approach this. I'm sure there must be a way to condense all of this into one line? Something like-

Code: Select all

#show speech bubble with tail positioned at 0.2 along the y axis
show speechBubble(0.2)

a "Here's a line of dialogue!"

#swap for a new speech bubble with tail positioned at 0.8 along the y axis
swap speechBubble(0.8)

b "Here's dialogue form another character!"

hide speechBubble
-would be much less of a headache. It'd take care of the animations, play the sounds automatically, and pause the game for a split second to give the bubble a chance to animate before text starts showing up. The defined value would ask for the y position of the tail (still figuring that out). Plus, having some sort of "swap" function would basically show and hide the bubble in succession when switching between characters. I can't really think of a clean way to condense it all like that.

My guess is that I have to use def to somehow make my own function to take in an input argument and do it all for me. Still not entirely up to snuff on how to use def properly in Python. I don't really know how feasible this is.

On another note, since I'm animating all this stuff on my own, there's no point in using NVL anymore. At least that'd clean this up a little bit by preventing the nvl clear line every time. XP

SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Paper Mario Style Dialogue

#8 Post by SundownKid »

That's exactly why transforms exist. You have to define a transform for each of the speech bubbles, then make the speech bubble a screen using that transform.

Then all you have to do is use 'show speechbubble1" or "hide speechbubble1".

SundownKid
Lemma-Class Veteran
Posts: 2299
Joined: Mon Feb 06, 2012 9:50 pm
Completed: Icebound, Selenon Rising Ep. 1-2
Projects: Selenon Rising Ep. 3-4
Organization: Fastermind Games
Deviantart: sundownkid
Location: NYC
Contact:

Re: Paper Mario Style Dialogue

#9 Post by SundownKid »

That's exactly why transforms exist. You have to define a transform for each of the speech bubbles, then make the speech bubble a screen using that transform.

Then all you have to do is use 'show screen speechbubble1" or "hide screen speechbubble1".

Code: Select all

transform speechpop1:
        on show:
            alpha 0.0 yzoom 0.5
            linear 0.1 alpha 1.0 yzoom 1.0
        on hide:
            alpha 1.0 yzoom 1.0
            linear 0.1 alpha 0.0 yzoom 0.5

screen speechbubble1:
    add "speechbubble.png" at speechpop1

label speech:
     show screen speechbubble1
     n "I'm talking!"

Bleughck
Newbie
Posts: 6
Joined: Sun Apr 13, 2014 1:35 am
Contact:

Re: Paper Mario Style Dialogue

#10 Post by Bleughck »

Sorry for the late reply, I've been a bit busy: but thanks so much for the help! It's working really nicely now. If I just use different speech bubble images with a couple different tails in different positions and directions, I should be able to swap them out easily with this method.

The amount of code inter-spaced between dialogue is till a bit clunkier than I'd like, but I'm looking into how to condense it.

I've been pretty busy the past few weeks, but now I've finally got some free time to work on this. I'll tweak it over the next few weeks, add some functionality, and inevitably post another question on this same thread. Thanks for the help so far though. :D

Post Reply

Who is online

Users browsing this forum: Bing [Bot]