Speech bubble / Comic text balloon

[tomshreds]

Hi,

I'd need to draw a comic-like speech bubble.

I thought of two different ways of doing so:

1) Using cut PNGs to draw it and fill the middle with white to show text into it.

or

2) Draw a rounded rectangle and some kind of small triangle to simulate one.

I'm a bit stuck between the two choices, which one in your opinion would be the best?

Keep in mind that it should wrap around the text. (I already did that for rectangle in-game notifications so the wrapping part will be easy).

Any other suggestions are welcome!

Thanks!

[tomshreds]

Bumpidy bump! Any idea folks? Thanks

[T-Bone]

I'd probably use a Spritebatch, with a sprite containing the corners, sides and the arrow, and form speech bubbles in arbitrary size at run time for resolution independence. But it's probably not the easiest way to do it.

[tomshreds]

I'd probably use a Spritebatch, with a sprite containing the corners, sides and the arrow, and form speech bubbles in arbitrary size at run time for resolution independence. But it's probably not the easiest way to do it.

Thanks! I'm not looking for an easy way but a working and reliable way of doing it. I'll check out the docs for the spritebatches.

[scutheotaku]

How detailed should this speech bubble be? Is it just an ellipse and a triangle, or are you wanting to be able to do cloud/thought bubbles? If it's the former, I'd go with your second option and just draw the shapes. To draw the ellipse/bubble part, just set its height to the height of all text lines combined + a margin. Set its width to the width of the widest text line + a margin. Then just draw a triangle for the "pointer."

For drawing ellipses in LOVE, see here (AFAIK LOVE does not currently have a built-in function for drawing ellipses): viewtopic.php?f=4&t=2687#p53692 Though everything I wrote above would actually be much easier in the current version of LOVE with a rectangle instead of an ellipse (as you probably already know, given that you already have rectangle text boxes of some form).

Note that all of that assumes that you will have speech bubbles of different sizes and that you want them to dynamically shape around text...if you don't, then the sprite method is much, much easier.

[micha]

I suggest the second approach: Draw everything with love's build-in drawing functions.
Second I suggest using a rectangular shaped speech bubble instead of an ellipse. Not only is it easier to implement, it is also much easier to determine the size of it. If you have a rectangular block of text, it is not easy to determine the radii of the ellipse and you will waste a lot of space on screen.

[tomshreds]

Thanks for your great responses, it really helped with the decision.

Okay, now I'll continue to draw everything with löve. But I have one last question. I drew this example bubble: (don't worry it'll be bigger in-game! haha)

1NJQd.png (335 Bytes) Viewed 598 times

As you might notice, the corner are a tidy bit rounded, but that's about only 3 pixels per corner. So to properly draw this I would have to draw the rectangle and remove 3 pixels per corner? And then add the triangle, add the highlight and finally add the shadow. Am I right? Does that sound okay with you guys?

Thanks!

[ejmr]

So to properly draw this I would have to draw the rectangle and remove 3 pixels per corner? And then add the triangle, add the highlight and finally add the shadow. Am I right?

That sounds right. As the speech bubble becomes larger or smaller, depending on the text, it would probably look good to grow and shrink those corner elements appropriately, maybe using the optional scaling arguments for love.graphics.draw().

[Darky]

You should check this snippet that draws rounded rectangle :

Code: Select all

function love.graphics.roundrect(mode, x, y, width, height, xround, yround)
	local points = {}
	local precision = (xround + yround) * .1
	local invprec = 1/precision
	local tI, hP = table.insert, .5*math.pi
	if xround > width*.5 then xround = width*.5 end
	if yround > height*.5 then yround = height*.5 end
	local X1, Y1, X2, Y2 = x + xround, y + yround, x + width - xround, y + height - yround
	local sin, cos = math.sin, math.cos
	for i = 0, precision do
		local a = (i*invprec-1)*hP
		points[#points+1] = X2 + xround*cos(a)
		points[#points+1] = Y1 + yround*sin(a)
	end
	for i = 0, precision do
		local a = i*invprec*hP
		points[#points+1] = X2 + xround*cos(a)
		points[#points+1] = Y2 + yround*sin(a)
	end
	for i = 0, precision do
		local a = (i*invprec+1)*hP
		points[#points+1] = X1 + xround*cos(a)
		points[#points+1] = Y2 + yround*sin(a)
	end
	for i = 0, precision do
		local a = (i*invprec+2)*hP
		points[#points+1] = X1 + xround*cos(a)
		points[#points+1] = Y1 + yround*sin(a)
	end
	love.graphics.polygon(mode, unpack(points))
end

[tomshreds]

You should check this snippet that draws rounded rectangle :

Code: Select all

function love.graphics.roundrect(mode, x, y, width, height, xround, yround)
	local points = {}
	local precision = (xround + yround) * .1
	local invprec = 1/precision
	local tI, hP = table.insert, .5*math.pi
	if xround > width*.5 then xround = width*.5 end
	if yround > height*.5 then yround = height*.5 end
	local X1, Y1, X2, Y2 = x + xround, y + yround, x + width - xround, y + height - yround
	local sin, cos = math.sin, math.cos
	for i = 0, precision do
		local a = (i*invprec-1)*hP
		points[#points+1] = X2 + xround*cos(a)
		points[#points+1] = Y1 + yround*sin(a)
	end
	for i = 0, precision do
		local a = i*invprec*hP
		points[#points+1] = X2 + xround*cos(a)
		points[#points+1] = Y2 + yround*sin(a)
	end
	for i = 0, precision do
		local a = (i*invprec+1)*hP
		points[#points+1] = X1 + xround*cos(a)
		points[#points+1] = Y2 + yround*sin(a)
	end
	for i = 0, precision do
		local a = (i*invprec+2)*hP
		points[#points+1] = X1 + xround*cos(a)
		points[#points+1] = Y1 + yround*sin(a)
	end
	love.graphics.polygon(mode, unpack(points))
end

Thanks dude! I'll try this =)