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

これだけ覚えていればC++は怖くないクロスプラットフォーム開発環境構築術

株式会社TKS2 清水友晶

清水 友晶(株)TKS2

スマートフォンアプリ開発iOS, Android, (Windows Phone 8)WebコンテンツTwitter: tks2shimizufacebook:http://www.facebook.com/doraemonsssslide 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++のクラス(ヘッダー)#include "cocos2d.h"

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

HelloWorldScene.h

19

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

using namespace cocos2d;

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

return scene;}

HelloWorldScene.cpp

20

Cocos2d-xで用意されている便利なクラス

CCArrayCCDictionaryCCObjectCCStringCCFileUtilsCCUserDefaultCCHttpRequest

21

Cocos2d-xで用意されている便利なマクロCCPlatformMacro.h

CREATE_FUNC(__TYPE__)CCLOG(format, ...)

CCMacro.hCCAssert(cond, msg)CCRANDOM_0_1()

CCGeometry.hCCPointMake(x, y)CCSizeMake(width, height)CCRectMake(x, y, width, height)

CCPointExtension.hccp(__x__,__y__)

ccTypes.hccc3(r, g, b)

22

例題ランダムでネコが表示されるシーンを作ってみよう！ランダムでネコがアクションを起こすシーンを作ってみよう！

23

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

Classes

Resourcesproj.android

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_LOCAL9行目 ANDROID_SDK_ROOT_LOCAL

create-android-project.shの実行パッケージパスの入力...net.tks2.MyProjectターゲット設定プロジェクト名入力...MyProject

cocos2d-2.0-x-2.0.4ディレクトリ内にプロジェクトが作成される 29

クロスプラットフォーム開発環境構築ディレクトリ構成

iOS

Android

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 CodeMyProject/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.mk9行目 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

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

iOSiPad...1024x768, 2048x1536iPhone...480x320, 960x640iPhone5...1136x640

Android320x240 ~ 2560x16002012年モデルは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要点

ResourcedesignResolutionSizeresolutionPolicy

46

今後の予定

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

47