1. Cocos2d-xをさわってみよう！
(株)TKS2 清水 友晶

2. 資料のダウンロード
SlideShare
http://www.slideshare.net/
doraemonsss/cocos2d-
x-14842614
TKS2ホームページ
http://tks2.net

3. 目次
Hello Worldへの道
Eclipse(for Windows)
Xcode(for Mac)
CCSpriteをさわってみよう！
Cocos2d-xの仕組み
CCActionでオブジェクトを変化させてみよう！
新しいシーンを表示しよう！
CCTransitionSceneで格好いい画面遷移を！

4. Hello Worldへの道 (Eclipse)
EclipseおよびAndroid SDKのインストール手順は省略
Cocos2d-xのダウンロード
cocos2d-1.0.1-x-0.12.0.zip
ダウンロードしたファイルを任意のフォルダへ展開する
(日本語やスペースを含むディレクトリは不可
今回はユーザディレクトリ直下 C:¥Users¥xxxx¥cocos2d-1.0.1-x-0.12.0)

5. Hello Worldへの道 (Eclipse)
Android NDKをダウンロード
http://dl.google.com/android/ndk/android-ndk-r6b-
windows.zip
ダウンロードしたファイルを任意のフォルダへ展開する
(今回はCドライブ直下 C:¥android-ndk-r6b)

6. Hello Worldへの道 (Eclipse)
Cygwinをインストール
オプションでmakeもインストール
(今回はCドライブ直下へインストール c:¥cygwin)

7. Hello Worldへの道 (Eclipse)
今回は既存のHelloWorldを使用
cocos2d-1.0.1-x-0.12.0/HelloWorld
build_native.shの編集
HelloWorld/android/build_native.sh
2行目 NDK_ROOT_LOCAL
3行目 COCOS2DX_ROOT_LOCAL

8. Hello Worldへの道 (Eclipse)
Cygwinによりビルドを行う
build_native.shのディレクトリへ移動
cd /cygdrive/c/Users/XXXX/cocos2d-1.0.1-x-0.12.0/
HelloWorld/android
ビルド実行
./build_native.sh

9. Hello Worldへの道 (Eclipse)
ビルドが正常に終わらない。。。
ファイル・ディレクトリの権限は大丈夫？

10. Hello Worldへの道 (Eclipse)
Eclipse上に取り込む
File > New > Project... >
Android Project from Existing Code
もしエラーがあれば適宜コードを修正
Androidアプリケーションとして実行

11. Hello Worldへの道 (Eclipse)
開発手順
1. HelloWorld/Classesディレクトリのソースをエ
ディタにて修正
2. Cygwinにて、ビルド
3. Eclipseにて、リフレッシュ・実行
• CDT Plugin・MinGWを用いEclipse上で全て完結する
開発環境も構築可能
http://www.multigesture.net/articles/how-to-
setup-cocos2d-x-windows-and-android/

12. Hello Worldへの道 (Xcode)
Xcodeのインストール手順は省略
Cocos2d-xのダウンロード
cocos2d-2.0-x-2.0.3.zip
ダウンロードしたファイルを任意のフォルダへ展開する
(今回はユーザディレクトリ直下 /Users/xxxx/cocos2d-2.0-x-2.0.3)

13. Hello Worldへの道 (Xcode)
テンプレートのインストール
(cocos2d-2.0-x-2.0.3/install-templates-xcode.sh)
ターミナル.app起動
(アプリケーション/ユーティリティ/ターミナル.app)
cocos2d-2.0-x-2.0.3のディレクトリへ移動
cd cocos2d-2.0-x-2.0.3
install-templates-xcode.shの実行
install-templates-xcode.sh -u
(install-templates-xcode.sh -u -f)

14. Hello Worldへの道 (Xcode)
• テンプレートのインストールに成功した場合

15. Hello Worldへの道 (Xcode)
テンプレートのインストールに失敗する。。。
テンプレートの権限のチェック
cd /Users/tomoaki/Library/Developer/Xcode/Templates
ls -al
所有者が別の人になっている場合は、所有者を変更する
chown -R tomoaki cocos2d-x

16. Hello Worldへの道 (Xcode)
Xcode起動
新規プロジェクトの作成
cocos2dxを選択

17. Hello Worldへの道 (Xcode)
作成されたプロジェクトをRun
iPhone 6.0 Simulator
iPhone 5.0 Simulator
• RootViewController.mm 46行目を修正
return UIInterfaceOrientationMaskLandscape;

18. CCSpriteをさわってみよう！
• HelloWorldScene.cppファイルのpSpriteをさわってみる
位置変更
pSprite->setPosition( ccp(0, 0) );
拡大・縮小
pSprite->setScale(2.0f);
回転
pSprite->setRotation(90.0f);
アンカーポイント
pSprite->setAnchorPoint( ccp(0, 0) );
透過
pSprite->setOpacity(127);

19. CCSpriteをさわってみよう！
• pSpriteに別の画像を使ってみる
Resourcesディレクトリに画像を配置する
HelloWorld/Resources/cat.png;
プロジェクトに画像を適用する http://tks2.net/cat.png
Xcode上に読み込む
Cygwinによるビルド時に、android/assetsにコ
ピーされるので設定不要
ソースの修正
CCSprite* pSprite = CCSprite::create("cat.png");

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

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

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

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

24. 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

25. CCActionでオブジェクトを変化させてみよう！
連続アクションを実行(同じアクション)
CCRepeat, CCRepeatForever
連続アクションを実行(異なるアクション)
CCSequence
アクションを同時に実行
CCSpawn

26. CCActionでオブジェクトを変化させてみよう！
指定時間待つ
CCDelayTime
メソッドを呼ぶ
CCCallFunc,
CCCallFuncN,
CCCallFuncND,
CCCallFuncO
イージングを利用する
CCEase

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

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

29. 今後の予定
Cocos2d-xを更にさわってみる
Cocos2d-xの拡張
外部ツールの利用
Box2Dの利用
クロスプラットフォーム開発
OSとの連携