cocos2dで手軽にアニメーション
•
7 likes•7,486 views
第13回 名古屋iPhone開発者勉強の発表で使った資料です。 cocos2dの基本アニメーションをまとめてあります。
Recommended
More Related Content
More from Tomotsune Murata
cocos2dで手軽にアニメーション
- 1. cocos2dで 手軽にアニメーション ワンダープラネット株式会社 取締役 CTO 村田 知常 【名古屋】第13回 iPhoneアプリ開発勉強会 2013.2.16 13年2月18日月曜日 1
- 2. とも つね 【自己紹介】 村田 知常 プロフィール ワンダープラネット株式会社 取締役 CTO 出没する勉強会 iPhoneアプリ開発勉強会、JAWS-UG 【facebook】 tomotsune.murata、【twitter】 @tomo2neco 職歴 業務システムのソフトウェア開発（.NET、Java） ↓ ワンダープラネット株式会社 ( 旧：（株）オープンキューブ 名古屋アプリケーション開発センター ) 13年2月18日月曜日 2
- 3. ワンダープラネット株式会社 事業内容 スマートフォン・タブレット向けアプリーション・ゲームの 企画・開発・運営・販売 設立 2012年9月3日 ホームページ http://wonderpla.net Facebookページ https://www.facebook.com/wonderplanet.nagoya 13年2月18日月曜日 3
- 4. プロダクト ■iPhone/iPad くるるファンタズマ ■iPhone 名古屋コーチンがいく！ ■iPhone/iPad Panic Farm 13年2月18日月曜日 4
- 5. 名古屋コーチンがいく！ HALのインターンシップ生(2名)が作成 企画∼作成まで1ヶ月 インターンシップとして来た時は Objective-Cを知らなかった 13年2月18日月曜日 5
- 6. そんな経験の無い彼らが 名古屋コーチンがいく！！ を短期間で作成できたのは cocos2dがあったから！！ 13年2月18日月曜日 6
- 8. cocos2dとは① オープンソースのフレームワーク 「OpenGL ES」を用いているため 高速に動作 商用利用が可能 対応するツールが多い 13年2月18日月曜日 8
- 9. cocos2dとは② cocos2dには様々なファミリー cocos2d for iPhone cocos2d-x cocos2d HTML5 13年2月18日月曜日 9
- 10. Let’s Action !! 13年2月18日月曜日 10
- 11. 移動 CCMoveBy 今いるpositionに指定した分を足したpositionに移動する 例：1秒かけて、X座標に+20、Y座標に-10 [CCMoveBy actionWithDuration:1.0f position:ccp(20, -10)] CCMoveTo 指定したpositionに移動する 例：1秒かけて、X座標に110、Y座標に320 [CCMoveTo actionWithDuration:1.0f position:ccp(110, 320)] 13年2月18日月曜日 11
- 12. ジャンプ① CCJumpBy [CCJumpBy actionWithDuration:1.0f position:ccp(100,0) height:200 jumps:3] 1秒かけて 今のpositionからX座標に+100、Y座標に+0のpositionへ 高さ200のジャンプを3回行って移動 13年2月18日月曜日 12
- 13. ジャンプ② CCJumpTo [CCJumpTo actionWithDuration:1.0f position:ccp(300, 100) height:200 jumps:3] 1秒かけて X座標:300、Y座標:100のpositionへ 高さ200のジャンプを3回行って移動 13年2月18日月曜日 13
- 14. ベジェ曲線① CCBezierBy // ベジェ曲線が通過するpositionを設定 ccBezierConfig config; config.controlPoint_1 = ccp(-100, 50); config.controlPoint_2 = ccp(50, 50); config.endPoint = ccp(50, 50) // ベジェ曲線のactionを生成 [CCBezeirBy actionWithDuration:1.0f bezier:config] 1秒かけて controlPoint_1 → controlPoint_2 → endPoint と通過するベジェ曲線を描くように移動 通過点は、現在のpositionに各指定値を加算したposition 13年2月18日月曜日 14
- 15. ベジェ曲線② CCBezierTo // ベジェ曲線が通過するpositionを設定 ccBezierConfig config; config.controlPoint_1 = ccp(200, 100); config.controlPoint_2 = ccp(50, 250); config.endPoint = ccp(100, 100) // ベジェ曲線のactionを生成 [CCBezeirTo actionWithDuration:1.0f bezier:config] 1秒かけて controlPoint_1 → controlPoint_2 → endPoint と通過するベジェ曲線を描くように移動 通過点は、各指定値 13年2月18日月曜日 15
- 16. 回転 CCRotateBy 今いるrotateに指定した分を足したrotateに回転する 例：1秒かけて、45度 右回転 [CCRotateBy actionWithDuration:1.0f angle:45] CCRotateTo 指定したrotateに回転する 例：1秒かけて、180度に右回転 [CCRotateTo actionWithDuration:1.0f angle:180] 13年2月18日月曜日 16
- 17. 拡大・縮小 CCScaleBy 今のサイズを指定した分拡大・縮小する 例：1秒かけて、今のサイズを1.25倍（＝拡大） [CCScaleBy actionWithDuration:1.0f scale:1.25f] 例：1秒かけて、今のサイズを0.5倍（＝縮小） [CCScaleBy actionWithDuration:1.0f scale:0.5f] CCScaleTo 指定したscale値に拡大・縮小する 例：1秒かけて、2倍のサイズ [CCScaleTo actionWithDuration:1.0f scale:2.0f] 13年2月18日月曜日 17
- 18. フェード CCFadeIn 指定した時間をかけてフェードインする 例：3秒かけて、フェードイン [CCFadeIn actionWithDuration:3.0f] CCFadeOut 指定した時間をかけてフェードアウトする 例：3秒かけて、フェードアウト [CCFadeOut actionWithDuration:3.0f] CCFadeTo 指定した透過度にフェードする 例：3秒かけて、透過度127にフェード [CCFadeOut actionWithDuration:3.0f opacity:127] 13年2月18日月曜日 18
- 19. Actionを順番に CCSequence // 2秒かけて X座標100, Y座標100へ移動 id action1 = [CCMoveTo actionWithDuration:2.0f position:ccp(100,100)]; // 1秒かけて、X座標+80(=180), Y座標+80(=180)のpostionへ移動 id action2 = [CCMoveBy actionWithDuration:1.0f position:ccp(80,80)]; // 3秒かけて、X座標+0(=100), Y座標+80(=180)のpositionへ移動 id action3 = [CCMoveBy actionWithDuration:0.5f position:ccp(0,80)]; // action1∼3を順番にアニメーション [CCSequence actions:action1, action2, action3, nil]; action1→action2→action3と順番に実行 13年2月18日月曜日 19
- 20. 複数Actionを同時に CCSpawn // 高さ100のジャンプを2回しながらX座標に+100のpositionへ移動 id action1 = [CCJumpBy actionWithDuration:2.0f position:ccp(100,0) height:100 jumps:2]; // 4回転 id action2 = [CCRotateBy actionWithDuration:2.0f angle:(360*4)]; // action1∼2を同時にアニメーション [CCSpawn actions:action1, action2, nil]; action1とaction2を同時に実行 13年2月18日月曜日 20
- 21. Actionを繰り返す CCRepeat // 3倍に拡大しながら、2回転するアクション id action1 = [CCSpawn actions: [CCScaleTo actionWithDuration:0.5f scale:3], [CCRotateBy actionWithDuration:0.5f angle:(360*2)], nil]; // 0.5倍に縮小するアクション id action2 = [CCScaleTo actionWithDuration:0.0f scale:0.5]; // action1∼2を順番に、3回繰り返す [CCRepeat actionWithAction:[CCSequence actions:action1, action2, nil] times:3]; action1とaction2を3回繰り返す 13年2月18日月曜日 21
- 22. Actionを永遠に繰り返す CCRepeatForever // 高さ100のジャンプを2回しながらX座標に+100のpositionへ移動 id action1 = [CCJumpBy actionWithDuration:1.0f position:ccp(100,0) height:100 jumps:3]; // action1のリバース id action2 = [action1 reverse]; // action1∼2を永遠に繰り返す [CCRepeatForever actionWithAction:[CCSequence actions:action1, action2, nil]]; action1とaction2を永遠に繰り返す 13年2月18日月曜日 22
- 23. 色々Actionしたあと メソッドを呼びたい！ 13年2月18日月曜日 23
- 24. CCCallFunc① CCCallFunc 指定したメソッドを呼び出す 例：selfにあるdoATaskメソッドを呼び出す [CCCallFunc actionWithTarget:self selector:@selector(doATask)] 呼び出されるメソッドのI/F -(void)doATask 13年2月18日月曜日 24
- 25. CCCallFunc② その他のCallFunc系 CCCallFuncN [CCCallFuncN actionWithTarget:self selector:@selector(doATask:)] Actionを実行した CCSprite CCCallFuncND [CCCallFuncND actionWithTarget:self selector:@selector(doATask:data:) data:pointerToData] 呼び出されるメソッドのI/F -(void)doATask:(id)node data:(void*)d 13年2月18日月曜日 25
- 26. パラパラ漫画のような アニメーション 13年2月18日月曜日 26
- 27. 一番簡単な方法 CCAnimationにパラパラしたい画像を追加し実行 // パラパラさせたい画像を作成 CCSprite *sprite = [CCSprite spriteWithFile:@”xxx1.png”]; // CCAnimationを作成し、パラパラさせる画像を追加 CCAnimation *animation = [CCAnimation animation]; [animation addSpriteFrameWithFilename:@”xxx1.png”]; [animation addSpriteFrameWithFilename:@”xxx2.png”]; ： // アニメーションの設定 animation.delayPerUnit = 0.25f; // 画像1枚あたりの表示時間 animation.loops = -1; // ループ回数（-1は無限ループ） // アクションの実行 [sprite runAction:[CCAnimate actionWithAnimation:animation]]; 13年2月18日月曜日 27
- 28. 対応ツールの例 13年2月18日月曜日 28
- 29. 対応ツールの一部紹介 Glyph Designer http://www.71squared.com/glyphdesigner Particle Designer http://www.71squared.com/particledesigner 13年2月18日月曜日 29
- 30. Glyph Designer Bitmapフォントを生成するツール ■通常のラベル ■Bitmapのラベル 13年2月18日月曜日 30
- 31. Particle Designer Particleを生成するツール 13年2月18日月曜日 31
- 32. cocos2dのProgramming Guide http://www.cocos2d-iphone.org/wiki/doku.php/ prog_guide:index 13年2月18日月曜日 32
- 33. 発表中に使用した サンプルソース http://goo.gl/p5fA4 13年2月18日月曜日 33
- 34. おまけ ∼cocos2dの基本∼ 13年2月18日月曜日 34
- 35. Let’s cocos2d !! 13年2月18日月曜日 35
- 36. セットアップ① cocos2dのサイトからダウンロード http://www.cocos2d-iphone.org/download 13年2月18日月曜日 36
- 37. セットアップ② テンプレートのインストール ダウンロードしたファイルを解凍 ターミナルでフォルダに移動しコマンドを実行 cocos2d-iphone-2.1-rc0 murata$ ./install-templates.sh -u 13年2月18日月曜日 37
- 38. セットアップ③ 成功するとテンプレートに表示されます 13年2月18日月曜日 38
- 39. Hello World 13年2月18日月曜日 39
- 40. Hello World① 「cocos2d iOS」でプロジェクトを作成し実行すると 「Hello World」が表示されます 13年2月18日月曜日 40
- 41. 13年2月18日月曜日 41
- 42. cocos2dの画面構成 13年2月18日月曜日 42
- 43. cocos2dの画面構成① １つの画面をCCScenceで表します CCScene 13年2月18日月曜日 43
- 44. cocos2dの画面構成② CCScenceにCCLayerを貼り付けて(addChild) 色々と描画します CCScene CCLayer 13年2月18日月曜日 44
- 45. cocos2dの画面構成③ 画像ならCCSpriteなどをaddChild テキストならCCLabelTTFなどをaddChild テキスト CCLayer 13年2月18日月曜日 45
- 46. cocos2dの画面遷移 13年2月18日月曜日 46
- 47. cocos2dの画面遷移① CCDirectorクラスが色々と制御してくれます。 CCDirectorはSingletonで実装されています。 次の記述方法でインスタンスを取得します。 [CCDirector sharedDirector] 使用例:sceneの置き換え [[CCDirector sharedDirector] replaceScene:xxx]; 13年2月18日月曜日 47
- 48. cocos2dの画面遷移② 最初に起動するSceneの指定は -(void)runWithScene:(CCScene)scene デフォルトではIntroScenceが指定されています。 AppDelegate.m -(void) directorDidReshapeProjection:(CCDirector*)director { ! if(director.runningScene == nil) { ! ! [director runWithScene: [IntroLayer scene]]; ! } } 13年2月18日月曜日 48
- 49. cocos2dの画面遷移③ 画面遷移を提供する主なメソッド -(void)replaceScene:(CCScene)scene -(void)pushScene:(CCScene)scene -(void)popScene なにがちがうの？(´・ω・`) 13年2月18日月曜日 49
- 50. cocos2dの画面遷移④ まずreplaceScene replace･･･字のごとくsceneの置き換えです！ SceneA SceneB 13年2月18日月曜日 50
- 51. cocos2dの画面遷移⑤ pushSceneとpopSceneはセットで考えましょう pushとpopっていうと、アレしかありませんよね！！ スタックのこれです 最上段のSceneが 見えます 13年2月18日月曜日 51
- 52. cocos2dの部品配置 13年2月18日月曜日 52
- 53. cocos2dの部品配置① 部品の追加はaddChildで追加します。 部品の位置は、positionで指定します。 例:xxx.pngの画像を読み込み、 X座標:100,Y座標100に配置 CCSprite *sprite = [CCSprite spriteWithFile:@”xxx.png”]; sprite.position = ccp(100, 100); [self addChild:sprite]; 13年2月18日月曜日 53
- 54. cocos2dの部品配置② 注意その１ cocos2dでは画面左下が (0, 0)になります (640, 960) (100, 100) (0, 0) 13年2月18日月曜日 54
- 55. cocos2dの部品配置③ 部品に指定したposition、部品の左上では無い！ ・positionの位置は、anchorPointで指定 ・多くの部品は、anchorPointは(0.5, 0.5) つまり部品の中央がpositionで指定した位置に来るよう配置される anchorPoint例 (0.0,1.0) (1.0,1.0) (0.5,0.5) (0.0,0.0) (1.0,0.0) 13年2月18日月曜日 55
- 56. コーヒーブレイク 13年2月18日月曜日 56
- 57. 画面の向きを変えたい！① デフォルトでは横向き 縦方向に変えたい！ 13年2月18日月曜日 57
- 58. 画面の向きを変えたい！② プロジェクトファイルの設定を変えよう！ 13年2月18日月曜日 58
- 59. 画面の向きを変えたい！③ 設定に合わせてコードも修正！ 【変更前】 13年2月18日月曜日 59
- 60. 画面の向きを変えたい！④ 設定に合わせてコードも修正！ 【変更後】 13年2月18日月曜日 60
- 61. コレ消したい！① デフォルトでは表示される コレは、SPFとFPSの表示 SPF(Second Per Frame):1回の描画に何秒かかるか FPS(Fram Per Second):1秒間に何回画面を描画しているか 13年2月18日月曜日 61
- 62. コレ消したい！② AppDelegate.mにある次の一行を変更しましょう // Display FSP and SPF [director_ setDisplayStats:YES]; // Display FSP and SPF [director_ setDisplayStats:NO]; 13年2月18日月曜日 62
- 63. ワンプラニュース 取締役CMOに久手堅氏が就任！！ 1月末で解散したZynga Japanにて マーケティング・PR、マーケットリサーチ、課 金分析、パートナーシップ業務等のビジネス領 域業務全般を担当 業務拡大および人員増加に伴い増床しました！！ 13年2月18日月曜日 63
- 64. ワンプラニュース ワンプラは今年めっちゃ攻めます！！ でも、人が足りません！（＞^＜） エンジニア募集中！！ iOSだけでなくAndroidも！！ 13年2月18日月曜日 64
- 65. ご清聴ありがとうございました 【名古屋】第13回 iPhoneアプリ開発勉強会 2013.2.16 13年2月18日月曜日 65