Download as PDF, PPTX
{ CCLOG("閉じるボタンが押された"); };
void HelloWorld::menuCloseCallback(Ref* pSender)
{
CCLOG("閉じるボタンが押された");
}](https://image.slidesharecdn.com/cocos2d-x20141005-150414060623-conversion-gate01/75/Cocos2d-x-2014-10-05-40-2048.jpg)
{ this->menuCloseCallback(p); };](https://image.slidesharecdn.com/cocos2d-x20141005-150414060623-conversion-gate01/75/Cocos2d-x-2014-10-05-41-2048.jpg)
Cocos2d-x勉強会 2014/10/05
- 1.
- 2. 概要 ● Cocos2d-xについて ● 環境構築（HelloWorldまで） ● Cocos2d-xを触ってみる ● テキストを表示する ● 画像を表示する ● ボタンの作成とイベントの処理 ● 画像をアニメーションさせる ● タッチイベントの処理 ● 当たり判定の処理 ● BGM・SEの再生
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9. 環境構築（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）
- 10. 環境構築（Hello Worldまで） ● Cocos2d-x（ver.3.2） 現在の最新はver.3.3beta http://www.cocos2d-x.org/download/version#Cocos2d-x ●Xcode（ver.5.1.1）（Windows版ありません） 現在の最新はver.6.0.1 https://itunes.apple.com/jp/app/xcode/id497799835?mt=12
- 11. 環境構築（Hello Worldまで） ● AndroidSDK（最新版） ● 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.bz2 windows（64bit） http://dl.google.com/android/ndk/android-ndk-r9d-windows-x86_64.zip 32bitは「_64」消した先に飛びましょう
- 12. 環境構築（Hello Worldまで） ● JavaSE（最新版） 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/
- 13. 環境構築（Hello Worldまで） ● 全てインストールが完了したらターミナルを開 きます（Windowsはコマンドプロンプト） ● Cocos2d-xを解凍したディレクトリに移動 ●python setup.py と入力 ● 環境変数が設定されていない場合は場所を聞い てくるので配置したディレクトリを指定します
- 15. 環境構築（Hello Worldまで） ● setup.pyがやってくれるていること ● 必要な環境変数のチェックと作成 ●必要になるであろう場所をPathに追加 (windowsではandroid-sdkのtoolsとか足してくれなかった)
- 16. 環境構築（Hello Worldまで） ● 新規プロジェクトの作成 ● ターミナルで以下のように入力 cocos newCocos2dxStudy -l cpp -p com.example – 最初の-l（language：開発言語）だけ必須 – Cocos2dxStudyとしている箇所はプロジェクトの名前 （省略するとMyCppGameになる） – -pはパッケージ名 – -dは配置するディレクトリ （省略するとカレントに作られます） ※cocos -h や cocos new -h などで詳細なヘルプ出ます
- 17. 環境構築（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でビルド中の詳細なログ出力を廃止します （省略すると詳細なログが出力されます）
- 18.
- 19.
- 20. 環境構築（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をインストールする
- 21. 環境構築（Hello Worldまで） ● IDE（統合開発環境）での実行 ●iOS（Xcode） – Cocos2dxStudy.xcodeprojファイルをダブルクリック – ▶の形したボタンをクリック 簡単！ macや他のiPhoneに切り替え可能
- 22. 環境構築（Hello Worldまで） ● IDE（統合開発環境）での実行 ●Android（Eclipse） – Eclipseを起動 – Preferencesに環境変数NDK_ROOTを追加 （Mac）Eclipse → 環境設定 （Windows）Window → Preferences C/C++ → Build → Environment → Add
- 23. 環境構築（Hello Worldまで） ● Android（Eclipse）続き –プロジェクトのインポート File → Import → Android → Existing Android Co (ry
- 24. 環境構築（Hello Worldまで） ● Android（Eclipse）続き –プロジェクトのインポート 作成したプロジェクトをBrowseから選択 libcocos2dxと作成したプロジェクトのみチェックしてFinish 設定を終えると 頑張り始めます
- 25. 環境構築（Hello Worldまで） ● Android（Eclipse）続き –実行の設定 ▶の右にある▼ボタン or Run → Run Configurations Android Applicationをダブルクリック or 選択して New 作成したプロジェクトをBrowseから選択してRun やっと！
- 26. 環境構築（Hello Worldまで） ● その他いろいろ ● iOSは実機転送できないの？ –出来るけどAppleにお金払ってDeveloper登録が必要です ● Androidのシミュレータは？ – Android Virtual Device Managerから作成できます (あまり性能がよろしくないのでオススメできません) – Genymotionが高速なのでこちらがオススメ – PC上で快適に動作させる為にはx86向けでビルドします jni/Application.mkに「APP_ABI := armeabi x86」を追記 (実機はarmを使用。x86が増えるのでビルド時間2倍！) こんなやつから ↓
- 27.
- 28.
- 29.
- 30.
- 31.
- 32. Cocos2d-xを触ってみる ● テキストを表示する ● ラベルの作成 – 文字、フォント、大きさ ● 配置する場所を設定 – 左端からの距離、下端からの距離（0,0）は左下端です auto label = Label::create("こんにちは世界", "Arial", 50); label->setPosition(480, 580);
- 33. Cocos2d-xを触ってみる ● テキストを表示する ● 画面に追加 – 追加するもの、（表示優先順位、タグ or名前） – 表示優先順位は高い方が上に表示されます – タグや名前を設定しておくと取得が簡単になります this->addChild(label, 1); this->addChild(label, 1, 1); this->addChild(label, 1, "こんにちは世界"); １ ２ ３ auto label = getChildByTag(1); auto label = getChildByName("こんにちは世界");
- 34. Cocos2d-xを触ってみる ● 画面の解像度と位置やサイズの関係について ● 基本的にCocos2d-x内では画面の解像度そのまま – 例えば200px×200pxの画像を座標(200,200)に表示すると iPhone3G 320*480 iPhone4 640*960 iPhone5 640*1136 iPhone6+ 1080*1920 iPad3 1536*2048 だいたい、こんな感じになります
- 35. Cocos2d-xを触ってみる ● 画面の解像度と位置やサイズの関係について ● マルチ解像度への対応はできるが大変過ぎる – タブレットやAndroid含めるとアスペクト比が1.2〜2程度まで 存在し、全てで綺麗に表示できるレイアウトの模索 – 組み込む画像の大きさ ● 複数の解像度のレンジに合わせて大・中・小などに分ける –全てパッケージに含めるとアプリサイズ膨張 – 追加ダウンロードさせる時に分岐いれるのが手間 – そもそも3サイズの画像の書き出しが手間 ● 大は小をかねると大きい物だけ用意 – アプリサイズ膨張・追加ダウンロード時間長すぎ – 低スペックでロード時間＋、メモリ不足で強制終了
- 36. Cocos2d-xを触ってみる ● 画面の解像度と位置やサイズの関係について ● めんどくさいからiPhone4か5のことだけ考えよう！ – 画面は640*960か640*1136でデザインする –用意する画像もこのサイズのみ iPhone3G iPhone4 iPhone5 iPhone6+ iPad3 デザインサイズを640*960に設定して 全て表示させる設定にするとこうなります
- 37. Cocos2d-xを触ってみる ● 画面の解像度と位置やサイズの関係について ● デザインサイズを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);
- 38. Cocos2d-xを触ってみる ● 画像を表示する ● スプライトの作成 – 画像のパスを指定 （Resourcesフォルダからの相対パスか絶対パス） – 後は文字の時と同じ autosprite = Sprite::create("HelloWorld.png"); sprite->setPosition(480, 320); this->addChild(sprite, 0);
- 39. Cocos2d-xを触ってみる ● ボタンの作成とイベントの処理 ● メニューアイテムイメージ（ボタン）の作成 – 通常時画像のパス、押されている時の画像のパス、 押された時の処理内容（コールバックかラムダ式） – funcの部分はややこしいので、次で解説 autocloseItem = MenuItemImage::create( "CloseNormal.png", "CloseSelected.png", func);
- 40. Cocos2d-xを触ってみる ● ボタンの作成とイベントの処理 ● コールバックとラムダ式の書き方 – コールバック（別途関数用意する必要あり） – ラムダ式 autofunc1 = CC_CALLBACK_1(HelloWorld::menuCloseCallback, this); auto func2 = [](Ref* p){ CCLOG("閉じるボタンが押された"); }; void HelloWorld::menuCloseCallback(Ref* pSender) { CCLOG("閉じるボタンが押された"); }
- 41. Cocos2d-xを触ってみる ● ボタンの作成とイベントの処理 ● コールバックとラムダ式の書き方 – コールバック（マクロがしている内容） – ラムダ式（コールバックと同じことさせる方法） autofunc3 = std::bind(&HelloWorld::menuCloseCallback, this, std::placeholders::_1); auto func4 = [this](Ref* p){ this->menuCloseCallback(p); };
- 42. Cocos2d-xを触ってみる ● ボタンの作成とイベントの処理 ● メニューの作成 – メニューはメニューアイテムを管理するもの – メニューアイテムを追加する先はこいつ –追加したいだけ追加して最後にnullptrを渡す – 作ってから足しても大丈夫 auto menu = Menu::create(closeItem, nullptr); auto menu = Menu::create(); menu->addChild(closeItem);
- 43. Cocos2d-xを触ってみる ● ボタンの作成とイベントの処理 ● メニューを表示 – メニューにアイテムがぶら下がるので座標管理がしやす いように、メニューは左下（0, 0）にして追加 –アイテムの座標を変更する （addChildする前にしとかないといけないとかはない） menu->setPosition(Vec2::ZERO); this->addChild(menu, 1); closeItem->setPosition(940, 20);
- 44.
- 45.
- 46. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 基本的な動作 – 移動（MoveTo, MoveBy） –回転（RotateTo, RotateBy） – 拡大縮小（ScaleTo, ScaleBy） – 透過（FadeTo, FadeIn, FadeOut） – 点滅（Blink） – 傾斜（SkewTo, SkewBy） – 色（TintTo, TintBy） – ジャンプ（JumpTo, JumpBy） – ベジェ曲線移動（BezierTo, BezierBy）
- 47. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 基本の動作を拡張させる（時系列） – 順再生（Sequence） – 同時再生（Spawn） –繰り返し（Repeat） – 永続（RepeatForever） – 待ち時間（DelayTime） ● パラパラアニメ – フレーム管理（Animation） – 実行形式（Animate）
- 48. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 基本の動作を拡張させる（変化） – 開始時加速（EaseIn） – 終了時減速（EaseOut） –開始時加速・終了時減速（EaseInOut） – 指数関数曲線変化（EaseExponentialIn） – サイン関数曲線変化（EaseSinIn） – 弾力変化（EaseElasticIn） – バウンド変化（EaseBounceIn） – 戻り変化（EaseBackIn） ここから下以降にも ️Out, InOutあります
- 49. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● アニメーション中にコールバックを実行 – 引数なし（CallFunc） – （runActionした）自身を引数（CallFuncN） 以下duprecated指定されました（ご利用は計画的に） ●自身と任意データ（void*）を引数（__CCCallFuncNO） ● Refを継承したオブジェクトを引数（__CCCallFuncO）
- 50. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 基本形 – アニメーションさせる対象を準備 – 実行させるアニメーションを作成して再生させる （ここでは例：こんなクラスはありません） autosprite = Sprite::create("UnityChan.png"); addChild(sprite); auto animation = AnimHoge::create(hoge); sprite->runAction(animation);
- 51. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 移動（MoveTo, MoveBy） –移動にかかる時間（秒）、移動させる座標 – Toは絶対値でByは相対値の違いで引数は同じなので 次からは省略します auto animation = MoveTo::create(0.5f, Vec2(100,100)); auto animation = MoveBy::create(1.2f, Vec2(65,50));
- 52. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 回転（RotateTo, RotateBy） –時間（秒）、角度（°） ● 拡大縮小（ScaleTo, ScaleBy） – 時間（秒）、倍率 （縦横別の倍率にしたい時は、sec, scaleX, scaleY） auto animation = RotateTo::create(0.5f, 90); auto animation = ScaleTo::create(0.5f, 2.5f);
- 53. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 透過（FadeTo） – 時間（秒）、不透明度（0〜255：透明〜不透明） ●透過（ FadeIn, FadeOut） – 時間（秒） auto animation = FadeTo::create(0.5f, 100); auto animation = FadeIn::create(0.5f); auto animation = FadeOut::create(0.5f);
- 54. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 点滅（Blink） – 時間（秒）、回数 ●傾斜（SkewTo, SkewBy） – 時間（秒）、X軸傾き、Y軸傾き auto animation = SkewTo::create(0.5f, 45, 30); auto animation = Blink::create(0.5f, 5);
- 55. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 色（TintTo, TintBy） –時間（秒）、赤、緑、青（0〜255） ● ジャンプ（JumpTo, JumpBy） – 時間（秒）、座標、高さ、回数 JumpTo::create(0.5f, Vec2(200, 30), 150, 2); TintTo::create(0.5f, 50, 0, 40);
- 56. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● ベジェ曲線移動（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); コントロールポイント１ コントロールポイント２ エンドポジション 起点
- 57. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 順再生（Sequence） – 繋げたいものを順に（先頭から再生）、最後にnullptr ●同時再生（Spawn） – 同時再生したいものを複数、最後にnullptr – お互い入れ子に出来ます Sequence::create(sequence, rotate, spawn, scale, nullptr); Spawn::create(move, spawn, scale, sequence, nullptr);
- 58. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 繰り返し（Repeat） – アニメーション、回数 ●永続（RepeatForever） – アニメーション Repeat::create(animation, 4); RepeatForever::create(animation);
- 59. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● 待ち時間（DelayTime） – 時間（秒） –主にSequenceで使用する DelayTime::create(2.0f);
- 60. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● パラパラアニメ – フレーム管理（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に渡せません
- 61. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● パラパラアニメ – 実行形式（Animate） ● アニメーションからrunActionに渡せる形式にする autoanimate = Animate::create(animation);
- 62. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● テクスチャアトラスのメリット – 無駄なメモリ消費を抑える – １度の描画処理で複数の画像が描画出来る ● テクスチャアトラス化したファイル読み込み ● テクスチャアトラスから単体画像の作成 autoframeCache = SpriteFrameCache::getInstance(); frameCache->addSpriteFramesWithFile("UnityChan.plist"); auto unityChan = Sprite::createWithSpriteFrameName("UnityChan_footwork_1.png");
- 63. Cocos2d-xを触ってみる ● 画像をアニメーションさせる ● パラパラアニメ（テクスチャアトラス版） – 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"));
- 64. 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();
- 65. Cocos2d-xを触ってみる ● タッチイベントの処理 ● コールバックを用意 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"); }
- 66. Cocos2d-xを触ってみる ● タッチイベントの処理 ● 受け取れる内容 – Touch ● Begin、Move、Endの状態で内容が変わることはない ●タッチ開始位置（getStartLocation） ● 今タッチされている位置（getLocation） ● 前回受け取った時にいた位置（getPreviousLocation） ● 前回受け取った時からの位置差分（getDelta） ● etc – Event ● 使うことはない。Layerでの引数の名前がunused_event ● イベントのタイプ（getType）TOUCH固定 ● etc
- 67. Cocos2d-xを触ってみる ● 当たり判定の処理 ● 対象のコンテンツ範囲を取得 – getBoundingBoxはscaleによる拡大縮小に対応した内容 が取得可能 – 実際の画像の大きさより小さくして当たり判定設定した い場合は自分で実装必要 –画像のアルファ値で判定とかも自分で実装必要 auto unityChan = this->getChildByName("UnityChan"); Rect rect = unityChan->getBoundingBox();
- 68.
- 69. 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(); }
- 70. 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");
- 71.