スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

【Unity】スクリプトを1行たりとも書かずにUIを実装してみた


※注意
アホな方法で実装しているので、
かしこいヒトはマネしないでください。


実装したもの




○実装項目一覧
・指でドラッグして動かす
・指を離すと、元の位置に戻ってくる
・指を離した時点で、一定以上動いてたらモードを切替
・下にあるボタンを押しても、同じようにモード切替
・ボタンを押さずにモードを切り替えても、ボタンも切替
・モードと同時に、背景の色も切替
・さらに、同時に拡縮しながらモード名の切替

地味に細かい処理を入れてますが、
全て「playmaker」と、その他のアセットだけで実装してます。
(スクリプトは一行たりとも書いてない)



実装方法解説

○使用アセット
・playmaker
・iTween
・Easy Touch 4 : Touchscreen & Virtual Controls

--

今回はざっくり説明。
(既にplaymakerを使っている人向けの説明)


○方法
メニューにあたり判定を付けて、左右に配置したセンサーが接触を検知したら、
一定以上動かしたと判断して、モードを切り替える。

オブジェクトの構成イメージ↓
メニューの実装方法01

手前のボードがメニュー。マウス(指)と連動して動く。
その後ろの立方体がメニューと連動した「あたり判定」。
黄色いのが、一定以上動かしたかどうかの判定用センサー。

--------------------------
■操作の流れと各種設定

1、ボードをスワイプしたら、指の動きについてくる
ボードには、EasytouchのQuickDragを設定。
(それを設定すると、スワイプ時に指の動きについてくるようになる)


2、指を離した時点でセンサー(黄色)に当たってたら、
  モードが変わったことを他のオブジェクトに知らせる(イベントを送る)

 ↓playmaker、メニューに追従している「あたり判定」に付けた設定
playmaker001_指を離した01-j03-2

 ↓遷移

playmaker002_指を離した02-j01-2
(指を離した時に、中央にいるか、右か左のどちらかのセンサーに触れているかで挙動を振り分ける)

 ↓遷移

playmaker003_指を離した03_01_2
(左のセンサーに触れていたとき、そのことを別のオブジェクトにイベントを送って知らせる)


3、他の各オブジェクトも、イベントが来たら、それぞれの挙動を開始する
 例)
・ボタンは、イベントが来たら拡縮しながら色が変わるように設定
・メニューのボードは、「I Tween Move To」で特定の位置にピッタリ移動するように設定
(現在位置から、XX秒かけて、目的地に移動する、というアニメーション)
 …その他色々 (「○実装項目一覧」に箇条書きしたもの全部)

他の動作もすべてplaymakerで設定。
全て「イベントを受け取った時」に「イベント内容に応じた動き」をする。


4、ボタンを押しても、同じようにイベントを送る
その際の挙動は、スワイプ操作で指を離した時と同じ。
「ボタンをタップしたとき」という条件を追加して、
スワイプのときと同じ種類のイベントを送るように設定すればOK。


できあがり?
本当は、その他不具合が発生しないための調整もあり、もっと複雑になっています。
しかし、話が長くなりそうなうえに、大体今回説明した内容の応用だけなので省略。
全部、イベントを送る(Send Eventのアクション)の機能だけで対処できました。



結論まとめ

スクリプトでやった方が早い。

でも、実は最初はスクリプトでやってました。
↓参考URL
http://qiita.com/okuhiiro/items/0b356b18764faa734f1a
(主に、こちら記事を参考にさせていただきながら試作)

しかし、結局は自分の知識では対応できない部分が出てきて
(今どのモードなのかの判定、ボタンとの連動、特殊なアニメーションを挟んだり、その他色々)
スクリプトについてアレコレ下調べするより手っ取り早いのでplaymakerで実装。

あと、playmakerの特徴として、
リアルタイムに状態遷移を確認できるので、デバッグがすごく楽。
どこの処理で止まっているのか一目瞭然。



最後に一言コメント

実際の操作の感触については、
動画で見ても伝わらないと思いますので
android版の体験版もアップしています。

UIについては、ゲーム本編とはあまり関係ない部分ですが、
こういうのも気持ち良い操作になるようにこだわってます。


スポンサーサイト

Tag:Unity FLYFISH Playmaker EasyTouch iTween

- 0 Comments

Post a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。