【10円ゲーム講座】第8回 レバー操作とコインをはじく処理

Cocos2d-x

Cocos2d-x 10円ゲーム講座 第8回、レバー操作とコインをはじく処理を追加します。

第7回はこちら目次はこちら

スポンサーリンク
レクタングル(大)広告

レバー操作でコインをはじく

今回は10円ゲームのキモ、レバー操作の実装です。

レバーを引いて離すと、引いた分に応じて力強くコインをはじきます。

レバー操作の実現方法

ドラッグ処理でレバーのはじく強さを実現します。

レバーをタッチすることでレバー操作を開始、ドラッグすることでレバーの力強さを決定します。タッチを離した時にコインをはじく処理を行います。ドラッグ中はレバーをアニメーションさせます。

レバー画像の設定

使用する画像はこちら。

レバースティック

lever.png

レバー穴

lever_background.png

レバーは、スティック部分とレバー背景の穴の画像を使います。

画像が用意できたら実装していきます。レバーははじく際にアニメーションさせるので、メンバ変数にします。その他タッチした際に使用する変数も定義しておきます。

変数の初期化処理です。

特に変わったことはしていません。

レバーの表示処理

いつも通りSpriteクラスを使って画像を描画しているだけですが、1点だけポイントがあります。それがsetAnchorPoint()です。setAnchorPoint()は画像の基準となる点で、回転させる際に軸となる点にもなります。

アンカーポイント

AnchorPointを軸に回転する

レバーの棒はレバー穴を軸に回転して欲しいので、Vec2(0.5f, 0.28f)を設定しています。

タッチイベントを受け取って、レバーをアニメーションさせる

レバーにタッチ処理を使うので、タッチイベントを受け取れるようにします。

タッチイベントには、onTouchBegan()、onTouchMoved()、onTouchEnded()があり、それぞれタッチ開始時、移動時、終了時に呼ばれます。

Cocos2d-xタッチイベント

実際の操作と対応しているので、イメージしやすく直感的に理解できると思います。

シーンでタッチイベントを受け取るには、タッチイベントのクラスメソッドを定義します。

タッチイベントを受け取るためのリスナーイベントを登録します。

これでこのシーンでタッチイベントを受け取れるようになりました。

レバーのタッチ処理を実装します。

レバーをタッチしたかどうかを判定するには、レバーの矩形とタッチした点の衝突判定の結果を調査します。

レバー画像へのタッチ判定

onTouchBegan()がタッチ開始時に呼ばれるイベントのため、onTouchBegan()でレバーがタッチされたかどうかを判定しています。

touch->getLocation()でタッチした点を取得できます。レバー画像側はSpriteクラスのgetBoundingBox()で画像の矩形領域が取得できるため、この矩形領域とタッチした点で衝突判定を行います。矩形領域と点の衝突判定には、矩形領域のクラスであるRectクラスのメソッドcontainsPoint()で判定することができます。

レバードラッグ時のアニメーション(回転)対応

onTouchMoved()はドラッグ動作に対してのイベントです。onTouchMoved()でレバーのアニメーションを行い、レバーの引く処理を視覚的に表示しています。タッチを開始した点から、距離が離れるほどレバーを倒す(回転)する処理を入れます。

画像の回転処理は、SpriteクラスのメソッドsetRotation()で回転できます。

タッチを離した時

onTouchEnded()はタッチ終了時のイベントです。ここではonTouchMoved()で回転させたレバーを元に戻しています。

実行結果

cocos2dx-lever-result

静止画では解りづらいですが、レバーがドラッグ処理で傾いています。

動画

レバーのタッチ操作でコインをはじく

タッチイベントを利用してレバー操作が実現できました。次はタッチを離した際にコインをはじく処理を実装します。

appliImpulse(Vec2 Impulse)で剛体(コイン)に対して瞬間的に力を加えることができます。

タッチを離した際に呼ばれるoneTouchEnded()にコインに力を加える処理を追加します。

レバーを動作させた際に、コインに逆方向への力を加えて動かします。

実際の10円ゲームは、レバーとハンマー機構によりコインを叩くわけですが、今回は擬似的に実装しています。ハンマー機構を作っても面白いですが、物理で動く部分が増えるとコインをはじく結果への不安定さが増えることになり、ゲームとして面白くなるか、運ゲーになるか微妙なところなので擬似的な方を採用しました。

実行結果

10円ゲームのレバー実装

レバーの領域を表示しています。この範囲にコインがあれば、レバー処理でコインに力を加える処理が働きます。

動画

ここまでのソースコードはこちら

次回ははずれ穴とゴールの処理の追加です。