cocos2d-xで作る物理演算ゲーム ∼...
TRANSCRIPT
![Page 1: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/1.jpg)
Cocos2d-xで作る物理演算ゲーム∼ 引っ張って飛ばす編 ∼
= 2015年09月12日 =
![Page 2: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/2.jpg)
前回のあらすじ
物理演算ライブラリchipmunkを使ってチキンが地面に落ちるところまで。。
![Page 3: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/3.jpg)
今回はチキンを引っ張って飛ばします
![Page 4: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/4.jpg)
これ
チキンにタッチして・・・
スライド
離す!
飛ぶ!
![Page 5: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/5.jpg)
まずは起動しようAngryChickenをxcodeで実行。
![Page 6: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/6.jpg)
やる処理を日本語でまとめる
①画面へのタッチイベントを取得する。②チキンにタッチを判定する。③スライドして引っ張るとチキンが飛ぶ!
![Page 7: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/7.jpg)
①画面へのタッチイベントを取得する。
![Page 8: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/8.jpg)
// Touchイベントを管理しているEventDispatcherインスタンスを取得auto eventDispatcher = Director::getInstance()->getEventDispatcher();
// 登録するリスナー情報を生成auto listener = EventListenerTouchOneByOne::create();listener->onTouchBegan = CC_CALLBACK_2(HelloWorld::_onTouchBegan, this);listener->onTouchMoved = CC_CALLBACK_2(HelloWorld::_onTouchMoved, this);listener->onTouchEnded = CC_CALLBACK_2(HelloWorld::_onTouchEnded, this);listener->onTouchCancelled = CC_CALLBACK_2(HelloWorld::_onTouchCancelled, this);
// リスナー情報を登録eventDispatcher->addEventListenerWithSceneGraphPriority(listener, this);
EventDispatcherというシングルトンクラスがイベントを管理している。EventListenerTouchOneByOneクラスを生成し、コールバック関数を登録し、EventDispatcherに登録する。
HelloWorld::initメソッドに以下のコードを追加
![Page 9: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/9.jpg)
//タッチ開始 最初に1度だけ呼ばれるbool HelloWorld::_onTouchBegan(Touch* touch, Event* event){ // falseを返すと以降のタッチイベントは呼ばれない return true;}// ドラッグする最中ずっと呼ばれるvoid HelloWorld::_onTouchMoved(Touch* touch, Event* event){}// タッチを離すと呼ばれるvoid HelloWorld::_onTouchEnded(Touch* touch, Event* event){}// タッチがキャンセルされると呼ばれるvoid HelloWorld::_onTouchCancelled(Touch* touch, Event* event){ // キャンセル時も一応線を削除}
当然コールバックされるメソッドをHelloWorld.cppに作りましょう
キャンセルは、システムメッセージなどが表⺬された際になど呼ばれるようだ。(バッテリー警告とかあの辺りと思われる)
![Page 10: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/10.jpg)
private: // Touchイベント用 bool _onTouchBegan(cocos2d::Touch* touch, cocos2d::Event* event); void _onTouchMoved(cocos2d::Touch* touch, cocos2d::Event* event); void _onTouchEnded(cocos2d::Touch* touch, cocos2d::Event* event); void _onTouchCancelled(cocos2d::Touch* touch, cocos2d::Event* event);
*ちなみに・・・ 私はprivateなフィールドやメソッドには「アンダーバー」を規則でつけます。
当然HelloWorld.hにもメソッド定義を書きましょうね。
![Page 11: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/11.jpg)
ここまでで画面をタッチすると各メソッドが呼ばれます。
![Page 12: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/12.jpg)
②チキンにタッチを判定する。
![Page 13: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/13.jpg)
もう少しひも解くとこうなる
タッチしたポイント座標(x,y)がチキン画像の縦横幅内
だったらイロイロ処理をする。
つまり上記条件を満たさない場合は引っ張り処理はしないということ
![Page 14: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/14.jpg)
チキンノードを取得できるように
// キャラクターauto* character = Sprite::create("chicken.png");character->setPosition(Point(winSize.width / 5 , winSize.height / 2));auto* charaPb = PhysicsBody::createCircle(40);charaPb->setMass(1.0f); // 重さを指定(ここが無いと後で飛ばせなくなる)character->setPhysicsBody(charaPb);character->setTag(CHAR_OBJTAG);this->addChild(character);
helloWorld::init のチキン読み込み部分のsetTagを赤文字に変更
// tag list#define CHAR_OBJTAG 100
helloWorld.cppの冒頭に以下のマクロ定義
![Page 15: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/15.jpg)
// チキンの矩形情報を求めるauto* charSprite = (Sprite*)this->getChildByTag(CHAR_OBJTAG);Point point = charSprite->getPosition();int width = charSprite->getContentSize().width;int height = charSprite->getContentSize().height;Rect charSpriteRect = Rect(point.x - (width / 2), point.y - (height / 2), width, height);
//タッチの位置を取得auto tPos = touch->getLocation(); // タッチ位置がチキン矩形内か判定if ( charSpriteRect.containsPoint(tPos) == true ){// チキンがタッチされた!// ここに処理をいろいろと書くのだよ。 return true;}
// ここまで処理が来たということはチキンがタッチされなかったということ。// falseを返すと以降のタッチイベントは呼ばれないreturn false;
HelloWorld::_onTouchBeganに以下の処理を追加
上記でメソッドでtrueを返すということは、moved, endedがよばれることとなる。つまりmoved,ended,cancelledにはチキンがタップされたときにしか呼ばれないという状態になるのだ。
![Page 16: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/16.jpg)
③スライドして引っ張るとチキンが飛ぶ!
![Page 17: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/17.jpg)
少しだけ掘り下げて表現タッチした箇所(始点)、離した箇所(終点)
その2つを結ぶ線がいわゆるチキンが飛ぶ方向なのである
タッチ スライド
離す 引っ張った逆に飛んでく
![Page 18: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/18.jpg)
// チキン画像の座標を取得する。auto* charSprite = (Sprite*)this->getChildByTag(CHAR_OBJTAG);auto charPos = charSprite->getPosition();
// タッチ終了の座標を取得する。auto endPos = touch->getLocation();
//2つの座標からベクトルを求める。(x4は係数)auto force = Vect(charPos.x - endPos.x, charPos.y - endPos.y) * 4;
//チキンに力を加えるcharSprite->getPhysicsBody()->applyImpulse(force);
HelloWorld::_onTouchEndedへ以下を追加
*ベクトルがわからない方は下を読んどきましょう。
http://www.geocities.co.jp/Technopolis/1505/vx_index.htm
![Page 19: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/19.jpg)
実行してみよう!
チキンにタッチして・・・
スライド
離す!
飛ぶ!
*線は出ません。
![Page 20: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/20.jpg)
次回は物理演算Chipmunkスクロールして∼編
![Page 21: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/21.jpg)
ここまでのソースプログラムはここ
http://monolizm.com/sab/src/AngryChicken.zip
引っ張り線描画とリファクタリング済み
![Page 22: Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編e7%ac%ac%e5%85%ab%e5%9b%9e... · 2015-09-12 · Cocos2d-xで作る物理演算ゲーム ∼ 引っ張って飛ばす編](https://reader033.vdocuments.pub/reader033/viewer/2022050101/5f407a9d3f16292fe933accf/html5/thumbnails/22.jpg)
ご清聴ありがとうございました。