1. cocos2d-x勉強会
㉞cocos2d-­‐xの開発環境を
インストールしてみよう

2. はじめに
• cocos2d-xで一番面倒な初期設定を解説します。
• macのみで、Windowsの解説はしません。Windowsは、
Cygwinとかも入れないとダメみたい。
• 既にXCODEインストール済みの人向けの資料です。
• cocos2d-xは、色々な言語が使えますがcppを想定して
います。

3. mac版だけです・・・。Windowsの人は頑張ってください＞＜
開発環境のインストール

4. cocos2d-xのインストール
• cocos2d-xのダウンロード
– http://www.cocos2d-x.org/download
※v2.2をダウンロードして下さい
※インストールソフトはついてないので、解凍して
フォルダを任意の場所に置きます
※とりあえず、このドキュメントではユーザーフォル
ダの下にcocosというフォルダを作ってその中にさら
にフォルダを作って格納します。

5. Androidの開発環境構築①
• ADT（SDK）のダウンロード
– http://developer.android.com/sdk/index.html
※インストールソフトはついてないので、解凍して
フォルダを任意の場所に置きます
※とりあえず、このドキュメントではユーザーフォル
ダの下にcocosというフォルダを作ってその中にさら
にフォルダを作って格納します。

6. Androidの開発環境構築②
• NDKのダウンロード
– http://developer.android.com/tools/sdk/ndk/
※インストールソフトはついてないので、解凍して
フォルダを任意の場所に置きます
※とりあえず、このドキュメントではユーザーフォル
ダの下にcocosというフォルダを作ってその中にさら
にフォルダを作って格納します。

7. Androidの開発環境構築③
• 展開したフォルダのEclipse.appを実行します。
• javaがインストールされていない場合はダイアログが出るのでイン
ストールして下さい。
• その後、WorkSpaceの場所を聞いてくるので「OK」を押してくだ
さい。

8. Androidの開発環境構築④
• 画面上部のメニューから、「ADT」→「環境設定」を選択
• ダイアログが開くので、「General」→「Workspace」
→「Linked Resources」を選択

9. Androidの開発環境構築⑤
• 「New」を押すと、ダイアログが開くので、Nameに
「COCOS2DX」、Locationにcocos2d-xをインストー
ルしたフォルダを指定してOKを押す
※Nameを間違えると転送しても動かないので注意

10. Androidの開発環境構築⑥
• 「C/C++」→「Build」→「Environment」を選択
• 「Add」ボタンを押す
• ダイアログが出るので、Nameに「NDK_ROOT」、Valueに「/
Users/tonosamart/cocos/android-ndk-r9」などNDKを入れた
フォルダを入力する（ボタンを押しても入力できないから手で打
つ）（Applyを最後におそう！）
※Nameを間違えると転送しても動かないので注意

11. Androidの開発環境構築⑦
• 「C/C++」→「Code Analysis」を選択
• 「Syntax and Semantic Errors」のチェックを外す

12. iPhoneの開発環境構築
• XCODEがはいっていればOK（特別な設定は不要）

13. GUIじゃないから面倒だよね＞＜
プロジェクトの作成

14. プロジェクトの作成①
• cocos2d-xでは、コマンドプロンプトからプロジェクト
を作成します。iPhone/Android両方で利用できるプロ
ジェクトが作成されるので便利です。
• LaunchPadを開いて、「その他」→「ターミナル」を
起動します。
• よくつかうので、Dockに追加しておくといいでしょう。

15. プロジェクトの作成②
• 「/Users/tonosamart/cocos/cocos2d-x-2.2/tools/
project-creator/create_project.py」を実行します。
• まずは、フォルダを移動します。
– cd cocos/cocos2d-x-2.2/tools/project-creator
• 次に、プロジェクト名、パッケージ名、プログラム言語
をパラメータに指定してプログラムを実行します。
– ./create_project.py -project Test -package
com.tonosamart.test -language cpp
• 上手く行けば、cocos2d-x-2.2の下のprojectsの下にプ
ロジェクト名でフォルダが出来ます。

16. プロジェクトの作成③
tonosamart-mac-2:project-creator tonosamart$ ./create_project.py project Test -package com.tonosamart.test -language cpp
proj.ios
: Done!
proj.android
: Done!
proj.win32
: Done!
proj.winrt
: Done!
proj.wp8
: Done!
proj.mac
: Done!
proj.blackberry
: Done!
proj.linux
: Done!
proj.marmalade
: Done!
New project has been created in this path: /Users/tonosamart/
cocos/cocos2d-x-2.2/projects/Test
Have Fun!
tonosamart-mac-2:project-creator tonosamart$

