How to create a white outline using createWithTTF labels?

cocos2d-x C++
#1

Hi,

I’m trying to create a Label* (using a TTF font file), and adding a white stroke (outline) to it.
Any other color seems to be working fine, except for white stroke.

Here is the result using different colors:

139490689b04aa26.png988×692

The code is: 

define FNT_FILE "Marker Felt.ttf"
define FNT_SIZE 40
define SPACING FNT_SIZE * 1.5f
	auto pos = FNT_SIZE / 2;
	{
		// Normal white label
		Label* label = Label::createWithTTF("This is a normal white label", FNT_FILE, FNT_SIZE);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// Black stroke white label
		Label* label = Label::createWithTTF("This is a black stroke white label", FNT_FILE, FNT_SIZE);
		label->enableOutline(Color4B::BLACK, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// Red stroke white label
		Label* label = Label::createWithTTF("This is a red stroke white label", FNT_FILE, FNT_SIZE);
		label->enableOutline(Color4B::RED, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// White stroke white label
		Label* label = Label::createWithTTF("This is a white stroke white label", FNT_FILE, FNT_SIZE);
		label->enableOutline(Color4B::WHITE, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// Normal colored label
		Label* label = Label::createWithTTF("This is a normal colored label", FNT_FILE, FNT_SIZE);
		label->setColor(Color3B(255, 156, 0));
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// Black stroke colored label
		Label* label = Label::createWithTTF("This is a black stroke colored label", FNT_FILE, FNT_SIZE);
		label->setColor(Color3B(255, 156, 0));
		label->enableOutline(Color4B::BLACK, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// Red stroke colored label
		Label* label = Label::createWithTTF("This is a red stroke colored label", FNT_FILE, FNT_SIZE);
		label->setColor(Color3B(255, 156, 0));
		label->enableOutline(Color4B::RED, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
	{
		// White stroke colored label
		Label* label = Label::createWithTTF("This is a white stroke colored label", FNT_FILE, FNT_SIZE);
		label->setColor(Color3B(255, 156, 0));
		label->enableOutline(Color4B::WHITE, 2);
		label->setPosition(Vec2(visibleSize.width / 2, pos));
		addChild(label);
		pos += SPACING;
	}
So my question is: Is it a bug, or is it impossible to create a white stroke (at least like that)??

Thanks,
Chris

#2

Seems like the outline color gets multiplied with the main text color somewhere in the outline shader…I also need this in my project and noticed this bug.

#3

So, is this a confirmed bug?
Is there a workaround?
thanks!

#4

Deleting the wrong code

1 Like
#5

Great thanks, but… this causes a serious bug if using alpha value on the label.

For example, before your fix for the outline, a label with a black outline and an opacity of 0% (full transparent) will be completely invisible.
After your fix, the glyph itself will be invisible, but the stroke will be visible.
This should be addressed before releasing a patch.

Any ideas on how to fix it?
And please post a reply here as soon as the full patch has been merged in cocos so I can cherry-pick it, thanks again!!

Cheers,
Chris

#7

I’ve made a mistake so, the ABOVE CODE SOULD NOT BE CONSIDERED! SINCE ITS WRONG!

This is not a bug in cocos. This is the way it is supposed to be. The v_fragmentColor is used for other purposes and it is supposed to multiply everything including the outline. The u_textColor however is used for the main text colour, so in order to have a black label with white outline you need to do this:

livesLabel = Label::createWithTTF("0", "fonts/bubblebutt.ttf", 20);
livesLabel->setTextColor(Color4B:::BLACK);
livesLabel->enableOutline(Color4B::WHITE, 1);

setTextColor() is setting the u_textColor and setColor() is setting v_fragmentColor. Sorry for the misunderstanding.

2 Likes
Change outline color of Label
#8

Yeah, thank you so much for pointing that out!!
And it solves another bug I’ve seen with your change in the shader (I saw a double white stroke, one on the glyph and one on the drop shadow. Now the stroke is correctly set only on the glyph).

Thanks again, I’ve reverted the “shader fix” (which is not one actually), and set the TextColor instead!