このブログはPower Apps でローコーディングな勉強会 #14の資料その7になります。
このブログではボムを爆発させて爆炎を表示させる方法についてご紹介致します。
炎の画像を設定する
炎の画像を読み込んで、キャンバスに表示させます。
炎の画像は縦、横の2種類用意します。
これらの画像の「画像の位置」は「拡大して表示」もしくは、下記のように設定します。
FireImage.ImagePosition
ImagePosition.Stretch
また、横の炎は高さを、縦の炎は幅を、それぞれ"64"に設定しておきます。
ボムの爆発に爆炎を合わせる
ボムの爆発に合わせて爆炎のイメージを表示させるようにしたいと思います。
爆炎に用いるための変数をScreen1のOnVisibleにて宣言します。
Screen1.OnVisible
UpdateContext({_fire01X:0});
UpdateContext({_fire01Y:0});
UpdateContext({_fire02X:0});
UpdateContext({_fire02Y:0});
UpdateContext({_fire01Height:0});
UpdateContext({_fire02Width:0});
UpdateContext({_fireStart:false});
ここでは、簡単のため01を縦の炎、02を横の炎に設定していますが、もっとわかりやすい名前にしたほうがいいですね！！ごめんなさい。
上記をもとに、縦の炎、横の炎にそれぞれX、Y、高さ、幅を設定してください。
※X、Yの設定の際にギャラリーの中に炎が来るようにする式を記述するのを忘れないようにしましょう！！
またボムのときと同様に、縦、横の"Visible"にそれぞれ"_fireStart"を設定しておいてください。
ボムが爆発した時に爆炎が発生するようにしたいため、爆炎用のタイマーを用意します。
また、ボム用のタイマーが終わった時に爆炎用のタイマーがスタートするようにしたいため、以下のように設定します。
BombTimer.OnTimerEnd
UpdateContext({_fireStart:true});
FireTimer.Start
_fireStart
爆炎用のタイマーが開始したらボムの位置に爆炎がくるようにし、タイマーが終了したら炎を消したいので以下のように設定します。
FireTimer.OnTimerStart
UpdateContext({_fire01X:_bombX});
UpdateContext({_fire01Y:_bombY - 32});
UpdateContext({_fire02X:_bombX - 32});
UpdateContext({_fire02Y:_bombY});
// 高さは固定
UpdateContext({_fire01Height:140});
// 幅は固定
UpdateContext({_fire02Width:140});
FireTimer.OnTimerEnd
UpdateContext({_fireStart:false});
UpdateContext({_fire01X:0});
UpdateContext({_fire01Y:0});
UpdateContext({_fire02X:0});
UpdateContext({_fire02Y:0});
UpdateContext({_fire01Height:0});
UpdateContext({_fire02Width:0});
この設定では、爆炎がボムを中心に1マス分表示されるようになっています。
続いて、これらの設定を"FirreImage"に反映させます。
"FireImage01"を例にとって説明します。
まず炎のイメージをギャラリー内に設定したいため座標は以下のように設定します。
FireImage01.X
_fire01X + StageGallery.X - FireImage01.Width / 8
FireImage01.Y
_fire01Y + StageGallery.Y
続いて、幅と高さを設定します。
"FireImage01"は縦の炎ですので、幅は固定にします。
FireImage.Width
64
FireImage01.Height
_fire01Height
最後に、こちらの炎は、ボムが爆発した後のみ表示したいので、以下のように設定します。
FireImage01.Visible
_fireStart
同様の変更を、"FireImage02"についても設定してください。
注意として"FireImage02"は横の炎なので、固定にするのは高さになります。
これで設定は完了です！
挑戦！！
今回の説明では爆炎は固定の長さで表示され、ブロックなども貫通して表示されています。
もし余力のあるかたや挑戦してみたい方は、ブロックなどを貫通しないように実装してみて下さい！
ヒントもなにもないのもちょっとアレなので上下左右の判定を行うためのヒントを記載しておきます。
With({Up:Filter(stage, X = _bombX, Y < _bombY, Y >= _bombY - First(_PlayerState).Fire * 34),
Down:Filter(stage, X = _bombX, Y > _bombY, Y <= _bombY + First(_PlayerState).Fire * 34),
Right:Filter(stage, Y = _bombY, X > _bombX, X <= _bombX + First(_PlayerState).Fire * 48),
Left:Filter(stage, Y = _bombY, X < _bombX, X >= _bombX - First(_PlayerState).Fire * 48)},
// Fire(_PlayerState).Fire は炎の強さです
// ここに処理を記載
)
