JTPA主催のTech talk #1 http://www.jtpa.org/event/seminor/608 での講演スライドです。

1. cocos2d-xで作る
マルチプラットフォーム
ゲーム開発 〜入門編〜
/ Norio Akagi ( @_rdtr )

2. cocos2d-xとは
・マルチプラットフォーム向けに開発できる
ゲームエンジン
・主に2Dを中心にサポート
（v3.xから除々に3D系の機能も追加中）
・C++の他, javascriptやLua等の言語で開発可能
・3.x系より大幅に仕様が変更
>情報が少ない。。
Obj-C版の兄弟エンジンcocos2d

3. 他のゲームエンジン
cocos2d-xの
メリット
> オープンソース, iOS/Androidネイティブ対応, C++
デメリット
> 情報が少ない, 仕様が変わりやすい, C++

4. 実際の開発
さっそく作っていきます。
ソース→
https://github.com/redtree1112/cocos2dx_flappy

5. 導入
・http://www.cocos2d-x.org/download
からダウンロード（07/25/2014の最新版はv3.2)
・UIエディタのCocosStudioもベータリリース中！
・解凍したディレクトリ内で
% cocos new [プロジェクト名] -p com.jpta.sample -l cpp -d [ディレクトリ指定]
> 各プラットフォーム向けの
プロジェクトファイルが出力される

6. 基本的な開発スタイル（Mac）
(1)主なゲームロジック(C++)はXcodeで実装
(2)必要に応じてAndroid向けコードをEclipseで実装
# Android NDKのインストール必須
# Android向けビルドはcocos側で用意してくれている
proj.android/build_native.py を実行するのが基本
詳細は
http://www.cocos2d-x.org/wiki/Getting_Started_with_Cocos2d-x

7. cocos2d-xの基本
(0, 0) x
y
（１）Design Resolution Size
AppDelegate.cpp
glview->setDesignResolutionSize(320,480,ResolutionPolicy::UNKNOWN);
> 端末に依存しないゲーム内での x, y軸のピクセル数を自分で定義できる
> ResolutionPolicy
> SHOW_ALL : Aspect ratioの小さい方に合わせる（余白は黒帯）
> NO_BORDER : 大きい方に合わせる（はみ出る）
（２）Scale Factor
director->setContentScaleFactor(2);
> ゲーム内で用いる画像の縮尺を決定する。 Retina対応等。
> 条件ごとに使用する画像を変えたい場合は setSearchPathsで
cocos2d-xのフォルダ探索順序を変えてやる
http://www.cocos2d-x.org/wiki/Mechanism_of_loading_resources
座標軸・解像度・アセット

8. Layer
cocos2d-xの基本 Scene / Layer / Node
・基本的に1画面1Scene
・SceneにLayerを追加して, その中にゲームに 必要
な要素を追加していく
（Layerは1Scene内で複数使える）
(0, 0) x
y
Layer
addChild
Sprite
✕
✕
Label（テキスト）
✕
addChild
Scene

9. Position, AnchorPoint
Layer
cocos2d-xの基本
(0, 0) x
y
✕
✕
・setPositionで各NodeのAnchorPointの位置を指定する
> デフォルトでは中心にAnchorPointがある
> sprite->setAnchorPoint(Vec2(x, y))
で調整可能
（x, yは自分のサイズに対する割合を0〜1で指定）
・子要素は親要素の左下を原点とした座標系で指定する
・Layer, ScrollView, Nodeなど
AnchroPointが左下に固定されているものもある
> layer->ignoreAnchorPointForPosition(false)
で固定を解けるので, そのあとはSpriteと同じよう に
扱える

10. ・Nodeに動きをつける様々な関数が用意されている
> MoveBy / MoveTo, FadeIn / FadeOut, EaseIn / EaseOut / EaseInOut, JumpTo, …
> Sequence(上の各関数を順次実行 ), Spawn(同時実行), RepeatForever(ループ), ...
auto _action = MoveBy::create(0.3, Vec2(Vec2::ONE, Vec2::ONE));
sprite->runAction(_action);
・パラパラ漫画のようなアニメーションも可能
アニメーションcocos2d-xの基本
sprites1.png
・標準でSpriteアニメーションに対応
> plistを吐き出してくれる専用ツールを併用
TexturePacker shoebox

11. 背景0
背景を動かす
背景1
cocos2d-xの基本
(0, 0) x
y
背景0 背景1
(0, 0) x
y
鳥の位置は不変
背景を繰り返し使いまわす
visible area
・init内だけでなく, メインループの中で記述したい処理
> scene->scheduleUpdateを呼び出しupdate関数内で記述

12. 物理演算cocos2d-xの基本
・Ver3.xからChipmunkエンジンが内蔵された（Box2Dも利用可能）
> Scene::createWithPhysics() で物理の働く世界を作れる
> scene->setGravity, setSpeed
で重力や実行時の物理演算の速度を設定
・各ノードに物理演算を適用するにはPhysicsBodyを付与してやる
> auto birdBody = PhysicsBody::createCircle(17.0);
> birdSprite->setPhysicsBody(birdBody);
・PhysicsBodyはCircle, Box, Polygonなどで指定可能
> 複雑な形状はPhysicsShapeとして凸面のPolygon毎に分割して
1つずつBodyにaddしてやる

13. イベントハンドリングcocos2d-xの基本
・基本的にリスナを作成して, Directorの持つEventDispatcherに登録する流れ
> （例）タッチ
auto listener = EventListenerTouchOneByOne::create() ← マルチタッチを拾いたい場合
Director::getInstance()->getEventDispatcher EventListenerAllAtOnce
->addEventListenerWithSceneGraphPriority(listener, this)
シーンにおけるノードの描画順（addChild順）にイベントを伝達する
＊FixedPriorityを使えば自分で優先度を設定することも可能
・イベント検出時の処理はコールバックまたはlambda式を使った無名関数
で記述する
listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan);
bool HelloWorld::onTouchBegan(Touch *touch, Event *event){...};

14. シーン切り替えcocos2d-xの基本
・ Directorを用いて行う
Director::getInstance()->replaceScene(HelloWorld::
createScene());
> replaceSceneは保持中のSceneを破棄して新しいシーンを表示
> すぐにユーザが戻ることが考えられるケース, 前のシーンを保持しておき たい
場合は
pushScene, popSceneでスタックに積める