您的位置：首页 > 移动开发 > Cocos引擎

Cocos2dx引擎笔记——渲染和动画

2015-09-08 08:56 736 查看


Cocos2d-x坐标系和OpenGL坐标系相同，都是起源于笛卡尔坐标系。


笛卡尔坐标系

笛卡尔坐标系中定义右手系原点在左下角，x向右，y向上，z向外，OpenGL坐标系为笛卡尔右手系。




屏幕坐标系和Cocos2d坐标系

iOS, Android, Windows Phone等在开发应用时使用的是标准屏幕坐标系，原点为屏幕左上角，x向右，y向下。

Cocos2d坐标系和OpenGL坐标系一样，原点为屏幕左下角，x向右，y向上。




世界坐标系(World Coordinate) VS 本地坐标系（Node Local）

世界坐标系也叫做绝对坐标系，是游戏开发中建立的概念。因此，“世界”指游戏世界。

本地坐标系也叫相对坐标系，是和节点相关联的坐标系。每个节点都有独立的坐标系，当节点移动或改变方向时，和该节点关联的坐标系将随之移动或改变方向。通过Node的setPosition设定元素的位置使用的是相对与其父节点的本地坐标系。最后在绘制屏幕的时候cocos2d会把这些元素的本地坐标映射成世界坐标系坐标。


锚点（Anchor Point）

将一个节点添加到父节点里面时，需要设置其在父节点上的位置，本质上是设置节点的锚点在父节点坐标系上的位置。

Anchor Point的两个参数都在0~1之间。它们表示的并不是像素点，而是乘数因子。(0.5, 0.5)表示Anchor Point位于节点长度乘0.5和宽度乘0.5的地方，即节点的中心。

在Cocos2d-x中Layer的Anchor Point为默认值(0, 0)，其他Node的默认值为(0.5, 0.5)。

我们用以下代码为例，使用默认Anchor Point值，将红色层放在屏幕左下角，绿色层添加到红色层上：
auto red = LayerColor::create(Color4B(255, 100, 100, 128), visibleSize.width/2, visibleSize.height/2);

auto green = LayerColor::create(Color4B(100, 255, 100, 128), visibleSize.width/4, visibleSize.height/4);

red->addChild(green);

this->addChild(red, 0);




我们用以下代码为例，将红色层的Anchor Point设为中点放在屏幕中央，绿色层添加到红色层上，绿色层锚点为右上角：

注：
因为Layer比较特殊，它默认忽略锚点，所以要调用
ignoreAnchorPointForPosition()
接口来改变锚点，关于
ignoreAnchorPointForPosition()
接口的使用说明，我们将在后面详细讲解。
auto red = LayerColor::create(Color4B(255, 100, 100, 128), visibleSize.width/2, visibleSize.height/2);
red->ignoreAnchorPointForPosition(false);
red->setAnchorPoint(Point(0.5, 0.5));
red->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

auto green = LayerColor::create(Color4B(100, 255, 100, 128), visibleSize.width/4, visibleSize.height/4);
green->ignoreAnchorPointForPosition(false);
green->setAnchorPoint(Point(1, 1));
red->addChild(green);

this->addChild(red, 0);





忽略锚点(Ignore Anchor Point)

Ignore Anchor Point全称是ignoreAnchorPointForPosition，作用是将锚点固定在一个地方。

如果设置其值为true，则图片资源的Anchor Pont固定为左下角，否则即为所设置的位置。