17. プロジェクトの作成④
• プロジェクトの中身は右図の様な
構成になっています。
• Classesフォルダにプログラムを
おいて、Resourcesフォルダに画
像などのリソースを配置します。
• proj.iosなどのフォルダがそれぞ
れのOSごとにできます。この
フォルダを用いてOS毎にビルド
などを行います。

18. まずはAndroidから
Androidで動かす

19. Androidで動かす①
• 「File」→「New」→「Project」を選択
• ダイアログが出るので「Android」→「Android
Project from Existing Code」を選んで「Next」

20. Androidで動かす②
• ダイアログが出るので、Root Directoryで「/Users/
tonosamart/cocos/cocos2d-x-2.2/cocos2dx/
platform/android/java」を選択
• Projectsに表示されたら「Finish」を押す
※うまくいくと、
Package Explorerに、libcocos2dxが追加される

21. Androidで動かす③
• もう一回同じ手順で、「/Users/tonosamart/cocos/
cocos2d-x-2.2/projects/Test/proj.android」を追加
する
※あとは、通常のAndroid同様、実機などで
実行できます。
※Eclipse外で変更を加えた場合は、「File」
→「Refresh」を忘れずに行って下さい。
※ブレイクポイントは使えません。不便＞＜

22. Androidで動かす④
• エミュレータで動かす場合は、
「Use Host GPU」にチェッ
クを入れる必要があります。

23. シュミレーターが速いのがうれしい
iPhoneで動かす

24. iPhoneで動かす①
• proj.iosに.xcodeprojがあるのでxcodeで開けばOK

25. iPhoneで動かす②
• 下記のwarningは、Perform Changesで設定を変更

26. iPhoneで動かす③
• あとは通常のプロジェクト同様、エミュレータや実機で
動かせます！
※Androidと違いブレイクポイントが使えます

27. Androidがめんどくさい＞＜
プロジェクトへのファイル追加

28. プロジェクトへのファイル追加
• プロジェクトにファイルを追加するには、手順を追う必
要があります。
• プログラムは、Classesフォルダ、画像はResourcesに
おく必要があるからです。
• Xcodeで配置した後に、Androidで読み込ませる方法が
楽なのでそれを説明します！

29. Classの追加（iPhone）①
• メニューからFile→New→Fileを選びます。
• C and C++で、C++ Classを選んで
「Next」を押します。

30. Classの追加（iPhone）②
• 名前をTitleScene.cppにして、保存先をClassesにして
Create

31. Classの追加（Android）
• jniの中にあるAndroid.mkを開きます。
• LOCAL_SRC_FILESに、TitleScene.cpp
を追加します。

32. Resourceの追加（iPhone）①
• 画像や音楽などをXcodeのResourcesフォ
ルダにドラック＆ドロップします。
• ダイアログが出るので、図のようになってい
るのを確認してFinishを押します。

33. Resourcesの追加（iPhone）②
• Resourcesに追加されていることを確認します。
• フォルダを追加した場合青くなります。
• 念のため右クリックメニューの「Show in
Finder」で、Resourcesフォルダの中に物理的に
格納されていることを確認して下さい。

34. Resourceの追加（Android）
• Project→Cleanをすると、assetsの中に
ファイルがコピーされます。（このとき、毎
回assetsフォルダの中身は削除されるので注
意して下さい。）

35. とりあえず簡単なものを
キャラクターを表示してみる

36. キャラクターを表示してみる
• TitleSceneを改造していきましょう。とりあえず、単純
なひな形のようなものを作ります。
• 画像はとりあえず、images/iPhoneの中に入っているや
つを使います。
• もともとプロジェクトを作った時に入っている
HelloWorldSceneを参考にしながら作りましょう!

37. AppDelegate.cpp
pDirector->setOpenGLView(pEGLView);
// ファイルパスを設定
std::vector<std::string> searchPaths;
searchPaths.push_back("images");
CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);
std::vector<std::string> resDirOrders;
resDirOrders.push_back("iPhone");
CCFileUtils::sharedFileUtils()>setSearchResolutionsOrder(resDirOrders);
// turn on display FPS

