Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
cocos2dで              手軽にアニメーション                                ワンダープラネット株式会社                                 取締役    CTO  ...
とも つね              【自己紹介】 村田  知常        プロフィール              ワンダープラネット株式会社  取締役  CTO              出没する勉強会              iPho...
ワンダープラネット株式会社              事業内容              スマートフォン・タブレット向けアプリーション・ゲームの              企画・開発・運営・販売              設立         ...
プロダクト       ■iPhone/iPad              くるるファンタズマ       ■iPhone              名古屋コーチンがいく!       ■iPhone/iPad              Pan...
名古屋コーチンがいく!         HALのインターンシップ生(2名)が作成         企画∼作成まで1ヶ月         インターンシップとして来た時は         Objective-Cを知らなかった13年2月18日月曜日 ...
そんな経験の無い彼らが              名古屋コーチンがいく!!              を短期間で作成できたのは               cocos2dがあったから!!13年2月18日月曜日                  ...
cocos2d とは?13年2月18日月曜日                 7
cocos2dとは①              オープンソースのフレームワーク              「OpenGL ES」を用いているため              高速に動作              商用利用が可能          ...
cocos2dとは②              cocos2dには様々なファミリー               cocos2d for iPhone               cocos2d-x               cocos2d H...
Let’s Action !!13年2月18日月曜日                     10
移動              CCMoveBy              今いるpositionに指定した分を足したpositionに移動する              例:1秒かけて、X座標に+20、Y座標に-10             ...
ジャンプ①              CCJumpBy              [CCJumpBy actionWithDuration:1.0f                        position:ccp(100,0)     ...
ジャンプ②              CCJumpTo              [CCJumpTo actionWithDuration:1.0f                        position:ccp(300, 100)  ...
ベジェ曲線①              CCBezierBy              // ベジェ曲線が通過するpositionを設定              ccBezierConfig config;              conf...
ベジェ曲線②              CCBezierTo              // ベジェ曲線が通過するpositionを設定              ccBezierConfig config;              conf...
回転              CCRotateBy              今いるrotateに指定した分を足したrotateに回転する              例:1秒かけて、45度 右回転              [CCRotate...
拡大・縮小              CCScaleBy              今のサイズを指定した分拡大・縮小する              例:1秒かけて、今のサイズを1.25倍(=拡大)              [CCScaleBy...
フェード              CCFadeIn              指定した時間をかけてフェードインする              例:3秒かけて、フェードイン              [CCFadeIn actionWithDu...
Actionを順番に              CCSequence          // 2秒かけて X座標100, Y座標100へ移動          id action1 = [CCMoveTo actionWithDuration:...
複数Actionを同時に              CCSpawn          // 高さ100のジャンプを2回しながらX座標に+100のpositionへ移動          id action1 = [CCJumpBy action...
Actionを繰り返す              CCRepeat          // 3倍に拡大しながら、2回転するアクション          id action1 = [CCSpawn actions:                ...
Actionを永遠に繰り返す              CCRepeatForever          // 高さ100のジャンプを2回しながらX座標に+100のpositionへ移動          id action1 = [CCJum...
色々Actionしたあと              メソッドを呼びたい!13年2月18日月曜日                  23
CCCallFunc①              CCCallFunc              指定したメソッドを呼び出す              例:selfにあるdoATaskメソッドを呼び出す              [CCCall...
CCCallFunc②       その他のCallFunc系              CCCallFuncN              [CCCallFuncN actionWithTarget:self                  ...
パラパラ漫画のような               アニメーション13年2月18日月曜日                26
一番簡単な方法              CCAnimationにパラパラしたい画像を追加し実行          // パラパラさせたい画像を作成          CCSprite *sprite = [CCSprite spriteWit...
対応ツールの例13年2月18日月曜日             28
対応ツールの一部紹介              Glyph Designer              http://www.71squared.com/glyphdesigner              Particle Designer ...
Glyph Designer              Bitmapフォントを生成するツール              ■通常のラベル       ■Bitmapのラベル13年2月18日月曜日                          ...
Particle Designer              Particleを生成するツール13年2月18日月曜日                              31
cocos2dのProgramming Guide     http://www.cocos2d-iphone.org/wiki/doku.php/                   prog_guide:index13年2月18日月曜日  ...
発表中に使用した              サンプルソース               http://goo.gl/p5fA413年2月18日月曜日                          33
おまけ              ∼cocos2dの基本∼13年2月18日月曜日                  34
Let’s cocos2d !!13年2月18日月曜日                      35
セットアップ①              cocos2dのサイトからダウンロード              http://www.cocos2d-iphone.org/download13年2月18日月曜日                   ...
セットアップ②              テンプレートのインストール                ダウンロードしたファイルを解凍                ターミナルでフォルダに移動しコマンドを実行              cocos2...
セットアップ③              成功するとテンプレートに表示されます13年2月18日月曜日                        38
Hello World13年2月18日月曜日                 39
Hello World①              「cocos2d iOS」でプロジェクトを作成し実行すると              「Hello World」が表示されます13年2月18日月曜日                      ...
13年2月18日月曜日   41
cocos2dの画面構成13年2月18日月曜日                  42
cocos2dの画面構成①              1つの画面をCCScenceで表します                  CCScene13年2月18日月曜日                         43
cocos2dの画面構成②              CCScenceにCCLayerを貼り付けて(addChild)              色々と描画します                   CCScene              C...
cocos2dの画面構成③              画像ならCCSpriteなどをaddChild              テキストならCCLabelTTFなどをaddChild                               ...
cocos2dの画面遷移13年2月18日月曜日                  46
cocos2dの画面遷移①              CCDirectorクラスが色々と制御してくれます。              CCDirectorはSingletonで実装されています。              次の記述方法でインスタ...
cocos2dの画面遷移②          最初に起動するSceneの指定は            -(void)runWithScene:(CCScene)scene          デフォルトではIntroScenceが指定されています...
cocos2dの画面遷移③          画面遷移を提供する主なメソッド              -(void)replaceScene:(CCScene)scene              -(void)pushScene:(CCSc...
cocos2dの画面遷移④          まずreplaceScene        replace・・・字のごとくsceneの置き換えです!                 SceneA                 SceneB13年...
cocos2dの画面遷移⑤          pushSceneとpopSceneはセットで考えましょう         pushとpopっていうと、アレしかありませんよね!!                スタックのこれです         ...
cocos2dの部品配置13年2月18日月曜日                  52
cocos2dの部品配置①              部品の追加はaddChildで追加します。              部品の位置は、positionで指定します。              例:xxx.pngの画像を読み込み、      ...
cocos2dの部品配置②              注意その1              cocos2dでは画面左下が (0, 0)になります                                      (640, 960)  ...
cocos2dの部品配置③              部品に指定したposition、部品の左上では無い!          ・positionの位置は、anchorPointで指定          ・多くの部品は、anchorPointは(...
コーヒーブレイク13年2月18日月曜日              56
画面の向きを変えたい!①              デフォルトでは横向き                  縦方向に変えたい!13年2月18日月曜日                   57
画面の向きを変えたい!②              プロジェクトファイルの設定を変えよう!13年2月18日月曜日                         58
画面の向きを変えたい!③              設定に合わせてコードも修正!              【変更前】13年2月18日月曜日                    59
画面の向きを変えたい!④              設定に合わせてコードも修正!              【変更後】13年2月18日月曜日                    60
コレ消したい!①              デフォルトでは表示される                     コレは、SPFとFPSの表示                     SPF(Second Per Frame):1回の描画に何秒かか...
コレ消したい!②              AppDelegate.mにある次の一行を変更しましょう              // Display FSP and SPF              [director_ setDisplayS...
ワンプラニュース       取締役CMOに久手堅氏が就任!!              1月末で解散したZynga Japanにて              マーケティング・PR、マーケットリサーチ、課              金分析、パー...
ワンプラニュース     ワンプラは今年めっちゃ攻めます!!     でも、人が足りません!(>^<)              エンジニア募集中!!              iOSだけでなくAndroidも!!13年2月18日月曜日    ...
ご清聴ありがとうございました                 【名古屋】第13回 iPhoneアプリ開発勉強会 2013.2.1613年2月18日月曜日                                           65
Upcoming SlideShare
Loading in …5
×

cocos2dで手軽にアニメーション

7,110 views

Published on

第13回 名古屋iPhone開発者勉強の発表で使った資料です。
cocos2dの基本アニメーションをまとめてあります。

cocos2dで手軽にアニメーション

  1. 1. cocos2dで 手軽にアニメーション ワンダープラネット株式会社 取締役    CTO  村田  知常 【名古屋】第13回 iPhoneアプリ開発勉強会 2013.2.1613年2月18日月曜日 1
  2. 2. とも つね 【自己紹介】 村田  知常 プロフィール ワンダープラネット株式会社  取締役  CTO 出没する勉強会 iPhoneアプリ開発勉強会、JAWS-UG 【facebook】  tomotsune.murata、【twitter】  @tomo2neco 職歴 業務システムのソフトウェア開発(.NET、Java)           ↓ ワンダープラネット株式会社  (  旧:(株)オープンキューブ 名古屋アプリケーション開発センター  )13年2月18日月曜日 2
  3. 3. ワンダープラネット株式会社 事業内容 スマートフォン・タブレット向けアプリーション・ゲームの 企画・開発・運営・販売 設立  2012年9月3日 ホームページ  http://wonderpla.net Facebookページ  https://www.facebook.com/wonderplanet.nagoya13年2月18日月曜日 3
  4. 4. プロダクト ■iPhone/iPad くるるファンタズマ ■iPhone 名古屋コーチンがいく! ■iPhone/iPad Panic  Farm13年2月18日月曜日 4
  5. 5. 名古屋コーチンがいく! HALのインターンシップ生(2名)が作成 企画∼作成まで1ヶ月 インターンシップとして来た時は Objective-Cを知らなかった13年2月18日月曜日 5
  6. 6. そんな経験の無い彼らが 名古屋コーチンがいく!! を短期間で作成できたのは cocos2dがあったから!!13年2月18日月曜日 6
  7. 7. cocos2d とは?13年2月18日月曜日 7
  8. 8. cocos2dとは① オープンソースのフレームワーク 「OpenGL ES」を用いているため 高速に動作 商用利用が可能 対応するツールが多い13年2月18日月曜日 8
  9. 9. cocos2dとは② cocos2dには様々なファミリー cocos2d for iPhone cocos2d-x cocos2d HTML513年2月18日月曜日 9
  10. 10. Let’s Action !!13年2月18日月曜日 10
  11. 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. 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. 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. 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に各指定値を加算したposition13年2月18日月曜日 14
  15. 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. 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. 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. 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. 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. 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. 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. 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. 23. 色々Actionしたあと メソッドを呼びたい!13年2月18日月曜日 23
  24. 24. CCCallFunc① CCCallFunc 指定したメソッドを呼び出す 例:selfにあるdoATaskメソッドを呼び出す [CCCallFunc actionWithTarget:self selector:@selector(doATask)] 呼び出されるメソッドのI/F -(void)doATask13年2月18日月曜日 24
  25. 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*)d13年2月18日月曜日 25
  26. 26. パラパラ漫画のような アニメーション13年2月18日月曜日 26
  27. 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. 28. 対応ツールの例13年2月18日月曜日 28
  29. 29. 対応ツールの一部紹介 Glyph Designer http://www.71squared.com/glyphdesigner Particle Designer http://www.71squared.com/particledesigner13年2月18日月曜日 29
  30. 30. Glyph Designer Bitmapフォントを生成するツール ■通常のラベル ■Bitmapのラベル13年2月18日月曜日 30
  31. 31. Particle Designer Particleを生成するツール13年2月18日月曜日 31
  32. 32. cocos2dのProgramming Guide http://www.cocos2d-iphone.org/wiki/doku.php/ prog_guide:index13年2月18日月曜日 32
  33. 33. 発表中に使用した サンプルソース http://goo.gl/p5fA413年2月18日月曜日 33
  34. 34. おまけ ∼cocos2dの基本∼13年2月18日月曜日 34
  35. 35. Let’s cocos2d !!13年2月18日月曜日 35
  36. 36. セットアップ① cocos2dのサイトからダウンロード http://www.cocos2d-iphone.org/download13年2月18日月曜日 36
  37. 37. セットアップ② テンプレートのインストール ダウンロードしたファイルを解凍 ターミナルでフォルダに移動しコマンドを実行 cocos2d-iphone-2.1-rc0 murata$ ./install-templates.sh -u13年2月18日月曜日 37
  38. 38. セットアップ③ 成功するとテンプレートに表示されます13年2月18日月曜日 38
  39. 39. Hello World13年2月18日月曜日 39
  40. 40. Hello World① 「cocos2d iOS」でプロジェクトを作成し実行すると 「Hello World」が表示されます13年2月18日月曜日 40
  41. 41. 13年2月18日月曜日 41
  42. 42. cocos2dの画面構成13年2月18日月曜日 42
  43. 43. cocos2dの画面構成① 1つの画面をCCScenceで表します CCScene13年2月18日月曜日 43
  44. 44. cocos2dの画面構成② CCScenceにCCLayerを貼り付けて(addChild) 色々と描画します CCScene CCLayer13年2月18日月曜日 44
  45. 45. cocos2dの画面構成③ 画像ならCCSpriteなどをaddChild テキストならCCLabelTTFなどをaddChild テキスト CCLayer13年2月18日月曜日 45
  46. 46. cocos2dの画面遷移13年2月18日月曜日 46
  47. 47. cocos2dの画面遷移① CCDirectorクラスが色々と制御してくれます。 CCDirectorはSingletonで実装されています。 次の記述方法でインスタンスを取得します。 [CCDirector sharedDirector] 使用例:sceneの置き換え [[CCDirector sharedDirector] replaceScene:xxx];13年2月18日月曜日 47
  48. 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. 49. cocos2dの画面遷移③ 画面遷移を提供する主なメソッド -(void)replaceScene:(CCScene)scene -(void)pushScene:(CCScene)scene -(void)popScene なにがちがうの?(´・ω・`)13年2月18日月曜日 49
  50. 50. cocos2dの画面遷移④ まずreplaceScene  replace・・・字のごとくsceneの置き換えです! SceneA SceneB13年2月18日月曜日 50
  51. 51. cocos2dの画面遷移⑤ pushSceneとpopSceneはセットで考えましょう pushとpopっていうと、アレしかありませんよね!! スタックのこれです 最上段のSceneが 見えます13年2月18日月曜日 51
  52. 52. cocos2dの部品配置13年2月18日月曜日 52
  53. 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. 54. cocos2dの部品配置② 注意その1 cocos2dでは画面左下が (0, 0)になります (640, 960) (100, 100) (0, 0)13年2月18日月曜日 54
  55. 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. 56. コーヒーブレイク13年2月18日月曜日 56
  57. 57. 画面の向きを変えたい!① デフォルトでは横向き 縦方向に変えたい!13年2月18日月曜日 57
  58. 58. 画面の向きを変えたい!② プロジェクトファイルの設定を変えよう!13年2月18日月曜日 58
  59. 59. 画面の向きを変えたい!③ 設定に合わせてコードも修正! 【変更前】13年2月18日月曜日 59
  60. 60. 画面の向きを変えたい!④ 設定に合わせてコードも修正! 【変更後】13年2月18日月曜日 60
  61. 61. コレ消したい!① デフォルトでは表示される コレは、SPFとFPSの表示 SPF(Second Per Frame):1回の描画に何秒かかるか FPS(Fram Per Second):1秒間に何回画面を描画しているか13年2月18日月曜日 61
  62. 62. コレ消したい!② AppDelegate.mにある次の一行を変更しましょう // Display FSP and SPF [director_ setDisplayStats:YES]; // Display FSP and SPF [director_ setDisplayStats:NO];13年2月18日月曜日 62
  63. 63. ワンプラニュース 取締役CMOに久手堅氏が就任!! 1月末で解散したZynga Japanにて マーケティング・PR、マーケットリサーチ、課 金分析、パートナーシップ業務等のビジネス領 域業務全般を担当 業務拡大および人員増加に伴い増床しました!!13年2月18日月曜日 63
  64. 64. ワンプラニュース ワンプラは今年めっちゃ攻めます!! でも、人が足りません!(>^<) エンジニア募集中!! iOSだけでなくAndroidも!!13年2月18日月曜日 64
  65. 65. ご清聴ありがとうございました 【名古屋】第13回 iPhoneアプリ開発勉強会 2013.2.1613年2月18日月曜日 65

×