我们用以下代码为例，将两个层的ignoreAnchorPointForPosition设为true，并将绿色的层添加到红色的层上：
auto red = LayerColor::create(Color4B(255, 100, 100, 128), visibleSize.width/2, visibleSize.height/2);
red->ignoreAnchorPointForPosition(true);
red->setPosition(Point(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

auto green = LayerColor::create(Color4B(100, 255, 100, 128), visibleSize.width/4, visibleSize.height/4);
green->ignoreAnchorPointForPosition(true);

red->addChild(green);

this->addChild(red, 0);





VertexZ，PositionZ和zOrder

VerextZ是OpenGL坐标系中的Z值

PositionZ是Cocos2d-x坐标系中Z值，越大层次越在上。
zOrder是Cocos2d-x本地坐标系中Z值

在实际开发中我们只需关注zOrder。可以通过
setPositionZ
接口来设置PositionZ。以下是
setPositionZ
接口的说明：
Sets the 'z' coordinate in the position. It is the OpenGL Z vertex value.


即PositionZ的值即为opengl的z值VertexZ。同样节点的PositionZ也是决定了该节点的渲染顺序，值越大，但是与zOrder不同的区别在于，PositionZ是全局渲染顺序即在根节点上的渲染顺序，而zOrder则是局部渲染顺序，即该节点在其父节点上的渲染顺序，与Node的层级有关。用以下事例来说明:
auto red = LayerColor::create(Color4B(255, 100, 100, 255), visibleSize.width/2, visibleSize.height/2);
red->ignoreAnchorPointForPosition(false);
red->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2));

auto green = LayerColor::create(Color4B(100, 255, 100, 255), visibleSize.width/4, visibleSize.height/4);
green->ignoreAnchorPointForPosition(false);
green->setPosition(Point(visibleSize.width / 2, visibleSize.height / 2 - 100));
red->setPositionZ(1);
green->setPositionZ(0);
this->addChild(red, 0);
this->addChild(green, 1);




虽然green的zOrder大于red的zOder，但是因为red的PositionZ较大，所以red还是在green上面显示。


触摸点（Touch position)

所以在处理触摸事件时需要用重写以下四个函数：
virtual bool onTouchBegan(Touch *touch, Event * event);
virtual void onTouchEnded(Touch *touch, Event * event);
virtual void onTouchCancelled(Touch *touch, Event * event);
virtual void onTouchMoved(Touch *touch, Event * event);


游戏逻辑时需要用到触摸点在Cocos2d坐标系中的位置，就需要将touch的坐标转换成OpenGL坐标系中的点坐标。

Touch position是屏幕坐标系中的点，OpenGL position是OpenGL坐标系上的点坐标。通常我们在开发中会使用两个接口
getLocation()
和
getLocationInView()
来进行相应坐标转换工作。

getLocation()
获取触摸点的GL坐标，而
getLocation()
内部实现是通过调用
Director::getInstance()->convertToGL(_point);
返回GL坐标。

世界坐标系和本地坐标系的相互转换方法：
// 把世界坐标转换到当前节点的本地坐标系中
Point convertToNodeSpace(const Point& worldPoint) const;

// 把基于当前节点的本地坐标系下的坐标转换到世界坐标系中
Point convertToWorldSpace(const Point& nodePoint) const;

// 基于Anchor Point把基于当前节点的本地坐标系下的坐标转换到世界坐标系中
Point convertToNodeSpaceAR(const Point& worldPoint) const;

// 基于Anchor Point把世界坐标转换到当前节点的本地坐标系中
Point convertToWorldSpaceAR(const Point& nodePoint) const;


下面通过一个例子来说明这四个方法的理解和作用:
auto *sprite1 = Sprite::create("HelloWorld.png");
sprite1->setPosition(ccp(20,40));
sprite1->setAnchorPoint(ccp(0,0));
this->addChild(sprite1);  //此时添加到的是世界坐标系，也就是OpenGL坐标系

auto *sprite2 = Sprite::create("HelloWorld.png");
sprite2->setPosition(ccp(-5,-20));
sprite2->setAnchorPoint(ccp(1,1));
this->addChild(sprite2); //此时添加到的是世界坐标系，也就是OpenGL坐标系

//将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的本地(节点)坐标系统的 位置坐标
Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());

//将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的世界坐标系统的 位置坐标
Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());

log("position = (%f,%f)",point1.x,point1.y);
log("position = (%f,%f)",point2.x,point2.y);

