Power Apps で作成する対戦型格闘ゲーム

>100 Views

October 19, 25

スライド概要

JPPGB(Japan Power Platform Game Builders) ゲーム作成コンテスト#2で発表をさせて頂きました Power Apps で作成する対戦型格闘ゲームの解説資料です。

profile-image

Power Platform について色々書いたりしてます。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

(ダウンロード不可)

関連スライド

各ページのテキスト
1.

Power GUARDIANS Ultimate Battle Stage Power Apps で作成する対戦型格闘ゲーム JPPGB ゲーム作成コンテスト#2 Masahiro Mishima

2.

Power GUARDIANS Ultimate Battle Stage Japan Power Platform Game Builders [JPPGB]について 本来は業務アプリを開発するためのツール Microsoft Power Platform を 使用してゲーム作成に取り組んでいるコミュニティで、Microsoft MVP コルネ氏によって運営されています。定期的に勉強会や作品発表会などが 開催されています。 JPPGB ゲーム作成コンテストと発表作品について 2025年10月18日 JPPGB主催のゲーム作成コンテストが開催されました。 そこで私がエントリーをさせて頂いたゲームが Ultimate Battle Stage という Microsoft Power Apps で作成した2D格闘ゲームです。実際には 互いのロボットが 撃ち合う アクションゲームのような仕様なのですが、 ローコードでありながら、格闘ゲームのようなアクションを実装すること ができましたので、そのテクニックを紹介させて頂きたいと思います。 2

3.

Power GUARDIANS Ultimate Battle Stage ゲームの概要 3

4.

Power GUARDIANS Ultimate Battle Stage ULTIMATE BATTLE STAGE とは 前回のゲームコンテストで発表させて 頂いた疑似3Dシューティング(Power GUARDIANS)に登場したロボットを 更に個性豊かにカスタマイズ。 対戦アクションゲームとしてリメイクを させて頂きました。 対戦格闘ゲームのように自在に動き回る アクションが加えられた他、ため撃ち等 のアクションも追加されています。 4

5.

Power GUARDIANS Ultimate Battle Stage タイトル画面 格闘ゲームらしく舞台は 闘技場を用意。画像生成 AIとPower Pointで作成 しています。 5

6.

Power GUARDIANS Ultimate Battle Stage プレイヤー選択画面 キャラクタはー8種類用意。 一覧からロボットを選択 するとパイロットが表示 されます。敵味方共通で 同キャラ対戦も可能です。 6

7.

Power GUARDIANS Ultimate Battle Stage ステージ選択画面 ステージは5種類用意。 メニューから選択をする と背景が変わります。 7

8.

Power GUARDIANS Ultimate Battle Stage プレイ画面 一般的は格闘ゲームと同 じく体力を 0 にするか タイムアップ時に体力が 多い方が勝ちとなります。 8

9.

Power GUARDIANS Ultimate Battle Stage 操作方法(移動・ジャンプ) ジャンプ 横移動 移動先を選択すると、その 位置にキャラクタを移動さ せることができます。 空中を選択した場合はジャ ンプをしながら選択先の地 面に移動します。 9

10.

Power GUARDIANS Ultimate Battle Stage 操作方法(攻撃・防御) 上段防御 下段防御 上段攻撃 キャラクター前を選択する と攻撃、後ろを選択すると 防御となります。上段と下 段にわかれています。 下段攻撃 10

11.

Power GUARDIANS Ultimate Battle Stage 操作方法(タメ撃ち) 上段攻撃を押し続けるとタメ撃ちが可能 威力小 威力中 上段攻撃を押し続けると タメ撃ちが可能です。 タメの時間が長くなると 威力も上がってきます。 威力大 11

12.

Power GUARDIANS Ultimate Battle Stage 操作ボタンについて 12

13.

Power GUARDIANS Ultimate Battle Stage 格闘ゲームではボタンを 押し続けている間だけの アクションが設定できる 必要があります。 歩き続ける 座り続ける 守り続ける 13

14.

Power GUARDIANS Ultimate Battle Stage Power Apps の ボタンコントロールは「押して」「離した」瞬間しかアクションは 起こりません。例えばボタンを押している間だけ、歩き続けるというアクションは 作れないことになります。 14

