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で手軽にアニメーション

5,875

Published on

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

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,875
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "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

×