运行结果：

Cocos2d: position = (-25.000000,-60.000000)
Cocos2d: position = (15.000000,20.000000)






其中:
Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());


相当于
sprite2
这个节点添加到（实际没有添加，只是这样理解）
sprite1
这个节点上，那么就需要使用
sprite1
这个节点的节点坐标系统，这个节点的节点坐标系统的原点在（20，40），而
sprite1
的坐标是（-5，-20），那么经过变换之后，
sprite1
的坐标就是（-25，-60）。

其中:
Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());


此时的变换是将
sprite2
的坐标转换到
sprite1
的世界坐标系下，而其中世界坐标系是没有变化的，始终都是和OpenGL等同，只不过
sprite2
在变换的时候将
sprite1
作为了”参照“而已。所以变换之后
sprite2
的坐标为:（15，20）。




动作


原理介绍



动作作用于Node，因此每个动作都需要由Node对象执行。动作类(Action)作为基类，实际上是一个接口，动作类的大多数实现类都派生于有限时间动作类(FiniteTimeAction)。在实际开发中我们通常用到两类动作-即时动作和持续动作，它们均继承于有限时间动作类。


一、即时动作

是在下一帧立刻完成的动作，如设定位置、设定缩放等。把它们包装成动作后，可以与其他动作类组合为复杂动作。


Place： 将节点放置到某个指定位置，其作用与修改节点的position属性相同。

auto placeAction = Place::create(Point(10, 10));


FlipX和FlipY： 将精灵沿X轴和Y轴反向显示。

auto flipxAction = FlipX::create(true);
auto moveTo = MoveTo::create(0.4f, Point(0, 0));
auto action = Sequence::create(moveTo, flipxAction, moveTo->reverse(), NULL);//将精灵移动到一端后反向显示再移回原点


Show和Hide: 显示和隐藏节点，其作用与设置节点的visible属性作用一样。

auto hideAction = Hide::create();
auto moveTo = MoveTo::create(0.4f, Point(0, 0));
auto action = Sequence::create(moveTo, hideAction, NULL);


CallFunc： 包括CallFunc、CallFuncN两个动作，用来在动作中进行方法调用。

auto actionMoveDone = CallFuncN::create([&](Ref* sender){
log("Clear memory");
});
auto moveTo = MoveTo::create(0.4f, Point(0, 0));
auto action = Sequence::create(moveTo, actionMoveDone, NULL);//
为了节约内存资源，可以在动作完成后调用相应函数清理内存[/code]


二、持续动作


1） 属性变化动作：通过属性值的逐渐变化来实现动画效果。XXTo是表示最终值，而XXBy则表示向量即改变值。

MoveTo和MoveBy：在规定时间内做直线运动到某个位置。
MoveTo::create(float duration, const Point& position);	//绝对位置
MoveBy::create(float duration, const Point& position);	//相对位置


JumpTo和JumpBy：以一定的轨迹跳跃到指定位置。
JumpTo::create(float duration, const Point& position, float height, int jumps);
JumpBy::create(float duration, const Point& position, float height, int jumps);


BezierTo和BezierBy：进行贝塞尔曲线运动。

每条贝塞尔曲线都包含一个起点和一个终点。起点和终点各自包含一个控制点，而控制点到端点的连线称作控制线。控制点决定了曲线的形状，包含角度和长度两个参数。如下图：



ccBezierConfig bezier;			//1. 创建ccBezierConfig结构体
bezier.controlPoint_1 = Point(0, 0);	//2. 控制点1
bezier.controlPoint_2 = Point(100, 100);	//3. 控制点2
bezier.endPosition = Point(50, 100);	//4. 设置终点
auto bezierAction = BezierTo::create(0.5f, bezier);	//5. 把结构体传入BezierTo或BezierBy的初始化方法中


ScaleTo和ScaleBy： 缩放效果，使节点的缩放系数随时间线性变化。
ScaleTo::create(float duration, float s);
ScaleBy::create(float duration, float s);


