このブログはPower Apps でローコーディングな勉強会 #14の資料その9になります。
このブログではボムの爆炎にプレイヤーが接触したかどうかを判断する方法についてご紹介致します。
当たり判定の実装方法について
当たり判定の実装方法について、こちらの動画で紹介しています!(宣伝)
注意として、こちら私の趣味でバ美肉しておりますので、ご視聴の際はご注意ください。
今回はこちらの動画で紹介している1つ目の方法を用いて実装していこうと思います。
当たり判定を行うオブジェクトを設定する
当たり判定はトグルで行おうと思います。
「挿入」>「入力」>「切り替え」を選択してトグルを挿入してください。
こちらのトグルがtrueになったとき、プレイヤーが爆炎にあたったということにしたいと思います。
トグルのDefaultに以下の設定を行います。
PlayerDethJudge.Default
_fireStart && (( ((PlayerImage.X > FireImage01.X && PlayerImage.X < FireImage01.X + FireImage01.Width) || (FireImage01.X > PlayerImage.X && FireImage01.X < PlayerImage.X + PlayerImage.Width)) && ((PlayerImage.Y > FireImage01.Y && PlayerImage.Y < FireImage01.Y + FireImage01.Height) || (FireImage01.Y > PlayerImage.Y && FireImage01.Y < PlayerImage.Y + PlayerImage.Height)) ) || ( ((PlayerImage.X > FireImage02.X && PlayerImage.X < FireImage02.X + FireImage02.Width) || (FireImage02.X > PlayerImage.X && FireImage02.X < PlayerImage.X + PlayerImage.Width)) && ((PlayerImage.Y > FireImage02.Y && PlayerImage.Y < FireImage02.Y + FireImage02.Height) || (FireImage02.Y > PlayerImage.Y && FireImage02.Y < PlayerImage.Y + PlayerImage.Height)) ))
当たり判定の式についてはここでは詳細には説明しません。
簡単に説明すると
((PlayerImage.X > FireImage01.X && PlayerImage.X < FireImage01.X + FireImage01.Width) || (FireImage01.X > PlayerImage.X && FireImage01.X < PlayerImage.X + PlayerImage.Width))
この式がX成分の領域が重なっているかを判定している式で、
((PlayerImage.Y > FireImage01.Y && PlayerImage.Y < FireImage01.Y + FireImage01.Height) || (FireImage01.Y > PlayerImage.Y && FireImage01.Y < PlayerImage.Y + PlayerImage.Height))
この式がY成分の領域が重なっているかを判定している式です。
どちらの式も成り立たなければならないので、X成分、Y成分の2つの判定式のを"&&"演算子で繋いでいます。
判定は炎が出ているとき、つまり爆炎のタイマーが動いているときのみにしたいため、"_fireStart"を"&&"で繋いでいます。
FireImage01とFireImage02はどちらかが接触していればいいので、"||"演算子で繋いでいます。
このようにトグルで当たり判定を行うことにより、タイマーで当たり判定を行うよりもリアルタイムで判定を行うこなうことができ、また、タイマーも無駄に設定しなくていいので、個人的にお勧めです。
爆炎とプレイヤーが接したときの処理をかく
爆炎とプレイヤーが接したときは、今回は簡単にプレイヤーが初期位置に移動するだけとします。
先ほど設定したトグルのOnCheckに以下の処理を記載します。
PlayerDethJudge.OnCheck
UpdateContext({_playerX:_startX}); UpdateContext({_playerY:_startY}); UpdateContext({_playerState:1});
これで、トグルがチェックになったとき、、、つまりプレイヤーと炎が接触したときにプレイヤーが初期位置に戻るように設定できました!
----------2020/03/20追記----------
ダメでした!すいません!!!
なにがいけなかったかというと、キャラクターの実際見えてる範囲よりも画像の大きさが大きいことを考慮してなかったからですね。
わかりやすいように当たり判定を表示してみました。
赤枠がプレイヤーの当たり判定で、青、黄色が爆炎の当たり判定ですね。
ご覧の通りキャラクターは爆炎が届いているマス外に移動しているにもかかわらず、判定的には重なっているということが確認できるかと思います。
ではどうするのか?といいますと、今回は当たり判定を別で用意しようかと思います。
当たり判定用のオブジェクトをプレイヤー、炎用にそれぞれ用意します。
「挿入」>「アイコン」>「四角形」を上記分用意してください。
わかりやすいように名前はそれぞれ、"PlayerRectangle"、"Fire01Rectangle"、"Fire02Rectangle"としておきましょう。
そして、それぞれのX、Y、高さ、幅には対応したオブジェの値を入れてください。
例えばPlayerでしたら以下のようになりますね。
PlayerRectangle.X
PlayerImage.X
PlayerRectangle.Y
PlayerImage.Y
PlayerRectangle.Height
PlayerImage.Height
PlayerRectangle.Width
PlayerImage.Width
このあたり判定の範囲を小さくします。
例えば、プレイヤーの当たり判定を小さくしたい場合は、下記のようにすればいいですね。
PlayerRectangle.Height
PlayerImage.Height - 15
PlayerRectangle.Width
PlayerImage.Width - 15
ただこのままでは座標に少しずれが生じているかと思いますので下記のように座標についても修正してあげる必要があります。
PlayerRectangle.X
PlayerImage.X + 10
PlayerRectangle.Y
PlayerImage.Y + 10
あとは、爆炎に関しても同じように修正してください。
最後に当たり判定を行っているトグルについても上記の当たり判定のオブジェクトを確認するよう修正します。
PlayerDethJudge.Default
_fireStart && (( ((PlayerRectangle.X > Fire01Rectangle.X && PlayerRectangle.X < Fire01Rectangle.X + Fire01Rectangle.Width) || (Fire01Rectangle.X > PlayerRectangle.X && Fire01Rectangle.X < PlayerRectangle.X + PlayerRectangle.Width)) && ((PlayerRectangle.Y > Fire01Rectangle.Y && PlayerRectangle.Y < Fire01Rectangle.Y + Fire01Rectangle.Height) || (Fire01Rectangle.Y > PlayerRectangle.Y && Fire01Rectangle.Y < PlayerRectangle.Y + PlayerRectangle.Height)) ) || ( ((PlayerRectangle.X > Fire02Rectangle.X && PlayerRectangle.X < Fire02Rectangle.X + Fire02Rectangle.Width) || (Fire02Rectangle.X > PlayerRectangle.X && Fire02Rectangle.X < PlayerRectangle.X + PlayerRectangle.Width)) && ((PlayerRectangle.Y > Fire02Rectangle.Y && PlayerRectangle.Y < Fire02Rectangle.Y + Fire02Rectangle.Height) || (Fire02Rectangle.Y > PlayerRectangle.Y && Fire02Rectangle.Y < PlayerRectangle.Y + PlayerRectangle.Height)) ))
これで指定した当たり判定の範囲の実装を行うことができました。
最初から画像サイズにあったイメージを用意しておけばこのようなことは起こらなかったですね...