Cocos2d-x勉強会 2014/10/05

Cocos2d-x勉強会

松田康弘

※2014/10/5時点の情報です。

概要● Cocos2d-xについて● 環境構築（Hello Worldまで）● Cocos2d-xを触ってみる

● テキストを表示する● 画像を表示する● ボタンの作成とイベントの処理● 画像をアニメーションさせる● タッチイベントの処理● 当たり判定の処理● BGM・SEの再生

Cocos2d-xについて

Cocos2d-xについて● Cocos2d-xはマルチプラットフォーム対応の

ゲームエンジンiOS、Android、WindowsPhoneなどのスマホMac、Windows、Linuxでも動作します

● 人気ゲームでの採用実績が豊富の今どきな技術

● 無料！そしてオープンソース

Cocos2d-xについて● 主な開発言語はC++11

LuaやJavaScriptでの開発も可能● オフィシャルのGUIツールがあります

CocosStudio

Cocos2d-xについて● どういう訳か3Dにもどんどん対応中

Cocos2d-xについて● 対応していない機能

● 課金処理● 広告の表示● Facebook・Twitter・LINEなどとの連携● WebViewの表示

この辺をちゃんと実装するには各プラットフォームの知識がないと辛いです

環境構築（Hello Worldまで）

環境構築（Hello Worldまで）● iOSとAndroid開発に必要なもの

● Cocos2d-x（iOS・Android）● Xcode（iOS）● Android SDK（Android）● Android NDK（Android）● Java SE（Android）● Eclipse（Android）● Ant（Android）● Python（iOS・Android）

環境構築（Hello Worldまで）● Cocos2d-x（ver.3.2）

現在の最新はver.3.3betahttp://www.cocos2d-x.org/download/version#Cocos2d-x

● Xcode（ver.5.1.1）（Windows版ありません）現在の最新はver.6.0.1https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

http://www.cocos2d-x.org/download/version#Cocos2d-x

https://itunes.apple.com/jp/app/xcode/id497799835?mt=12

環境構築（Hello Worldまで）● Android SDK（最新版）● Eclipse

２つセットで配布されてますhttp://developer.android.com/sdk/index.html

● Android NDK（ver.r9d）現在の最新はver.r10b最新だと動かないそうmac（64bit）http://dl.google.com/android/ndk/android-ndk-r9d-darwin-x86_64.tar.bz2windows（64bit）http://dl.google.com/android/ndk/android-ndk-r9d-windows-x86_64.zip32bitは「_64」消した先に飛びましょう

http://developer.android.com/sdk/index.html

http://dl.google.com/android/ndk/android-ndk-r9d-darwin-x86_64.tar.bz2

http://dl.google.com/android/ndk/android-ndk-r9d-windows-x86_64.zip

環境構築（Hello Worldまで）● Java SE（最新版）

macはEclipse起動時に出てくるダイアログだけで簡単

http://www.oracle.com/technetwork/java/javase/downloads/index.html

● Ant（最新版）http://ant.apache.org/bindownload.cgi

● Python（ver.2.7.8）現在の最新はver.3系　Pathも通しましょうhttps://www.python.org/download/releases/2.7.8/

http://www.oracle.com/technetwork/java/javase/downloads/index.html

http://ant.apache.org/bindownload.cgi

https://www.python.org/download/releases/2.7.8/

環境構築（Hello Worldまで）● 全てインストールが完了したらターミナルを開

きます（Windowsはコマンドプロンプト）● Cocos2d-xを解凍したディレクトリに移動● python setup.py　と入力● 環境変数が設定されていない場合は場所を聞い

てくるので配置したディレクトリを指定します

環境構築（Hello Worldまで）● setup.pyがやってくれるていること

● 必要な環境変数のチェックと作成● 必要になるであろう場所をPathに追加

(windowsではandroid-sdkのtoolsとか足してくれなかった)

環境構築（Hello Worldまで）● 新規プロジェクトの作成

● ターミナルで以下のように入力cocos new Cocos2dxStudy -l cpp -p com.example– 最初の-l（language：開発言語）だけ必須– Cocos2dxStudyとしている箇所はプロジェクトの名前

（省略するとMyCppGameになる）– -pはパッケージ名– -dは配置するディレクトリ

（省略するとカレントに作られます）

※cocos -h や cocos new -h などで詳細なヘルプ出ます

環境構築（Hello Worldまで）● プロジェクトの実行

