読者です 読者をやめる 読者になる 読者になる

テラシュールブログ

旧テラシュールウェアブログUnity記事。主にUnityのTipsやAR・VR、ニコニコ動画についてのメモを残します。

【Unity】ArborとuGUIの連携について

tsubakit1.hateblo.jp

先日紹介したビジュアルFSMアセットのArborですが、今回はuGUIと連携してみました。

uGUIとの連携のキモとなるのはUnityEventとの連携ですが、UnityEventにArborFSMを持つオブジェクトをuGUIのイベントに登録すると、そこからイベントを受け取れます。

例えばスライダーの場合、ステートのスクリプトがfloatの引数を持つメソッドやfloatのプロパティを持つ場合、ふつうにイベント登録出来ました。下のGifアニメは、数字を見てステートの切りかえを行っています。

f:id:tsubaki_t1:20150808200413g:plain

実際の手順はこんな感じです。

まず、ProjectビューのCreate > Arbor > C# Script でステートのスクリプトを作成します。こっちの方法で作成すると、Arborを動かすのに必要な幾つかのコールバックが最初から定義されていて便利です。名前はUIButtonTransitionとかにしておきます。

f:id:tsubaki_t1:20150808201743p:plain

コードは、イベントを受け取ったら他のステートへ切り替えるイメージです。

gist.github.com

FSMステートを作成し、作ったコードをドラッグ&ドロップでステートに登録します。

まずはオブジェクト(今回はCanvas)にArborFSMコンポーネントを追加し、OpenEditorをクリックします。すると、FSM編集画面に飛びます。

f:id:tsubaki_t1:20150808203404p:plain

FSMにステートを追加するには、右クリックして「ステート作成」です。で、作成したステートに、先ほど作成したスクリプトをドラッグ&ドロップして登録します。「挙動を追加」でも設定できるのですが、多分ステートが増えてくるとこっちの方が楽と言えば楽になるかもしれません。AddComponentみたいなコードの検索無いですし。

f:id:tsubaki_t1:20150808202645g:plain

あとはCanvasをボタンのOnClickイベントに登録すると、コンポーネントの中からOnClickのイベントを確認できます。

f:id:tsubaki_t1:20150808203627g:plain

ただ実際にイベントを制御する場合、この方法は良くないです。というのも、Arborはオブジェクトに同名のコンポーネント複数設定される可能性があるので、この最終的に文字列アクセスになる方法は避けた方が良いです。そのため、実行時にOnClickリスナーに登録するアプローチの方が良いです。

gist.github.com

ArborはSerializeFieldでオブジェクトをシリアライズ可能にするとステートに入力欄を表示してくれます。上記のコードは、そこにイベントを登録したいボタンを設定すると、実行時(ステートが有効になった時)にボタンが反応するように設定しています。

f:id:tsubaki_t1:20150808204655p:plain

後はもう一つステートを作成し、トランジション(今回の場合はNextStateを次のステートへドラッグ&ドロップ)を設定すると、ボタンが押されたタイミングでステートが切り替わるようになります。

f:id:tsubaki_t1:20150808205741g:plain

文章にすると長くなりますが、実際に操作するとサクっと理解できるかなと思います。さらにステートを足すことで「ボタンを押したら指定秒後に何かする」や「切り替え時に音・アニメーションを設定する」といった事も可能みたいです。

f:id:tsubaki_t1:20150808205906g:plain

実際この粒度で使うとステートマシン地獄で死ぬと思うので、もっと処理をまとめたりする必要があるとは思います。ステートやトランジションの検索があれば、もう少し細かくしても良いかもしれませんが、限度がありますし。

(でもuGUIのボタンぐらいはあっても良い気もしなくも)

もう実装したのか!早い!来た!メイン検索機能来た!これで多分かつる!

 

「ボタンをクリックしてゲームを開始→ボタンをクリックすると玉が補充される→しばらくすると底が抜ける」のステート切り替え。 pic.twitter.com/7lHT7vL9iP