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

概述Cocos2d-x坐标系和OpenGL坐标系相同，都是起源于笛卡尔坐标系。 笛卡尔坐标系 笛卡尔坐标系中定义右手系原点在左下角，x向右，y向上，z向外，OpenGL坐标系为笛卡尔右手系。 屏幕坐标系和Cocos2d坐标系 iOS, Android, Windows Phone等在开发应用时使用的是标准屏幕坐标系，原点为屏幕左上角，x向右，y向下。 Cocos2d坐标系和OpenGL坐标系一样，原点 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,128),visibleSize.wIDth/2,visibleSize.height/2);auto green = Layercolor::create(color4B(100,255,visibleSize.wIDth/4,visibleSize.height/4);red->addChild(green);this->addChild(red,0);

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

注：因为Layer比较特殊，它默认忽略锚点，所以要调用ignoreAnchorPointForposition()接口来改变锚点，关于ignoreAnchorPointForposition()接口的使用说明，我们将在后面详细讲解。

 
  忽略锚点(Ignore Anchor Point) 
 Ignore Anchor Point全称是ignoreAnchorPointForposition，作用是将锚点固定在一个地方。
 
 如果设置其值为true，则图片资源的Anchor Pont固定为左下角，否则即为所设置的位置。
 
 我们用以下代码为例，将两个层的ignoreAnchorPointForposition设为true，并将绿色的层添加到红色的层上：
 
auto red = Layercolor::create(color4B(255,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,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。可以通过@H_403_134@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的层级有关。用以下事例来说明:
 
 虽然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,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,hIDeAction,NulL);
  CallFunc： 包括CallFunc、CallFuncN两个动作，用来在动作中进行方法调用。 
为了节约内存资源，可以在动作完成后调用相应函数清理内存auto actionMoveDone = CallFuncN::create([&](Ref* sender){        log("Clear memory");    });    auto moveto = Moveto::create(0.4f,actionMoveDone,NulL);//
  二、持续动作  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,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 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缓冲、d性缓冲、跳跃缓冲和回震缓冲。每类运动都包含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,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,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( Scenescene ) 方法可直接使用传入的scene替换当前场景来切换画面，当前场景会被释放，它是切换场景时最常用的方法。
 前面说过，场景转换的一系列类都继承于Scene类，所以可以创建一个转场类替代scene，从而实现各种转场的效果。
 `static TransitionMoveInLcreate(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));    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引擎笔记——渲染和动画全部内容，希望文章能够帮你解决Cocos2dx引擎笔记——渲染和动画所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
原文地址:https://54852.com/web/1070802.html