RotateTo和RotateBy： 旋转效果
RotateTo::create(float duration, float deltaAngle);
RotateBy::create(float duration, float deltaAngle);


2）视觉特效动作

FadeIn, FadeOut和FateTo：产生淡入淡出效果，和透明变化效果，对应的初始化方法为：
FadeIn::create(float d);    淡入
FadeOut::create(float d);    淡出
FadeTo::create(float duration, GLubyte opacity); 一定时间内透明度变化


TintTo和TintBy： 色调变化。
TintTo::create(float duration, GLubyte red, GLubyte green, GLubyte blue);
TintBy::create(float duration, GLubyte red, GLubyte green, GLubyte blue);


Blink： 使节点闪烁，并制定闪烁次数。
Blink::create(float duration, int blinks);


Animation: 实现帧动画效果.
//手动创建动画
auto animation = Animation::create();
for( int i=1;i<15;i++)
{
char szName[100] = {0};
sprintf(szName, "sprite_%02d.png", i);
animation->addSpriteFrameWithFile(szName);
}

animation->setDelayPerUnit(2.8f / 14.0f);
animation->setRestoreOriginalFrame(true);

auto action = Animate::create(animation);		//动画创建后需要一个动画播放器Animate来播放这些动画
sprite->runAction(Sequence::create(action, action->reverse(), NULL));

//文件创建动画
auto cache = AnimationCache::getInstance();
cache->addAnimationsWithFile("animation.plist");
auto animation2 = cache->getAnimation("dance_1");

auto action2 = Animate::create(animation2);
sprite->runAction(Sequence::create(action2, action2->reverse(), NULL));


3）复合动作

复合动作即将各种动作组合起来再让节点执行，复合动作本身也可以作为一个普通动作嵌入到其他动作中。

注意：Sequence动作不能嵌入其他复合动作内使用，DelayTime不属于复合动作，但是只能在复合动作内使用。

DelayTime： 延时动作其实什么都不做，提供一段空白期，它只有一个初始化方法：
DelayTime::create(float d);


Repeat/RepeatForever： 反复执行某个动作，通常我们用Repeat和RepeatForever这两个方法执行：
Repeat::create(FiniteTimeAction *action, unsigned int times);
RepeatForever::create(ActionInterval *action);


Spawn： 使一批动作同时执行。
Spawn::create(FiniteTimeAction *action1, ...);
Spawn::create(const Vector<FiniteTimeAction*>& arrayOfActions);


Sequence： 让各种动作有序执行。
Sequence::create(FiniteTimeAction *action1, ...);
Sequence::create(const Vector<FiniteTimeAction*>& arrayOfActions);


4）变速动作 把任何动作按照改变后的速度执行。

Speed：
线性的改变某个动作的速度，为了改变一个动作的速度，首先需要将目标动作包装到Speed动作中：
auto repeat = RepeatForever::create(animation);
auto speed = Speed::create(repeat, 0.5f);		//第二个参数为变速比例，设置为0.5f则速度为原来一半。
sprite->runAction(speed);


ActionEase: 实现动作的速度又快到慢、速度随时间改变的匀速运动。该类包含5类运动：指数缓冲、Sine缓冲、弹性缓冲、跳跃缓冲和回震缓冲。每类运动都包含3个不同时期的变换：In、Out和InOut。以下以InSine为例：
auto sineIn = EaseSineIn::create(action);
sprite->runAction(sineIn);



序列帧动画




简介

Cocos2d-x中，动画的具体内容是依靠精灵显示出来的，为了显示动态图片，我们需要不停切换精灵显示的内容，通过把静态的精灵变为动画播放器从而实现动画效果。动画由帧组成，每一帧都是一个纹理，我们可以使用一个纹理序列来创建动画。

Animation类描述一个动画；Animate播放动画，并由精灵执行。


一、创建方法


## 手动添加序列帧到Animation类

