---
title: Power Apps で作成する対戦型格闘ゲーム
tags: 
author: [Masahiro Mishima](https://www.docswell.com/user/mmishima_3)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/K74MD14YJ1.jpg?width=480
description: JPPGB（Japan Power Platform Game Builders） ゲーム作成コンテスト#2で発表をさせて頂きました Power Apps で作成する対戦型格闘ゲームの解説資料です。
published: October 19, 25
canonical: https://www.docswell.com/s/mmishima_3/ZJQV6N-2025-10-19-195153
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/K74MD14YJ1.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LJ18ZG4NEG.jpg)

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 で作成した２D格闘ゲームです。実際には
互いのロボットが 撃ち合う アクションゲームのような仕様なのですが、
ローコードでありながら、格闘ゲームのようなアクションを実装すること
ができましたので、そのテクニックを紹介させて頂きたいと思います。
2


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GJWZ9KZMJ2.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4EZ19Z1M73.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/Y76LKZL5JV.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/G751PW1GE4.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/9J216Q1D7R.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/DEYZ9WZM7M.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/VJN3L933J8.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/YE99429PE3.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GE89Q59X7D.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/LELWXYWNJR.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JM9LN9QEW.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/PJRGKDGKE9.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/PEXXL1X5EX.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/3EKWL2WRED.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/L731341GJ5.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/87DX4QXNEG.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/VJPPMLPNJ8.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/2EV29Q2YEQ.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/57GRZWRWEL.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/4EQVL3VQJP.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/KJ4MD1MYE1.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LE18ZG8N7G.jpg)

Power GUARDIANS
Ultimate Battle Stage
対戦相手の行動の種類（移動）
１．移動近距離：プレイヤーとの距離小
２．移動中距離：プレイヤーとの距離中
３．移動遠距離：プレイヤーとの距離大
４．しゃがむ：しゃがむ
５．ジャンプ近距離：プレイヤーとの距離小
６．ジャンプ中距離：プレイヤーとの距離中
７．ジャンプ遠距離：プレイヤーとの距離大
８．ジャンプ越え近距離：プレイヤーを飛び越え距離を小
９．ジャンプ越え中距離：プレイヤーを飛び越え距離を中
CPUのアクションは
13種類用意しています。
対戦相手の行動の種類（攻撃）
１．上段攻撃小：タメ無し攻撃
２．上段攻撃中：タメ有中攻撃
３．上段攻撃大：タメ有大攻撃
４．下段攻撃：タメ無し攻撃
24


# Page. 25

![Page Image](https://bcdn.docswell.com/page/GEWZ9KGME2.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/47Z19ZLMJ3.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/YJ6LKZW5EV.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GJ51PWMG74.jpg)

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:&quot;011&quot;,Weight:10}
■下段攻撃
Weight値が40なら40レコード
{ActNo:&quot;071&quot;,Weight:40}
TblEnemyActSet
移動近
移動近
移動近
移動近
移動近
移動中
移動中
移動中
移動中
移動中
移動中
移動遠
移動遠
移動遠
下段攻撃
下段攻撃
下段攻撃
下段攻撃
下段攻撃
28


# Page. 29

![Page Image](https://bcdn.docswell.com/page/9E216Q9DJR.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/D7YZ9W4MJM.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/VEN3L9Y3E8.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/Y79942PP73.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/G789Q5DXJD.jpg)

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


# Page. 34

![Page Image](https://bcdn.docswell.com/page/L7LWXYMNER.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/4EM9LNYQ7W.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/PERGKD9K79.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/P7XXL1Q57X.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/37KWL29R7D.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/LJ3134WGE5.jpg)

Power GUARDIANS
Ultimate Battle Stage
Thank You


