【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告（1）

这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码，了解其实现原理。

首先，先介绍一下ClippingNode，ClippingNode也叫裁剪节点，能将一些内容通过使用模板裁剪出来显示在界面上，可以实现一些很炫酷的效果。来看看今天要实现的效果

1、ClippingNode类分析

先来看看ClippingNode的声明文件 看看其中的public方法

class CC_DLL ClippingNode : public Node
{
public:
    static ClippingNode* create();
    static ClippingNode* create(Node *stencil);

    Node* getStencil() const;
    void setStencil(Node *stencil);

    virtual bool hasContent() const;

    GLfloat getAlphaThreshold() const;
    void setAlphaThreshold(GLfloat alphaThreshold);
    
    bool isInverted() const;
    void setInverted(bool inverted);
};

接下来的getStencil和setStencil分别是获取和设置一个遮罩模板，裁剪物体方法就是通过这个遮罩模板的，遮罩模板只要是基于Node的对象都可以（非常重要）。

接下来的hasContent返回其是否有需要绘制的内容，如果没有绘制的内容则返回false，有则返回true。

getAlphaThreshold和setAlphaThreshold分别是获取和设置一个像素的透明度值，取值范围从0-1，其中0表示都不绘制，1表示都绘制。0.5表示透明度在0.5以上的都绘制，这个函数涉及到opengl的Alpha测试的相关概念，Alpha测试的作用通过一句话解释就是：所有像素的透明度值低于某个阀值的统统抛弃，不绘制到屏幕上。

最后的isInverted和setInverted分别表示绘制的内容是模板内的还是模板外的，其效果如下：

2、简易跑马灯实现

上节简单介绍了一下ClippingNode的函数，这节就通过实现一个简易的跑马灯功能来直观的了解。首先介绍一下制作跑马灯的思路。

首先我们需要将跑马灯中的一部分超出的字裁剪掉，不让他显示在界面上。这就需要用到ClippingNode，现在先来做第一步。实现的代码如下：

	//设置模板
	auto stencil = Sprite::create();
	//设置显示区域大小
	stencil->setTextureRect(Rect(0, 0, 50, 30));

	//设置跑马灯文字
	auto text = Label::createWithSystemFont("-1dasdasdasd efadaewfevgds dfhrthrbgrg1-", "", 24);
	//设置锚点
	text->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);

	//创建裁剪节点
	auto clippingNode = ClippingNode::create(stencil);
	//设置节点位置
	clippingNode->setPosition(Vec2(700, 400));
	//显示模板内的内容
	clippingNode->setInverted(false);
	//添加显示内容
	clippingNode->addChild(text, 2);
	//加入到UI树
	addChild(clippingNode);

上述的每一句代码都有注释，就不再多解释了，这一步实现出来的效果如下图，但是跑马灯还不能动起来，待会我们就将跑马灯动起来。

现在我们就设计一个Action将跑马灯动起来，跑马灯一般需要先将文字左移，移动到文字看不见的时候再将文字移除或者隐藏，代码如下（为了简便，就直接设置隐藏了）：

	auto sequ = Sequence::create(MoveBy::create(5.0f, Vec2(-text->getContentSize().width, 0)), Hide::create(), nullptr);
	text->runAction(sequ);

3、封装

现在我们从便捷性的角度考虑如何将跑马灯功能封装成一个函数供其他类调用。首先提取出函数的参数，分别是：显示区域，跑马灯文字，字体字号，跑马灯位置，跑马灯的父节点。下面是初步封装好的一套跑马灯函数的声明：

void showMarquee(Node* parent, const std::string& text, const std::string& font, float fontSize, const Rect& showRect, const Vec2& position);

首先，我们简单的构建一下一个跑马灯类，如下

#include "cocos2d.h"

USING_NS_CC;

class Marquee : public Node
{
public:

	CREATE_FUNC(Marquee);

	bool init();

	void show(const std::string& text);

public:
	const std::string& getFont() const { return _font; }
	void setFont(std::string& font) { _font = font; }
	float getFontSize() const { return _fontSize; }
	void setFontSize(float fontSize) { _fontSize = fontSize; }

public:
	const Rect& getShowRect() const { return _showRect; }
	void setShowRect(Rect& showRect) { _showRect = showRect; }
protected:
	Marquee() : 
		_font(""),
		_fontSize(24),
		_showRect(Rect(0,0,200,30))
	{};
	~Marquee() {};

private:
	std::string _font;
	float _fontSize;

	Rect _showRect;
};

bool Marquee::init()
{
	//设置模板
	auto stencil = Sprite::create();
	//设置显示区域大小
	stencil->setTextureRect(_showRect);

	//设置跑马灯文字
	_label = Label::createWithSystemFont("", _font, _fontSize);
	//设置锚点
	_label->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);

	_label->setAlignment(TextHAlignment::LEFT);

	//创建裁剪节点
	auto clippingNode = ClippingNode::create(stencil);
	//显示模板内的内容
	clippingNode->setInverted(false);
	//添加显示内容
	clippingNode->addChild(_label);
	//加入到UI树
	addChild(clippingNode);

	return true;
}

void Marquee::show(const std::string& text)
{
	_label->setString(text);
	_label->setPosition(Vec2(0, _label->getContentSize().height / 2));

	auto sequ = Sequence::create(MoveBy::create(5.0f, Vec2(-_label->getContentSize().width, 0)), Hide::create(), nullptr);
	_label->runAction(sequ);
}

<span style="white-space:pre">	</span>Marquee* m = Marquee::create();
	m->show("----hhahahah veeeeee-----");
	m->setPosition(Vec2(700, 300));
	this->addChild(m);

4、完善

未完待续

【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告（1）

原文：http://blog.csdn.net/nxshow/article/details/45047921