15.

Power GUARDIANS Ultimate Battle Stage ところが、スライダーコントロールを使用すれば、この問題も解決できます。 プロパティOnSelectでは変数にtrueをセット、OnChangeにはfalse をセット するように設定すれば、スライダーを押したときだけ変数はtrueになります。 プロパティ:OnSelect Set(Walk,true) プロパティ: OnChange Set(Walk,false) ※trueの時だけ歩くよう設定。 正確にはスライダーの位置が変わった場合のみ false になります。 今回はアクションゲームで、殆どfalseで返ってくるので、この方法を採用しています。 15

16.

Power GUARDIANS Ultimate Battle Stage ゲームではスライダーを3段並べて使用しています。 ジャンプ移動用 直線移動 上段攻撃防御用 下段攻撃防御用 16

17.

Power GUARDIANS Ultimate Battle Stage キャラクターの操作について 17

18.

Power GUARDIANS Ultimate Battle Stage キャラクターの移動にはスライダーとタイマーを使用しています。 ① X:900 ①最初に移動先のX座標をスライダーから取得します。 18

19.

Power GUARDIANS Ultimate Battle Stage ②移動元のX座標を取得して、③差を計算します。 ② X:100 ① X:900 ③ 900-100=800 19

20.

Power GUARDIANS Ultimate Battle Stage ④ 800/5=160 ④5フレームで移動をするので5で割ります。 ➊ ➋ ➌ ② X:100 ❹ ❺ ① X:900 ③ 900-100=800 20

21.

Power GUARDIANS Ultimate Battle Stage ⑤タイマーのカウンターで順番に画像を表示します。 ➊ ➋ ➌ ❹ ② X:100 ④ 800/5=160 ❺ ① X:900 ③ 900-100=800 00:00:00 ⑤ OnTimerEnd:Set(Cnt,Cnt+1) 繰り返し:On 自動開始:On 21

22.

Power GUARDIANS Ultimate Battle Stage ジャンプをする場合は、Yの値も併せて変更します。 ➌ ➋ ❹ ➊ ジャンプをする場合は 前半3つは Y:+150 ❺ 後半3つは Y:-150 22

23.

Power GUARDIANS Ultimate Battle Stage 対戦相手を自動で動かす 23

24.

Power GUARDIANS Ultimate Battle Stage 対戦相手の行動の種類(移動) 1.移動近距離:プレイヤーとの距離小 2.移動中距離:プレイヤーとの距離中 3.移動遠距離:プレイヤーとの距離大 4.しゃがむ:しゃがむ 5.ジャンプ近距離:プレイヤーとの距離小 6.ジャンプ中距離:プレイヤーとの距離中 7.ジャンプ遠距離:プレイヤーとの距離大 8.ジャンプ越え近距離:プレイヤーを飛び越え距離を小 9.ジャンプ越え中距離:プレイヤーを飛び越え距離を中 CPUのアクションは 13種類用意しています。 対戦相手の行動の種類(攻撃) 1.上段攻撃小:タメ無し攻撃 2.上段攻撃中:タメ有中攻撃 3.上段攻撃大:タメ有大攻撃 4.下段攻撃:タメ無し攻撃 24

25.

Power GUARDIANS Ultimate Battle Stage CPUはプレイヤーを追いかけるように 設定することで、まるで人間が操作を しているように見せています。 追ってくるだと! なかなかやるな! プレイヤーに合わせて 設定した距離を詰める プレイヤーに 合わせた動き をするよ! 25

26.
[beta]
Power GUARDIANS
Ultimate Battle Stage

