Download as PDF, PPTX
More Related Content
![[data analytics showcase] A12: データに隠された課題、ちゃんと見えていますか？ by Tableau Japan 株式会社 ...](https://cdn.slidesharecdn.com/ss_thumbnails/qeouriw3q6utlro0qyn1-signature-bac39e432b181dc3cbb550d6b84a1ba118e0e86ab38872b728592f592e9523c9-poli-161007055821-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Interactive UI with UniRx
Interactive UI with UniRx
- 1.
- 2. • 株式会社トライフォート • Unity/JSエンジニア •24歳 岩下 侑冬 Yuto Iwashita @y120sb
- 3.
- 4.
- 5.
- 6. UIの実装はラクじゃない • ビジネスロジックなんて大した問題ではない • (個人的に)アプリの実装コストの7割はUI •ドラッグ、アニメーション、etc…
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 14. トゥモローアイランド http://tomorrowisland.trifort.jp/ • 弊社ソーシャルゲームタイトル第一弾 • 箱庭× MO • 開発期間1年くらい、 Unityエンジニアは最大で5人
- 15.
- 18.
- 19.
- 20. • D&D • ドラッグ通過判定 •所要時間の表示 • アニメーション 複雑なUI
- 21. • D&D • ドラッグ通過判定 •所要時間の表示 • アニメーション 複雑なUI 全部UniRxの守備範囲
- 22. すべてをObservableへ • IObservable<T>だらけにするとロジックから UI、アニメーションへの繋ぎが簡単になる • 書く人によって違う非同期処理の書き方も 統一できる(C#event, callback, coroutine)
- 23. 所要時間の表示 //ドラッグ開始 OnLongTapDragStart .Select(tuple => tuple.Item2.Model.Recipe) //スロットにレシピが投入されるストリーム .SelectMany(recipe=> OnThrowIn .Select(slots => slots.Where(s => s.Thrown).Count()) .Select(count => new { recipe, count }) //ドラッグ開始時にレシピ1枚の場合の所要時間を表示するため .StartWith(new { recipe, count = 1 })) //所要時間に変換 .Select(anon => anon.recipe.CalculateNeedTime(anon.count)) //ドラッグ終了まで待ち受け .TakeUntil(OnLongTapDragEnd) //繰り返し .Repeat() .Subscribe(time => needTime.text = time)
- 24.
- 25. アニメーション /// <summary> /// 箱のなかに吸い込まれる ///</summary> public IObservable<Unit> IntoBox (SlotBox box) { const float duration = 0.45f; //拡縮 var tween = itemIconTransform.DOScale(Vector3.zero, duration); //移動 itemIconTransform.DOMove(box.Position, duration); //TweenerをIObservable<Tweener>に変換 return tween.AsObservable(); }
- 26.
- 27.
- 28. 手触り感 • 最近の流行り(だと思う) • 触ったら動く •動いたらそれが連鎖していく
- 29.
- 30.
- 32.
- 33.
- 34. 1) アクションから発生する動きを見つける 2) 動きを細かく分解する 3)分解した動きをストリームとして記述する 4) 動きを全て合成し、定義する 動きの関係性を定義する
- 35.
- 36. 2) 動きを細かく分解する • 指がY方向に動く 拡縮する • 指がX方向に動く X方向に動く
- 37. 2) 動きを細かく分解する • 指がY方向に動く 拡縮する • 指がX方向に動く X方向に動く • Y方向に拡縮する Y方向の位置がずれる ずれを戻す • X方向に拡縮する X方向の位置がずれる ずれを戻す
- 38.
- 39. 指がX方向に動く ⇣ X方向に動く //IObservable<Vector2> var dragMoveStream =onDrag .Select(e => container.InverseTransformVector(e.delta).x) .Select(deltaX => new Vector2(deltaX, 0f));
- 40. 指がY方向に動く ⇣ 拡縮する //IObservable<Vector3> var scaleStream =onDrag .Select(e => parent.localScale.y * ToScreenPosition(e.position).y / ToScreenPosition(e.position - e.delta).y) .Select(scale => Vector3.one * scale);
- 41. Y方向に拡縮する、ずれる ⇣ Y方向のずれを戻す //IObservable<Vector2> var cancelSlipYStream =scaleStream .Select(scale => defaultHeight * scale.x) .Select(y => new Vector2(0f, y - parent.anchoredPosition.y));
- 42. X方向に拡縮する、ずれる ⇣ X方向のずれを戻す //IObservable<Vector2> var cancelSlipXStream =onDrag .Select(e => container.InverseTransformPoint(e.position)) .Zip(scaleStream.Select(scale => parent.localScale.x / scale.x), (position, comparsionScale) => new { position, comparsionScale }) .Select(anon => (anon.comparsionScale - DefaultScale) * (-parent.anchoredPosition.x + anon.position.x)) .Select(deltaX => new Vector2(deltaX, 0f));
- 43. //移動 Observable.Merge(dragMoveStream, cancelSlipYStream, cancelSlipXStream) .Subscribe(move=> parent.anchoredPosition += move) .AddTo(this); //拡縮 scaleStream .Subscribe(scale => parent.localScale = scale) .AddTo(this); 4) 動きを全て合成し、定義する
- 45.
- 46.
- 47.
- 49. Settingsの動きの関係性 • 指が動く 触れた要素が動く •要素が動く 真上にある要素が遅れて動く • 要素が動く ➔ 真下にある要素が遅れて動く
- 50. Settingsの動きの関係性 • 指が動く 触れた要素が動く •要素が動く 直後にある要素が遅れて動く • 要素が動く ➔ 直前にある要素が遅れて動く ループしてしまう
- 51. Settingsの動きの関係性 • 指が動く 触れた要素が動く 前後の要素に動きが伝わる •上から動きが伝わってくる ➔ 下に伝える • 下から動きが伝わってくる ➔ 上に伝える 伝播してきた動きは逆向きへ伝える
- 52.
- 53. public class ListItem: MonoBehaviour { //上に動きを伝えるパイプ public IObservable<Vector2> ToPrev { get { return toPrev.AsObservable(); } } //下に動きを伝えるパイプ public IObservable<Vector2> ToNext { get { return toNext.AsObservable(); } } • まず上下の要素を繋ぐパイプを用意する リスト要素のクラスを作成する
- 54. 上から動きが伝わってくる ⇣ 下に伝える var fromPrev =myTransform.parent.GetChild(siblingIndex - 1) .GetComponent<ListItem>() .ToNext .Delay(TimeSpan.FromMilliseconds(10)); fromPrev.Subscribe(toNext).AddTo(this);
- 55. 下から動きが伝わってくる ⇣ 上に伝える var fromNext =myTransform.parent.GetChild(siblingIndex + 1) .GetComponent<ListItem>() .ToPrev .Delay(TimeSpan.FromMilliseconds(10)); fromNext.Subscribe(toPrev).AddTo(this);
- 56. 指が動く ⇣ 上下に伝わる //ドラッグによる移動 IObservable<Vector2> fromDrag =this.OnDragAsObservable() .Select(e => myTransform.parent.InverseTransformVector(e.delta)) .Select(delta => new Vector2(delta.x, 0)); fromDrag.Subscribe(toPrev).AddTo(this); fromDrag.Subscribe(toNext).AddTo(this);
- 57. 動きをまとめ、関係性として定義 Observable.Merge(fromPrev, fromNext, fromDrag) .Subscribe(delta=> myTransform.anchoredPosition += delta) .AddTo(this);
- 58.
- 59. 注意とまとめ • RxはUIでも便利。使えそうな所を見つけたらガ ンガンつかっていこう。 • 無理して使わない。 •複雑な動きも分解してみると大したことないかも。
- 60.