Cocos2d-xを
さらにさわってみよう!
  これだけ覚えていればC++は怖くない
 クロスプラットフォーム開発環境構築術

     株式会社TKS2 清水友晶
清水 友晶
(株)TKS2
スマートフォンアプリ開発
iOS, Android, (Windows Phone 8)
Webコンテンツ
Twitter: tks2shimizu
facebook:
http://www.facebook.com/doraemonsss
slide share:
http://www.slideshare.net/doraemonsss
                                        2
資料のダウンロード
     TKS2ホームページ
      http://tks2.net




                        3
目次
前回のおさらい
Cocos2d-xに必要なC++の知識
  型・構造体・列挙型・配列
  基本構文
  クラス
Cocos2d-xで用意されている便利なマクロ
クロスプラットフォーム開発環境構築
開発の流れ
  リソースの追加
  ソースファイルの追加
解像度の異なるスクリーンに対応する
                          4
前回のおさらい
Cocos2d-xをさわってみよう!
http://www.slideshare.net/
doraemonsss/cocos2d-x-14842614




                                 5
C++の型
char ... 整数型
int ... 整数型
short ... 整数型
long ... 整数型
float ... 少数型
double ... 少数型
long double ... 少数型
bool ... 真偽値(true, false)
string ... 文字列
                            6
C++の型
int      hoge;
float    fuga;
bool     foo;
string   bar;

int      hoge   =   12345;
float    fuga   =   1.2345f;
bool     foo    =   true;
string   bar    =   "Cocos2d-x";
                                   7
C++の構造体
struct t_hoge {
    int    fuga;
    string foo;
};


t_hoge hoge;
hoge.fuga = 12345;
hoge.foo = "Cocos2d-x";
                          8
C++の列挙型
enum kHoge {
    kHoge_1,
    kHoge_2,
};



kHoge hoge = kHoge_1;

                        9
C++の配列
vector ... 一次元配列
map ... 連想配列
list ... リスト
stack ... スタック(LIFO)
queue ... キュー(FIFO)
set ... セット
                       10
C++の配列(vector)
vector<int> hoge;

hoge.push_back(12345);
int fuga = hoge[0];
hoge[0] = 23456;
hoge.resize(100);
hoge[50] = 34567;
hoge.clear();

                         11
C++の配列(map)
map<string, int> hoge;

hoge["fuga"] = 12345;
int foo = hoge["fuga"];
hoge["fuga"] = 23456;
int size = hoge.size();
hoge.erace("fuga");
hoge.clear();

                          12
基本構文
選択構造
 if文
 switch文
反復構造
 for文
 while文
           13
C++のif文
if (hoge == 1) {
    //your code
} else if (hoge == 2 || hoge == 3) {
    //your code
} else if (hoge == 4 && fuga == 1) {
    //your code
} else {
    //your code
}

                                       14
C++のswitch文
switch (hoge) {
    case 1:
        //your code
        break;
    case 2:
        //your code
        break;
    default:
        //your code
        break;
}
                      15
C++のfor文


for (int i = 0; i < 10; i++) {
    //your code
}




                                 16
C++のfor文(iterator)

vector<string> hoge;
hoge.push_back("foo");
hoge.push_back("bar");

vector<string>::iterator it;
for (it=hoge.begin(); it!=hoge.end(); ++it) {
    string fuga = *it;
}


                                                17
C++のwhile文
while (hoge) {
    //your code
}


do {
    //your code
} while (hoge);
                  18
C++のクラス(ヘッダー)
HelloWorldScene.h
  #include "cocos2d.h"

  class HelloWorld : public cocos2d::CCLayer
  {
  public:
      virtual bool init();
      static cocos2d::CCScene *scene();
      void menuCloseCallback(CCObject *pSender);
      CREATE_FUNC(HelloWorld);
  };


                                                   19
C++のクラス(実装)
HelloWorldScene.cpp
  #include "HelloWorldScene.h"

  using namespace cocos2d;

  CCScene *HelloWorld::scene()
  {
      CCScene *scene = CCScene::create();
      HelloWorld *layer = HelloWorld::create();
      scene->addChild(layer);

      return scene;
  }
                                                  20
Cocos2d-xで用意されている便利なクラス

   CCArray
   CCDictionary
   CCObject
   CCString
   CCFileUtils
   CCUserDefault
   CCHttpRequest
                          21
Cocos2d-xで用意されている便利なマクロ
    CCPlatformMacro.h
       CREATE_FUNC(__TYPE__)
       CCLOG(format, ...)
    CCMacro.h
       CCAssert(cond, msg)
       CCRANDOM_0_1()
    CCGeometry.h
       CCPointMake(x, y)
       CCSizeMake(width, height)
       CCRectMake(x, y, width, height)
    CCPointExtension.h
       ccp(__x__,__y__)
    ccTypes.h
       ccc3(r, g, b)
                                         22
例題
ランダムでネコが表示されるシー
ンを作ってみよう!
ランダムでネコがアクションを起
こすシーンを作ってみよう!




                  23
クロスプラットフォーム開発環境構築
   iOS向け    Android向け



        Classes
                   proj.android
       Resources



                                  24
クロスプラットフォーム開発環境構築
 Xcodeのインストール手順は省略
 Cocos2d-xのダウンロード
 Cocos2d-2.0-x-2.0.4.zip
 ダウンロードしたファイルを任意のディレクトリへ展開する
 (/Users/xxxx/cocos2d-2.0-x-2.0.4)




                                     25
クロスプラットフォーム開発環境構築

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


                                                   26
クロスプラットフォーム開発環境構築
 iOS向けプロジェクトの作成
  新規プロジェクトの作成
  cocos2dxを選択
  テンプレートよりプロジェクトを任意のディレクト
  リへ作成
  (/Users/xxxx/MyProject)
  プロジェクトを実行
  Run




                            27
