2013/1/18 Cocos2d-x公開講座 in 鹿児島

1. in
鹿児島
Cocos2d-x公開講座
~基本講義&お試しハンズオン~
株式会社TKS2 清水友晶

2. 清水 友晶
• 株式会社TKS2
スマートフォンアプリ開発
(iOS, Android, Windows Phone 8)
Webコンテンツ開発
• Cocos2d-xへの開発参加
Cocos2d-xを利用したアプリ開発
講演活動
執筆活動
• Twitter: tks2shimizu
• Blog: http://tks2.net/memo
• SlideShare: http://www.slideshare.net/doraemonsss
• Facebook: http://www.facebook.com/doraemonsss

3. 販売台数比較
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

4. プラットフォームのシェア
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

5. 時間別トラフィック
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

6. Angry Birds vs Nintendo DS
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

7. フリーミアムモデル
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

8. 収益Top200アプリ中ゲームが70%
http://www.businessinsider.com/future-of-digital-slides-2012-11?op=1

9. これらから判ること
• スマートフォン・タブレットは今後もしばらくは伸
び続ける
• PCは仕事で利用、一般的にはスマートフォン・タ
ブレットが利用される
• 無料アプリでアプリ内課金を行うフリーミアムモデ
ルが主流
• ゲームアプリの課金率が高い

10. と言うことは・・・
• まだしばらくは、スマートフォン・タブレット向け
ゲームで稼ぐことができる

11. もう少し詳細に
• スマートフォン・タブレット向けOSに対して、日
本ではAndroid, iOSが主流
• できれば両OSに対応したゲームアプリを開発でき
ることが望ましい
• AndroidとiOSのアプリをそれぞれ開発するには、
実装に2倍の工数が掛かってしまう・・・
• 1ソースでAndroidとiOSの開発ができれば効率が良
い
• クロスプラットフォーム開発が可能なゲームプラッ
トフォームがあれば良いけど、そんなのあるの？

12. クロスプラットフォーム開発可能な
ツール・フレームワーク
• Cocos2d-x Cocos2d-x
• Unity •2Dゲームフレームワーク
• Corona SDK •オープンソース(MIT)
• Moai •高速処理
• Gilderos •メモリ周りの処理は不要
• Game Salad •ゲームエンジンを修正可能
•入門者から熟練者まで
• JS / HTML5 framework
• Titanium Mobile
• Phone Gap

13. Cocos2d-xでどんなアプリが作れるの？
• Cocos2d-xに使用例が紹介されている
http://www.cocos2d-x.org/projects/cocos2d-x/apps

14. Cocos2d-xでどんなアプリが作れるの？
• スマートエデュケーション
おやこでスマほん(Android, iOS)
AWS「スタートアップチャレンジ」優勝
IVS 2012 Fall Kyoto 「Launch Pad」優勝

15. Cocos2d
• オープンソース
• MITライセンス
• 2Dゲームフレームワーク
• Python
• Windows, Mac, Linux
http://en.wikipedia.org/wiki/Cocos2d

16. Cocos2d for iPhone
• オープンソース
• MITライセンス
• 2Dゲームフレームワーク
• Objective-C
• iOS, Mac OS X
http://en.wikipedia.org/wiki/Cocos2d

17. Cocos2d-x
• オープンソース
• MITライセンス
• 2Dゲームフレームワーク
• C++, Lua, Javascript
• マルチプラットフォーム
http://en.wikipedia.org/wiki/Cocos2d

18. Cocos2d-x対応プラットフォーム
http://www.cocos2d-x.org/projects/cocos2d-x/wiki

19. 開発環境
• Android, iOS対応のアプリを開発する際の開発環境例
• Mac OS X
• Xcode (iOS向けアプリ開発)
• Eclipse (Android向けアプリ開発)

20. Cocos2d-xをさわってみよう

21. Xcodeのインストール
• Mac App StoreからXcodeをダウンロード&インスト
ール

22. Cocos2d-xのダウンロード
• Cocos2d-xの最新バージョンをダウンロード
(ハンズオンは基本的に最新バージョンを用いて行います)
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/Download

23. Cocos2d-xを解凍する
• ダウンロードしたzipファイルを任意のディレクト
リに解凍します
• ハンズオンではユーザのホームディレクトリへの解
凍をオススメします（解凍した場所を忘れなければどこでもいいんです）
• ユーザ名がsumomoの場合、
/Users/sumomo
へ解凍し
/Users/sumomo/cocos2d-2.1beta3-x-2.1.0
となります

24. テンプレートのインストール
• ターミナル.app起動
アプリケーション > ユーティリティ > ターミナル
• cocos2d-2.1beta3-x-2.1.0のディレクトリへ移動
cd cocos2d-2.1beta3-x-2.1.0
• install-templates-xcode.shの実行
./install-templates-xcode.sh -u
強制インストールの場合
./install-templates-xcode.sh -u -f

