TAKOYAKING’s blog 一覧

TAKOYAKING’s blog

たこ焼き系

UniRxのCombineLatestでReactivePropertyを合成する

ことの経緯

1つのReactivePropertyと変更対象のUIが1対1になっている時は問題ありませんが、2つのReactivePropertyが異なる条件で1つのUIを変更しようとしているときに困ったことになりました。

例えば
ゲージが貯まれば背景のグレー解除
マナが貯まれば背景のグレー解除

だとゲージとマナで2つの軸ができてしまいます。
仮にゲージが溜まっているのにマナが溜まっていない状態だと、ゲージの背景のグレー解除が行われてしまい挙動が不正となってしまいます。

CombineLatestで合成する

UniRxのReactivePropertyについて - Nobollel開発者ブログ

public static IObservable<TResult> CombineLatest<TLeft, TRight, TResult>(this IObservable<TLeft> left, IObservable<TRight> right, Func<TLeft, TRight, TResult> selector)
{
    return new CombineLatestObservable<TLeft, TRight, TResult>(left, right, selector);
}
var isMaxGaugeReactiveProperty = new ReactiveProperty<bool>();
var isMaxManaReactiveProperty = new ReactiveProperty<bool>();

IObservable<bool> IsMaxGaugeAndMaxManaReactiveProperty = Observable.CombineLatest(
    isMaxGaugeReactiveProperty, // ReactiveProperty<bool>
    isMaxManaReactiveProperty, // ReactiveProperty<bool>
    (isMaxGauge, isMaxMana) => isMaxGauge && isMaxMana // (bool, bool) => bool
); // IObservable<bool>

返り値の型はIObservable < TResult>となります。

2つのReactivePropertyを渡してあげることで、第3引数にReactivePropertyのT型を引数に持つメソッドを渡すことができます。
そして、2つのPropertyの値を判断したReactivePropertyが出来上がります。

上の例だと
ゲージが貯まりかつマナが貯まる状況を作り出せます。

感想

UniRxとても便利!