UniRxで非同期UI処理を書く -導入編-

こんにちは。
プログラマの姫野です。

最近どんどん暑さが増しておりますが、いかがお過ごしでしょうか？
PCの暑さに、日差しの暑さまで加わると、クーラーが効いている室内でも時折暖かく感じています・・・
うちわも用意して、なんとかこの暑さを乗り切っていきたいと思います。

さて、今回のテーマですが「UniRx」を取り上げようと思います。
「UniRx」とは、最近各所でよく耳にする「リアクティブプログラミング」をUnityで扱うためのアセットの事なのですが、
弊社でもその流れに乗り、自社プロダクト開発に用いるようになりました。

・非同期処理がカンタンに書ける！
・ネストしなくていい！

等々、メリット盛りだくさんな感じなのですが、書き方が違う分、習得に少々時間がかかってしまいがちです。

リアクティブプログラミングやってみたいけど、新しい書き方に慣れるか不安...

そんな方々に向けて、 「UniRx」を用いた簡単なUI構築手順をご紹介いたします。
それではいってみましょう！

■事前準備

• Unity5：uGUIを使用するため、5以降にしておきましょう
• UniRx：アセットストアからダウンロードできます

■ボタンイベントのUniRx化

UIの基本、ボタンイベントをUniRxで表現してみましょう。

1. GameObject → UI → Button でボタンを作成
   
2. Canvasに適当なスクリプトを作成してアタッチ
   Canvasである必要はないのですが、この後ボタンをスクリプトから参照させる必要があるため、
   私の場合はUniRxUITesterという名前でCanvasにアタッチしました

3. 作成したスクリプトを以下のようにする
4. 作成したスクリプトのインスペクタへButtonをバインドする
5. 実行
   実行した結果、ボタンをクリックすると以下のように「Click!」と表示されているかと思います。
   これで、ボタンイベントのUniRx化は完了です！



実行結果のログ

■テキストへの反映

続いて、ボタンイベントによって変化した値を反映・表示させてみましょう。

1. 作成したスクリプトを以下のソースに書き換える
2. 作成したスクリプトのインスペクタへ適当なTextをバインドする(Buttonの中のTextを使用すればOKです)
3. 実行
   ボタンをクリックすれば、バインドしたテキストの値がインクリメントされていくことがわかると思います。

■まとめ

いかがでしょうか？

ボタンイベント、UIへの値の反映さえできてしまえば、簡単なUIは全て作れるのではないかと思います！

しかし、これはまだUniRxのほんのさわりです。
どうしてこうなっているかを知ることは、発展した使い方をするには必要になっていきます。

次回はそういった部分を中心に紹介していきます。
お楽しみに！

採用情報

クラウドクリエイティブスタジオではプログラマを募集しております。

一緒に面白いゲームを作っていきましょう！

採用情報