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

前端之家收集整理的这篇文章主要介绍了Cocos2dx引擎笔记——渲染和动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

笛卡尔坐标系

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

屏幕坐标系和Cocos2d坐标系

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

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


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

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

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

锚点(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值,将红色层放在屏幕左下角,绿色层添加到红色层上:

  1. auto red = LayerColor::create(Color4B(255,100,128),visibleSize.width/2,visibleSize.height/2);
  2.  
  3. auto green = LayerColor::create(Color4B(100,255,visibleSize.width/4,visibleSize.height/4);
  4.  
  5. red->addChild(green);
  6.  
  7. this->addChild(red,0);

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

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

  1. 忽略锚点(Ignore Anchor Point)

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

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

  4. 我们用以下代码为例,将两个层的ignoreAnchorPointForPosition设为true,并将绿色的层添加到红色的层上:

  5. auto red = LayerColor::create(Color4B(255,visibleSize.height/2); @H_404_2@red->ignoreAnchorPointForPosition(true);@H_404_2@ 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);@H_404_2@
  6. VertexZPositionZzOrder

    • VerextZOpenGL坐标系中的Z
    • PositionZCocos2d-x坐标系中Z值,越大层次越在上。
    • zOrderCocos2d-x本地坐标系中Z@H_404_2@
  7. @H_404_2@实际开发中我们只需关注zOrder@H_404_2@。可以通过@H_404_2@setPositionZ接口来设置PositionZ。以下是@H_404_2@setPositionZ接口的说明:@H_404_2@

  8. Sets the 'z' coordinate in the position. It is the OpenGL Z vertex value.
  9. PositionZ的值即为openglzVertexZ。同样节点的PositionZ也是决定了该节点的渲染顺序,值越大,但是与zOrder不同的区别在于,PositionZ是全局渲染顺序即在根节点上的渲染顺序,而zOrder则是局部渲染顺序,即该节点在其父节点上的渲染顺序,与Node的层级有关。用以下事例来说明:

  10.  虽然greenzOrder大于redzOder,但是因为redPositionZ较大,所以red还是在green上面显示

  11. 触摸点(Touch position)

  12. 所以在处理触摸事件时需要用重写以下四个函数

  13. virtual bool onTouchBegan(Touch *touch,Event * event);
  14.     virtual void onTouchEnded(Touch *touch,Event * event);
  15.     virtual void onTouchCancelled(Touch *touch,Event * event);
  16.     virtual void onTouchMoved(Touch *touch,Event * event);
  17. @H_404_2@游戏逻辑时需要用到触摸点在Cocos2d坐标系中的位置,就需要将touch的坐标转换成OpenGL坐标系中的点坐标。

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

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

  20. 世界坐标系和本地坐标系的相互转换方法@H_404_2@

  21. // 把世界坐标转换到当前节点的本地坐标系中
  22.     Point convertToNodeSpace(const Point& worldPoint) const;
  23.     // 把基于当前节点的本地坐标系下的坐标转换到世界坐标系中
  24.     Point convertToWorldSpace(const Point& nodePoint) const;
  25.     // 基于Anchor Point把基于当前节点的本地坐标系下的坐标转换到世界坐标系中
  26.     Point convertToNodeSpaceAR(const Point& worldPoint) const;
  27.     // 基于Anchor Point把世界坐标转换到当前节点的本地坐标系中
  28.     Point convertToWorldSpaceAR(const Point& nodePoint) const;
  29. 下面通过一个例子来说明这四个方法的理解和作用:

  30. auto *sprite1 = Sprite::create("HelloWorld.png");
  31.     sprite1->setPosition(ccp(20,40));
  32.     sprite1->setAnchorPoint(ccp(0,0));
  33.     this->addChild(sprite1);  //此时添加到的是世界坐标系,也就是OpenGL坐标系
  34.     auto *sprite2 = Sprite::create("HelloWorld.png");
  35.     sprite2->setPosition(ccp(-5,-20));
  36.     sprite2->setAnchorPoint(ccp(1,1));
  37.     this->addChild(sprite2); //此时添加到的是世界坐标系,也就是OpenGL坐标系
  38.     //将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的本地(节点)坐标系统的 位置坐标
  39.     Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());
  40.     //将 sprite2 这个节点的坐标ccp(-5,-20) 转换为 sprite1节点 下的世界坐标系统的 位置坐标
  41.     Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());
  42.     log("position = (%f,%f)",point1.x,point1.y);
  43.     log("position = (%f,point2.x,point2.y);
  44. 运行结果:
  45. Cocos2d: position = (-25.000000,-60.000000)
  46. Cocos2d: position = (15.000000,20.000000)
  47. 其中:Point point1 = sprite1->convertToNodeSpace(sprite2->getPosition());

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

  49. Point point2 = sprite1->convertToWorldSpace(sprite2->getPosition());

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


  51.  
  52. 动作

  53. 原理介绍

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

  56. 一、即时动作@H_404_2@

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

  58. Place: @H_404_2@将节点放置到某个指定位置,其作用与修改节点的position属性相同。@H_404_2@

  59. auto placeAction = Place::create(Point(10,10));
  60. FlipX和FlipY: @H_404_2@将精灵沿X轴和Y轴反向显示。@H_404_2@

  61. auto flipxAction = FlipX::create(true);
  62.     auto moveTo = MoveTo::create(0.4f,Point(0,0));
  63.     auto action = Sequence::create(moveTo,flipxAction,moveTo->reverse(),NULL);//将精灵移动到一端后反向显示再移回原点@H_404_2@
  64. Show和Hide: @H_404_2@显示和隐藏节点,其作用与设置节点的visible属性作用一样。@H_404_2@

  65. auto hideAction = Hide::create();
  66.     auto moveTo = MoveTo::create(0.4f,hideAction,NULL);
  67. CallFunc: @H_404_2@包括CallFunc、CallFuncN两个动作,用来在动作中进行方法调用。@H_404_2@

  68. 为了节约内存资源,可以在动作完成后调用相应函数清理内存@H_404_2@auto actionMoveDone = CallFuncN::create([&](Ref* sender){
  69.         log("Clear memory");
  70.     });
  71.     auto moveTo = MoveTo::create(0.4f,actionMoveDone,NULL);//
  72. 二、持续动作@H_404_2@

  73. 1) 属性变化动作:通过属性值的逐渐变化来实现动画效果。XXTo是表示最终值,而XXBy则表示向量即改变值。@H_404_2@

  74. MoveTo和MoveBy:在规定时间内做直线运动到某个位置。

  75. MoveTo::create(float duration,const Point& position); @H_404_2@//绝对位置
  76.     MoveBy::create(float duration,const Point& position); @H_404_2@//相对位置
  77. JumpTo和JumpBy:以一定的轨迹跳跃到指定位置。

  78. JumpTo::create(float duration,const Point& position,float height,int jumps);
  79.     JumpBy::create(float duration,int jumps);
  80. BezierTo和BezierBy:进行贝塞尔曲线运动。

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

  82. ccBezierConfig bezier; @H_404_2@//1. 创建ccBezierConfig结构体
  83.     bezier.controlPoint_1 = Point(0,0); @H_404_2@//2. 控制点1
  84.     bezier.controlPoint_2 = Point(100,100); @H_404_2@//3. 控制点2
  85.     bezier.endPosition = Point(50,100); @H_404_2@//4. 设置终点
  86.     auto bezierAction = BezierTo::create(0.5f,bezier); @H_404_2@//5. 把结构体传入BezierTo或BezierBy的初始化方法
  87. ScaleTo和ScaleBy: @H_404_2@缩放效果,使节点的缩放系数随时间线性变化。

  88. ScaleTo::create(float duration,float s);
  89.     ScaleBy::create(float duration,float s);
  90. RotateTo和RotateBy: @H_404_2@旋转效果

  91. RotateTo::create(float duration,float deltaAngle);
  92.     RotateBy::create(float duration,float deltaAngle);
  93. 2)视觉特效动作

  94. FadeIn,FadeOut和FateTo:产生淡入淡出效果,和透明变化效果,对应的初始化方法为:

  95. FadeIn::create(float d);    淡入
  96.     FadeOut::create(float d);    淡出 
  97.     FadeTo::create(float duration,GLubyte opacity); 一定时间内透明度变化
  98. TintTo和TintBy: @H_404_2@色调变化。

  99. TintTo::create(float duration,GLubyte red,GLubyte green,GLubyte blue);
  100.     TintBy::create(float duration,GLubyte blue);
  101. Blink: @H_404_2@使节点闪烁,并制定闪烁次数

  102. Blink::create(float duration,int blinks);
  103. Animation: @H_404_2@实现帧动画效果.

  104. //手动创建动画
  105.     auto animation = Animation::create();
  106.     for( int i=1;i<15;i++)
  107.     {
  108.         char szName[100] = {0};
  109.         sprintf(szName,"sprite_%02d.png",i);
  110.         animation->addSpriteFrameWithFile(szName);
  111.     }
  112.     animation->setDelayPerUnit(2.8f / 14.0f);
  113.     animation->setRestoreOriginalFrame(true);
  114.     auto action = Animate::create(animation); @H_404_2@//动画创建后需要一个动画播放器Animate来播放这些动画
  115.     sprite->runAction(Sequence::create(action,action->reverse(),NULL));
  116.     //文件创建动画
  117.     auto cache = AnimationCache::getInstance();
  118.     cache->addAnimationsWithFile("animation.plist");
  119.     auto animation2 = cache->getAnimation("dance_1");
  120.     auto action2 = Animate::create(animation2);
  121.     sprite->runAction(Sequence::create(action2,action2->reverse(),NULL));
  122. 3)复合动作@H_404_2@

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

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

  125.  
  126. DelayTime: @H_404_2@延时动作其实什么都不做,提供一段空白期,它只有一个初始化方法

  127. DelayTime::create(float d);
  128. Repeat/RepeatForever: @H_404_2@反复执行某个动作,通常我们用Repeat和RepeatForever这两个方法执行:

  129. Repeat::create(FiniteTimeAction *action,unsigned int times);
  130.     RepeatForever::create(ActionInterval *action);
  131. Spawn: @H_404_2@使一批动作同时执行。

  132. Spawn::create(FiniteTimeAction *action1,...);
  133.     Spawn::create(const Vector<FiniteTimeAction*>& arrayOfActions);
  134. Sequence: @H_404_2@让各种动作有序执行。

  135. Sequence::create(FiniteTimeAction *action1,...);
  136.     Sequence::create(const Vector<FiniteTimeAction*>& arrayOfActions);
  137. 4)变速动作 @H_404_2@把任何动作按照改变后的速度执行。@H_404_2@

  138. Speed: @H_404_2@ @H_404_2@线性的改变@H_404_2@某个动作的速度,为了改变一个动作的速度,首先需要将目标动作包装到Speed动作中:@H_404_2@

  139. auto repeat = RepeatForever::create(animation);
  140.     auto speed = Speed::create(repeat,0.5f); @H_404_2@//第二个参数为变速比例,设置为0.5f则速度为原来一半。
  141.     sprite->runAction(speed);
  142. ActionEase: @H_404_2@@H_404_2@实现动作的速度又快到慢、速度随时间改变的匀速运动。该类包含5类运动:指数缓冲、Sine缓冲、弹性缓冲、跳跃缓冲和回震缓冲。每类运动都包含3个不同时期的变换:In、Out和InOut。以下以InSine为例:

  143. auto sineIn = EaseSineIn::create(action);
  144.     sprite->runAction(sineIn);

  145.  
  146. 序列帧动画@H_404_2@

  147.  
  148. 简介

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

  150. @H_404_2@Animation类描述一个动画;Animate播放动画,并由精灵执行。@H_404_2@

  151. 一、创建方法

  152. ## @H_404_2@手动添加序列帧到Animation类

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

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

  155. @H_404_2@3)创建好Animation实例后,需要创建一个Animate实例来播放序列帧动画。

  156. auto animation = Animation::create();
  157.     for( int i=1;i<15;i++)
  158.     {
  159.         char szName[100] = {0};
  160.         sprintf(szName,"Images/grossini_dance_%02d.png",i);
  161.         animation->addSpriteFrameWithFile(szName); @H_404_2@//添加精灵帧到Animation实例
  162.     }
  163.     // should last 2.8 seconds. And there are 14 frames.
  164.     animation->setDelayPerUnit(2.8f / 14.0f); @H_404_2@//设置每一帧持续时间,以秒为单位
  165.     animation->setRestoreOriginalFrame(true); @H_404_2@//设置是否在动画播放结束后恢复到第一帧
  166.     auto action = Animate::create(animation);
  167.     _grossini->runAction(Sequence::create(action,NULL));
  168. ## @H_404_2@通过文件添加Animation类

  169. @H_404_2@plist文件@H_404_2@里保存了组成动画的相关信息,通过该类获取到plist文件里的动画。通过@H_404_2@动画缓存类@H_404_2@AnimationCache可以@H_404_2@加载xml/plist文件,用Animate实例来播放序列帧动画。@H_404_2@。AnimationCache类接口:@H_404_2@

    • getAnimation,从缓存中获取动画对象
    • getInstance获取动画缓存实例对象
  170.  
  171.  auto cache = @H_404_2@AnimationCache::getInstance(); @H_404_2@ cache->addAnimationsWithFile("animations/animations-2.plist");@H_404_2@ auto animation2 = @H_404_2@cache->getAnimation("dance_1"); auto action2 = Animate::create(animation2); _tamara->runAction(Sequence::create(action2,NULL));@H_404_2@
  172. 二、动画缓存(AnimationCache)

  173. @H_404_2@通常情况下,对于一个精灵动画,每次创建时都需要加载精灵帧,按顺序添加到数组,再创建对应动作类,这是一个非常烦琐的计算过程。对于使用频率高的动画,比如走路动画,@H_404_2@利用动画缓存可以有效降低每次创建的巨大消耗@H_404_2@。@H_404_2@

    • static AnimationCache* getInstance(); @H_404_2@//全局共享的单例
    • void addAnimation(Animation *animation,const std::string& name); @H_404_2@//添加一个动画到缓存
    • void addAnimationsWithFile(const std::string& plist); @H_404_2@//添加动画文件到缓存
    • void removeAnimation(const std::string& name); @H_404_2@//移除一个指定的动画
    • Animation* getAnimation(const std::string& name); @H_404_2@//获得事先存入的动画
  174.  
  175. 建议:在内存警告时,应该加入@H_404_2@内存清理缓存@H_404_2@(按照引用层级由高到低,以保证释放引用有效。)@H_404_2@

  176. void releaseCaches()
  177. {
  178.     AnimationCache::destroyInstance(); @H_404_2@//先清理动画缓存
  179.     SpriteFrameCache::getInstance()->removeUnusedSpriteFrames(); @H_404_2@//后清理精灵帧缓存
  180.     TextureCache::getInstance()->removeUnuserdTextures(); @H_404_2@//最后清理纹理缓存
  181. }
  182.  
  183. 三、场景转换(Transitions)

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

  185. 下图是TransitionScene的类关系图:

  186. 主要的切换特效有:

    • TransitionRotoZoom 旋转进入
    • TransitionJumpZoom 跳动进入
    • 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 扇面展开收起
  187.  
  188. 等等,更多效果可查看官方API。场景转换的实现:

  189. auto transitions = TransitionMoveInL::create(0.2f,scene);
  190. Director::getInstance()->replaceScene(transitions);
  191. @H_404_2@场景的转换是由Director类来控制的@H_404_2@,通过调用Director类的replaceScene( Scene@H_404_2@scene ) 方法可直接使用传入的scene替换当前场景来切换画面,当前场景会被释放,它是切换场景时最常用的方法
    前面说过,场景转换的一系列类都继承于Scene类,所以可以创建一个转场类替代scene,从而实现各种转场的效果
    `static TransitionMoveInL
    @H_404_2@create(float t,Scene* scene);`方法中t表示转场到scene的时间。@H_404_2@


  192.  
  193. Cocos2d-x 多分辨率适配完全解析@H_404_2@

  194. 3.0中有以下相关接口:

  195. Director::getInstance()->getOpenGLView()->setDesignResolutionSize() //设计分辨率大小及模式
  196. Director::getInstance()->setContentScaleFactor()  @H_404_2@//内容缩放因子
  197. FileUtils::getInstance()->setSearchPaths()  @H_404_2@//资源搜索路径
  198. Director::getInstance()->getOpenGLView()->getFrameSize() //屏幕分辨率
  199. Director::getInstance()->getWinSize()  @H_404_2@//设计分辨率
  200. Director::getInstance()->getVisibleSize() //设计分辨率可视区域大小
  201. Director::getInstance()->getVisibleOrigin() //设计分辨率可视区域起点
  202. 从cocos2d-2.1beta3-x-2.1.1开始,

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

  204. 从Cocos2d-x 2.1.3开始,新加入了两种ResolutionPolicy(kResolutionFixedHeight, kResolutionFixedWidth),共5中模式。

  205. 官方分别在Multi_resolution_supportMechanism_of_loading_resources有介绍。

  206. 资源分辨率,设计分辨率,屏幕分辨率

  207. Resources width 以下简写为RW,Resources height 以下简写为RH

  208. Design width 以下简写为DW,Design height 以下简写为DH

  209. Screen width 以下简写为SW,Screen height 以下简写为SH

  210.  
  211. 从资源分辨率到设计分辨率@H_404_2@

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

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

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

  215. @H_404_2@setDesignResolutionSize(DW,DH,resolutionPolicy)

  216. ResolutionPolicy::EXACT_FIT@H_404_2@

  217. ResolutionPolicy::SHOW_ALL@H_404_2@

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

  219.  
  220. ResolutionPolicy::EXACT_FIT@H_404_2@

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

  222.  
  223. ResolutionPolicy::NO_BORDER@H_404_2@

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

  225.  
  226. ResolutionPolicy::FIXED_HEIGHT@H_404_2@

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

  228.  
  229. ResolutionPolicy::FIXED_WIDTH@H_404_2@

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

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

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

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

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

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

  237.  
  238. ClippingNode的使用

  239. 概述

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

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

    • ClippingNode 原理:

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

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

  243.  
  244. ClippingNode 常用方法

    1. create

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

      auto clipper = ClippingNode::create();

      也可以使用static ClippingNode* create(Node *stencil);方法创建;在创建的时候指定裁剪模板

      auto stencil = Sprite::create("CloseNormal.png");//模板节点
    1. clipper = ClippingNode::create(stencil);
    1. setStencil 可以使用void setStencil(Node *stencil);方法设置“裁剪模板”节点。 如下:

      clipper->setStencil(stencil);//设置裁剪模板
    1. setInverted

      可以使用void setInverted(bool inverted);方法,设置是显示被裁剪的部分,还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下:

      clipper->setInverted(true);//设置底板可见,显示剩余部分
    1. setAlphaThreshold

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

      clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
  245.  
  246. ClippingNode示例

  247. auto bg = LayerColor::create(Color4B(255,255));
  248.     this->addChild(bg,-1);//1
  249.     auto stencil = Sprite::create("CloseNormal.png");
  250.     stencil->setScale(2);//2
  251.     auto clipper = ClippingNode::create();
  252.     clipper->setStencil(stencil);//设置裁剪模板 //3
  253.     clipper->setInverted(true);//设置底板可见
  254.     clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
  255.     this->addChild(clipper);//4
  256.     auto content = Sprite::create("HelloWorld.png");//被裁剪的内容
  257.     clipper->addChild(content);//5
  258.     clipper->setPosition(Vec2(visibleSize.width/2 + origin.x,visibleSize.height/2 + origin.y));
    1. 添加了一个白色的LayerColor作为背景层。
    1. 创建一个精灵,作为裁剪模板,并放大2倍
    1. 创建ClippingNode节点,并设置裁剪模板
    1. 设置裁剪显示,Alpha阈值,并将裁剪节点加到层中
    1. 设置被裁剪的内容
  259.  
  260. 运行效果如图:

  261. clipper->setInverted(true);改为clipper->setInverted(false);运行效果如图:

  262.  


  263.  
  264. 声明:本文是对http://www.cocos.com/帮助文档的阅读笔记。@H_404_2@

猜你在找的Cocos2d-x相关文章