学习cocos2dx简单实现描边

在本文中，我们将探讨如何使用Cocos2d-x 2.x版本简单实现文字描边效果。

1. 创建继承类

首先，我们要创建一个类继承自CCLabelTTF。以下是头文件LabelTTFStroke.h的代码：

#pragma once
#include "cocos2d.h"

namespace Game {
using namespace cocos2d;

class LabelTTFStroke : public cocos2d::CCLabelTTF {
public:
LabelTTFStroke(void);
~LabelTTFStroke(void);
static LabelTTFStroke * create(const char *string, const char *fontName, float fontSize, float strokeSize = 0, const cocos2d::ccColor3B & strokeColor = ccc3(0, 0, 0), cocos2d::CCTextAlignment hAlignment = kCCTextAlignmentCenter, cocos2d::CCVerticalTextAlignment vAlignment = kCCVerticalTextAlignmentTop);
void visit();

private:
cocos2d::ccColor3B m_strokeColor;
float m_strokeSize;
};
}

2. 实现类的方法

接下来是实现文件LabelTTFStroke.cpp的代码：

#include "LabelTTFStroke.h"

namespace Game {
using namespace cocos2d;

LabelTTFStroke::LabelTTFStroke(void) : m_strokeColor(ccc3(0, 0, 0)), m_strokeSize(0.0f) {
}

LabelTTFStroke::~LabelTTFStroke(void) {
}

void LabelTTFStroke::visit() {
if (!isVisible())
return;

if (m_strokeSize > 0) {
ccColor3B col = getColor();
CCPoint pos = getPosition();

// 绘制描边
setColor(m_strokeColor);
setPosition(ccp(pos.x + 1 * m_strokeSize, pos.y + 1 * m_strokeSize));
CCLabelTTF::visit();

setPosition(ccp(pos.x - 1 * m_strokeSize, pos.y - 1 * m_strokeSize));
CCLabelTTF::visit();

setPosition(ccp(pos.x + 1 * m_strokeSize, pos.y - 1 * m_strokeSize));
CCLabelTTF::visit();

setPosition(ccp(pos.x - 1 * m_strokeSize, pos.y + 1 * m_strokeSize));
CCLabelTTF::visit();

// 恢复原来的颜色和位置
setColor(col);
setPosition(ccp(pos.x, pos.y));
}

// 绘制文字本身
CCLabelTTF::visit();
}

LabelTTFStroke * LabelTTFStroke::create(const char *string, const char *fontName, float fontSize, float strokeSize, const cocos2d::ccColor3B & strokeColor, CCTextAlignment hAlignment, CCVerticalTextAlignment vAlignment) {
LabelTTFStroke *pRet = new LabelTTFStroke();
if (pRet && pRet->initWithString(string, fontName, fontSize, CCSizeZero, hAlignment, vAlignment)) {
pRet->m_strokeColor = strokeColor;
pRet->m_strokeSize = strokeSize;
pRet->autorelease();
return pRet;
}
CC_SAFE_DELETE(pRet);
return NULL;
}
}

代码解释

• 构造函数：初始化描边颜色为黑色，描边尺寸为0。
• visit方法：当描边尺寸大于0时，会在文字的四个不同方向（左上、右下、右上、左下）根据描边宽度重新绘制文字，实现描边效果，最后恢复原来的颜色和位置并绘制文字本身。
• create方法：创建LabelTTFStroke对象，初始化文字内容、字体、字号、描边尺寸和颜色等信息，若创建成功则自动释放内存并返回对象指针，否则删除对象并返回NULL。

3. 另一种visit方法实现

visit方法也可以按照以下方式实现：

void LabelTTFStroke::visit() {
if (!isVisible())
return;

if (m_strokeSize > 0) {
ccColor3B col = getColor();
CCPoint pos = getPosition();

// 绘制描边
setColor(m_strokeColor);
setPosition(ccp(pos.x + 1 * m_strokeSize, pos.y));
CCLabelTTF::visit();

setPosition(ccp(pos.x - 1 * m_strokeSize, pos.y));
CCLabelTTF::visit();

setPosition(ccp(pos.x, pos.y - 1 * m_strokeSize));
CCLabelTTF::visit();

setPosition(ccp(pos.x, pos.y + 1 * m_strokeSize));
CCLabelTTF::visit();

// 恢复原来的颜色和位置
setColor(col);
setPosition(ccp(pos.x, pos.y));
}

// 绘制文字本身
CCLabelTTF::visit();
}

这种实现方式是在文字的上下左右四个方向绘制描边。

4. 使用方法

以下是使用LabelTTFStroke类的示例代码：

Game::LabelTTFStroke* pLabel1 = Game::LabelTTFStroke::create("Hello World", "Arial", 30, 2.0, ccc3(255, 0, 0));
// position the label on the center of the screen
pLabel1->setPosition(ccp(origin.x + visibleSize.width / 2, origin.y + visibleSize.height - pLabel1->getContentSize().height - 50));
// add the label as a child to this layer
this->addChild(pLabel1, 1);

5. 缺点

这种实现方式存在一定的局限性，描边尺寸不能设置太大，否则会出现一些问题，例如描边之间可能会出现重叠、显示不完整等情况。在实际应用中，需要根据具体需求选择合适的描边尺寸。