UnityのuGUIで十字キーを実装する

伝説のマニアです♪U・ω・U


今回は、UnityのuGUIを使って、十字キーを実装する方法を紹介したいと思います!
(Android、iPhoneを想定しています)

なお、uGUIの基本的な使い方は割愛したいと思います。基礎的なuGUIの知識があることを前提で紹介していきます。



【十字キー用のゲームオブジェクトを用意する】
画像を用意する
今回作る十字キーでは、斜めの移動も含めて、8方向移動できるように実装していきたいと思いますので、それぞれの方向に対応した下のような9枚の画像を用意してください。

crosskey.png



UIのImageを追加する
「Unityのメニュー → GameObject → UI → Image」より、十字キーの元となるImageオブジェクトを作ります。


Event Triggerを追加する
追加したImageの「Add Component」より、「Event Trigger」を追加します。その後、「Add New Event Type」より下のようにイベントタイプを追加していきます。これを設定することで、用意したImageがタップされた場合に呼ばれるイベントを制御することができます。

20150611201643.png


・Pointer Enter(BaseEventData)
 タップした時に呼ばれるイベントです。
・Drag(BaseEventData)
 タップしたままドラッグした時に呼ばれるイベントです。
・Cancel(BaseEventData)
 タップをキャンセルした時に呼ばれるイベントです。
・Pointer Exit(BaseEventData)
 タップを離した時に呼ばれるイベントです。

上記用意したイベントタイプへ、イベント時に呼んでほしい関数を設定していきます。上の画像だと、「Pointer Enter」イベントが発生した時に、「CrossKeyScript.touch_began」が呼ばれるように設定されています(※関数の中身については後述します)。



【十字キー用のスクリプトを作る】
次に、十字キー用のスクリプトを作っていきます。UnityはC#やJavaScriptが使えますが、私はC#を使ったので、C#のコードを紹介していきたいと思います。
作成したスクリプトは、「Add Component」より当該十字キーへ追加します。

C#


ソースコードを簡単に解説していきます。

十字キーの画像を設定する
上で用意した9枚の画像を、それぞれ9行目〜17行目のpublic Spriteへぶっ込んでいきます(Inspector上でドラッグ&ドロップ)。

クラス内の変数について
20行目〜31行目の列挙型は、十字キーのステータスの一覧です。何も押していない状態(NONE)と、8方向のステータスが列挙されています。
そして、32行目のkstatusに、その時の十字キーのステータスが入ります。

35行目のis_touchは、十字キーがタップ中か否か、の判定用の変数です。タップ中であればtrue、タップ中でなければfalseが入ります。

36行目のfinger_idは、タップ中のtouch ID(PointerEventData.pointerId)が入ります。

クラス内の関数について
・touch_began関数
53行目のtouch_began関数内では、最初にタップが開始された時の処理を書いていきます。
まず、タップ情報を取得するため、引数としてBaseEventDataが指定されています。Event Triggerより関数が呼ばれたさいに、タップ情報がBaseEventDataに格納されるような仕組みになっています。

今回はタップ情報から、タップされた座標等を取得したいので、55行目でBaseEventDataをPointerEventDataへ変換しています。

57行目のタップ中かどうかの判定については、マルチタップが発生した場合に2本目のタップを無効にするための判定です。この中でtouch IDを取得することにより、以降呼ばれるtouch_moveやtouch_endedで1本目のタップだけを取り扱うように制御しています(60行目〜62行目)。

取得したPointerEventDataのposition値は、Screen-pointとなっているため、これを65行目でworld-pointに変換しています。今回取り扱う十字キーのImageのposition値はScreen-pointとなるため、これに合わせる必要があるからです。

そして最後に、十字キーのposition(十字キーの真ん中のx軸、y軸の値)とタップ座標の差分をとって、key_action関数に処理を渡しています。

Constants.TOUCH_MOVEについては気にしないでくださいw 特に今回は使っていません。

・touch_move関数
74行目のtouch_move関数は、タップした後、ドラッグ操作によりタップ座業が変化した時に呼ばれる関数です。十字キーは押しっぱなしでグリグリやることが多いため、この関数は重要になります。
関数の中身については、touch_began関数とほぼ同じですが、78行目の判定で、「タッチ中であり且つtouch_began関数で取得したtouch IDと同じIDしか処理しないように制御しています。

・touch_canceled関数
90行目のtouch_canceled関数では、途中でタップがキャンセルされた場合に呼ばれる関数です。
この関数ではタップが終了するため、reset関数を呼んでいます。

・touch_ended関数
100行目のtouch_ended関数でも、touch_canceled関数と同じようにreset関数を呼んでいます。

・reset関数
reset関数では、変数の初期化を行っています。因みに、finger_idを-1で初期化している理由としては、touch IDが(マルチタップ時)タップされた順番によって、1、2、3、という風に振られるため、-1に設定していると、他のタップと被る事がないためです。

・key_action関数
key_action関数は、十字キー処理のメインとなる関数です。touch_began関数とtouch_move関数から呼ばれてきます。引数としては、key_type(今回は使いません)、x軸値、y軸値となっています。軸の値は、十字キーの真ん中から見たx、yの位置になります。これを使い、今十字キーの上が押されているのか、または右が押されているのかを判定します。

中学か高校の頃にやったようなやらなかったような数学の二次関数のアレですw

例えば、右を押している、と判定したい場合、下記の不等式が両方真となる場合、「右」となります。

不等式1:y < 1/2 * x
不等式2:y > -1/2 * x

これをC#のコードで書くと、134行目のようになります。

このように8方向すべて判定していきます。そして、各対応するsprite、kstatusを設定すれば終わりです。

作成した関数をEvent Triggerへ設定する
上の方で作成したEvent Triggerへ、作成した関数を設定していきます。下記の通り設定します。

・Pointer Enter(BaseEventData) → touch_began関数
・Drag(BaseEventData) → touch_move関数
・Cancel(BaseEventData) → touch_canceled関数
・Pointer Exit(BaseEventData) → touch_ended関数

十字キーの利用方法について
以上で十字キーの基本的な実装は完了します。これで、ユーザーのタップによって、キーのステータスが変化し、今ユーザーがどの位置をタップしているか判定出来るようになります。

この十字キーの利用方法としては、例えばゲームのプレイヤーのスクリプトから、この十字キーのステータスを参照し、ステータスの種類によって右に移動したり左に移動したりするプログラムを書けば、プレイヤーが動いてくれると思います。

また、ダブルタップを判定したい場合は、touch_began時にタップ時間を取得して、2回目のタップの時間との差分をとれば判定できるかと思います。

また、ホールドを判定したい場合も、touch_began時に時間を取得して、Update関数により一定時間後ホールドしている、と判定すれば実装できるかと思います。

こういった操作の種類については、ゲームの種類によって色々と考えられるかと思います。

Sponsored Links
テーマ: Unityゲーム制作 | ジャンル: コンピュータ

コメント

コメントの投稿


管理者にだけ表示を許可する