● ターミナルで以下のように入力cocos run -p ios -s Cocos2dxStudy -m debug -q– 最初の-p（platform：実行させたい対象）だけ必須

（ios | android | mac | web | win32 | linux）から選ぶ– -sはソースのあるディレクトリ

（省略するとカレントディレクトリのプロジェクト）– -mはビルドのモード（release | debug）

（省略するとdebugになる）– -qをquitでビルド中の詳細なログ出力を廃止します

（省略すると詳細なログが出力されます）


最初は時間がかかります（10分程）


出来た！

環境構築（Hello Worldまで）● うまくいかない場合

● iOS– 管理者権限がない– Xcodeからシミュレータを起動させたことがない– Xcode6入ってるとios-simが古いので更新必要

● Android– Android2.3.3 (API 10)のSDK Platformがない

project.properties内のtarget=android-10を既にインストール済みのAPIレベルに合わせるかAndroid2.3.3 (API 10)のSDK Platformをインストールする

環境構築（Hello Worldまで）● IDE（統合開発環境）での実行

● iOS（Xcode）– Cocos2dxStudy.xcodeprojファイルをダブルクリック– ▶の形したボタンをクリック

簡単！

macや他のiPhoneに切り替え可能

環境構築（Hello Worldまで）● IDE（統合開発環境）での実行

● Android（Eclipse）– Eclipseを起動– Preferencesに環境変数NDK_ROOTを追加

（Mac）Eclipse → 環境設定（Windows）Window → PreferencesC/C++ → Build → Environment → Add

環境構築（Hello Worldまで）● Android（Eclipse）続き

