未来のプログラミング技術をUnityで -UniRx-
•Download as PPTX, PDF•
281 likes•161,554 views
スライド中で登場するサンプルはこちら http://torisoup.net/unirx-examples/ UniRxを使えば「非同期処理」「イベント処理」「判定が複数フレームにまたがる処理」といった時間が絡んだ処理全般をとても簡単に記述できるようになります。今回はUniRxの便利な利用例をいくつか紹介したいと思います。
![つまりこういう形にしたい
最新のRoomInfo[]が流れるストリーム
これをSubscribeしておけば、
部屋リストに更新があったことがすぐわかる](https://image.slidesharecdn.com/unirx-150320032214-conversion-gate01/85/Unity-UniRx-117-320.jpg)
未来のプログラミング技術をUnityで -UniRx-
- 5. 自己紹介 • とりすーぷ（@toRisouP) • 26歳 • 本業はWebエンジニア • 趣味でUnityでゲーム作ってます
- 7. みくみくまうす • ニコ生の配信支援ツール • MMDモデルがコメントを読み上げる • Unity製 • フリーソフトとして公開中 http://mikumikumouth.net/
- 8. 今作ってるゲーム みこバト～レ • 東方2次創作の同人ゲーム • Unity ＋ PhotonCloud • 例大祭と夏コミあたりで体験版出したい…
- 9. ところで
- 11. マウスのダブルクリック判定 • どうやって実装する？ – 最後にクリックされてから一定時間以内ならダブルクリック？ – クリック回数の変数とタイマの変数をフィールドに定義？ – Update内に判定処理を書く？
- 12. めんどい
- 15. たったのこれだけ！
- 16. すごくね？
- 20. もくじ 1. UniRxって何？ 2. UniRxって何が便利なの？ 3. ストリームを使うメリットと例 4. よく使うオペレータ解説 5. Unity上での実用例５つ 6. まとめ
- 21. UniRxって何？
- 22. UniRx • Reactive Extensions for Unity • 作者は＠neueccさん • MITライセンスで公開 • AssetStoreまたはgithubからダウンロード可（無料）
- 23. Reactive Extensionsとは • FanctionalReactivePrograming をC#で実現するためのライブラリ – LINQ to Events – 元はMicrosoftReserchが開発 • 決してオレオレライブラリでは無い！ • 最近になって流行の兆しが来ている – いろんな言語に移植されている • RxJS、RxJava、ReactiveCocoa、RxPy、UniRx… – どんな言語でもRxの考え方は共通している！ • 覚えておいて損は絶対にしない！
- 24. UniRxは何が便利なの？
- 26. 時間が絡んだ処理の例 • イベントの待ち受け – マウスクリックやボタン入力のタイミングで処理をする • 非同期処理 – 別スレッドで通信したり、別スレッドでデータロードしたり • 時間計測が判定に必要な処理 – 長押し、ダブルクリックの判定 • 時間変化する値の監視 – False→Trueになった瞬間に１回だけ処理したい
- 34. ストリーム • 「イベントが流れる配管」みたいなイメージ – 難しく言えば「時間軸上に並んだイベントのシーケンス」 – 分岐させたり合流させたりできる • コード中では IObservable<T> として扱われる – LINQで言うIEnumerable<T>に相当 イベントメッセージ イベントの流れそのものが「ストリーム」
- 35. ストリームに流すイベント「メッセージ」 メッセージは３種類ある • OnNext – 通常使用するメッセージ – 普通はこれを使う • OnError – エラー発生時の例外を通知するメッセージ • OnCompleted – ストリームが終了した事を通知するメッセージ
- 37. • ストリームの末端でメッセージが来た時に何をするかを定義する • ストリームはSubscribeされた瞬間に生成される – 基本的にSubscribeしない限りストリームは動かない – Subscribeのタイミングによって結果が変わる可能性がある • OnError, OnCompleteが来るとSubscribeは終了する Subscribe（ストリームの購読） Subscribe ストリームを購読して メッセージが来た時に処理をする ストリーム
- 38. （補足）Subscribeとメッセージ Subscribeはオーバーロードで複数定義されているので用途に合わせて使う と良い • OnNextのみ • OnNext & OnCompleted • OnNext & OnError & OnCompleted
- 44. 例
- 46. Buttonが３回押されたらTextに表示する • Buffer(3)を加えるだけ！ – 余計なフィールド変数不要！ – なお、Skip(2)でも同じ動作をする • ここではわかりやすくBufferを使ったが、 n回後に動作するというシチュエーションではSkipの方が適切ではある
- 47. Buffer • メッセージを蓄えて特定のタイミングで流す – 放出する条件はいろいろ指定できる • n個溜まったら流す • 別のストリームにメッセージが流れてきたら流す 画像はhttp://reactivex.io/documentation/operators/map.htmlより引用
- 48. 例２
- 50. Zip • 複数本のストリームのメッセージが全て揃うまで待つ – メッセージが揃った時に１個ずつ取り出して後続に流す – 揃ったメッセージは任意に加工して出力できる 画像はhttp://reactivex.io/documentation/operators/zip.htmlより引用
- 58. オペレータ • ストリームに操作を加える関数のこと • メチャクチャたくさんある Select, Where, Skip, SkipUntil, SkipWhile, Take, TakeUntil, TakeWhile, Throttle, Zip, Merge, CombineLatest, Distinct, DistinctUntilChanged, Delay, DelayFrame, First, FirstOfDefault, Last, LastOfDefault, StartWith, Concat, Buffer, Cast, Catch, CatchIgnore, ObserveOn, Do, Sample, Scan, Single, SingleOrDefault, Retry, Repeat, Time, TimeStamp, TimeInterval…
- 59. よく使うオペレータ紹介
- 62. SelectMany • 新たなストリームを生成して、そのストリームが流すメッセージを本流のス トリームのメッセージとして扱う – ストリームを別ストリームで差し替えるイメージ（厳密に言うと違う） – 他の言語では「flatMap」とも呼ばれる 画像はhttp://reactivex.io/documentation/operators/flatmap.htmlより引用
- 63. Throttle/ThrottleFrame • 落ち着いた時に最後のメッセージを流す – メッセージが集中して流れてきたら最後以外を無視する – 他の言語では「debounce」とも呼ばれる – よく使う 画像はhttp://reactivex.io/documentation/operators/debounce.htmlより引用
- 64. ThrottleFirst/ThrottleFirstFrame • 最初にメッセージが来てから一定時間遮断する – 1つメッセージがそこからしばらくメッセージを遮断する – 大量に流れてきたデータのうち最初だけ使いたいみたいなときに有 効 画像はhttp://reactivex.io/documentation/operators/sample.htmlより引用
- 76. ここから実例を紹介
- 77. 実際の使用例５つ 1. ダブルクリック判定 2. 値の変動を監視する 3. 値の変動を丸める 4. WWWを使いやすくする 5. PhotonCloudと組み合わせる
- 78. １．ダブルクリック判定
- 79. ダブルクリック検知のコード
- 82. クリックストリーム UpdateAsObservable() Updateのタイミングを通知 Where() クリックがあったフレームのみ通過 clickStream クリックイベントのストリーム
- 83. よくみると2つのストリームがある
- 84. よくみると2つのストリームがある
- 87. ２．値の変動を監視する
- 89. 着地した瞬間の検知方法 1. CharacterController.isGroundedを毎フレーム監視 2. 現フレームにおける値をフィールド変数に保存 3. 次フレームでFalse → Trueに変わった時にエフェクトを再生する
- 94. 着地判定のイメージ図 F F F T T T T F F F T F T UpdateAsObservable() Updateのタイミングを通知 Select() IsGroundedの値に差し替え DistinctUntilChanged() 値に変化があった時のみ通過 Where() 値がTrueの時のみ通過 Subscribe() isGroundedがFalse→Trueになった瞬間が通知される
- 96. ３．値の変動を丸める
- 97. isGroundedの変動を丸める • isGroundedの精度の改善 – 斜面を移動するとTrue/Falseが激しく変動する – この値の変動をUniRxで抑えこんでみる
- 100. isGroundedの丸め込みイメージ図 T F T T T T T T T T T UpdateAsObservable() Updateのタイミングを通知 Select() IsGroundedの値に差し替え DistinctUntilChanged() 値に変化があった時のみ通過 ThrottleFrame(5) 値が5フレームの間 来なかったら最後の値を放流 Subscribe() isGroundedが6フレーム以上 安定していた時に最後の値が通知される F T 1 2 3 4 5
- 101. 4.WWWを使いやすくする
- 102. UnityのWWW • Unityの標準のHTTP通信用モジュール – コルーチンとして使う必要があり – そこまで使い勝手は良くない（HttpWebRequestよりはだいぶマシだけどさ…）
- 103. ObservableWWW • WWWをObservableとして扱えるようにしたもの – Subscribeされた瞬間に通信が行われる – 後は勝手に裏で通信して結果がストリームに流れてくる – コルーチンを使わずにかける
- 105. WWWでテクスチャ読み込み
- 107. WWWでテクスチャ読み込み 複雑なことも上から読めば何やってるかすぐわかる 1. ボタンがクリックされたら 2. HTTPでテクスチャ画像をダウンロードして 3. その結果をSpriteに変換し 4. Imageとして表示する
- 112. PhotonCloud • Unityで簡単にネットワーク対戦が実装できるライブラリ • 通知が全てコールバックで微妙に使い勝手が悪い – UniRxでなんとかしたい
- 113. • PhotonCloudのコールバックがストリームに変換される – ごちゃごちゃしたコールバックは隠蔽される UniRxと組み合わせると？ PhotonCloud コールバックで ごちゃごちゃした世界 最新の部屋情報の通知ストリーム ロビー参加に成功した通知 ストリーム 部屋に参加成功した通知 ストリーム UniRxでコールバックを隠蔽
- 114. コールバックからストリームに変換するメリット • IDEの補完が効くようになる – PhotonのコールバックはSendMessageで呼び出される – Observableとしてちゃんと定義してあげれば補完が効く • 多様なオペレータによる柔軟な制御ができるようになる – ログインに失敗したら３秒後にリトライ試すとか – 全員からレスポンスがあった時に処理をするとか – 部屋情報リストが更新されたことを通知するとか
- 115. コールバックからストリームに変換するメリット • IDEの補完が効くようになる – PhotonのコールバックはSendMessageで呼び出される – Observableとしてちゃんと定義してあげれば補完が効く • 多様なオペレータによる柔軟な制御ができるようになる – ログインに失敗したら３秒後にリトライ試すとか – 全員からレスポンスがあった時に処理をするとか – 部屋情報リストが更新されたことを通知するとか
- 116. 例）最新の部屋情報を通知するストリームを作る • OnRevicedRoomListUpdate – PhotonNetwork.GetRoomList()が更新された時に実行される – これをストリームにしてしまう
- 118. ストリームの根源の作り方 • Observableのファクトリメソッドを使う • 既存のイベント等から変換する • Subject<T>系を使う • ReactiveProperty<T>を使う
- 119. ReactiveProperty • Subscribeすることができる変数 • ObservableとしてSubscribeができる • 値を書き込んだ時にOnNextメッセージが飛ぶ
- 124. 【追記】PhotonRx • PhotonRx – PUNの使い勝手を上げるライブラリ – 各コールバックをObservableとして取得できる – 詳しくは以下のスライドをどうぞ – http://www.slideshare.net/torisoup/unirxpun
- 125. 紹介したい機能は まだまだたくさんある
- 128. まとめ • UniRxは便利なので使ってみよう！！！！！！！！ – 「時間」をすごい簡単に扱えるようになる – GUI周りの実装もスッキリ書ける – ゲームロジックに適用することもできる • UniRxは便利だが難しい面もある – 学習コストが高くて概念的にも難しい – 導入する場合はプログラムの設計から考え直す必要が出てくる • 真価を発揮させるには設計の根幹にUniRxがガッツリ食い込む • 「便利ライブラリ」ではなく「言語拡張」だと思う必要がある
- 131. 以下補足とか
- 132. 参考にするとよいサイト • ReactiveX – http://reactivex.io/ – Rxについて細かく解説されているサイト（ただし英語） • Reactive extensions入門v0.1 – http://www.slideshare.net/okazuki0130/reactive-extensionsv01 – @okazukiさんがまとめてくれたRxについての日本語資料 – すごいよくまとまっているので１度目を通すべし • Rx入門 – http://blog.xin9le.net/entry/rx-intro – じんぐる(@xin9le)さんがRxについてまとめてくれた日本語サイト
- 133. 参考にするとよいサイト２ • Qiita - UniRxについて書いた記事をまとめてみた – http://qiita.com/toRisouP/items/48b9fa25df64d3c6a392 – 自分がUniRxを使う上でのメモ書きとして残したもの – 参考になれば
- 134. 補足）Subject<T> • ストリームの根源を作るもの – Subject,ReplySubject,BehaviorSubject,AsyncSubjectと複数種類あり – 外に公開するときは必ずAsObservableを挟んで公開する • 外から直接OnNextが叩ける状態にしない
- 135. • Disposeを呼び出すとSubscribeが中止される – ストリームの根源が削除されると自動的にDisposeされる – ストリームが終了状態になってもDisposeされる – staticなストリームを作った場合は手動Disposeが必要 補足）Subscribeの止め方 button.onClickで作ったストリームは Buttonがシーンから削除されたタイミングでDisposeされる
- 136. 補足)UpdateAsObservableとObservable.EveryUpdate どちらもUpdate()のタイミングを通知してくれるObservable • UpdateAsObservable – ObservableMonoBehaviour を継承すると使える – (追記)ObservableMonoBehabiourを継承する方式は非推奨になりました 代わりにUniRx.Triggers名前空間に用意されている拡張メソッドの方 を使いましょう – IObservable<Unit> – コンポーネントのDestory時に自動Disposeされる • Observable.EveryUpdate – どのスクリプトからでも使える – IObservable<long> (Subscribeした時からのフレーム数） – 使い終わったら明示的にDisposeする必要がある • またはOnCompleteがちゃんと発火するストリームにする
- 137. おまけ
- 141. おまけ）HttpWebRequest を使ってPUT/DELETE • WWW/ObservableWWWはGETとPOSTのみサポート – PUT/DELETEを使いたい場合HttpWebRequestを使う必要がある • HttpWebRequestをそのまま使うとそこそこツライ – 同期処理で書くとスレッドを分離する必要がある – 非同期処理で書くのも結構めんどくさい
- 142. おまけ）UniRxでHttpWebRequest • HttpWebReqeustでDELETEを叩く – Observable.Startを使えば別スレッドで実行できる – それをObserveOnでメインスレッドに戻す
- 144. 応用例）テキスト入力された時に検索サジェストを出す 1. InputFiledにテキストが入力された時に 2. 最後に入力されてから200m秒以上間隔が開いたら 3. GoogleSuggestAPIを叩いて 4. その時のサジェスト結果をTextに表示する