25. テンプレートのインストールに成功!
• テンプレートのインストールに成功した場合は、次
のようなログが見られます

26. テンプレートのインストールに失敗する...
• テンプレートのインストールに失敗する場合は、テン
プレートの権限をチェックしてみましょう
cd /Users/tomoaki/Library/Developer/Xcode/Templates
ls -al
• 所有者が別の人になっている場合は、所有者を変更し
ましょう(変更しても問題ないか管理者に確認して下さい)
chown -R tomoaki cocos2d-x

27. 新規プロジェクトの作成
• Xcode起動
• 新規プロジェクトの作成
cocos2dxを選択
• Product Name:HelloWorld
• 保存先: ホームディレクトリ(/Users/Sumomo)

28. Hello World
• 作成されたプロジェクトをRun

29. ソースをいじってみよう

30. 表示する文字を変更する
• HelloWorldScene.cppを選択
• 54行目の”Hello World”を好きな文字に変更しよう

31. 背景を動かしてみよう
• 背景は66行目のpSpriteにて表示している
• pSpriteに対して命令することで背景を動かすことが
できる

32. 背景を動かしてみよう
• 位置変更
pSprite->setPosition( ccp(0, 0) );
• 拡大・縮小
pSprite->setScale(2.0f);
• 回転
pSprite->setRotation(90.0f);
• アンカーポイント
pSprite->setAnchorPoint( ccp(0, 0) );
• 透過
pSprite->setOpacity(127);

33. 別の画像に変更してみよう
http://tks2.net/cat.png
• Resourcesディレクトリに画像を配置する
HelloWorld/Resources/cat.png
• Xcode上に読み込む
• ソースの修正
CCSprite* pSprite = CCSprite::create("cat.png");

34. Cocos2d-xの仕組み
• 基本的なクラス
• CCDirector ... アプリの中心
• CCScene ... シーン(画面)
• CCLayer ... シーン中のレイヤー
• CCSprite ... シーン中の画像など

35. Cocos2d-xの仕組み
• プロジェクトには次のディレクトリがある
• Classes
• Resources
• 最初に用意されているクラスは次の2つ
• AppDelegate
• HelloWorldScene

36. Cocos2d-xの仕組み
• AppDelegateには次の関数がある
• applicationDidFinishLaunching()
• アプリ起動時に処理され、
アプリのセッティングを行う
• 最初のシーンを呼び出す
• applicationDidEnterBackground()
• アプリがスリープする時に処理され、
アプリの停止を行う
• applicationWillEnterForeground()
• アプリ復帰時に処理され、
アプリの再開を行う

37. CCActionを使ってみよう!
• オブジェクトを移動させてみる
2秒で画面右端へ移動する
CCMoveTo* move = CCMoveTo::create(2.0f, ccp(size.width, size.height/2));
pSprite->runAction(move);

38. CCActionを使ってみよう!
• CCAction
• 移動
CCMoveTo, CCMoveBy
• 回転
CCRotateTo, CCRotateBy
• フェードイン・フェードアウト
CCFadeIn, CCFadeOut
http://www.cocos2d-x.org/reference/native-cpp/d7/d12/
classcocos2d_1_1_c_c_action.html

39. CCActionを使ってみよう!
• 連続アクションを実行(同じアクション)
CCRepeat, CCRepeatForever
• 連続アクションを実行(異なるアクション)
CCSequence
• アクションを同時に実行
CCSpawn

40. CCActionを使ってみよう!
• 指定時間待つ
CCDelayTime
• メソッドを呼ぶ
CCCallFunc,
CCCallFuncN,
CCCallFuncND,
CCCallFuncO
• イージングを利用する
CCEase~

41. 新しいシーンを表示しよう！
• シーンの表示は、CCDirectorクラスが担当する
• replaceSceneメソッド
• pushSceneメソッド
• popSceneメソッド
• 画面遷移してみよう！
CCScene* pScene = HelloWorld::scene();
CCDirector::sharedDirector()->replaceScene(pScene);

42. 格好いい画面遷移を！
• CCTransitionScene
• クロスフェード
CCTransitionCrossFade
• フリップ
CCTransitionFlipX, CCTransitionFlipY
• ページめくり
CCTransitionPageTurn
http://www.cocos2d-x.org/reference/native-cpp/d1/dc8/
classcocos2d_1_1_c_c_transition_scene.html

43. Cocos2d-xについてもっと知りたい！
• Cocos2d-x実践講座 in 鹿児島
∼少人数で実際にアプリ作りを体験してみよう!∼
• 1/19(土) 13:00~17:00
• http://atnd.org/events/35243