5.1K Views
October 23, 24
スライド概要
JPPGB(Japan Power Platform Game Builders) ゲーム作成コンテスト#1で発表をさせて頂きました Power Apps で作成した疑似3Dシューティングゲームの解説資料です。
Power Platform について色々書いたりしてます。
P ower G uardians Power Apps で作成する疑似3Dシューティングゲーム JPPGB ゲーム作成コンテスト#1 Masahiro Mishima
Power Guardians Japan Power Platform Game Builders [JPPGB]について Power Platformは、本来は業務アプリを開発するためのツールですが、簡単なゲームも開発をする ことができます。ゲームには、業務アプリにも繋がる様々なアイデアやテクニックが含まれていて、 誰もが、楽しみながら開発スキルを学ぶことができます。JPPGB は、ゲーム開発を通して、開発ス キルを学び合うコミュニティで、Microsoft MVP コルネ氏によって運営されています。定期的に勉 強会や作品発表会などが開催され、多くの Power Platform ユーザーが参加をしています。 JPPGB ゲーム作成コンテストと発表作品について 2024年6月22日 JPPGB主催のゲーム作成コンテスト#1が開催されました。私がエントリーをさせて 頂いたゲームは Power Guardians という Microsoft Power Apps で作成した疑似3Dシューティング ゲーム です。 X(Twitter)で紹介動画を公開させて頂いた際に、多くの方に作り方に関するご質問を頂きました。 今回作成した解説書では、ゲーム開発をする際に使用したテクニックについてまとめております。 ゲーム開発や業務アプリを作る際に少しでもお役に立てれば幸いです。
Power Guardians 関連リンクの紹介 ※2024年10月時点のリンクです。リンクが切れている場合もあります。ご了承ください。 Japan Power Platform Game Builders https://jppgb.connpass.com/ JPPGB ゲーム作成コンテスト #1 https://jppgb.connpass.com/event/317001/ 作品紹介動画 https://x.com/MMishima_3/status/1802332053415096780 作品ダウンロード https://github.com/koruneko/JPPGB-GameContest1/blob/main/07.Mishima%E3%81%95%E3%82%93/Masahiro_Mishima_PowerGuardians.zip
Power Guardians 1.ゲーム概要
Power Guardians ゲームの概要 主人公はとある防衛部隊に所属しています。敵機から自軍基地を守るため 戦闘用ロボットに乗り込み、仲間たちと共に戦うという設定です。 タイトル画面
Power Guardians ゲームの概要 ゲームを開始するとステージ選択画面が表示されます。 ステージ選択画面
Power Guardians ゲームの概要 ステージの種類は5種類〔海上、森林、砂丘、寒冷地、宇宙〕 難易度は3種類〔EASY、NORMAL、HARD〕用意しています。 開始ボタンでミッションがはじまります。
Power Guardians ゲームの概要 出撃アニメーションがはじまると、メンバーのセリフも表示されます。 出撃画面
Power Guardians ゲームの概要 プレイ画面では、タップだけで移動と攻撃を行います。敵を逃すと味方基地がダメージを受けます。 プレイ画面
Power Guardians ゲームの概要 クリア画面では撃墜数によって味方のコメントが変化します。
Power Guardians ゲームの概要 ゲームの最期にスコアランキングが表示されます。
Power Guardians 2.疑似3Dシューティングとは
Power Guardians 疑似3Dとは 本来の3次元グラフィックス処理技術を使わずに、遠近法などの視覚効果を 利用することで奥行きや立体感を表現することです。 平面画像だけで3Dを表現する 3Dゲームのように対象を動かしたり、視点を変えて見たりすることはできません。 立体的に回転させる 立体的に視点を変える
Power Guardians 平面画像で奥行を表現する 平面画像で奥行を表現するには、プレイヤー機、敵機、背景画像を別々に用意しておきます。 アニメーションする際に大きさや移動速度を調整する必要があります。 敵機の大きさ プレイヤー機から敵機が遠い場合は小さく 近い場合は大きくなるように表示します。 敵機の速度 プレイヤー機から敵機が遠い場合は遅く 近い場合は速く移動するように設定します。
Power Guardians 3. 地面のアニメーション
Power Guardians 地面のアニメーション プレイ画面では、プレイヤー機が奥に向かって 進んでいるように見せるため、地面をアニメー ションさせています。 この動きは Power Apps の画像コントロールに SVGを記述することで実現しています。 遠近感のある地面のアニメーション 遠近感があるように地面を アニメーションさせるには 地面に等間隔に引いた線が プレイヤーの視点からどの ように見えるかを、考える 必要があります。 プレイヤー 地面に等間隔に線を引いた場合プレイヤーからはどのようにみえるだろうか
Power Guardians 地面のアニメーション 地面に等間隔に引いた線をプレイヤー 視点で見ると、線の間隔が手前は広く 奥に行くほど狭くなっていきます。 アニメーションをさせると、奥は遅く 手前にくるほど線は速く移動します。 この線の間隔ですが、一番手前の線の 間隔を1とした時、奥の線との間隔は 順番に1/3、1/6、1/10、1/15…と 狭くなっていきます。 この分母の値は初項1、公差1の等差 数列の和です。 1/36 1/28 1/21 1/15 1/10 1/6 1/3 1 分母は 初項1、公差1 の等差数列の和 線の順番をnとした場合 n(n+1)/2
Power Guardians 地面のアニメーションのSVG 実際のゲームの中では前述の計算式を基に計算した値を使用して、少しずつ高さを変えた14本の 長方形をSVGで記述しています。高速で描画する必要があるため、処理は全てSVGで行っています。 変数やループ処理を間に挟まない方がスムーズに動かすことができます。 ゲーム中のSVGはこのようになっています。変数 SetColorX は色をセットしています。 変数 Sc1_txtInput1_1.Text には長方形が縦に動く速さを設定しています。 長方形の高さ分、長方形を上から下に繰り返し移動するアニメーションを設定しています。 <rect x='0' y='2' width='1136' height= '1' fill='" & SetColorX &“’> <animate attributeName='y' from='0' to='2' dur='" & Sc1_txtInput1_1.Text & "' repeatCount='indefinite’ /> </rect>
Power Guardians 地面のアニメーションのテスト SVGのテスト画面です。画像コントロールにSVGを設定していますが、下にいくほど間隔が広く なるように設定をしています。どの四角形も速さが 0.15s になっていますが高さがあるほど、 移動速度は速くなります。
Power Guardians 4. プレイヤーに合わせて動く 放射状に延びる線を描く
Power Guardians 地面の放射状の線 画面の中心から放射状に延びる線は、遠近感を感じてもらうために描画しています。 中央から放射状に延びる線を描くことで奥行を表現しています。
Power Guardians
地面の放射状の線の描画
地面の放射状の線はSVGで作成しています。計算式などは使用しておらず、24本の線を“polygon“を
使用して描画しています。ゲームをプレイされた方は気付いていると思いますが一番上にある頂点の
座標はプレイヤー機の動きと連動しています。そのため、 (Sc1_img_Player.X)/という座標はプレイヤー
機のX座標の値と連動するようにセットしています。
実際の設定では、移動量を半分にすることで、より遠近感を感じさせるようにしています。
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1500,250 -1600,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1300,250 -1400,250' fill='#33339966'></polygon>
<polygon points='"& (Sc1_img_Player.X)/2+350 &",0 -1100,250 -1200,250' fill='#33339966'></polygon>
Power Guardians 地面の放射状の線の描画 プレイヤー機の画像をキャンバスに置いて、“polygon“で描く三角形の頂点のX座標をプレイヤー機 のX座標(出来れば画像の中央)に合わせ、プレイヤー機をマウスで動かしてみます。放射状に描か れる線の頂点が、プレイヤーの動きに追随することがわかるかと思います。
Power Guardians 地面の放射状の線と横線を重ねる 前回作成した横線と、今回の放射状の線を 高さを合わせて重ね合わせます 続いてコントロールの高さを、プレイヤー機 ( Sc1_img_Player )の縦の動きに合わせて変 わるように設定してみます 設定例 Y:440+Sc1_img_Player.Y/5 Height:200-Sc1_img_Player.Y/5
Power Guardians 地面の動きをテストする マウスでプレイヤー機の画像コントロールを動かしてみます。 プレイヤーの動きに追随するように地面が動けば設定は成功です。
Power Guardians 5. プレイヤーのアニメーションについて
Power Guardians タップで動くプレイヤー機 Power Apps では画面の座標を取得するコントロールは実装されていないのですが ゲームでは、プレイヤー機が画面タップをした位置に移動しています。 画面タップで プレイヤー機を 移動させる
Power Guardians 評価コントロールで座標を取得する ゲームでは透明に設定しているので見えないのですが、画面には評価コントロールを敷き詰めて います。評価コントロールをタップで選択することで座標を取得します。 ギャラリーの行と 星の数で、座標を 取得しています。
Power Guardians ギャラリーと評価コントロールの設定 評価コントロールで座標を取得するには 最初にコレクションを作成します。 コレクションの中身は Sequence 関数で 12個アイテムを作成しておきます。 ギャラリーのカードに テキストと評価コントロールを置きます。 テキスト ClearCollect(Move_Robot,Sequence(12)); 評価コントロール:星は最大22 ギャラリー 1 ★ ★ ★ ★ ★ ★ ★ ★☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ 2 ★ ★ ★ ★ ★ ★ ★ ★☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ 3 ★ ★ ★ ★ ★ ★ ★ ★☆ ☆ ☆ ☆ ☆ ☆ ☆ ☆ アイテム数は12個 :
Power Guardians コントロールのサイズを整える 座標を正確に取得するにはコントロールの サイズを整えておく ことが大切です。 これがずれているとタップした際に誤った座標が返ってきます。 ゲームでは以下のように設定しています。 1 ★ ★ ★★ ★ ☆ ☆ ☆ ☆ ☆ 2 ★ ★ ★★ ★ ☆ ☆ ☆ ☆ ☆ ギャラリー テンプレートのサイズ:50 テンプレートのパディング:0 評価コントロール 3 ★ ★ ★★ ★ ☆ ☆ ☆ ☆ ☆ : X:0 Y:0 幅:1100 高さ:50 最大:22 既定:10
Power Guardians タップで座標を取得する ギャラリーと評価コントロールの高さが決まっていれば タップした☆の位置から座標をもとめることができます。 ★ 1★ ★★ ★ ☆ ☆ ☆ ☆ ☆ …… ★ 2★ ★★ ★ ☆ ☆ ☆ ☆ ☆ …… ギャラリーのアイテムが3番目、☆は8個目なので タップした座標は X=3番目 × ☆の高さ50 - ☆の中心25 で 125 Y=8番目 × ☆の高さ50 - ☆の中心25 で 375 となります。 ★ 3★ ★★ ★ ☆ ☆ ☆ ☆ ☆ …… : プレイヤーの座標を取得する 200 50 ☆ 50 200 プレイヤーの座標は、☆の中心からXY共に 100を引いた値を計算すればもとめられます。 プレイヤーの画像サイズは 200×200 なので X=125 - 100で 25 Y=375 – 100で 275 となります。 プレイヤー
Power Guardians タップでプレイヤーを移動する 座標の取り方がわかれば、プレイヤーを実際に移動させてみます。 タップした場所に向かってアニメーションをさせるには以下の計算をします。 ①タップした座標Bの(X,Y)を取得 ②移動前の座標Aと座標B差を計算 Xの差=100、Yの差=-10 ③0.2秒で移動する距離を計算 Xの移動距離は 100/5 = 20 Yの移動距離は -10/5 = -2 タップした場所 B(150,10) 移動前 A(50,20) ④Timerコントロールで 0.2秒毎 に X を 20、Y を -2 足していく ⑤Bの地点に到達した時点で終了 ※タップするごとに、この処理を繰り返す
Power Guardians ゲームではプレイヤーのアニメーションのために、5つのコントロールを使用しています テキスト Test_lbl_X ギャラリー Test_Gallery 評価 Test_Rating イメージ Test_img_Player タイマー Test_Timer_Player
Power Guardians 各コントロールの設定内容 タイマー[Timer_Player] ・期間:1 移動前と移動後のX座標の差 ・繰り返し:オン ・自動開始:オン 移動中のプレイヤーX座標 ・自動一時停止:オン タップした地点のX座標 ・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)) ); 移動前と移動後のY座標の差 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)) ); タップした地点のY座標 移動中のプレイヤーY座標
Power Guardians 各コントロールの設定内容 評価[Test_Rating] ・既定:10 ・最大:22 ・幅:1100 ・高さ:50 ・OnSelect: 移動前のX座標 Set(Move_From_X,Test_img_Player.X+100); Set(Move_To_X,Test_Gallery.Selected.Test_Rating.Value*50-25); タップした地点のX座標 Set(Move_Diff_X,Move_To_X-Move_From_X); 移動前と移動後のX座標の差 移動前のY座標 Set(Move_From_Y,Test_img_Player.Y+100); タップした地点のY座標 Set(Move_To_Y,Test_Gallery.Selected.Test_lbl_X.Text*50-25); Set(Move_Diff_Y,Move_To_Y-Move_From_Y); 移動前と移動後のY座標の差
Power Guardians 各コントロールの設定内容 テキスト[Test_lbl_X] ・テキスト:ThisItem.Value イメージ[Test_img_Player] ・X:Move_Robot_X-100 ・Y:Move_Robot_Y-100 ・幅:200 ・高さ:200 ギャラリー[Test_Gallery] ・X:0 ・Y:0 ・幅:1100 ・高さ:600 ・テンプレートのサイズ:50 ・テンプレートのパディング:0
Power Guardians 6. プレイヤー機と背景画像を組合わせる
Power Guardians プレイヤー機の動きに合わせて地面と背景を 動かすには以下の設定が必要です。 プレイヤーの上下の動きに 合わせて、高さを変更する。 キャンバスよりも幅の 広い背景画像を用意。 プレイヤーの動きに 合わせて左右に動かす。 プレイヤーの上下の動きに 合わせて、高さを変更する。 プレイヤーの左右の動きに 合わせて集中線を動かす
Power Guardians ①Test_Gallery 座標取得のためのギャラリー 地面と背景を組合わせます。前回までに作成した パーツを右にある番号順で重ねます。 ②Test_img_Player プレイヤー機(画像) ③Test_Timer_Player タイマー(非表示) ④Test_img_Graund3 地面の放射状の線 ⑤Test_img_Graund2 地面の横線 ⑥Test_img_Graund1 地面の背景画像 ⑦Test_img_Haikei 空の背景画像
Power Guardians 各コントロールの設定内容 ④Test_img_Graund3 X :0 Y :440 + Test_img_Player.Y / 5 Width :1136 Height :200 - Test_img_Player.Y / 5 ⑤Test_img_Graund2 X :0 Y :440 + Test3_img_Player.Y / 5 Width :1136 Height :200 - Test3_img_Player.Y / 5
Power Guardians 各コントロールの設定内容 ⑥Test_img_Graund1 X :0 Y :440 + Test_img_Player.Y/5 Width :1136 Height :200 - Test_img_Player.Y/5 ⑦Test_img_Haikei X :- (Test_img_Player.X) / 1636 *1136 / 4 - 125 Y :0 Width :1136 Height :520+Test_img_Player.Y/5
Power Guardians ギャラリーとタイマーは、プロパティ設定後、透明にしておきます。
Power Guardians 7. 敵機のアニメーションを設定する
Power Guardians コレクションで敵マスタを作成します。 敵マスタ(Mst_Enemy) No HP Score Image 10101 100 100 enemy01 10103 200 300 enemy03 10105 300 500 enemy05 enemy01 enemy03 enemy05 画像はメディアに追加します。
Power Guardians 敵のアクションもコレクションで設定します。 敵のアクション(Mst_EnemyProgress) No 10101 10101 Progress 1 2 X Y -200 1100 100 200 ① ② -200,100 1100,200 ③ 200,250 10101 3 200 250 10101 4 1000 300 ⑤ 10101 5 -200 350 -200,350 ④ 1000,300 ・No は敵マスタに登録した敵の番号。 ・Progress は移動する順番。 ・XとYは敵の開始位置。Progress で設定した次の開始位置に向かって移動。 ・敵とアクションはペアで設定。 同じ敵でも異なるアクションをさせる場合は、「同じ画像で異なるNo」の敵を追加登録する。
Power Guardians 敵の順番(Tbl_Progress) No 1 1 1 1 1 2 2 2 2 2 3 3 3 3 3 Branch 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 Enemy 10101 10101 10101 10101 10101 10103 10103 10103 10103 10103 10105 10105 10105 10105 10105 Flg false false false false false false false false false false false false false false false No1 No2 No3 Branch1~5 No ごとに敵を表示する。 Branch1~5 No内の敵5体全てが画面 から消えると次のNoの敵 へシフトする。 Branch の順に0.1秒ずつ 時間差をつけて敵を表示 している。 Flg:画面外に敵が逃げ出すとTrueになる Branch1~5
Power Guardians 敵をアニメーションさせる 敵の設定内容をもとに、 Timer コントロールで敵をアニメーションさせます。 ① Mst_EnemyProgressから敵の移動前(Progress =1)と 移動後(Progress =2)の座標(X,Y)を取得 ②移動前の座標Aと座標B差を計算 Xの差=1300、Yの差=100 ③0.1秒で移動する距離を計算 Xの移動距離は 1300/50 = 26 Yの移動距離は 100/50 = 2 ※タイマーコントロールは0.1で1カウントしている。 1グループの表示時間は5秒なので50で割る。 0.1秒毎 に X を 26、Y を 2移動 移動前(-200,100) ④Timer コントロールで 0.1秒毎 に X を 26、Y を 2 足していく ⑤移動後の地点に到達した時点で 次の座標へ向かって移動する。 これを4回繰り返して終了。 移動後(1100,200)
Power Guardians 敵のアクション設定について 実際のゲームでは、1ステージあたり12グループありますので全部で60パターンのアクションがあります。 その1つ1つは Power Point で実際に線を引きながら考え、Power Apps 上でコレクションに座標入力しました。
Power Guardians その他 敵の設定 実際のゲームでは、マスタやアクションに様々な設定を加えています。 奥手前の進行方向の設定 難易度 遠くにいる敵ほど小さく、近くに寄るほど大きく 見せる必要があり、敵の進む方向を「奥→手前」 と「手前→奥」の2パターンの設定ができるよう になっています。 パターン① パターン② 難易度によって、敵のHPとスコアが変わります。 EASY:敵HP小、スコア小 NORMAL:敵HP中、スコア中 HARD:敵HP大、スコア大
Power Guardians 8. 攻撃と当たり判定
Power Guardians Timerコントロール[Timer_Shot] 攻撃のアニメーション 攻撃のアニメーションも Timer コントロールを使用しています。 ①画面をタップすると、フラグが true になり、Timerコントロールがスタート Timerコントロール[Timer_Shot] プロパティ[Start] If(Timer_Shot_Flg= true , true , false) ②攻撃のアニメーションがはじまり、弾が回転しながら1秒間かけて縮小する Timerコントロール[Timer_Shot] プロパティ[OnTimerEnd] If(Shot1_Shot>0, Set(Shot1_Shot , Shot1_Shot - 10); ); Shot1_Shotの初期値は100。0.1秒で-10減少するので1秒で0となる。 弾の回転は ImageRotation を使用
Power Guardians 攻撃判定 弾の画像の範囲に敵の画像が含まれていれば当たりと判定しています。 Timer コントロールで 0.1秒間隔で判定をしています。 当たり はずれ 攻撃が当たれば、敵のHPを減らし、HP0で敵の画像を爆発の画像に変更します。 爆発の画像は縮小し 最期に消滅します。
Power Guardians 9. キャラクターや背景の作成
Power Guardians ゲームに登場するキャラクターや背景は、全て Microsoft Designer で作成をしています。 Microsoft Designer 人物 敵機 プロンプトで画像生成 背景
Power Guardians Microsoft Designer で生成できない場合は、使えそうな生成画像の一部だけを切り取り Power Point で上で組み立てて完成させています。 生成した画像から部品として使え そうな部分を切り取る。 Power Point で組み立て、色の調整 や光や影などを加える完成させる。
Power Guardians パイロットやオペレーターの画像は Microsoft Designer のみで作成しています。 プロンプト「戦艦の管制室で冷静に指示を出す大人びた オペレーターを日本のアニメ風に描いて下さい」 状況や人数や向きなどはプロンプトで調整
Power Guardians 出撃シーンでは Timer コントロールで背景を拡大、プレイヤー機を縮小することで 奥に向かって飛んでいくように見せています。 ゲームでは背景画像を一瞬で10倍の大きさに広げています。
Power Guardians チームメンバーの演出 チームメンバーの演出は戦場の臨場感を高めるために作成しました。 出撃や戦闘シーンで時々メンバーのメッセージを受取ることができるようになっています。 RPGのようにセリフが1文字ずつ 表示されるようになっています。 全てを一度に表示するよりも、 1文字ずつ表示した方がキャラが しゃべっているように感じられ るのではないかと思います。 Timer コントロールでカウント した数字とRight関数を組合わせ ることで可能です。
Power Guardians スコアランキングの表示 ハイスコアを更新するだけでは物足りないと思い、チームメンバーと スコアが競い合えるようにしてみました。
Power Guardians あとがき 最期までご覧いただきまして、まことにありがとうございます。 そもそも Power Apps で疑似3Dシューティングを作ろうと思い始めたのは2023年2月にJPPGB で開催 された Power Apps ゲームを作るイベントで、そのゲームというのが、ランダムに置かれた数字の場所 をおぼえておいて、隠された状態で順番に数字の場所を選択する速さを競うというものでした。 この時に、お試しで作ったゲームが3D動画を背景に数字を順番に撃ち落とすというものだったのですが、 「数字を敵キャラに置き換えたら3Dシューティングゲームになるんじゃない!?」ということを思いつい てしまい、そこから完成に向けて試行錯誤が始まったのが、このゲームを作ったきっかけだったのです。 そう考えると、着想から完成まで1年ぐらいかかっていたことになるかもしれませんね。 実際に作成してみると、本当に失敗の連続で、処理が重すぎてゲームにならなかったり、予定通りに キャラやメッセージが表示されなかったりと、締切に間に合うのかどうかも怪しくて、大会参加は断念 しようかと思っていたぐらいだったのですが、主催者コルネさんから、大会当日までの応募でも良いよ という救済を頂いたり、前回大賞のヨウセイさんから、参加を期待するラブコールを頂いたりというこ ともありまして、それならギリギリまで出来ること全部やってやろうと頑張ったところ、なんとか大会 1週間前に完成させることができました。ただ発表資料が完成した大会当日は完全にフラフラな状態で 頭が全然回らず、何を話しているのかよくわからないスピーチをしてしまったような気がすることが、 今でも心残りだったりします…。 今回のゲームは、とにかく操作性を大切に作りました。前回のプレ大会で作成したラジコンゲームは、 操作が難しかったようで、あまりプレイしてもらえなかったという苦い経験もあり、今回は画面タップ だけで操作の殆どが出来てしまえるように考えて作りました。プレイヤーや敵キャラの動きもスムーズ になるように、敵の動きも実際のシューティングゲームを参考に何度も線を引きながら考えていました。 仕事柄業務アプリを作ることもあるのですが、ゲーム作りって長くアプリを使ってもらうための要素が 非常にたくさん詰まっていると思っています。Power Apps は業務アプリを開発するためのツールです が、たまにはゲーム作りでスキルを磨いたり試してみたりすることがあっても良いのではとも思います。 今回作成したゲームや資料が、皆さんのお役に立てるようなことがあれば、とても嬉しく思います。 2024年10月 Masahiro Mishima 隠れた数字を順番に撃ち落とすゲーム https://x.com/MMishima_3/status/ 1629824606231216129 前回プレ大会出品作品 ラジコンゲーム https://x.com/MMishima_3/status/ 1673701268509065219
P ower G uardians ありがとうございました! Masahiro Mishima