①対戦相手アクションマスタを設定
//敵アクションマスタ
ClearCollect(MstEnemyAct,
移動の場合はプレイヤー
{ActNo:"011",Name:"移動近",Move:250},
との距離(Move)を設定
{ActNo:"012",Name:"移動中",Move:350},
{ActNo:"013",Name:"移動遠",Move:550},
しゃがむ場合は時間(Sit)を設定
{ActNo:"031",Name:"しゃがむ",Sit:10},
{ActNo:"051",Name:"ジャンプ近",Move:250},
ジャンプの場合はプレイヤー
{ActNo:"052",Name:"ジャンプ近",Move:350},
との距離(Move)にマイナスを
{ActNo:"053",Name:"ジャンプ近",Move:550},
設定することで飛び越える
{ActNo:"054",Name:"ジャンプ超小",Move:-250},
{ActNo:"055",Name:"ジャンプ超中",Move:-350},
{ActNo:"061",Name:"攻撃M小",E_Cnt_GunM:15,Tame:1},
攻撃は攻撃時間とタメの
{ActNo:"062",Name:"攻撃M中",E_Cnt_GunM:30,Tame:5},
時間(Tame)を設定
{ActNo:"063",Name:"攻撃M大",E_Cnt_GunM:40,Tame:8},
{ActNo:"071",Name:"攻撃L",E_Cnt_GunL:15,Sit:10}
下段攻撃はしゃがむ
);
時間(Sit)も設定
26

27.

Power GUARDIANS Ultimate Battle Stage ②対戦相手アクション比率を設定 ※プレイヤー毎に設定 //敵アクション比率 Switch(SetEnemyNo, 1,//MURASAKI:標準 ClearCollect(TblEnemyActWeight, {ActNo:"011",Weight:10},//移動小 {ActNo:"012",Weight:10},//移動中 {ActNo:"013",Weight:10},//移動大 {ActNo:"031",Weight:10},//しゃがむ {ActNo:"051",Weight:10},//ジャンプ近 {ActNo:"052",Weight:10},//ジャンプ中 {ActNo:"053",Weight:10},//ジャンプ遠 {ActNo:"054",Weight:10},//ジャンプ超近 {ActNo:"055",Weight:10},//ジャンプ超遠 {ActNo:"061",Weight:40},//攻撃M小 {ActNo:"062",Weight:40},//攻撃M中 {ActNo:"063",Weight:40},//攻撃M大 {ActNo:"071",Weight:40},//攻撃L {ActNo:"000",Weight:0}//待機 ), アクションそれぞれに Weight値を設定します。 Weight値 高い:その行動をよくする 低い:その行動をあまりしない プレイヤー毎にWeight値を変えることで アクションに性格付けをすることができます。 27

28.
[beta]
Power GUARDIANS
Ultimate Battle Stage

③Weight値の数だけレコードを作成する
Weight値の数だけForAllを回してレコードを作成
ForAll(
Sequence(
LookUp(TblEnemyActWeight,
ActNo=SetActNo).Weight
),
Collect(
TblEnemyActSet,
{ ActNo:SetActNo,
Move:LookUp(MstEnemyAct,
ActNo=SetActNo).Move
}
)
);

■移動近
Weight値が10なら10レコード
{ActNo:"011",Weight:10}

■下段攻撃
Weight値が40なら40レコード
{ActNo:"071",Weight:40}

TblEnemyActSet
移動近
移動近
移動近
移動近
移動近
移動中
移動中
移動中
移動中
移動中
移動中
移動遠
移動遠
移動遠
下段攻撃
下段攻撃
下段攻撃
下段攻撃
下段攻撃

28

29.

Power GUARDIANS Ultimate Battle Stage ④コレクションをシャッフルする //敵アクション順序をシャッフル ClearCollect(TblEnemyActShuffle, Shuffle(TblEnemyActSet)); Clear(TblEnemyAct); ForAll(TblEnemyActShuffle, Collect(TblEnemyAct,{ No:CountRows(TblEnemyAct)+1, ActionNo:ThisRecord.ActNo, Move:ThisRecord.Move, Sit:ThisRecord.Sit, E_Cnt_GunM:ThisRecord.E_Cnt_GunM, E_Cnt_GunL:ThisRecord.E_Cnt_GunL, E_Cnt_Tame:ThisRecord.E_Cnt_Tame }) ); TblEnemyActSet 移動近 移動近 移動近 移動近 移動近 移動中 移動中 移動中 移動中 移動中 移動中 移動遠 移動遠 移動遠 下段攻撃 下段攻撃 下段攻撃 下段攻撃 下段攻撃 TblEnemyActShuffle しゃがむ ジャンプ近 移動遠 移動中 ジャンプ近 上段攻撃小 上段攻撃中 移動遠 移動中 ジャンプ近 ジャンプ中 上段攻撃大 下段攻撃 待機 移動近 移動中 移動遠 しゃがむ ジャンプ近 29

