本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010
我们今天要学习到的基本动作有跳跃动作、贝塞尔曲线动作、淡入淡出动作、闪烁动作、色值渐变动作。
一、跳跃动作
1、首先看CCJumpTo和CCJumpBy的使用。
<1> CCJumpTo::create(float duration,const CCPoint& position,float height,int jumps)
作用:创建一个跳跃的动作。
参数1:跳跃到目标位置所需的时间(秒)。
参数2:目标位置。
参数3:跳的高度。
参数4:跳到目标点所需跳的次数。
<2> CCJumpBy::create(float duration,const CCPoint& position,float height,int jumps)
作用:创建一个跳跃的动作。
参数1:跳跃到目标位置所需的时间(秒)。
参数2:目标位置。
参数3:跳的高度。
参数4:跳到目标点所需跳的次数。
CCJumpBy支持reverse()函数,可以获取其反向动作。
2、示例代码如下所示。
首先新建Cocos2D-X项目,然后在HelloWorldScene.cpp文件的init函数中添加如下代码。
bool HelloWorld::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
//获得尺寸大小
CCSize s = CCDirector::sharedDirector()->getWinSize();
//创建精灵
CCSprite* m_grossini = CCSprite::create("grossini.png");
CCSprite* m_tamara = CCSprite::create("grossinis_sister1.png");
CCSprite* m_kathia = CCSprite::create("grossinis_sister2.png");
//创建跳跃的动作
CCActionInterval* actionTo = CCJumpTo::create(2, ccp(300,300), 50, 4);
CCActionInterval* actionBy = CCJumpBy::create(2, ccp(300,0), 50, 4);
CCActionInterval* actionUp = CCJumpBy::create(2, ccp(0,0), 80, 4);
CCActionInterval* actionByBack = actionBy->reverse();
//为精灵执行动作
m_tamara->runAction( actionTo);
m_grossini->runAction( CCSequence::create(actionBy, actionByBack, NULL));
m_kathia->runAction( CCRepeatForever::create(actionUp));CCActionInterval* actionTo = CCJumpTo::create(2, ccp(300,300), 50, 4);
bRet = true;
} while (0);
return bRet;
}
3、跳跃示例效果图。
二、贝塞尔曲线动作
1、首先看CCBezierTo和CCBezierBy的使用。
<1> CCBezierTo::create(float t,const ccBezierConfig & c)
作用:创建一个贝塞尔曲线运动的动作。
参数1:贝塞尔曲线运动所需的时间(秒)。
参数2:ccBezierConfig结构体。
ccBezierConfig结构体如下:
typedef struct _ccBezierConfig {
CCPoint endPosition;
CCPoint controlPoint_1;
CCPoint controlPoint_2;
} ccBezierConfig
其中,各参数的含义如下。
① endPosition:结束点。
② controlPoint_1:控制点1。
③ controlPoint_2:控制点2。
<2> CCBezierBy::create(float t,const ccBezierConfig & c)
作用:创建一个贝塞尔曲线运动的动作。
参数1:贝塞尔曲线运动所需的时间(秒)。
参数2:ccBezierConfig结构体。
CCBezierBy支持reverse()函数,可以获取其反向动作。
2、示例代码如下所示。
首先新建Cocos2D-X项目,然后在HelloWorldScene.cpp文件的init函数中添加如下代码。
bool HelloWorld::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
//获得尺寸大小
CCSize s = CCDirector::sharedDirector()->getWinSize();
//创建精灵
CCSprite* m_grossini = CCSprite::create("grossini.png");
CCSprite* m_tamara = CCSprite::create("grossinis_sister1.png");
CCSprite* m_kathia = CCSprite::create("grossinis_sister2.png");
//设置精灵的位置
m_grossini->setPosition(ccp(s.width/2, s.height/2));
m_tamara->setPosition(ccp(80,160));
m_kathia->setPosition(ccp(400,160));
//添加精灵到图层
addChild(m_grossini, 1);
addChild(m_tamara, 2);
addChild(m_kathia, 3);
//bezier结构体
ccBezierConfig bezier;
bezier.controlPoint_1 = ccp(0, s.height/2);
bezier.controlPoint_2 = ccp(300, -s.height/2);
bezier.endPosition = ccp(300,100);
CCActionInterval* bezierForward = CCBezierBy::create(3, bezier);
CCActionInterval* bezierBack = bezierForward->reverse();
CCAction* rep = CCRepeatForever::create(CCSequence::create( bezierForward, bezierBack, NULL));
//bezier2结构体
ccBezierConfig bezier2;
bezier2.controlPoint_1 = ccp(100, s.height/2);
bezier2.controlPoint_2 = ccp(200, -s.height/2);
bezier2.endPosition = ccp(240,160);
CCActionInterval* bezierTo1 = CCBezierTo::create(2, bezier2);
CCActionInterval* bezierTo2 = CCBezierTo::create(2, bezier2);
m_grossini->runAction(rep);
m_tamara->runAction(bezierTo1);
m_kathia->runAction(bezierTo2);
bRet = true;
} while (0);
return bRet;
}
3、贝塞尔曲线示例效果图。
三、淡入淡出动作
1、首先看CCFadeIn和CCFadeOut的使用。
<1> CCFadeIn::create(float d)
作用:创建一个渐变出现的动作。
参数:渐变所需的时间(秒)。
<2> CCFadeOut::create(float d)
作用:创建一个渐变消失的动作。
参数:渐变所需的时间(秒)。
2、示例代码如下所示。
首先新建Cocos2D-X项目,然后在HelloWorldScene.cpp文件的init函数中添加如下代码。
bool HelloWorld::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
//获得尺寸大小
CCSize s = CCDirector::sharedDirector()->getWinSize();
//创建精灵
CCSprite* m_tamara = CCSprite::create("grossinis_sister1.png");
CCSprite* m_kathia = CCSprite::create("grossinis_sister2.png");
//设置精灵的位置
m_kathia->setPosition( ccp(s.width/3, s.height/2));
m_tamara->setPosition( ccp(2*s.width/3, s.height/2));
//添加精灵到图层
addChild(m_tamara, 2);
addChild(m_kathia, 3);
m_tamara->setOpacity( 0 );
CCActionInterval* action1 = CCFadeIn::create(1.0f);
CCActionInterval* action1Back = action1->reverse();
CCActionInterval* action2 = CCFadeOut::create(1.0f);
CCActionInterval* action2Back = action2->reverse();
m_tamara->runAction( CCSequence::create( action1, action1Back, NULL));
m_kathia->runAction( CCSequence::create( action2, action2Back, NULL));
bRet = true;
} while (0);
return bRet;
}
3、淡入淡出的示例效果图。
四、闪烁动作
1、首先看CCBlink的使用。
<1> CCBlink::create(float duration,unsigned int uBlinks)
作用:创建一个闪烁的动作。
参数1:闪烁完成所需的时间(秒)。
参数2:闪烁的次数。
2、示例代码如下所示。
首先新建Cocos2D-X项目,然后在HelloWorldScene.cpp文件的init函数中添加如下代码。
bool HelloWorld::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
//获得尺寸大小
CCSize s = CCDirector::sharedDirector()->getWinSize();
//创建精灵
CCSprite* m_tamara = CCSprite::create("grossinis_sister1.png");
CCSprite* m_kathia = CCSprite::create("grossinis_sister2.png");
//设置精灵的位置
m_kathia->setPosition( ccp(s.width/3, s.height/2));
m_tamara->setPosition( ccp(2*s.width/3, s.height/2));
//添加精灵到图层
addChild(m_tamara, 2);
addChild(m_kathia, 3);
CCActionInterval* action1 = CCBlink::create(2, 10);
CCActionInterval* action2 = CCBlink::create(2, 5);
m_tamara->runAction( action1);
m_kathia->runAction(action2);
bRet = true;
} while (0);
return bRet;
}
3、闪烁的示例效果图。
五、色值渐变动作
1、首先看CCTintTo和CCTintBy的使用。
<1> CCTintTo::create(float duration,GLubyte red,GLubyte green,GLubyte bule)
作用:创建一个色彩变化的动作。
参数1:色彩变化所需的时间(秒)。
参数2:红色分量。
参数3:绿色分量。
参数4:蓝色分量。
<2> CCTintBy::create(float duration,GLubyte red,GLubyte green,GLubyte bule)
作用:创建一个色彩变化的动作。
参数1:色彩变化所需的时间(秒)。
参数2:红色分量。
参数3:绿色分量。
参数4:蓝色分量。
CCTintBy支持reverse()函数,可以获取其反向动作。
2、示例代码如下所示。
首先新建Cocos2D-X项目,然后在HelloWorldScene.cpp文件的init函数中添加如下代码。
bool HelloWorld::init()
{
bool bRet = false;
do
{
CC_BREAK_IF(! CCLayer::init());
//获得尺寸大小
CCSize s = CCDirector::sharedDirector()->getWinSize();
//创建精灵
CCSprite* m_tamara = CCSprite::create("grossinis_sister1.png");
CCSprite* m_kathia = CCSprite::create("grossinis_sister2.png");
//设置精灵的位置
m_kathia->setPosition( ccp(s.width/3, s.height/2));
m_tamara->setPosition( ccp(2*s.width/3, s.height/2));
//添加精灵到图层
addChild(m_tamara, 2);
addChild(m_kathia, 3);
CCActionInterval* action1 = CCTintTo::create(2, 255, 0, 255);
CCActionInterval* action2 = CCTintBy::create(2, -127, -255, -127);
CCActionInterval* action2Back = action2->reverse();
m_tamara->runAction( action1);
m_kathia->runAction( CCSequence::create( action2, action2Back, NULL));
bRet = true;
} while (0);
return bRet;
}
3、色值渐变的示例效果图。