cocos2dx 3.2下利用裁剪节点实现跑马灯滚动效果

原创 2014年10月11日 16:42:21

以前利用过ScrollView设置跑马灯效果。现在利用cocos2dx内置的ClippingNode也可以实现。

首先原理是什么呢?

将节点A用ClippingNode对象C的setStencil(A)方法设置,然后设置其透明度,

那么ClippingNode对象C再通过addChild添加B,则B将会仅显示A遮罩的部分。

然后移动B,则形成滚动。

当然了,如果你嫌我啰嗦或者描述不清的话,可以直达官网查看→相应文档←。


好了,步兵无真相。骑兵送上。

希望童鞋们发现知识的不足或者好的建议或者意见能够提醒小弟一下,毕竟菜鸟一枚。

头文件。

/****************************************************************************
 Copyright (c) 2014-10-11 Real.xm
 Create by q229827701
 http://blog.csdn.net/q229827701
 ****************************************************************************/
#pragma once
#include "cocos2d.h"
class ScrollText:public cocos2d::Node
{
	public:
		CREATE_FUNC(ScrollText);

		/**
		@pragma  pMask 需要用于遮罩的精灵
		@pragma  pMoveChild 需要移动的Node
		@pragma  otherChid 其他需要显示的Node
		*/
		static ScrollText* create(cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild,cocos2d::Node* &otherChild,...);
		/**
		@pragma  isScroll 设置是否需要自动滚动
		@pragma  byWidth 设置是否需要根据长度来滚动
		PS:如果按照长度来设置,则长度小于遮罩长度的将不予滚动
		*/
		void setAutoScroll(bool isScroll,bool byWidth=false);
CC_CONSTRUCTOR_ACCESS:
		ScrollText();
		virtual ~ScrollText();
		virtual bool init();
		virtual bool initWithDatas(cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild);
		bool initClipper(cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild);
		void update(float delta);

	private:
		cocos2d::Node* _mLable;
		cocos2d::Vector<Node*> _mNodes;
		bool _autoScroll;
};

源文件

#include "ScrollText.h"
USING_NS_CC;
#define IF_RETURN(cont,p) if ((cont)){return (p);}
#define IF_RETURN_FALSE(cont) IF_RETURN(cont,false)
bool ScrollText::init()
{
	bool ret = true;
	if (Node::init())
	{
		auto pMask = Sprite::create("text/switch-mask.png");
		_mLable = Label::createWithSystemFont("Title", "Arial-BoldMT", 16);
		_mLable->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
		IF_RETURN_FALSE(!initClipper(pMask,_mLable));
		scheduleUpdate();
		setAutoScroll(true);
		return ret;
	}
	return ret;
}

bool ScrollText::initClipper( cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild)
{
	auto clipper = ClippingNode::create();
	IF_RETURN_FALSE(!clipper);
	IF_RETURN_FALSE(!pMask);
	setContentSize(pMask->getContentSize());
	IF_RETURN_FALSE(!pMask->getTexture());
	auto _clipperStencil = Sprite::createWithTexture(pMask->getTexture());
	IF_RETURN_FALSE(!_clipperStencil);
	_clipperStencil->retain();
	clipper->setAlphaThreshold(0.1f);
	clipper->setStencil(_clipperStencil);
	clipper->addChild(pMoveChild,1);
	addChild(clipper);
	for (auto child:_mNodes)
	{
		IF_RETURN_FALSE(!child);
		clipper->addChild(child);
	}
	return true;
}

ScrollText::ScrollText():_autoScroll(false)
{

}


ScrollText::~ScrollText()
{
	CC_SAFE_RELEASE(_mLable);
}

void ScrollText::update( float delta )
{
	if (!_mLable)
	{
		return;
	}
	float currentX = _mLable->getPositionX();
	float contentX = getContentSize().width*(-1.0f);
	float lableX = _mLable->getContentSize().width*(-1.0f);

	if (_autoScroll)
	{
		if(_mLable->getPositionX()>=(lableX+contentX/2))
			_mLable->setPositionX(_mLable->getPositionX()-0.25f);
		else
		{
			_mLable->setPositionX(-contentX/2);
		}
			
	}
	else
	{
		_mLable->setPositionX(contentX/2);
	}
}

void ScrollText::setAutoScroll( bool isScroll,bool byWidth/*=false*/ )
{
	if (!byWidth)
	{
		_autoScroll = isScroll;
	}
	else
	{
		_autoScroll=_mLable->getContentSize().width>getContentSize().width?true:false;
	}
}

