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

1. Cocos2d-xを
さらにさわってみよう！
これだけ覚えていればC++は怖くない
クロスプラットフォーム開発環境構築術
株式会社TKS2 清水友晶

2. 清水 友晶
(株)TKS2
スマートフォンアプリ開発
iOS, Android, (Windows Phone 8)
Webコンテンツ
Twitter: tks2shimizu
facebook:
http://www.facebook.com/doraemonsss
slide share:
http://www.slideshare.net/doraemonsss
2

3. 資料のダウンロード
TKS2ホームページ
http://tks2.net
3

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

5. 前回のおさらい
Cocos2d-xをさわってみよう！
http://www.slideshare.net/
doraemonsss/cocos2d-x-14842614
5

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

7. C++の型
int hoge;
float fuga;
bool foo;
string bar;
int hoge = 12345;
float fuga = 1.2345f;
bool foo = true;
string bar = "Cocos2d-x";
7

8. C++の構造体
struct t_hoge {
int fuga;
string foo;
};
t_hoge hoge;
hoge.fuga = 12345;
hoge.foo = "Cocos2d-x";
8

9. C++の列挙型
enum kHoge {
kHoge_1,
kHoge_2,
};
kHoge hoge = kHoge_1;
9

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

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

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

13. 基本構文
選択構造
if文
switch文
反復構造
for文
while文
13

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

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

16. C++のfor文
for (int i = 0; i < 10; i++) {
//your code
}
16

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

18. C++のwhile文
while (hoge) {
//your code
}
do {
//your code
} while (hoge);
18

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

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

21. Cocos2d-xで用意されている便利なクラス
CCArray
CCDictionary
CCObject
CCString
CCFileUtils
CCUserDefault
CCHttpRequest
21

22. 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. 例題
ランダムでネコが表示されるシー
ンを作ってみよう！
ランダムでネコがアクションを起
こすシーンを作ってみよう！
23

24. クロスプラットフォーム開発環境構築
iOS向け Android向け
Classes
proj.android
Resources
24

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

26. クロスプラットフォーム開発環境構築
テンプレートのインストール
(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

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

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

29. クロスプラットフォーム開発環境構築
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

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

31. クロスプラットフォーム開発環境構築
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

32. build_native.shとは？
リソースのコピー
アイコンのコピー
Android NDKにより共有ライブラリとしてビルド
MyProject/MyProject/proj.android/libs/
armeabi/libgame.so
32

33. クロスプラットフォーム開発環境構築
Android向けプロジェクトの作成
Eclipseでプロジェクトを開く
File > New > Project...
Android Project from Existing Code
MyProject/MyProject/proj.android選択
* もしエラーがある場合は、
JDK Compiler > 1.6 になっているかチェック
33

34. 開発の流れ
1. Xcode上でソースを編集
2. Xcode上でiOS向けプロジェクトを実行
3. MyProject/MyProject/proj.android/
build_native.sh 実行
4. Eclipse上でAndroid向けプロジェクト
を実行
34

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

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

37. ヘッダ部(HogeScene.h)の追加
HogeSceneクラスを追加する
ClassesでNew File...を選択しファイルを追加する
37

38. ヘッダ部(HogeScene.h)の追加
C and C++ の Header File を選択
38

39. ヘッダ部(HogeScene.h)の追加
HogeScene.h を Classes へ作成
39

40. 実装部(HogeScene.cpp)の追加
C and C++ の C++ Class を選択
40

41. 実装部(HogeScene.cpp)の追加
HogeScene.cpp を Classes へ作成
41

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

43. 解像度の異なるスクリーンに対応する
iOS
iPad...1024x768, 2048x1536
iPhone...480x320, 960x640
iPhone5...1136x640
Android
320x240 ~ 2560x1600
2012年モデルは1280x720が多い
43

44. 解像度の異なるスクリーンに対応する
表示スケールの変更
CCDirectorクラス
CCDirector::sharedDirector()->setContentScaleFactor(2.0f);
画面サイズの取得
CCDirectorクラス
CCDirector::sharedDirector()->getWinSize();
44

45. 解像度の異なるスクリーンに対応する
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

46. 解像度の異なるスクリーンに対応する
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

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