Tomotsune Murata, profile picture
Uploaded byTomotsune Murata
7,493 views

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

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

Embed presentation

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

More Related Content

PDF
「釣り★スタ」でのCocos2d-JSを使ってのアプリアップデート事例 (1)
bygree_tech
 
PPTX
かんたんベジェ曲線
byYu(u)ki IWABUCHI
 
PDF
cocos2d-xとCocosBuilder
byTomoaki Shimizu
 
PDF
cocos2d-xとCocosBuilderでゲームを作ってみよう
byTomoaki Shimizu
 
PDF
cocos2d-x公開講座 in 鹿児島
byTomoaki Shimizu
 
PPT
Cocos2d
byKenji Kamijo
 
PDF
Cocos2d xで簡単なゲームを作ってみよう！
byTomoaki Shimizu
 
PDF
Cocos2d-x実践講座 in 鹿児島
byTomoaki Shimizu
 
「釣り★スタ」でのCocos2d-JSを使ってのアプリアップデート事例 (1)
bygree_tech
 
かんたんベジェ曲線
byYu(u)ki IWABUCHI
 
cocos2d-xとCocosBuilder
byTomoaki Shimizu
 
cocos2d-xとCocosBuilderでゲームを作ってみよう
byTomoaki Shimizu
 
cocos2d-x公開講座 in 鹿児島
byTomoaki Shimizu
 
Cocos2d
byKenji Kamijo
 
Cocos2d xで簡単なゲームを作ってみよう！
byTomoaki Shimizu
 
Cocos2d-x実践講座 in 鹿児島
byTomoaki Shimizu
 

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

PDF
Pb tween
byHirano Tetsuya
 
PDF
CocosBuilderを利用した開発の進め方
byTomoaki Shimizu
 
PDF
cocos2d-xハンズオン勉強会 in 名古屋
byTomoaki Shimizu
 
PDF
かんたんなcocos2d-xの紹介
byTomoaki Shimizu
 
PDF
セーラーソン振り返り
byMasafumi Terazono
 
KEY
Core Graphicsでつくる自作UIコンポーネント入門
bycocopon
 
PDF
CocosBuilderの紹介
byMasahiro Murakami
 
PDF
Flashup 12 Basic Training of Away3D
byKatsushi Suzuki
 
PDF
iPhoneアプリを作ってみよう
byNagao Shun
 
PDF
週末プログラミングで作るカジュアルゲーム～シューティング編～
byNohina Hidenari
 
PDF
㉒初期プロジェクトを改造！
byNishida Kansuke
 
PDF
Flashup13 Basic Training of Flare3D
byKatsushi Suzuki
 
PDF
Cocos2d-x v3.2を利用してシューティングゲームを作ろう!
byTomoaki Shimizu
 
PDF
Cocos2d-x公開講座 in 鹿児島
byTomoaki Shimizu
 
PDF
CocosBuilderとcocos2d-x JSB
byTomoaki Shimizu
 
PDF
⑭iPhoneアプリを作ってみよう！（超初心者向け）その２
byNishida Kansuke
 
PPT
Core Animation 使って見た
byOCHI Shuji
 
PDF
SWWDC2012_11_17
byushiostarfish _
 
PPTX
Cocos2d-x(JS) ハンズオン #02 「画像表示とアクション」
byTomoaki Shimizu
 
KEY
Introduction for cocos2d
by佐藤 俊太郎
 
Pb tween
byHirano Tetsuya
 
CocosBuilderを利用した開発の進め方
byTomoaki Shimizu
 
cocos2d-xハンズオン勉強会 in 名古屋
byTomoaki Shimizu
 
かんたんなcocos2d-xの紹介
byTomoaki Shimizu
 
セーラーソン振り返り
byMasafumi Terazono
 
Core Graphicsでつくる自作UIコンポーネント入門
bycocopon
 
CocosBuilderの紹介
byMasahiro Murakami
 
Flashup 12 Basic Training of Away3D
byKatsushi Suzuki
 
iPhoneアプリを作ってみよう
byNagao Shun
 
週末プログラミングで作るカジュアルゲーム～シューティング編～
byNohina Hidenari
 
㉒初期プロジェクトを改造！
byNishida Kansuke
 
Flashup13 Basic Training of Flare3D
byKatsushi Suzuki
 
Cocos2d-x v3.2を利用してシューティングゲームを作ろう!
byTomoaki Shimizu
 
Cocos2d-x公開講座 in 鹿児島
byTomoaki Shimizu
 
CocosBuilderとcocos2d-x JSB
byTomoaki Shimizu
 
⑭iPhoneアプリを作ってみよう！（超初心者向け）その２
byNishida Kansuke
 
Core Animation 使って見た
byOCHI Shuji
 
SWWDC2012_11_17
byushiostarfish _
 
Cocos2d-x(JS) ハンズオン #02 「画像表示とアクション」
byTomoaki Shimizu
 
Introduction for cocos2d
by佐藤 俊太郎
 

More from Tomotsune Murata

PDF
Photon Enterprise Cloud 事例
byTomotsune Murata
 
PDF
人気ゲームアプリ「クラッシュフィーバー」におけるAWS活用
byTomotsune Murata
 
PDF
クラッシュフィーバーのシステム構成
byTomotsune Murata
 
PDF
クラッシュフィーバー開発の裏側
byTomotsune Murata
 
PDF
画像処理をAWS LambdaのPythonで！
byTomotsune Murata
 
PDF
Xcode7 / iOS 9 対応でハマったこと
byTomotsune Murata
 
PDF
コストみてますか？
byTomotsune Murata
 
PDF
すっかりマカーな私がWindowsに戻ってみた
byTomotsune Murata
 
PDF
MFi Controller〜それは忘れられたiOS7新機能〜
byTomotsune Murata
 
PDF
SQLiteを手軽に・セキュアに
byTomotsune Murata
 
PDF
スタートアップだからこそ使うAWS（第5回JAWS-UG Nagoya）
byTomotsune Murata
 
Photon Enterprise Cloud 事例
byTomotsune Murata
 
人気ゲームアプリ「クラッシュフィーバー」におけるAWS活用
byTomotsune Murata
 
クラッシュフィーバーのシステム構成
byTomotsune Murata
 
クラッシュフィーバー開発の裏側
byTomotsune Murata
 
画像処理をAWS LambdaのPythonで！
byTomotsune Murata
 
Xcode7 / iOS 9 対応でハマったこと
byTomotsune Murata
 
コストみてますか？
byTomotsune Murata
 
すっかりマカーな私がWindowsに戻ってみた
byTomotsune Murata
 
MFi Controller〜それは忘れられたiOS7新機能〜
byTomotsune Murata
 
SQLiteを手軽に・セキュアに
byTomotsune Murata
 
スタートアップだからこそ使うAWS（第5回JAWS-UG Nagoya）
byTomotsune 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
  • 7.
  • 8.
    cocos2dとは① オープンソースのフレームワーク 「OpenGL ES」を用いているため 高速に動作 商用利用が可能 対応するツールが多い 13年2月18日月曜日 8
  • 9.
    cocos2dとは② cocos2dには様々なファミリー cocos2d for iPhone cocos2d-x cocos2d HTML5 13年2月18日月曜日 9
  • 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.
  • 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.
  • 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.
  • 40.
    Hello World① 「cocos2d iOS」でプロジェクトを作成し実行すると 「Hello World」が表示されます 13年2月18日月曜日 40
  • 41.
  • 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.
  • 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.
  • 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.
  • 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