ScrollText* ScrollText::create( cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild,cocos2d::Node* &otherChild,... )
{
	auto *sTxt = new ScrollText(); 
	if (sTxt ) 
	{ 
		va_list lst;
		va_start(lst,otherChild);
		Node* pNow;
		pNow=otherChild;
		while(otherChild)
		{
			if (pNow)
			{
				sTxt->_mNodes.pushBack(pNow);
				pNow=va_arg(lst,Node*);
			}
			else
				break;
		}
		va_end(lst);
		if(sTxt->initWithDatas(pMask,pMoveChild))
		{
			sTxt->autorelease(); 
			return sTxt; 
		}
		else
		{
			delete sTxt; 
			sTxt = NULL; 
			return NULL; 
		}
	} 
	else 
	{ 
		delete sTxt; 
		sTxt = NULL; 
		return NULL; 
	} 
}

bool ScrollText::initWithDatas( cocos2d::Sprite* &pMask,cocos2d::Node* &pMoveChild)
{
	bool ret = false;
	if (Node::init())
	{
		IF_RETURN_FALSE(!pMask);
		_mLable = pMoveChild;
		_mLable->setAnchorPoint(Vec2::ANCHOR_MIDDLE_LEFT);
		initClipper(pMask,_mLable);
		scheduleUpdate();
		return true;
	}
	return ret;
}


效果如图所示:



cocos2dx3.3 跑马灯功能的简单实现

================================================头文件 Marquee.h=======================================...
  • u010434924
  • u010434924
  • 2015年01月29日 17:05
  • 563

cocos2dx 3.2下利用ui::scrollView实现跑马灯滚动效果

思路和上一篇一样
  • q229827701
  • q229827701
  • 2014年10月30日 14:33
  • 3520

cocos2dx 3.2下利用裁剪节点实现跑马灯滚动效果

以前利用过ScrollView设置跑马灯效果。现在利用
  • q229827701
  • q229827701
  • 2014年10月11日 16:42
  • 4122

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

这篇文章主要是通过一步一步实现一个功能完善的跑马灯公告来展示ClippingNode的用法并且最终深入ClippingNode的源码,了解其实现原理。 首先,先介绍一下ClippingNode,Cli...
  • baijiajie2012
  • baijiajie2012
  • 2015年04月15日 13:19
  • 1633

cocos2d-lua 左右移动广播条 跑马灯效果

直接上代码  local braodWidth = 150 --跑马灯的长度 local label = cc.Label:createWithSystemFont("关于---------...
  • zuihoudeliulang
  • zuihoudeliulang
  • 2015年05月19日 10:17
  • 2611

Cocos2d-2.x_跑马灯效果

#ifndef __HELLO_WORLD_H__ #define __HELLO_WORLD_H__ #include "cocos2d.h" #include "cocos-ext.h" US...
  • c201038795050
  • c201038795050
  • 2015年05月02日 13:37
  • 1057

游戏标题走马灯特效

From: http://www.waitingfy.com/archives/1398 我不知道下面讲的特效的名称,就先叫走马灯特效吧,我也不知道真的走马灯特效是怎样的。这个有点像...
  • tianxiawuzhei
  • tianxiawuzhei
  • 2015年05月27日 11:14
  • 1477

ClippingNode实现跑马灯文字(例如游戏公告等)

Marquee.h #ifndef __JNTest__Marquee__ #define __JNTest__Marquee__ #include "cocos2d.h" USING_NS_CC...
  • themagickeyjianan
  • themagickeyjianan
  • 2015年06月25日 15:01
  • 1076

游戏标题走马灯特效

我不知道下面讲的特效的名称,就先叫走马灯特效吧,我也不知道真的走马灯特效是怎样的。这个有点像人浪效果。大致有两种方式实现。当然帧动画也可以做,但帧动画不在我们的讨论范围。程序实现有好处:速度好修改。1...
  • fox64194167
  • fox64194167
  • 2014年11月24日 09:37
  • 2010

cocos2dx中用动作实现背景无限滚动

cocos2dx-3.1.5中用动作实现背景滚动,cocos2dx3.x都可以使用的用到的动作其实很简单 MoveBy 因为有反动作 TargetedAction 给指定目标1个动作 Spawn 同...
  • mhtqq809201
  • mhtqq809201
  • 2017年08月24日 10:42
  • 135
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2dx 3.2下利用裁剪节点实现跑马灯滚动效果
举报原因:
原因补充:

(最多只允许输入30个字)