38. TitleScene.h
#ifndef __Test__TitleScene__
#define __Test__TitleScene__
#include "cocos2d.h"
class TitleScene : public cocos2d::CCLayer{
public:
virtual bool init();
static cocos2d::CCScene* scene();
CREATE_FUNC(TitleScene);
};
#endif /* defined(__Test__TitleScene__) */

39. TitleScene.cpp①
#include "TitleScene.h"
USING_NS_CC;
CCScene* TitleScene::scene(){
CCScene *scene = CCScene::create();
TitleScene *layer = TitleScene::create();
scene->addChild(layer);
return scene;
}
bool TitleScene::init(){
if(!CCLayer::init()){
return false;
}
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

40. TitleScene.cpp②
CCSprite* pBgSprite = CCSprite::create("bg.png");
pBgSprite->setPosition(ccp(visibleSize.width/2 + origin.x,
visibleSize.height/2 + origin.y));
this->addChild(pBgSprite, 0);
CCSprite* pChrSprite1 = CCSprite::create("chr.png");
pChrSprite1->setPosition(ccp(0 + origin.x, 0 + origin.y));
this->addChild(pChrSprite1, 1);
CCSprite* pChrSprite2 = CCSprite::create("chr.png");
pChrSprite2->setPosition(ccp(480 + origin.x, 320 + origin.y));
this->addChild(pChrSprite2, 2);
return true;
}

41. TitleSceneを呼び出す
• AppDelegate.cppのHelloWorldSceneを
TitleSceneに置き換えます。
• これで、TitleSceneが起動時に呼ばれる
ようになります。

42. できた！
• こんなかんじ

43. かいせつ
• CCDirector::sharedDirector()->getVisibleSize()で画
面のサイズが取得できます。
• CCPoint origin = CCDirector::sharedDirector()>getVisibleOrigin()は、あとで説明するけど、
kResolutionNoBorderを使った時の補正用の差分が取
得できます。

44. とりあえず楽な方法で実装
複数画面サイズへの対応

45. 複数画面サイズへの対応①
• cocos2d-xで作成したアプリは、
iPhone,Android,iPadなど複数の端末で動作で
きます。
• 端末ごとに画面サイズがちがうため、対応が必
要です。cocos2d-xではそのための方法が用意
されています。

46. 複数画面サイズへの対応②
• 複数画面サイズへの対応を簡単にするために、
setDesignResolutionSizeという命令が用意されて
います。
• 実際の画面サイズとは別に、cocos2d-x上で基準と
なる画面サイズを決めることが出来ます。
• CCEGLViewProtocol::setDesignResolutionSize(
float width, float height, ResolutionPolicy
resolutionPolicy)
• width,heightには基準となる画面サイズを、
resolutionPolicyには、拡大縮小のアルゴリズムを
指定します。

47. 複数画面サイズへの対応③
• 画面サイズごとに、リソースを読み込むフォルダを
変更します。
• 変更の基準ですが、端末判定（iPhone/iPad）や、
画像のサイズ（WidthまたはHeight）で判定すると
いいでしょう。
• また、その時に基本となる解像度とのスケールの違
いを計算して設定します。これにより、retaina画像
を利用できます。
• 今回のサンプルでは、簡単にするために３種類の解
像度にしましたが、AndroidやiPadの実機に合わせ
て画像を用意しるといいでしょう。

48. AppDelegate.ccp①
bool AppDelegate::applicationDidFinishLaunching() {
// initialize director
CCDirector* pDirector = CCDirector::sharedDirector();
CCEGLView* pEGLView = CCEGLView::sharedOpenGLView();
pDirector->setOpenGLView(pEGLView);
// ResolutionSize（visibleSize）の設定
// CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320,
kResolutionExactFit);
// CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320,
kResolutionNoBorder);
CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320, kResolutionShowAll);
// CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320,
kResolutionFixedHeight);
// CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320,
kResolutionFixedWidth);
// CCEGLView::sharedOpenGLView()->setDesignResolutionSize(480, 320,
kResolutionUnKnown);