30.

Power GUARDIANS Ultimate Battle Stage ⑤コレクションの順番どおりタイマーコントロールでアクションをさせる TblEnemyActShuffle しゃがむ ジャンプ近 移動遠 移動中 ジャンプ近 ➊ ➋ ➌ ❹ ❺ しゃがむ ジャンプ近 移動大 攻撃上段小 ジャンプ近 上段攻撃小 上段攻撃中 移動遠 移動中 ジャンプ近 ジャンプ中 上段攻撃大 下段攻撃 待機 移動近 移動中 移動遠 しゃがむ ジャンプ近 30

31.

Power GUARDIANS Ultimate Battle Stage 変数を送ると自動的にアニメーションする仕組みを アクションごとに作成しています。 例:移動する場合 //011:移動 If(SetActNo="011" || SetActNo="012" || SetActNo="013", プレイヤーが右に いるか左にいるか を正負で判定 011:移動近 012:移動中 013:移動遠 If(EnemyDX>0, If(EnemyX<EnemyLX, キャラを移動する ), 設定した値までプレイヤー との距離が近づいたり離れ たりするまでループする Set(EnemyX,EnemyX+EnemyDX); Set(Flg_E_Move,true), 移動時の画像 Set(Flg_E_Move,false) true:移動時の画像 false:静止時の画像 31

32.

Power GUARDIANS Ultimate Battle Stage キャラクターについて 32

33.

Power GUARDIANS Ultimate Battle Stage キャラクターの作成工程 ①キャラクターのベース作成 Microsoft Designer で生成 ②デザイン調整 Microsoft Designer と Gemini 33

34.

Power GUARDIANS Ultimate Battle Stage デザイン調整の際のプロンプトについて Copilot に Power Platform 各製品の色を日本の伝統色で解説をしてもらう。 これら情報をプロンプトとして、生成AIにロボットのデザインしてもらう。 Power Apps 色の区分 最も濃い色 (奥側) 中間の色 (中央) 最も明るい色 (手前) 特徴的な色合い 青みのある深い紫 赤みがかった中程度の紫 明るく柔らかなピンク 日本の伝統色 (候補) 意味・解説 紫紺(しこん) 濃い紫の中にも、藍色 (青)の深みを感じる高貴 な色。最高位の色とされて いました。 京藤(きょうふじ) 藤の花のように上品で、や や赤みがかった紫。優美さ と格調を併せ持ちます。 薄紅(うすべに) ほんのりとした、明るく優 しいピンク色。かわいらし さと華やかさを表現します。 34

35.

Power GUARDIANS Ultimate Battle Stage ロボットデザイン ☆実際の調整では、製品の特長や用途など、様々なキーワードを加えながら個性が でるようにアレンジしています。 35

36.

Power GUARDIANS Ultimate Battle Stage プレイヤーデザイン ☆人物では髪の色や服装でも個性がでるようにアレンジをしています。 36

37.

Power GUARDIANS Ultimate Battle Stage キャラクターのポーズ ※ロボット1体に対して10種類用意しています。 ①待機左 ②待機右 ③ジャンプ左 ④ジャンプ右 ⑤上段攻撃左 ⑥上段攻撃右 ⑦下段攻撃左 ⑧下段攻撃右 ⑨ダウン左 ⑩ダウン右 37

38.

Power GUARDIANS Ultimate Battle Stage キャラクターのポーズ作成について 生成AIでポーズを生成させると元のデザインを変更してしまうことが多かったため キャラクターの画像を分解し、組み立て直すことで、新しいポーズを作成しています。 作成したポーズを生成AIで更に整えることで、より違和感のない仕上がりになります。 38

39.

Power GUARDIANS Ultimate Battle Stage Thank You