1）将每一帧要显示的精灵有序添加到Animation类中，并设置每帧的播放时间，让动画能够匀速播放。

2）通过
setRestoreOriginalFrame
来设置是否在动画播放结束后恢复到第一帧。

3）创建好Animation实例后，需要创建一个Animate实例来播放序列帧动画。
auto animation = Animation::create();
for( int i=1;i<15;i++)
{
char szName[100] = {0};
sprintf(szName, "Images/grossini_dance_%02d.png", i);
animation->addSpriteFrameWithFile(szName);		//添加精灵帧到Animation实例
}
// should last 2.8 seconds. And there are 14 frames.
animation->setDelayPerUnit(2.8f / 14.0f);			//设置每一帧持续时间，以秒为单位
animation->setRestoreOriginalFrame(true);			//设置是否在动画播放结束后恢复到第一帧

auto action = Animate::create(animation);
_grossini->runAction(Sequence::create(action, action->reverse(), NULL));


## 通过文件添加Animation类

plist文件里保存了组成动画的相关信息，通过该类获取到plist文件里的动画。通过动画缓存类AnimationCache可以加载xml/plist文件，用Animate实例来播放序列帧动画。。AnimationCache类接口：
addAnimationsWithFile
，添加动画文件到缓存，plist文件
getAnimation
，从缓存中获取动画对象
getInstance
，获取动画缓存实例对象
auto cache = AnimationCache::getInstance();
 cache->addAnimationsWithFile("animations/animations-2.plist");
auto animation2 = cache->getAnimation("dance_1");

auto action2 = Animate::create(animation2);
_tamara->runAction(Sequence::create(action2, action2->reverse(), NULL));


二、动画缓存(AnimationCache)

通常情况下，对于一个精灵动画，每次创建时都需要加载精灵帧，按顺序添加到数组，再创建对应动作类，这是一个非常烦琐的计算过程。对于使用频率高的动画，比如走路动画，利用动画缓存可以有效降低每次创建的巨大消耗。
static AnimationCache* getInstance()；
//全局共享的单例
void addAnimation(Animation *animation, const std::string& name);
//添加一个动画到缓存
void addAnimationsWithFile(const std::string& plist);
//添加动画文件到缓存
void removeAnimation(const std::string& name);
//移除一个指定的动画
Animation* getAnimation(const std::string& name);
//获得事先存入的动画

建议：
在内存警告时，应该加入内存清理缓存（按照引用层级由高到低，以保证释放引用有效。）
void releaseCaches()
{
AnimationCache::destroyInstance();				//先清理动画缓存
SpriteFrameCache::getInstance()->removeUnusedSpriteFrames();	//后清理精灵帧缓存
TextureCache::getInstance()->removeUnuserdTextures();		//最后清理纹理缓存
}



三、场景转换（Transitions）

场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene，该系列类主要是与场景切换特效相关的一些使用类。

下图是TransitionScene的类关系图：



主要的切换特效有：
TransitionRotoZoom 旋转进入
TransitionJumpZoom 跳动进入
TransitionPageTurn 翻页效果进入
TransitionRadialCCW 钟摆效果
TransitionMoveInL ／ TransitionMoveInR ／ TransitionMoveInT ／ TransitionMoveInB 左侧／右侧／顶部／底部进入
TransitionSlideInL／TransitionSlideInR／TransitionSlideInT／TransitionSlideInB 分别从左侧／右侧／顶部／底部滑入
TransitionShrinkGrow 交替进入
TransitionFlipX／TransitionFlipY x轴翻入（左右）／ y轴翻入（上下）
TransitionFlipAngular 左上右下轴翻入
TransitionZoomFlipX／TransitionZoomFlipY x轴翻入放大缩小效果（左右）／ y轴翻入放大缩小效果（上下）
TransitionFadeTR ／TransitionFadeBL／TransitionFadeUp／TransitionFadeDown 小方格右上角显示进入／ 小方格左下角显示进入／ 横条向上显示进入／ 横条向下显示进入
TransitionSplitCols ／ TransitionSplitRows 竖条切换进入／ 横条切换进入
TransitionZoomFlipAngular 左上右下轴翻入放大缩小效果
TransitionFade 渐隐进入
TransitionCrossFade 渐变进入
TransitionTurnOffTiles 小方格消失进入
TransitionRadialCCW／TransitionRadialCW 扇面展开收起

