知識ゼロからはじめるローコーディング開発

Power Platformでのアプリ開発について、いろいろと書きたいと思います。

Power Apps で疑似3Dシューティングゲームのキャラクターや背景を作成する

JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説7回目です。今回はゲームで使用しているキャラクターや背景について解説したいと思います。

 

ゲームに登場するキャラクターや背景のほとんどは Microsoft Designer で作成しています。ゲームでは人物も敵機も結構な数を必要としましたので、生成AI無しでは完成させることは出来なかったのではないかと思います。

続きを読む

Power Apps で疑似3Dシューティングゲームの攻撃と当たり判定を設定する

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

 

まず、当ゲームでは攻撃ボタンというものは用意しておらず、画面タップで移動すると同時に弾を撃つという仕様になっています。画面をタップするとTimerコントロールが起動し、1秒間だけカウントするように設定しておきます。Timerコントロールを画面タップでオンするには、プロパティ[Start]に変数をセットしておき、タップしたタイミングで変数にtrueが入るようにセットします。

 

Timerコントロールがオンになると、カウントダウン開始されます。下図では「Shot1_Shot」という変数を使用していますが初期値100で、0.1秒で-10減少するようにセットされていますので、1秒でカウントが終了するようになっています。

攻撃のアニメーションも、このカウントダウンの値を使っていて、回転しながらサイズ0まで縮小します。

続きを読む

Power Apps で疑似3Dシューティングゲームの敵機を設定する

「Power Guardians」の仕組み解説5回目となります。今回は敵機の設定について解説したいと思います。ゲームでは非常にたくさんの敵が登場するのですが、当ゲームでは3つのテーブルだけで敵が出てくる順番や動作をコントロールしています。Power Apps で作成するゲームですので、一般的なゲームプログラミングとは異なり、特殊な作り方になっているとは思いますが、これが出来ると様々なアクションゲームに応用できると思いますので、ご覧頂ければ幸いです。

 

最初に用意するのは敵マスタです。文字通り敵の情報をセットするマスタで、敵番号（No）と敵の体力（HP）と敵の画像を保存しています。画像ファイルはあらかじめメディアに追加をしておく必要がありますが、アップロードしたファイル名の変更はPower Apps からは行えないようですので、ファイル名にある程度の命名規則を設けておくと良いかもしれません。当ゲームではenemy01、enemy02、というように番号を割り当てて敵機を管理をしています。

続きを読む

Power Apps で疑似3Dシューティングゲームの背景を作成する

JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説4回目となります。今回は、前回までのブログで解説をさせて頂いた地面のアニメーションに背景画像を加え、更にはプレイヤーの動きに連動するような設定を加えてみたいと思います。ここまで作成すると、よりゲームらしさが見えてくるのではないかなと思います。

 

プレイヤーの動きに合わせて連動するコントロールは4つです。一番後ろに置く背景画像はプレイヤーの動きに合わせて左右に動きます。そのため、背景画像はキャンバスよりも幅の広い画像を用意しておきます。その手前には地面の画像を置きます。これはプレイヤーの上下の動きに合わせて高さが変わるように設定します。手前の2つは地面のアニメーション画像です。この2つも同様にプレイヤーの動きに合わせて高さが変わるように設定します。放射状になっている地面の線の中心は、前回までのブログの内容を試された方であれば、プレイヤーの左右の動きと連動するようにセットされているはずです（Power Apps で疑似3Dシューティングゲームの地面を作成する②）。

続きを読む

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);

ここまで設定できたら、プレビューで実行をしてみましょう。タップした位置にプレイヤー機が移動できれば、設定は成功です。ぜひ試してみてください。
今回はタイマーコントロールを使用していますので、プレビューの状態でないとプレイヤーは動きませんので、実行時はご注意ください。

さて、プレイヤー機がタップで動かせるようになりましたので、次回は背景画像も加えて、よりリアルな動きを表現してみたいと思います。お楽しみに。

Power Apps で疑似3Dシューティングゲームの地面を作成する②

JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説2回目となります。今回は、地平線の中心から放射状に延びる線の描画について解説をしたいと思います。
画面の中心から放射状に延びる線は、より遠近感を感じてもらうために描画しています。遠近感を感じさせるため、前の手順で地面に横線を引いて、奥から流れるようにアニメーションをさせてみましたが、本来ならその線というのは側面にも上側にも適用されていないと、おかしな話ですよね。ですが、今回作成するのは疑似３Dです。あらゆる方向に平面画像で描写をしていては、いくら画像を用意してもキリがありませんので、中央から放射状に延びる線を描くことで奥行を追加表現しているのです。色々なゲームで表現されている手法ですので、今回はこの方法を採用させて頂きました。

地面の放射状の線はSVGで作成しています。特に難しい計算式などは使用しておらず、24本の線を“polygon“を使用して描いているだけです。ゲームをプレイされた方は気付いていると思いますが一番上にある頂点の座標はプレイヤー機の動きと連動しています。そのため、 (Sc1_img_Player.X)/という座標はプレイヤー機のX座標の値と連動するようにセットしています。実際の設定では、移動量を半分にすることで、より遠近感を感じさせるように設定をしています。

続きを読む

Power Apps で疑似3Dシューティングゲームの地面を作成する①


JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」。Power Apps の機能だけで作成させて頂いたこのゲームについて、たくさんの嬉しいコメントを頂き、コンテスト当日は最優秀賞まで頂くことができました。ご参加を頂いた皆様には本当に感謝の思いでいっぱいです。

コメントの中には「どのようにして作ったのか？」という質問もたくさんございまして、会場では出来る限りお話をさせて頂いたのですが、なかなかお伝えしきれないところもありましたので、あらためてブログの中で書かせて頂こうと思った次第です。少しでもご期待に沿うことができれば幸いです。

今回は地面のアニメーションについてお話をさせて頂こうと思いますが、疑似3Dについて少しだけ復習をさせてください。疑似3Dというのは、3次元グラフィックスの処理技術を使わずに、平面画像のみで奥行や立体感表現することです。基本平面画像しか使いませんので、最近の3Dゲームのように対象を回転させて見ることは出来ませんし視点を変えて、あらゆる角度から見るということもできません。

続きを読む