Chat bubbles...

Does anyone here have experience creating chat bubbles?

I was looking through the documentation and it looks like DirectDialog could be used but I just don’t want a square box.

I’m wanting to make it a little prettier than a square box. I need to have maybe a dark outline around the borders of the box and a little stub piece that points to the character who’s doing the speaking.

You know, typical MMO chat bubbles.

Steve

I know that you can reparentTo 2-d objects to 3-d models, although I haven’t done it before…

Ah, ok.

I believe Toontown has these chat boxes (I’m calling them bubbles) but its been a while since I looked at Toontown.

Steve

The DirectGUI section in the documentation says that all DirectGUI objects can have any of the 4 fundamental pieces that determine its appearance: text, geom, image and frame.

The image can be a texture. I was thinking maybe using DirectLabel but I don’t see any examples in the manual for this.

Steve

p.s. I’m starting to answer my own questions…It seems, per the manual, that all DirectGUI objects follow this syntax:

myObject = Directxxxxxx(keyword=value, keyword=value, …)

So I’ll just plugin some test values and see what happens. I’ll have to admit the manual confuses me sometimes! I’m not really sure DirectLabel will work the way I’m wanting.

Well, as you answered for yourself… make a DirectLabel with the image. You can scale it as you like. Now use one or several text nodes reparented to the DirectLabel… this MIGHT work.
But you will need a good word wrapping function… the one implemented in Panda3D uses very much space…

Regards, Bigfoot29

I was playing around with the DirectGUI stuff and for quick prototyping came up with this:
chatBubble=DirectLabel(text=“Testing”,text_wordwrap=10
,relief=FLAT,text_font=font,text_scale=(.08,.08),text_frame=(0,0,0,1),frameColor=(1,1,1,1))

Seems to do what I need, that is just print the text supplied in “text” and has a small frame around it. I can play with fancy texture borders and stuff later. I just need to get it so It’s close to the person who is speaking.

Steve

You need to measure the distance between the camera then and compute the scale factor . When in the distance the scale needs to be bigger (but I guess you know that )

That needs to be recomputed every frame or with every movement…

The question is: are you going to make the text bubbles as 2D GUI element, or as 3D Element? - Your choice

Regards, Bigfoot29

Hey, thanks for the help bigfoot29. Just trying to get something up quick. I’ve never played with the DirectGUI stuff until now. I hadn’t thought about the scale issue in relation to the camera I guess I would have when I tried to implement this and couldn’t read the text

Any idea on the names for fonts? I know I can select a font, but where does the name come from?

I’ve also been playing around with the frame colors and what have you so it looks a little better.

As for the fonts: I prefer:

font=loader.loadFont('cmr12.egg')

Its one of the default fonts, but far more readable than the default font…
You can read through the manual to get some help. I am sorry, but my examples won’t help ya if I post them. They are more confusing

But I never tested using a background image and posting text in front of it when scaling the image every now and then… (not sure if the text doesn’t get invisible because the image overlays the text)

Regards, Bigfoot29

Ok, thanks.

I’m learning something new about Panda3d everyday. I had no idea that you could load a font from an egg.

I guess the cmtt must be a True Type font and 12 is probably pitch.

Steve

Ok, so, for anyone else looking for a basic chat bubble. You can play around with these features and tweak them how you like. I created just a small white box with a black border. The text will wrap around at 10 characters. I guess I’ll need to reparent this to 3d instead of aspect2d like it is by default.

(Note: This is just a test.py script so I could play with the DirectLabel options)

import direct.directbase.DirectStart
from direct.gui.DirectGui import *

font=loader.loadFont(“models\cmtt12.egg”)
chatBubble = DirectLabel(text=“Testing… this is a test”,text_wordwrap=10,relief=FLAT,text_font=font,
text_scale=(.08,.08),text_frame=(0,0,0,1),frameColor=(1,1,1,1))
run()

Some things I’ll need to fix is obviously like bigfoot29 said, I’ll need to scale the text depending on how far from camera I am. Also, I’ll replace the text="" with a variable containing the actual chat from the client.

Then of course we need to get it over the head of the character speaking.

Hmm, that’s it for now, hope it helps someone else.

Steve

Hmm, well, in theory the DirectLabel in my previous post works, however, in a 3d scene it doesn’t look so hot.

The next is washed out, parts of it disappear. Also, one thing I forgot is you need to keep the DirectLabel always oriented towards the screen regardless of which direction your character is facing. Otherwise, you won’t be able to read the chat bubble

So, it wasn’t quite as easy as it seemed. Of course, I guess it never really is.

Steve

p.s.

I think there’s a bug or something. Unless I set the Heading via setHpr to a slight angle, I can’t read the text.

The problem is that the text is exactly coplanar with the polygon behind it. Rendering coplanar polygons is always a bit problematic in a 3-d world, since the graphics card uses a depth buffer (sometimes called a Z-buffer) to decide which things are in front of other things–but when two polygons are exactly coplanar, they get the same Z-buffer value at each pixel, so they tend to shimmer when viewed from different angles (or, from some angles, it may be completely invisible, which is what happens when you view your text directly head-on).

Fortunately, Panda has code to handle this. It’s called a “Decal”, which is a special mode in which Panda sends a special sequence of graphics commands to render coplanar polygons correctly. (This is not to be confused with the “decal” multitexture mode. Panda’s “Decal” rendering effect is not presently documented in the manual.)

The DirectLabel, which isn’t really designed to be rendered in the 3-D world, doesn’t enable decalling by default. But you can do so. To do it, you should use the internal TextNode to generate the background card instead of using the FLAT relief (use text_bg to do this, and set relief=None). Then you need to get a handle to the internal TextNode and enable the decal rendering directly. It’s a bit clumsy, but it looks something like this:

chatBubble=DirectLabel(parent=render, text="Testing", text_wordwrap=10,
                       relief=None, text_scale=(.08,.08),
                       text_frame=(0,0,0,1),
                       text_bg=(1,1,1,1))
chatBubble.component('text0').textNode.setCardDecal(1)
chatBubble['text'] = 'Testing'

Note that you have to reset the text after you have set the decal effect, in order to force the new decal mode to be applied.

To make the text auto-rotate to face the camera, all you need is a billboard effect:

chatBubble.setBillboardAxis()

David

Huh, that is cool! Thanks David.

Needless to say, it works great now!

I guess I missed the part in the manual where you reparent to render right in the arguments of the DirectGUI.

Thanks for the help David!

Edit: Yes, I found the “parent” keyword in the “OnscreenText” documentation.

I thought that I would add to this. I used this code to add the mob/player’s name to the screen, floating over their head.

I have a mobClass which extends actor. After I create my actor ( Actor.init(self,model,{“run”:run,“walk”:walk}) ) I do the following code:

        if (not self.name == ""):
            self.chatBubble=DirectLabel(parent=self, text=self.name, text_wordwrap=10,
                           relief = None, text_scale=(.5,.5),
                           pos = (0,0,6),
                           frameColor=(.3,.2,.1,.5),
                           text_frame=(0,0,0,1),
                           text_bg=(1,1,1,1))
            self.chatBubble.component('text0').textNode.setCardDecal(1)
            self.chatBubble['text'] = self.name
            self.chatBubble.setBillboardAxis()

I put the name of the mob or the other player’s over their heads. The player’s avator doesn’t have a label.

I would prefer it if the label was translucent, but this is good for now.

Brian