等等，更多效果可查看官方API。场景转换的实现：
auto transitions = TransitionMoveInL::create(0.2f, scene);
Director::getInstance()->replaceScene(transitions);


场景的转换是由Director类来控制的，通过调用Director类的replaceScene( Scene scene ) 方法可直接使用传入的scene替换当前场景来切换画面，当前场景会被释放，它是切换场景时最常用的方法。 

前面说过，场景转换的一系列类都继承于Scene类，所以可以创建一个转场类替代scene，从而实现各种转场的效果。 

`static TransitionMoveInL create(float t, Scene* scene);`方法中t表示转场到scene的时间。


Cocos2d-x 多分辨率适配完全解析

3.0中有以下相关接口：
Director::getInstance()->getOpenGLView()->setDesignResolutionSize() //设计分辨率大小及模式
Director::getInstance()->setContentScaleFactor() 	//内容缩放因子
FileUtils::getInstance()->setSearchPaths() 		//资源搜索路径
Director::getInstance()->getOpenGLView()->getFrameSize() //屏幕分辨率
Director::getInstance()->getWinSize() 			//设计分辨率
Director::getInstance()->getVisibleSize() //设计分辨率可视区域大小
Director::getInstance()->getVisibleOrigin() //设计分辨率可视区域起点


从cocos2d-2.1beta3-x-2.1.1开始，

CCFileUtils::sharedFileUtils()->setResourceDirectory()
被新接口FileUtils::getInstance()->setSearchPaths(searchPath)替代

从Cocos2d-x 2.1.3开始，新加入了两种ResolutionPolicy（kResolutionFixedHeight， kResolutionFixedWidth），共5中模式。

官方分别在Multi_resolution_support 和 Mechanism_of_loading_resources有介绍。


资源分辨率，设计分辨率，屏幕分辨率

Resources width 以下简写为RW，Resources height 以下简写为RH

Design width 以下简写为DW，Design height 以下简写为DH

Screen width 以下简写为SW，Screen height 以下简写为SH

从资源分辨率到设计分辨率

setContentScaleFactor()决定了图片显示到屏幕的缩放因子，这个因子是资源宽、高比设计分辨率宽、高。

setContentScaleFactor()通常有两个方式来设置参数。 RH/DH或RW/DW，不同的因子选择有不同的缩放负作用。


从设计分辨率到屏幕分辨率

setDesignResolutionSize(DW, DH, resolutionPolicy)

ResolutionPolicy::EXACT_FIT




ResolutionPolicy::SHOW_ALL

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(小)者作为宽、高的缩放因子。保证了全部显示到屏幕，但可能会有黑边。


ResolutionPolicy::EXACT_FIT

屏幕宽 与 设计宽比 作为X方向的缩放因子，屏幕高 与 设计高比 作为Y方向的缩放因子。保证完全铺满屏幕，但是可能会变形。


ResolutionPolicy::NO_BORDER

屏幕宽、高分别和设计分辨率宽、高计算缩放因子，取较(大)者作为宽、高的缩放因子。保证总能有一个方向上铺满屏幕，而另一个方向一般会超出屏幕区域。




ResolutionPolicy::FIXED_HEIGHT

根据屏幕分辨率修正设计分辨率的宽度。适合高方向需要撑满，宽方向可裁减的游戏，结合setContentScaleFactor(RH/DH)使用。


ResolutionPolicy::FIXED_WIDTH

根据屏幕分辨率修正设计分辨率的高度。适合宽方向需要撑满，高方向可裁减的游戏，结合setContentScaleFactor(RW/DW)使用。

