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值,将红色层放在屏幕左下角,绿色层添加到红色层上:
- 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); @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@
VertexZ,PositionZ和zOrder
- VerextZ是OpenGL坐标系中的Z值
- PositionZ是Cocos2d-x坐标系中Z值,越大层次越在上。
- zOrder是Cocos2d-x本地坐标系中Z值@H_404_2@
在@H_404_2@实际开发中我们只需关注zOrder@H_404_2@。可以通过@H_404_2@
setPositionZ
接口来设置PositionZ。以下是@H_404_2@setPositionZ
接口的说明:@H_404_2@ 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);@H_404_2@游戏逻辑时需要用到触摸点在Cocos2d坐标系中的位置,就需要将touch的坐标转换成OpenGL坐标系中的点坐标。
Touch position是屏幕坐标系中的点@H_404_2@,@H_404_2@OpenGL position是OpenGL坐标系上的点坐标@H_404_2@。通常我们在开发中会使用两个接口@H_404_2@
getLocation()
和@H_404_2@getLocationInView()
来进行相应坐标转换工作。@H_404_2@
getLocation()
获取触摸点的GL坐标@H_404_2@,而getLocation()
内部实现是通过调用Director::getInstance()->convertToGL(_point);
返回GL坐标。@H_404_2@// 把世界坐标转换到当前节点的本地坐标系中
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)。
动作
原理介绍
@H_404_2@动作作用于Node,因此每个动作都需要由Node对象执行。动作类(Action)作为基类,实际上是一个接口,动作类的大多数实现类都派生于有限时间动作类(FiniteTimeAction)。在实际开发中我们通常用到两类动作-即时动作和持续动作,它们均继承于有限时间动作类。
一、即时动作@H_404_2@
@H_404_2@是在下一帧立刻完成的动作,如设定位置、设定缩放等。把它们包装成动作后,可以与其他动作类组合为复杂动作。
Place: @H_404_2@将节点放置到某个指定位置,其作用与修改节点的position属性相同。@H_404_2@
auto placeAction = Place::create(Point(10,10));
FlipX和FlipY: @H_404_2@将精灵沿X轴和Y轴反向显示。@H_404_2@
auto flipxAction = FlipX::create(true);
auto moveTo = MoveTo::create(0.4f,Point(0,0));
auto action = Sequence::create(moveTo,flipxAction,moveTo->reverse(),NULL);//将精灵移动到一端后反向显示再移回原点@H_404_2@Show和Hide: @H_404_2@显示和隐藏节点,其作用与设置节点的visible属性作用一样。@H_404_2@
auto hideAction = Hide::create();
auto moveTo = MoveTo::create(0.4f,hideAction,NULL);
CallFunc: @H_404_2@包括CallFunc、CallFuncN两个动作,用来在动作中进行方法调用。@H_404_2@
为了节约内存资源,可以在动作完成后调用相应函数清理内存@H_404_2@auto actionMoveDone = CallFuncN::create([&](Ref* sender){
log("Clear memory");
});
auto moveTo = MoveTo::create(0.4f,actionMoveDone,NULL);//
二、持续动作@H_404_2@
1) 属性变化动作:通过属性值的逐渐变化来实现动画效果。XXTo是表示最终值,而XXBy则表示向量即改变值。@H_404_2@
MoveTo和MoveBy:在规定时间内做直线运动到某个位置。
MoveTo::create(float duration,const Point& position); @H_404_2@//绝对位置MoveBy::create(float duration,const Point& position); @H_404_2@//相对位置
JumpTo和JumpBy:以一定的轨迹跳跃到指定位置。
JumpTo::create(float duration,const Point& position,float height,int jumps);
JumpBy::create(float duration,int jumps);
BezierTo和BezierBy:进行贝塞尔曲线运动。
@H_404_2@每条贝塞尔曲线都包含一个起点和一个终点。起点和终点各自包含一个控制点,而控制点到端点的连线称作控制线。控制点决定了曲线的形状,包含角度和长度两个参数。如下图:
ccBezierConfig bezier; @H_404_2@//1. 创建ccBezierConfig结构体bezier.controlPoint_1 = Point(0,0); @H_404_2@//2. 控制点1
bezier.controlPoint_2 = Point(100,100); @H_404_2@//3. 控制点2
bezier.endPosition = Point(50,100); @H_404_2@//4. 设置终点
auto bezierAction = BezierTo::create(0.5f,bezier); @H_404_2@//5. 把结构体传入BezierTo或BezierBy的初始化方法中
ScaleTo和ScaleBy: @H_404_2@缩放效果,使节点的缩放系数随时间线性变化。
ScaleTo::create(float duration,float s);
ScaleBy::create(float duration,float s);
RotateTo和RotateBy: @H_404_2@旋转效果
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: @H_404_2@色调变化。
TintTo::create(float duration,GLubyte red,GLubyte green,GLubyte blue);
TintBy::create(float duration,GLubyte blue);
Blink: @H_404_2@使节点闪烁,并制定闪烁次数。
Blink::create(float duration,int blinks);
//手动创建动画
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); @H_404_2@//动画创建后需要一个动画播放器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)复合动作@H_404_2@
@H_404_2@复合动作即将各种动作组合起来再让节点执行,复合动作本身也可以作为一个普通动作嵌入到其他动作中。
注意:Sequence动作不能嵌入其他复合动作内使用,DelayTime不属于复合动作,但是只能在复合动作内使用。
DelayTime: @H_404_2@延时动作其实什么都不做,提供一段空白期,它只有一个初始化方法:
DelayTime::create(float d);
Repeat/RepeatForever: @H_404_2@反复执行某个动作,通常我们用Repeat和RepeatForever这两个方法执行:
Repeat::create(FiniteTimeAction *action,unsigned int times);
RepeatForever::create(ActionInterval *action);
Spawn: @H_404_2@使一批动作同时执行。
Spawn::create(FiniteTimeAction *action1,...);
Spawn::create(const Vector<FiniteTimeAction*>& arrayOfActions);
Sequence: @H_404_2@让各种动作有序执行。
Sequence::create(FiniteTimeAction *action1,...);
Sequence::create(const Vector<FiniteTimeAction*>& arrayOfActions);4)变速动作 @H_404_2@把任何动作按照改变后的速度执行。@H_404_2@
Speed: @H_404_2@ @H_404_2@线性的改变@H_404_2@某个动作的速度,为了改变一个动作的速度,首先需要将目标动作包装到Speed动作中:@H_404_2@
auto repeat = RepeatForever::create(animation);
auto speed = Speed::create(repeat,0.5f); @H_404_2@//第二个参数为变速比例,设置为0.5f则速度为原来一半。sprite->runAction(speed);
ActionEase: @H_404_2@@H_404_2@实现动作的速度又快到慢、速度随时间改变的匀速运动。该类包含5类运动:指数缓冲、Sine缓冲、弹性缓冲、跳跃缓冲和回震缓冲。每类运动都包含3个不同时期的变换:In、Out和InOut。以下以InSine为例:
auto sineIn = EaseSineIn::create(action);
sprite->runAction(sineIn);
序列帧动画@H_404_2@
简介
Cocos2d-x中,动画的具体内容是依靠精灵显示出来的,为了显示动态图片,我们需要不停切换精灵显示的内容,通过把静态的精灵变为动画播放器从而实现动画效果。动画由帧组成,每一帧都是一个纹理,我们可以使用一个纹理序列来创建动画。
@H_404_2@Animation类描述一个动画;Animate播放动画,并由精灵执行。@H_404_2@
一、创建方法
## @H_404_2@手动添加序列帧到Animation类
@H_404_2@1)将每一帧要显示的精灵有序添加到Animation类中,并设置每帧的播放时间,让动画能够匀速播放。
@H_404_2@2)通过
setRestoreOriginalFrame
来设置是否在动画播放结束后恢复到第一帧。@H_404_2@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); @H_404_2@//添加精灵帧到Animation实例}
// should last 2.8 seconds. And there are 14 frames.
animation->setDelayPerUnit(2.8f / 14.0f); @H_404_2@//设置每一帧持续时间,以秒为单位
animation->setRestoreOriginalFrame(true); @H_404_2@//设置是否在动画播放结束后恢复到第一帧
auto action = Animate::create(animation);
_grossini->runAction(Sequence::create(action,NULL));
## @H_404_2@通过文件添加Animation类
@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
,获取动画缓存实例对象
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@
二、动画缓存(AnimationCache)
@H_404_2@通常情况下,对于一个精灵动画,每次创建时都需要加载精灵帧,按顺序添加到数组,再创建对应动作类,这是一个非常烦琐的计算过程。对于使用频率高的动画,比如走路动画,@H_404_2@利用动画缓存可以有效降低每次创建的巨大消耗@H_404_2@。@H_404_2@
- static AnimationCache* getInstance(); @H_404_2@//全局共享的单例
- void removeAnimation(const std::string& name); @H_404_2@//移除一个指定的动画
- Animation* getAnimation(const std::string& name); @H_404_2@//获得事先存入的动画
建议:
在内存警告时,应该加入@H_404_2@内存清理缓存@H_404_2@(按照引用层级由高到低,以保证释放引用有效。)@H_404_2@
void releaseCaches()
{
AnimationCache::destroyInstance(); @H_404_2@//先清理动画缓存
SpriteFrameCache::getInstance()->removeUnusedSpriteFrames(); @H_404_2@//后清理精灵帧缓存
TextureCache::getInstance()->removeUnuserdTextures(); @H_404_2@//最后清理纹理缓存
}
三、场景转换(Transitions)
@H_404_2@场景之间通过TransitionScene系列类来实现过渡跳转的效果。TransitionScene继承于Scene,该系列类主要是与场景切换特效相关的一些使用类。@H_404_2@
下图是TransitionScene的类关系图:
主要的切换特效有:
- TransitionRotoZoom 旋转进入
- TransitionJumpZoom 跳动进入
- TransitionRadialCCW 钟摆效果
- TransitionMoveInL / TransitionMoveInR / TransitionMoveInT / TransitionMoveInB 左侧/右侧/顶部/底部进入
- TransitionSlideInL/TransitionSlideInR/TransitionSlideInT/TransitionSlideInB 分别从左侧/右侧/顶部/底部滑入
- TransitionShrinkGrow 交替进入
- TransitionFlipX/TransitionFlipY x轴翻入(左右)/ y轴翻入(上下)
- TransitionFlipAngular 左上右下轴翻入
- TransitionSplitCols / TransitionSplitRows 竖条切换进入/ 横条切换进入
- TransitionZoomFlipAngular 左上右下轴翻入放大缩小效果
- TransitionFade 渐隐进入
- TransitionCrossFade 渐变进入
- TransitionTurnOffTiles 小方格消失进入
- TransitionRadialCCW/TransitionRadialCW 扇面展开收起
auto transitions = TransitionMoveInL::create(0.2f,scene);
Director::getInstance()->replaceScene(transitions);
@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@
Cocos2d-x 多分辨率适配完全解析@H_404_2@
3.0中有以下相关接口:
Director::getInstance()->getOpenGLView()->setDesignResolutionSize() //设计分辨率大小及模式
Director::getInstance()->setContentScaleFactor() @H_404_2@//内容缩放因子
FileUtils::getInstance()->setSearchPaths() @H_404_2@//资源搜索路径
Director::getInstance()->getOpenGLView()->getFrameSize() //屏幕分辨率
Director::getInstance()->getWinSize() @H_404_2@//设计分辨率
Director::getInstance()->getVisibleSize() //设计分辨率可视区域大小
Director::getInstance()->getVisibleOrigin() //设计分辨率可视区域起点
从cocos2d-2.1beta3-x-2.1.1开始,
CCFileUtils::sharedFileUtils()->setResourceDirectory()被新接口FileUtils::getInstance()->setSearchPaths(searchPath)@H_404_2@替代
从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
从资源分辨率到设计分辨率@H_404_2@
setContentScaleFactor()决定了图片显示到屏幕的缩放因子,这个因子是资源宽、高比设计分辨率宽、高。@H_404_2@
setContentScaleFactor()通常有两个方式来设置参数。 RH/DH或RW/DW,不同的因子选择有不同的缩放负作用。@H_404_2@
从设计分辨率到屏幕分辨率
@H_404_2@setDesignResolutionSize(DW,DH,resolutionPolicy)
ResolutionPolicy::EXACT_FIT@H_404_2@
ResolutionPolicy::SHOW_ALL@H_404_2@
屏幕宽、高分别和设计分辨率宽、高计算缩放因子,取较(小)者作为宽、高的缩放因子。保证了全部显示到屏幕,但可能会有黑边。
ResolutionPolicy::EXACT_FIT@H_404_2@
屏幕宽 与 设计宽比 作为X方向的缩放因子,屏幕高 与 设计高比 作为Y方向的缩放因子。保证完全铺满屏幕,但是可能会变形。
ResolutionPolicy::NO_BORDER@H_404_2@
屏幕宽、高分别和设计分辨率宽、高计算缩放因子,取较(大)者作为宽、高的缩放因子。保证总能有一个方向上铺满屏幕,而另一个方向一般会超出屏幕区域。
ResolutionPolicy::FIXED_HEIGHT@H_404_2@
根据屏幕分辨率修正设计分辨率的宽度。适合高方向需要撑满,宽方向可裁减的游戏,结合setContentScaleFactor(RH/DH)使用。
ResolutionPolicy::FIXED_WIDTH@H_404_2@
根据屏幕分辨率修正设计分辨率的高度。适合宽方向需要撑满,高方向可裁减的游戏,结合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 常用方法
clipper = ClippingNode::create(stencil);
setStencil 可以使用
void setStencil(Node *stencil);
方法设置“裁剪模板”节点。 如下:clipper->setStencil(stencil);//设置裁剪模板
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/帮助文档的阅读笔记。@H_404_2@