クロスプラットフォーム開発環境構築
EclipseおよびAndroid SDKのインストール手順は省略
Android NDKをダウンロード
android-ndk-r8b
ダウンロードしたファイルを任意のディレクトリへ展開する
(/Users/xxxx/android-ndk-r8b)




                                    28
クロスプラットフォーム開発環境構築
 Android向けプロジェクトの作成
  cocos2d-2.0-x-2.0.4配下のcreate-android-
  project.shを編集
    8行目 NDK_ROOT_LOCAL
    9行目 ANDROID_SDK_ROOT_LOCAL
  create-android-project.shの実行
    パッケージパスの入力...net.tks2.MyProject
    ターゲット設定
    プロジェクト名入力...MyProject
  cocos2d-2.0-x-2.0.4ディレクトリ内にプロジェ
  クトが作成される                                29
クロスプラットフォーム開発環境構築
     ディレクトリ構成




Android



   iOS


                      30
クロスプラットフォーム開発環境構築
Android向けプロジェクトの作成

  javaファイルのコピー

     cocos2d-2.0-x-2.0.4/cocos2dx/platform/android/java/src/org/
     cocos2dx/lib

     /Users/xxxx/MyProject/MyProject/proj.android/src/org/
     cocos2dx/lib

  build_native.sh編集

     32行目にNDK_ROOTを追加
     NDK_ROOT="/Users/xxxx/android-ndk-r7b"
     40行目のCOCOS2DX_ROOTを変更
     COCOS2DX_ROOT="/Users/xxxx/cocos2d-2.0-x-2.0.4"
  build_native.sh実行
                                                                   31
build_native.shとは?

リソースのコピー
アイコンのコピー

Android NDKにより共有ライブラリとしてビルド
MyProject/MyProject/proj.android/libs/
armeabi/libgame.so




                                         32
クロスプラットフォーム開発環境構築

 Android向けプロジェクトの作成
  Eclipseでプロジェクトを開く

    File > New > Project...
    Android Project from Existing Code
    MyProject/MyProject/proj.android選択

    * もしエラーがある場合は、
      JDK Compiler > 1.6 になっているかチェック


                                         33
開発の流れ

1. Xcode上でソースを編集
2. Xcode上でiOS向けプロジェクトを実行
3. MyProject/MyProject/proj.android/
   build_native.sh 実行
4. Eclipse上でAndroid向けプロジェクト
   を実行
                                       34
リソースファイルの追加

Resourcesディレクトリにファイル追加
する
Xcode上でプロジェクトにファイルを追
加する
build_native.shを実行する
(シェルでassetsにコピーされる)
                         35
ソースファイルの追加

HogeSceneクラスを追加する
 Xcode上でファイルを追加する
  ヘッダ部の追加
  実装部の追加
 Android.mkの編集
                    36
ヘッダ部(HogeScene.h)の追加
HogeSceneクラスを追加する

 ClassesでNew File...を選択しファイルを追加する




                                    37
ヘッダ部(HogeScene.h)の追加

C and C++ の Header File を選択




                              38
ヘッダ部(HogeScene.h)の追加

HogeScene.h を Classes へ作成




                            39
実装部(HogeScene.cpp)の追加

C and C++ の C++ Class を選択




                            40
実装部(HogeScene.cpp)の追加

HogeScene.cpp を Classes へ作成




                              41
Android.mkの編集

MyProject/MyProject/proj.android/jni/Android.mk
     9行目 LOCAL_SRC_FILES にHogeScene.cppを追
     加する
     LOCAL_SRC_FILES := hellocpp/main.cpp 
             ../../Classes/AppDelegate.cpp 
             ../../Classes/HelloWorldScene.cpp 
             ../../Classes/HogeScene.cpp
build_native.sh実行時にHogeSceneが含まれる


                                                   42
解像度の異なるスクリーンに対応する

 iOS
   iPad...1024x768, 2048x1536
   iPhone...480x320, 960x640
   iPhone5...1136x640
 Android
   320x240 ~ 2560x1600
   2012年モデルは1280x720が多い


                                43
解像度の異なるスクリーンに対応する


表示スケールの変更

 CCDirectorクラス
 CCDirector::sharedDirector()->setContentScaleFactor(2.0f);
画面サイズの取得

 CCDirectorクラス
 CCDirector::sharedDirector()->getWinSize();



                                                              44
解像度の異なるスクリーンに対応する

bool AppDelegate::applicationDidFinishLaunching()
{
    CCDirector *pDirector = CCDirector::sharedDirector();
    pDirector->setOpenGLView(CCEGLView::sharedOpenGLView());
    pDirector->setContentScaleFactor(480.0f / pDirector->getWinSize().width);
    pDirector->setDisplayStats(true);
    pDirector->setAnimationInterval(1.0 / 60);

    CCScene *pScene = HelloWorld::scene();
    pDirector->runWithScene(pScene);

    return true;
}




                                                                                45
解像度の異なるスクリーンに対応する
Cocos2d-x 2.0.4より、解像度の異なるスクリーン対応が
容易になった
HelloCpp参照
cocos2d-2.0-x-2.0.4/samples/HelloCpp/proj.ios
解説
http://www.cocos2d-x.org/projects/cocos2d-x/wiki/
Multi_resolution_support
要点
   Resource
   designResolutionSize
   resolutionPolicy
                                                    46
今後の予定

Cocos2d-xをもっとさわってみる
Cocos2d-xの拡張
外部ツールの利用
Box2Dの利用
OSとの連携

                      47

Cocos2d xをさらにさわってみよう!