ResolutionPolicy::FIXED_HEIGHT和ResolutionPolicy::FIXED_WIDTH：会在内部修正传入设计分辨率，以保证屏幕分辨率到设计分辨率无拉伸铺满屏幕。 

ResolutionPolicy::NO_BORDER情况下，设计分辨率并不是可见区域，我们布局精灵需要根据VisibleOrigin和VisibleSize来做判断处理。

ResolutionPolicy::FIXED_HEIGHT则不同，设计分辨率就是可见区域，VisibleOrigin总是(0,0)

getVisibleSize() = getWinSize()，ResolutionPolicy::FIXED_HEIGHT达到了同样的目的，但是却简化了代码。

ResolutionPolicy::FIXED_HEIGHT和ResolutionPolicy::FIXED_WIDTH是ResolutionPolicy::NO_BORDER的进化，新项目中建议立即开始使用这两种方式。


ClippingNode的使用


概述

ClippingNode(裁剪节点)可以用来对节点进行裁剪，可以根据一个模板切割图片的节点，生成任何形状的节点显示。

ClippingNode是Node的子类，可以像普通节点一样放入Layer，Scene，Node中。

ClippingNode 原理：

ClippingNode是利用模板遮罩来完成对Node区域裁剪的技术。如何理解ClippingNode的遮罩？看下图的例子吧。



所谓模板，就是一个形状，透过该形状可看到底板上的图层，如果底板上没有任何内容，则直接看到Layer上的内容，而底板上的东西又不会妨碍Layer上的东西，即模板在底板之外的空间对于Layer来说是透明的。


ClippingNode 常用方法

create

可以使用 
static ClippingNode* create();
方法创建一个ClippingNode对象。如下：
auto clipper = ClippingNode::create();


也可以使用 
static ClippingNode* create(Node *stencil);
方法创建；在创建的时候指定裁剪模板
auto stencil = Sprite::create("CloseNormal.png");//模板节点
clipper = ClippingNode::create(stencil);


setStencil 可以使用
void setStencil(Node *stencil);
方法设置“裁剪模板”节点。 如下：
clipper->setStencil(stencil);//设置裁剪模板


setInverted

可以使用
void setInverted(bool inverted);
方法，设置是显示被裁剪的部分，还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下：
clipper->setInverted(true);//设置底板可见，显示剩余部分


setAlphaThreshold

可以使用
void setAlphaThreshold(GLfloat alphaThreshold);
，设置alpha阈值， 只有模板（stencil）的alpha像素大于alpha阈值（alphaThreshold）时内容才会被绘制。 alpha阈值（threshold）范围应是0到1之间的浮点数。
alpha阈值（threshold）默认为1。 如下：
clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0



ClippingNode示例

auto bg = LayerColor::create(Color4B(255, 255, 255,255));
this->addChild(bg, -1);//1

auto stencil = Sprite::create("CloseNormal.png");
stencil->setScale(2);//2
auto clipper = ClippingNode::create();
clipper->setStencil(stencil);//设置裁剪模板 //3
clipper->setInverted(true);//设置底板可见
clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
this->addChild(clipper);//4

auto content = Sprite::create("HelloWorld.png");//被裁剪的内容
clipper->addChild(content);//5

clipper->setPosition(Vec2(visibleSize.width/2 + origin.x, visibleSize.height/2 + origin.y));

添加了一个白色的LayerColor作为背景层。
创建一个精灵，作为裁剪模板，并放大2倍
创建ClippingNode节点，并设置裁剪模板
设置裁剪显示，Alpha阈值，并将裁剪节点加到层中
设置被裁剪的内容

运行效果如图：



将 
clipper->setInverted(true);
 改为 
clipper->setInverted(false);
 运行效果如图：



资源图片



声明：本文是对http://www.cocos.com/帮助文档的阅读笔记。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  Cocos2dx引擎
相关文章推荐
新的分享
章节导航