cocos2d-x勉強会
㉟簡単なアプリをつくってみよう

はじめに
• macのみで、Windowsの解説はしません。Windowsは、
Cygwinとかも入れないとダメみたい。
• cocos2d-xは、色々な言語が使えますがcppを想定して
います。

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

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

プロジェクトの作成②
• 「/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 Sound -package
com.tonosamart.test -language cpp
• 上手く行けば、cocos2d-x-2.2の下のprojectsの下にプ
ロジェクト名でフォルダが出来ます。

プロジェクトの作成③
tonosamart-mac-2: tonosamart$ cd cocos/cocos2d-x-2.2/tools/
project-creator
tonosamart-mac-2:project-creator tonosamart$ ./create_project.py project Sound -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/Sound
Have Fun!

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

まずはAndroidから
Androidで動かす

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

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

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

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

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

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

iPhoneで動かす②
• 下記のwarningがでた場合は、Perform Changesで設
定を変更

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

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

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

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

Classの追加（iPhone）②
• 名前をSoundScene.cppにして、保存先をClassesにし
てCreateしてください。

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

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

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

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

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

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

AppDelegate.cpp
pDirector->setOpenGLView(pEGLView);
// ResolutionSize（visibleSize）の設定
CCEGLView::sharedOpenGLView()>setDesignResolutionSize(480, 320, kResolutionShowAll);
// ファイルパスと scale を設定
std::vector<std::string> searchPaths;
searchPaths.push_back("images");
pDirector->setContentScaleFactor(2.0f);
CCFileUtils::sharedFileUtils()->setSearchPaths(searchPaths);
// turn on display FPS

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

SoundScene.cpp①
#include "SoundScene.h
USING_NS_CC;
CCScene* SoundScene::scene(){
CCScene *scene = CCScene::create();
SoundScene *layer = SoundScene::create();
scene->addChild(layer);
return scene;
}
bool SoundScene::init(){
if(!CCLayer::init()){
return false;
}

SoundScene.cpp②
CCSize frameSize = CCEGLView::sharedOpenGLView()>getFrameSize();
CCSize visibleSize = CCDirector::sharedDirector()->getVisibleSize();
CCSprite* pBgSprite = CCSprite::create("bg.png");
pBgSprite->setPosition(ccp(visibleSize.width/2, visibleSize.height/2));
this->addChild(pBgSprite, 0);

SoundScene.cpp③
CCSprite* pTolemorouSprite = CCSprite::create("tolemorou.png");
pTolemorouSprite->setPosition(ccp(240, 120));
this->addChild(pTolemorouSprite, 1);
return true;
}

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

できた！
• こんなかんじ

かいせつ
• CCDirector::sharedDirector()->getVisibleSize()で画
面のサイズが取得できます。

音楽に挑戦
BGMをならしてみる

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

音楽のフォーマット
• cocos2d-xではいろいろなフォーマット
が使えます。MP3やWAVであればiPhone
とAndroidどちらでも使えます！
• でも、MP3はライセンス料がかかるし、
WAVは容量が大きい＞＜
• 今回は端末を判定して、cafとoggを鳴ら
しわけます。

MP3のライセンス料（参考）
iOSとAndroidOSそれぞれにアプリを出した場合
OS毎に5,000個までは無償
販売数100, 000以下
$2,500一括払い
販売数100,000以上
1アプリ毎に$0.75
※アプリ本体無料＋アプリ内の広告による収入あり、アプリ本体無料
＋アプリ内課金（機能解除等）による収入ありでもライセンス料は必
要とのこと
※あくまで参考数値です。条件等でも変わるようなので確認してみて
下さい。

SoundScene.cpp①
#include "SimpleAudioEngine.h"
using namespace CocosDenshion;

SoundScene.cpp②
SimpleAudioEngine::sharedEngine()->setBackgroundMusicVolume(0.5);
TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform();
if (platform == kTargetIphone ¦¦ platform == kTargetIpad){
SimpleAudioEngine::sharedEngine()>preloadBackgroundMusic("sounds/caf/bgm.caf");
SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/
caf/bgm.caf", true);
}else{
SimpleAudioEngine::sharedEngine()>preloadBackgroundMusic("sounds/ogg/bgm.ogg");
SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/
ogg/bgm.ogg", true);
}
CCSize frameSize = CCEGLView::sharedOpenGLView()->getFrameSize();

できた！
• おとがなった

かいせつ
• CCApplication::sharedApplication()>getTargetPlatform()を使うと、どの端末を使っている
かを判定できます。
• iPhone,iPadの場合は.caf、それ以外（Android）の場
合は.oggを再生します。
• 音楽のファイルはResourcesのフォルダからの相対パス
で指定します。
• 今回は、Resourcesの中にsoundsフォルダを作って、
その中にcafのフォルダを作ったので、 sounds/caf/
bgm.caf のように指定します。

MENU+効果音
効果音をならしてみる

SoundScene.h
CREATE_FUNC(SoundScene);
void cbMenuButton1(CCObject *pSender);
};
#endif /* defined(__Test__SoundScene__) */

SoundScene.cpp①
SimpleAudioEngine::sharedEngine()>setBackgroundMusicVolume(0.5);
SimpleAudioEngine::sharedEngine()->setEffectsVolume(0.5);
TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform();
if (platform == kTargetIphone ¦¦ platform == kTargetIpad){

SoundScene.cpp②
SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("sounds/
caf/bgm.caf");
SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/caf/
bgm.caf", true);
SimpleAudioEngine::sharedEngine()->preloadEffect("sounds/ogg/
shot.caf");
}else{
SimpleAudioEngine::sharedEngine()->preloadBackgroundMusic("sounds/
ogg/bgm.ogg");
SimpleAudioEngine::sharedEngine()->playBackgroundMusic("sounds/ogg/
bgm.ogg", true);
SimpleAudioEngine::sharedEngine()->preloadEffect("sounds/ogg/
shot.ogg");
}

SoundScene.cpp③
this->addChild(pTolemorouSprite, 1);
CCMenuItemImage *pButton1 =
CCMenuItemImage::create(
"balloon.png",
"balloon_pressed.png",
this,
menu_selector(SoundScene::cbMenuButton1)
);
pButton1->setPosition(ccp(360, 220));

SoundScene.cpp④
CCMenu *pMenu = CCMenu::create(pButton1, NULL);
pMenu->setPosition(CCPointZero);
this->addChild(pMenu);
return true;

SoundScene.cpp⑤
void SoundScene::cbMenuButton1(CCObject *pSender){
TargetPlatform platform = CCApplication::sharedApplication()>getTargetPlatform();
if (platform == kTargetIphone ¦¦ platform == kTargetIpad){
SimpleAudioEngine::sharedEngine()->playEffect("sounds/caf/
shot.caf");
}else{
SimpleAudioEngine::sharedEngine()->playEffect("sounds/ogg/
shot.ogg");
}
}

できた！
• おとがなった

かいせつ
• CCMenuItemImageで、メニューアイテム（今回の場合
はボタン）を作成
• CCMenu::createで、メニューアイテムが含まれたメ
ニューを作成
• ボタンが押されたら、cbMenuButton1がよばれる
• preloadEffectをさいしょにやっておく（読み込みだけ
しておいて高速化する）

まとめ
• 簡単なcocos2d-xの使い方がわかった！

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

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

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