49. AppDelegate.ccp②
// ファイルパスと scale を設定
TargetPlatform platform = CCApplication::sharedApplication()->getTargetPlatform();
CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();
std::vector<std::string> searchPaths;
searchPaths.push_back("images");
CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);
std::vector<std::string> resDirOrders;
if (platform == kTargetIphone ¦¦ platform == kTargetIpad){
if (frameSize.height >= 1280){
resDirOrders.push_back("iPad_hd");
pDirector->setContentScaleFactor(4.0f);
}else if (frameSize.height >= 640){
resDirOrders.push_back("iPhone_hd");
pDirector->setContentScaleFactor(2.0f);
}else{
resDirOrders.push_back("iPhone");
}

50. AppDelegate.ccp③
}else{
if (frameSize.height >= 1280){
resDirOrders.push_back("Android_L");
pDirector->setContentScaleFactor(4.0f);
}else if (frameSize.height >= 640){
resDirOrders.push_back("Android_M");
pDirector->setContentScaleFactor(2.0f);
}else{
resDirOrders.push_back("Android_S");
}
}
CCFileUtils::sharedFileUtils()>setSearchResolutionsOrder(resDirOrders);

51. AppDelegate.ccp④
// turn on display FPS
pDirector->setDisplayStats(true);
// set FPS. the default value is 1.0/60 if you don't call this
pDirector->setAnimationInterval(1.0 / 60);
// create a scene. it's an autorelease object
CCScene *pScene = TitleScene::scene();
// run
pDirector->runWithScene(pScene);
return true;
}

52. TitleScene.cpp①
bool TitleScene::init(){
if(!CCLayer::init()){
return false;
}
CCSize frameSize = CCEGLView::sharedOpenGLView()>getFrameSize();
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCPoint origin = CCDirector::sharedDirector()->getVisibleOrigin();

53. TitleScene.cpp②
CCString *pLabelTxt = CCString::createWithFormat(
"F(%d,%d) V(%d,%d) O(%d,%d)",
(int)frameSize.width,
(int)frameSize.height,
(int)visibleSize.width,
(int)visibleSize.height,
(int)origin.x,
(int)origin.y
);
CCLabelTTF* pLabel = CCLabelTTF::create(pLabelTxt->getCString() , "Arial", 24);
pLabel->setPosition(ccp(origin.x + visibleSize.width/2,
origin.y + pLabel->getContentSize().height));
this->addChild(pLabel, 1);

54. TitleScene.cpp③
CCSprite* pBgSprite = CCSprite::create("bg.png");
pBgSprite->setPosition(ccp(visibleSize.width/2 + origin.x,
visibleSize.height/2 + origin.y));
this->addChild(pBgSprite, 0);
CCSprite* pChrSprite1 = CCSprite::create("chr.png");
pChrSprite1->setPosition(ccp(0 + origin.x, 0 + origin.y));
this->addChild(pChrSprite1, 1);
CCSprite* pChrSprite2 = CCSprite::create("chr.png");
pChrSprite2->setPosition(ccp(480 + origin.x, 320 + origin.y));
this->addChild(pChrSprite2, 2);
return true;
}

55. できた！
• こんなかんじ
• 比率をまもって拡大する
ため、余分な部分は黒く
なる（クリッピングされ
るので、はみ出したりは
しない）

56. やってみよう
• resolutionPolicyを色々変更してみよう！
• 使いやすいのは、kResolutionShowAllで、画面全
体を描画します。基本的に、縦横比が変わらない系
の方がやりやすいと思います。ただ、黒い部分がで
きるのでゲームによってはストレスになるかも
• kResolutionNoBorderは、縦横比を変えずに画面
全体に収まるように描画するため上下または左右が
はみ出します。
• このときに、はみ出た分を補正するのにorigin.x、
origin.yを使います。

57. まとめ
• インストールとiPhone/Android/iPad対
応を何となく理解した！

58. とのさまラボ！
• 勉強会に参加した人どうしのコミニュティがほしい！
勉強会の開催日時の告知がほしい！
という意見をみなさまからいただいたので、
コミニュティを作成しました！
• 毎週木曜日は、もくもく勉強会も
開催しています！
ぜひ「いいね！」をお願いします！
h4ps://www.facebook.com/TonosamaLabo

59. 「もくもく」勉強会
• 毎週木曜日に、「もくもく」勉強会やってます！
• 場所は新宿！facebookページからお申し込みください！
h4ps://www.facebook.com/TonosamaLabo

60. おわり
主催（共同開催）：
株式会社 gooya
http://www.gooya.co.jp/
メドレー株式会社
http://www.medley.co.jp/
講師：西田 寛輔 (Tonosamart)
http://www.facebook.com/tonosamart