cocos2d-objc 3.0+ 游戲開發學習手冊

圖片來自網絡

導語

在游戲中,角色(cocos2d中的術語為精靈)都是具有豐富的動作效果,合理的使用這些動作比如閃爍,跳躍,翻轉,都會帶來體驗上的差異.cocos2d為我們提供了多種CCAction類,本文通過對CCAction的簡單使用示例,幫助大家了解在實際應用中如何借助這些Action實現自己的動畫效果.

CCActionMoveTo

在cocos2d 3.0之前的版本中,位移動作是CCMoveTo,在3.0新版本之后所有的命名都發生了變化: CCAction+動作名稱.

• 示例1:(在MainScene.m的init 方法中添加代碼) // 設置背景 CCNodeColor *bg = [CCNodeColor nodeWithColor:CCColor.grayColor]; [self addChild:bg]; // 創建精靈 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加動畫 : 用2秒的時間移動到位置(300,100) CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; [qq runAction:moveAction];

運行效果:

moveTo

CCActionSequence

根據示例我們看到,在cocos2d中實現動畫非常簡單! 但有時候我們需要游戲角色(精靈)執行的動畫可能是比較復雜的,例如移動一段距離后翻轉或者放大或者閃爍等,因此我們需要執行一組動作才可以,cocos2d已經為我們提供了一個CCActionSequence 動作隊列來實現這種需求.

• 示例2: 組合動畫 // 創建精靈 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加動畫 CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; // 添加動畫2 CCActionMoveTo *action2 = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 300)]; // 添加動畫3 CCActionMoveTo *action3 = [CCActionMoveTo actionWithDuration:2.0 position:ccp(150, 300)]; // 添加動畫4 : 閃爍3次 CCActionBlink *action4 = [CCActionBlink actionWithDuration:2.0 blinks:3]; // 添加動畫5 : 放大2倍 CCActionScaleTo *action5 = [CCActionScaleTo actionWithDuration:2.0 scale:2]; // 創建動畫執行隊列,并添加需要執行的動作 CCActionSequence *sequence = [CCActionSequence actions:moveAction,action2,action3,action4,action5, nil]; // 運行動畫 [qq runAction:sequence];

運行效果:

組合動畫

CCActionCallFunc

游戲開發中我們經常需要在某個動作執行完畢后再做一些業務邏輯上的處理,這就需要我們監聽某個動畫的完成情況.cocos2d中我們常常使用CCActionCallFunc來監聽一個動畫結束后的回調處理.

• 示例3: 監聽動畫完成 // 創建精靈 CCSprite *qq = [CCSprite spriteWithImageNamed:@"qq.png"]; qq.position = ccp(100, 100); [self addChild:qq]; // 添加動畫 CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2.0 position:ccp(300, 100)]; // 添加動畫回調動作 CCActionCallFunc *endAction = [CCActionCallFunc actionWithTarget:self selector:@selector(endMoveToAction)]; // 創建動畫執行隊列 CCActionSequence *sequence = [CCActionSequence actions:moveAction,endAction, nil]; [qq runAction:sequence];

動畫完成回調方法:

 - (void)endMoveToAction{        CCLOG(@"動畫執行完畢 ~~");    }

運行效果:

動畫完畢回調

Touch(觸摸)

cocos2d中如果要響應觸摸,需要在顯示的場景類(MainScene)中開啟用戶交互:

// 設置開啟觸摸  self.userInteractionEnabled = YES;

然后實現觸摸響應的方法即可:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{         // 獲取觸摸位置        CGPoint p = [touch locationInNode:self];        // 創建動畫        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:2 position:p];        // 運行動畫        [self.qq runAction:moveAction];  }

示例效果:

觸摸移動效果

運行上面觸摸的例子后,如果你多次連續點擊屏幕,會發現精靈圖片(本例中的qq圖片)移動的最后結果與我們實際希望的并不相同,甚至會移出屏幕,不必擔心,這是由于CCActionMoveTo類自身的原因: 它本身可以被同時多次調用,但某一刻的結果是每個單次調用的總和,下面我們通過stopAction來修正這個問題~

stopAction

在cocos2d中我們可以任意的觸發和停止action,經常用到的方法是: stopAction:(CCAction * action) : 停止指定的action stopActionByTag:(NSInteger) : 停止指定tag值的action stopAllActions : 停止所有action 在我們的觸摸示例中,我們可以用stopActionByTag的方式修正代碼,只需要修改兩個地方即可: 1. 在每次觸摸事件開始(touchBegan)時停止上一個動畫 2. 給動畫設置一個tag值 修改后的代碼如下:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{        // 移除上一個動畫效果        [self.qq stopActionByTag:0];        CGPoint p = [touch locationInNode:self];        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:0.3 position:p];         // 給動畫設置tag值        [moveAction setTag:0];        [self.qq runAction:moveAction];}

邊界處理

如果點擊觸摸在屏幕邊緣的時候,我們發現精靈會有一部分內容超出屏幕,導致顯示不完整.例如下圖:

精靈超出屏幕

另外,我們希望移動的時間可以根據距離變化而不同,最后的代碼如下:

- (void)touchBegan:(UITouch *)touch withEvent:(UIEvent *)event{        [self.qq stopActionByTag:0];        CGPoint p = [touch locationInNode:self];        // 獲取屏幕size        CGSize screenSize = [CCDirector sharedDirector].viewSize;        // 根據兩點之間的距離計算移動時間        CGFloat duration = ccpDistance(p, self.qq.position) / 200.0;        // 限制邊界值        p.x = clampf(p.x, self.qq.contentSize.width / 2, screenSize.width - self.qq.contentSize.width / 2);        p.y = clampf(p.y, self.qq.contentSize.height / 2,screenSize.height - self.qq.contentSize.height / 2);        CCActionMoveTo *moveAction = [CCActionMoveTo actionWithDuration:duration position:p];        [moveAction setTag:0];        [self.qq runAction:moveAction];   }

clampf是cocos2d中提供的一個邊界檢測方法,只需要我們提供最大值和最小值,它就會確保我們的值不會超過 這個范圍,其實它的實現也非常簡單:

 float clampf(float value, float min_inclusive, float max_inclusive) {    if (min_inclusive > max_inclusive) {        CC_SWAP(min_inclusive,max_inclusive);    }    return value < min_inclusive ? min_inclusive : value < max_inclusive? value : max_inclusive;}

最終效果:

邊界修正效果

結束語

我們簡單介紹了游戲開發中會經常使用CCAction的用法,很多看似復雜的效果其實都是通過簡單的動畫組合而成.而cocos2d中提供的action也非常豐富,希望大家能夠通過基本的練習可以觸類旁通,因為它們都用法都十分相近,掌握起來也不會特別困難.例如大家可以思考一下如何實現一個始終運動的游戲背景,就像下面這樣:

運動背景

悄悄提示: CCActionRepeatForever 可以實現不斷重復的效果,然后再根據本文介紹的內容就完全可以實現這樣的需求了,大家快動動手吧~~