– プロジェクトのインポートFile → Import → Android → Existing Android Co (ry


– プロジェクトのインポート作成したプロジェクトをBrowseから選択libcocos2dxと作成したプロジェクトのみチェックしてFinish

設定を終えると頑張り始めます


– 実行の設定▶の右にある▼ボタン or Run → Run ConfigurationsAndroid Applicationをダブルクリック or 選択して New作成したプロジェクトをBrowseから選択してRun

やっと！

環境構築（Hello Worldまで）● その他いろいろ

● iOSは実機転送できないの？– 出来るけどAppleにお金払ってDeveloper登録が必要です

● Androidのシミュレータは？– Android Virtual Device Managerから作成できます

(あまり性能がよろしくないのでオススメできません)

– Genymotionが高速なのでこちらがオススメ– PC上で快適に動作させる為にはx86向けでビルドします

jni/Application.mkに「APP_ABI := armeabi x86」を追記(実機はarmを使用。x86が増えるのでビルド時間2倍！)

こんなやつから↓

Cocos2d-xを触ってみる

Cocos2d-xを触ってみる● テキストを表示する● 画像を表示する● ボタンの作成とイベントの処理● 画像をアニメーションさせる● タッチイベントの処理● 当たり判定の処理● BGM・SEの再生

Cocos2d-xを触ってみるテキストを表示する

画像を表示する

ボタンの作成とイベントの処理

Σ(ﾟдﾟlll)ﾃﾞｷﾃﾙ！

Cocos2d-xを触ってみる● テキストを表示する

sampleそのまま抜粋

Cocos2d-xを触ってみる● テキストを表示する（日本語でおｋ）

Gist: https://gist.github.com/yasuhiro-matsuda/ff607e214640d3ed351f

https://gist.github.com/yasuhiro-matsuda/ff607e214640d3ed351f


● ラベルの作成– 文字、フォント、大きさ

● 配置する場所を設定– 左端からの距離、下端からの距離（0, 0）は左下端です

auto label = Label::create("こんにちは世界", "Arial", 50);

label->setPosition(480, 580);


● 画面に追加– 追加するもの、（表示優先順位、タグ or 名前）

– 表示優先順位は高い方が上に表示されます– タグや名前を設定しておくと取得が簡単になります

this->addChild(label, 1);this->addChild(label, 1, 1);this->addChild(label, 1, "こんにちは世界");

１２

３

auto label = getChildByTag(1);auto label = getChildByName("こんにちは世界");

Cocos2d-xを触ってみる● 画面の解像度と位置やサイズの関係について

● 基本的にCocos2d-x内では画面の解像度そのまま– 例えば200px×200pxの画像を座標(200, 200)に表示すると

iPhone3G320*480

iPhone4640*960

iPhone5640*1136

iPhone6+1080*1920

iPad31536*2048

だいたい、こんな感じになります


● マルチ解像度への対応はできるが大変過ぎる– タブレットやAndroid含めるとアスペクト比が1.2〜2程度まで存在し、全てで綺麗に表示できるレイアウトの模索

– 組み込む画像の大きさ● 複数の解像度のレンジに合わせて大・中・小などに分ける

– 全てパッケージに含めるとアプリサイズ膨張– 追加ダウンロードさせる時に分岐いれるのが手間– そもそも3サイズの画像の書き出しが手間

● 大は小をかねると大きい物だけ用意– アプリサイズ膨張・追加ダウンロード時間長すぎ– 低スペックでロード時間＋、メモリ不足で強制終了


● めんどくさいからiPhone4か5のことだけ考えよう！– 画面は640*960か640*1136でデザインする– 用意する画像もこのサイズのみ

iPhone3G iPhone4 iPhone5 iPhone6+ iPad3

デザインサイズを640*960に設定して全て表示させる設定にするとこうなります


● デザインサイズをiPhone4inchの横向きの大きさに指定する解像度が異なる場合は全部見せるように拡縮させる

– AppDelegate.cpp内のapplicationDidFinishLaunching()に追記glviewをごにょごにょし終わった直後くらい

bool AppDelegate::applicationDidFinishLaunching() { // initialize director auto director = Director::getInstance(); auto glview = director->getOpenGLView(); if(!glview) { glview = GLView::create("My Game"); director->setOpenGLView(glview); } // iPhone4inchサイズでデザインする glview->setDesignResolutionSize(960, 640, ResolutionPolicy::SHOW_ALL);

Cocos2d-xを触ってみる● 画像を表示する

● スプライトの作成– 画像のパスを指定

（Resourcesフォルダからの相対パスか絶対パス）

– 後は文字の時と同じ

auto sprite = Sprite::create("HelloWorld.png");

sprite->setPosition(480, 320);this->addChild(sprite, 0);

Cocos2d-xを触ってみる● ボタンの作成とイベントの処理

● メニューアイテムイメージ（ボタン）の作成– 通常時画像のパス、押されている時の画像のパス、押された時の処理内容（コールバックかラムダ式）

– funcの部分はややこしいので、次で解説

auto closeItem = MenuItemImage::create( "CloseNormal.png", "CloseSelected.png", func);


● コールバックとラムダ式の書き方– コールバック（別途関数用意する必要あり）

– ラムダ式

–

auto func1 = CC_CALLBACK_1(HelloWorld::menuCloseCallback, this);

auto func2 = [](Ref* p){ CCLOG("閉じるボタンが押された"); };

void HelloWorld::menuCloseCallback(Ref* pSender){ CCLOG("閉じるボタンが押された");}


● コールバックとラムダ式の書き方– コールバック（マクロがしている内容）

– ラムダ式（コールバックと同じことさせる方法）

auto func3 = std::bind(&HelloWorld::menuCloseCallback, this, std::placeholders::_1);

auto func4 = [this](Ref* p){ this->menuCloseCallback(p); };


● メニューの作成– メニューはメニューアイテムを管理するもの– メニューアイテムを追加する先はこいつ– 追加したいだけ追加して最後にnullptrを渡す

– 作ってから足しても大丈夫

auto menu = Menu::create(closeItem, nullptr);

auto menu = Menu::create();menu->addChild(closeItem);


● メニューを表示– メニューにアイテムがぶら下がるので座標管理がしやす

いように、メニューは左下（0, 0）にして追加

– アイテムの座標を変更する（addChildする前にしとかないといけないとかはない）

menu->setPosition(Vec2::ZERO);this->addChild(menu, 1);

closeItem->setPosition(940, 20);

Cocos2d-xを触ってみるここまではサンプルに組み込まれていた内容

Cocos2d-xを触ってみる● テキストを表示する● 画像を表示する● ボタンの作成とイベントの処理● 画像をアニメーションさせる● タッチイベントの処理● 当たり判定の処理● BGM・SEの再生

Cocos2d-xを触ってみる● 画像をアニメーションさせる

● 基本的な動作– 移動（MoveTo, MoveBy）– 回転（RotateTo, RotateBy）– 拡大縮小（ScaleTo, ScaleBy）– 透過（FadeTo, FadeIn, FadeOut）– 点滅（Blink）– 傾斜（SkewTo, SkewBy）– 色（TintTo, TintBy）– ジャンプ（JumpTo, JumpBy）– ベジェ曲線移動（BezierTo, BezierBy）


● 基本の動作を拡張させる（時系列）– 順再生（Sequence）– 同時再生（Spawn）– 繰り返し（Repeat）– 永続（RepeatForever）– 待ち時間（DelayTime）

● パラパラアニメ– フレーム管理（Animation）– 実行形式（Animate）


● 基本の動作を拡張させる（変化）– 開始時加速（EaseIn）– 終了時減速（EaseOut）– 開始時加速・終了時減速（EaseInOut）– 指数関数曲線変化（EaseExponentialIn）– サイン関数曲線変化（EaseSinIn）– 弾力変化（EaseElasticIn）– バウンド変化（EaseBounceIn）– 戻り変化（EaseBackIn）

ここから下以降にも️Out, InOutあります


● アニメーション中にコールバックを実行– 引数なし（CallFunc）– （runActionした）自身を引数（CallFuncN）

以下duprecated指定されました（ご利用は計画的に）● 自身と任意データ（void*）を引数（__CCCallFuncNO）● Refを継承したオブジェクトを引数（__CCCallFuncO）


● 基本形– アニメーションさせる対象を準備

– 実行させるアニメーションを作成して再生させる（ここでは例：こんなクラスはありません）

auto sprite = Sprite::create("UnityChan.png");addChild(sprite);

auto animation = AnimHoge::create(hoge);sprite->runAction(animation);


● 移動（MoveTo, MoveBy）– 移動にかかる時間（秒）、移動させる座標

– Toは絶対値でByは相対値の違いで引数は同じなので次からは省略します

auto animation = MoveTo::create(0.5f, Vec2(100,100));auto animation = MoveBy::create(1.2f, Vec2(65,50));


● 回転（RotateTo, RotateBy）– 時間（秒）、角度（°）

● 拡大縮小（ScaleTo, ScaleBy）– 時間（秒）、倍率

（縦横別の倍率にしたい時は、sec, scaleX, scaleY）

auto animation = RotateTo::create(0.5f, 90);

auto animation = ScaleTo::create(0.5f, 2.5f);


● 透過（FadeTo）– 時間（秒）、不透明度（0〜255：透明〜不透明）

● 透過（ FadeIn, FadeOut）– 時間（秒）

auto animation = FadeTo::create(0.5f, 100);

auto animation = FadeIn::create(0.5f);auto animation = FadeOut::create(0.5f);


● 点滅（Blink）– 時間（秒）、回数

● 傾斜（SkewTo, SkewBy）– 時間（秒）、X軸傾き、Y軸傾き

auto animation = SkewTo::create(0.5f, 45, 30);

auto animation = Blink::create(0.5f, 5);


● 色（TintTo, TintBy）– 時間（秒）、赤、緑、青（0〜255）

● ジャンプ（JumpTo, JumpBy）– 時間（秒）、座標、高さ、回数JumpTo::create(0.5f, Vec2(200, 30), 150, 2);

TintTo::create(0.5f, 50, 0, 40);


● ベジェ曲線移動（BezierTo, BezierBy）– 時間（秒）、ベジェ曲線設定

ccBezierConfig config;config.controlPoint_1 = Vec2(900, 200);config.controlPoint_2 = Vec2(200, 600);config.endPosition = Vec2(100, 100);BezierTo::create(0.5f, config);

コントロールポイント１

コントロールポイント２

エンドポジション起点


● 順再生（Sequence）– 繋げたいものを順に（先頭から再生）、最後にnullptr

● 同時再生（Spawn）– 同時再生したいものを複数、最後にnullptr

– お互い入れ子に出来ます

Sequence::create(sequence, rotate, spawn, scale, nullptr);

Spawn::create(move, spawn, scale, sequence, nullptr);


● 繰り返し（Repeat）– アニメーション、回数

● 永続（RepeatForever）– アニメーション

Repeat::create(animation, 4);

RepeatForever::create(animation);


● 待ち時間（DelayTime）– 時間（秒）

– 主にSequenceで使用する

DelayTime::create(2.0f);


● パラパラアニメ– フレーム管理（Animation）

auto animation = Animation::create();animation->addSpriteFrameWithFile("UnityChan_run_1.png");animation->addSpriteFrameWithFile("UnityChan_run_2.png");animation->setDelayPerUnit(0.3f);animation->setLoops(3);animation->setRestoreOriginalFrame(true);

これはそのままではrunActionに渡せません


● パラパラアニメ– 実行形式（Animate）

● アニメーションからrunActionに渡せる形式にする

auto animate = Animate::create(animation);


● テクスチャアトラスのメリット– 無駄なメモリ消費を抑える– １度の描画処理で複数の画像が描画出来る

● テクスチャアトラス化したファイル読み込み

● テクスチャアトラスから単体画像の作成

auto frameCache = SpriteFrameCache::getInstance();frameCache->addSpriteFramesWithFile("UnityChan.plist");

auto unityChan = Sprite::createWithSpriteFrameName("UnityChan_footwork_1.png");


● パラパラアニメ（テクスチャアトラス版）– addSpriteFrameの部分だけ変わります。

auto frameCache = SpriteFrameCache::getInstance();auto animation = Animation::create();animation->addSpriteFrame(

frameCache->getSpriteFrameByName("UnityChan_run_1.png"));animation->addSpriteFrame(

frameCache->getSpriteFrameByName("UnityChan_run_2.png"));

Cocos2d-xを触ってみる● タッチイベントの処理

● シングルタップイベントリスナーの作成

● 開始・移動・終了にコールバックを設定

● イベント発送係に追加するgetEventDispatcher()->addEventListenerWithSceneGraphPriority(listener, this);

listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::onTouchBegan, this);listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::onTouchMoved, this);listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::onTouchEnded, this);

