ボムの状態を変化させる ~勉強会資料その6~

このブログはPower Apps でローコーディングな勉強会 #14の資料その6になります。

このブログではボムの状態を変化させる方法についてご紹介致します。

ボムの状態を管理するタイマーを設定する

ボムの状態管理にはタイマーを利用しようと思います。
「挿入」>「入力」>「タイマー」よりタイマーを挿入してください。
タイマーの名前は"BombTimer"と設定しておきます。
タイマーはボムが設置されたとき...つまりボムのボタンが押されたときに開始されるように設定したいと思います。
なので以下のようにそれぞれ設定します。

Screen1.OnVisible

UpdateContext({_bombStart:false});

BombButton.OnSelect

UpdateContext({_bombStart:true});

BombTimer.Start

_bombStart

BombTimer.Duration

3000

これらの設定でボムが置かれたときに同時にタイマーもスタートするように設定できました。

ボムにアニメーションを適用する

続いてボムにアニメーションを設定したいと思います。
ボムのアニメーションに使用する用の画像を読み込んでください。
ボムにアニメーションを適用するにはボムのイメージを時間により変化させればいいですね。
なので以下のように設定します。

BombImage.Image

If(BombTimer.Value <= 500, 
    'Splitted Image 0-0',
   If(BombTimer.Value <= 2800,
       If(Mod(RoundDown(BombTimer.Value / 300, 0), 2) = 0,'Splitted Image 1-0', 'Splitted Image 2-0'),
         If(BombTimer.Value <= 2900,
           'Splitted Image 3-0',
             If(BombTimer.Value <= 3000,
               'Splitted Image 4-0')
         )
   )
)

ついでに以下も設定しておきます。

BombImage.Visible

_bombStart

BombTimer.OnTimerEnd

UpdateContext({_bombStart:false})

BombButton.OnSelect

If(!_bombStart,
   UpdateContext({_bombStart:true});
   UpdateContext({_bombX:Round(_playerX / 48, 0) * 48});
   UpdateContext({_bombY:Round(_playerY / 48, 0) * 48});
)

ついでに設定した項目については特に説明不要かと思いますので、Imageについて簡単に解説を行います。

こちらはざっくりいいますと、時間によって表示させるアニメーションを変化させています。
まず最初にタイマーの値が500ms以下か？を判定して。trueであった場合、通常のボムを表示しています。
続いてタイマーの値が500ms以下ではなく、2800ms以下か？を判定しています。
この場合、画像は用意した画像2種を交互に表示させたいため、タイマーの時間を割った余りが0かそうでないかで画像を切り替えるようにしています。
あとは上記と同じですね。

以上でボムにアニメーションを設定することができました！