Power Apps で疑似3Dシューティングゲームのプレイヤー機を設定する - 知識ゼロからはじめるローコーディング開発

JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説3回目となります。今回はプレイヤー機の設定について解説をしたいと思います。

Power Apps では画面の座標を取得する機能は、標準機能としては実装されていないのですが、ゲームでは、プレイヤー機は画面をタップすることで移動をしています。Power Apps でアプリ開発をされたことがある方からすると、少し不思議な動作に見えるのですが、これを実現している正体は、☆印の入力ができる評価コントロールです。ゲーム中では透明になっていて見えないのですが、実際には評価コントロールの☆が画面一杯に敷き詰められていて、☆を選択する度に計算された座標を返すようになっています。

評価コントロールで座標を取得するには、最初にコレクションを作成します。コレクションの中身は Sequence 関数で12個アイテムを作成します。
ClearCollect(Move_Robot,Sequence(12));

続いてギャラリーを作成しますが、カードにはテキストと評価コントロールを置きます。テキストでは Sequence 関数で取得した番号を表示させ、評価コントロールは、☆の数を22と設定しています。

座標を正確に取得するにはコントロールのサイズを整えておくことが大切で、これがずれているとタップした際に誤った座標が返ってきます。ゲームではギャラリーのテンプレートのサイズを50、パディングを0、評価コントロールの幅を1100、高さを50とすることで、☆のサイズが50×50になるように調節しています。

ギャラリーと評価コントロールの高さが決まっていればタップした☆の位置から座標をもとめることができます。例えば、ギャラリーのアイテムが3番目、☆は8個目であれば、タップした座標はXが3×50で150、そこから☆の半分の幅を引いた125がXの座標となります。Yは8×50で400、そこから☆の半分の高さを引いた375がYの座標となります。プレイヤーの位置も取得しなくてはなりません。プレイヤーの高さと幅はそれぞれ200なので、XYそれぞれから100を引いた値がプレイヤーの座標となります。計算をすると、プレイヤーのX座標は25、Y座標は275となります。

さて、座標の取得の仕方がわかりましたら、今度はタップでプレイヤーが移動するアニメーションを作成していきます。アニメーションの仕様は次のとおりです。
①タップした座標Bの（X,Y）を取得
②移動前の座標Aと座標B差を計算。Xの差＝100、Yの差＝-10
③0.2秒で移動する距離を計算。Xの移動距離は 100/5 = 20、Yの移動距離は -10/5 = -2
④Timerコントロールで 0.2秒毎に、X を20、Y を-2 足していく
⑤Bの地点に到達した時点で終了する

これをタップするごとに処理を繰り返せば、プレイヤー機はタップした位置に移動していくはずです。

それでは実際のゲームでも使用している、プレイヤーのアニメーションを5つのコントロールを使用して作成してみたいと思います。実際に設定するコントロールは下図のとおりです。

各コントロールの設定を以下に載せます。

複雑な箇所は別途テキストで書き出していますので、試される方はコピー＆ペーストでコントロールのプロパティに張り付けてみてください。

//タイマー[Test_Timer_Player]
//OnTimerEnd：
　If(Move_Diff_X>0,
   　　If(Move_To_X>Move_Robot_X , Set(Move_Robot_X , Move_Robot_X+Move_Diff_X/5)),
   　　If(Move_To_X<Move_Robot_X , Set(Move_Robot_X , Move_Robot_X+Move_Diff_X/5))
　);

　If(Move_Diff_Y>0,
   　　If(Move_To_Y>Move_Robot_Y , Set(Move_Robot_Y , Move_Robot_Y+Move_Diff_Y/5)),
   　　If(Move_To_Y<Move_Robot_Y , Set(Move_Robot_Y , Move_Robot_Y+Move_Diff_Y/5))
　);

//評価[Test_Rating]
//OnSelect：
　　　Set(Move_From_X,Test_img_Player.X+100);
　　　Set(Move_To_X,Test_Gallery.Selected.Test_Rating.Value*50-25);
　　　Set(Move_Diff_X,Move_To_X-Move_From_X);

　　　Set(Move_From_Y,Test_img_Player.Y+100);
　　　Set(Move_To_Y,Test_Gallery.Selected.Test_lbl_X.Text*50-25);
　　　Set(Move_Diff_Y,Move_To_Y-Move_From_Y);