auto listener = EventListenerTouchOneByOne::create();


● コールバックを用意bool HelloWorld::onTouchBegan(Touch *touch, Event *event) { CCLOG("onTouchBegan"); return true;}void HelloWorld::onTouchMoved(Touch *touch, Event *event) { CCLOG("onTouchMoved");}void HelloWorld::onTouchEnded(Touch *touch, Event *event) { CCLOG("onTouchEnded");}


● 受け取れる内容– Touch

● Begin、Move、Endの状態で内容が変わることはない● タッチ開始位置（getStartLocation）● 今タッチされている位置（getLocation）● 前回受け取った時にいた位置（getPreviousLocation）● 前回受け取った時からの位置差分（getDelta）● etc

– Event● 使うことはない。Layerでの引数の名前がunused_event● イベントのタイプ（getType）TOUCH固定● etc

Cocos2d-xを触ってみる● 当たり判定の処理

● 対象のコンテンツ範囲を取得– getBoundingBoxはscaleによる拡大縮小に対応した内容

が取得可能

– 実際の画像の大きさより小さくして当たり判定設定したい場合は自分で実装必要

– 画像のアルファ値で判定とかも自分で実装必要

auto unityChan = this->getChildByName("UnityChan");Rect rect = unityChan->getBoundingBox();

Cocos2d-xを触ってみる● 当たり判定の処理

● 対象のコンテンツの範囲に含まれるか確認する– 1点のみの確認（containsPoint）

● タッチイベントの座標など

– 範囲同士の確認（intersectsPoint）● 画像同士の衝突など

rect.containsPoint(checkVec2);

rect.intersectsRect(checkRect);

Cocos2d-xを触ってみる● BGM・SEの再生

● 音声ライブラリを使用する準備– AppDelegateにアプリが裏に回る時と復帰時に音声も連

動するように追記#include "SimpleAudioEngine.h"void AppDelegate::applicationDidEnterBackground() { Director::getInstance()->stopAnimation(); CocosDenshion::SimpleAudioEngine::getInstance()->pauseBackgroundMusic(); CocosDenshion::SimpleAudioEngine::getInstance()->pauseAllEffects();}void AppDelegate::applicationWillEnterForeground() { Director::getInstance()->startAnimation(); CocosDenshion::SimpleAudioEngine::getInstance()->resumeBackgroundMusic(); CocosDenshion::SimpleAudioEngine::getInstance()->resumeAllEffects();}

Cocos2d-xを触ってみる● BGM・SEの再生

● 流す前のロードprelord

● 再生– BGMの第二引数はループするか

CocosDenshion::SimpleAudioEngine::getInstance()->preloadBackgroundMusic("bgm.mp3");CocosDenshion::SimpleAudioEngine::getInstance()->preloadEffect("se.mp3");

CocosDenshion::SimpleAudioEngine::getInstance()->playBackgroundMusic("bgm.mp3",true);CocosDenshion::SimpleAudioEngine::getInstance()->playEffect("se.mp3");

Cocos2d-x勉強会

今回は、以上となります。

ご清聴ありがとうございました。

Engineering

Cocos2d-x勉強会 2014/10/05