6
2

More than 5 years have passed since last update.

PowerAppsでバトルゲームを作ろう!(その1:パラメータ設定画面)

Last updated at Posted at 2018-09-10

今回の投稿背景

PowerAppsでゲーム作ってみましたって話を聞いて
とりあえず何となく作り方を思いついたので作ってみたのです。

ゲームの内容

対戦ゲームです。
1P 2Pそれぞれ割り当てポイントを持っていて
それを、攻撃力・防御力・素早さ・運に割り振って
あとは戦っていき、先にHPが0になった人が負け
という単純なゲームです。
※今時小学生でもやらない

実際の画面

パラメータ設定画面

1P側

image.png

2P側

image.png

戦闘画面

攻撃前

image.png

攻撃

image.png

1P HP半分以下

image.png

1P HP25%以下

image.png

2Pの勝利

image.png

それでは実際に作っていきましょう!

パラメータ設定画面(Player_Param_Set)

image.png

変数の作成

この画面で作成する変数は以下の通りです。

変数名 変数種別 説明 初期値
1P_AllocationPoint Global 1P割り当て可能ポイント 20
1P_MAX_HP Global 1Pの最大HP 0
1P_PWR Global 1Pの攻撃力 1
1P_DFS Global 1Pの防御力 1
1P_SPD Global 1Pの素早さ 1
1P_LCK Global 1Pの運 1
2P_AllocationPoint Global 2P割り当て可能ポイント 20
2P_MAX_HP Global 2Pの最大HP 0
2P_PWR Global 2Pの攻撃力 1
2P_DFS Global 2Pの防御力 1
2P_SPD Global 2Pの素早さ 1
2P_LCK Global 2Pの運 1
1PVisible Context 1Pのパラメータ設定画面隠しオブジェクト表示 false
2PVisible Context 2Pのパラメータ設定画面隠しオブジェクト表示 true

変数は、Player_Param_SetのOnVisibleプロパティにて宣言します。

Player_Param_Set(OnVisible)
Set(1P_AllocationPoint,20);
Set(1P_MAX_HP,0);
Set(1P_PWR,1);
Set(1P_DFS,1);
Set(1P_SPD,1);
Set(1P_LCK,1);
Set(2P_AllocationPoint,20);
Set(2P_MAX_HP,0);
Set(2P_PWR,1);
Set(2P_DFS,1);
Set(2P_SPD,1);
Set(2P_LCK,1);
UpdateContext({'1PVisible':false,'2PVisible':true})

1P画面の作り方

image.png

各部の設定

image.png

image.png

image.png

①割り振りポイントパラメータ(1P_AllocattionPoint_Param)

1P_AllocattionPoint_Param(Text)
1P_AllocationPoint

②最大HPパラメータ(1P_MAXHP_Param)

最大HPは攻撃力×3+防御力×5として設定します。

1P_MAXHP_Param(Text)
(1P_PWR*3)+(1P_DFS*5)

③攻撃力パラメータ(1P_PWR_Param)

1P_PWR_Param(Text)
1P_PWR

④攻撃力上昇ボタン(1P_PWR_Upper)

この上矢印をクリックすると
1P_PWRに1加算され
1P_AllocationPointが1減算されます。
また、1P_AllocationPointが0になったら
1P_PWRに加算されないようにする必要があります。

1P_PWR_Upper(OnSelect)
If(1P_AllocationPoint>0,Set(1P_PWR,1P_PWR+1);
    Set(1P_AllocationPoint,1P_AllocationPoint-1),
"")

⑤攻撃力下降ボタン(1P_PWR_Lower)

この下矢印をクリックすると
1P_PWRが1減算され
1P_AllocationPointに1加算されます。
また、1P_PWRが初期値1になったらその後の減算は行われないようにし
さらに1P_AllocationPointにも加算されないようにする必要があります。

1P_PWR_Lower(OnSelect)
If(1P_PWR>1,Set(1P_PWR,1P_PWR-1);
    Set(1P_AllocationPoint,1P_AllocationPoint+1),
"")

⑥1Pパラメータリセットボタン(1P_Param_Reset)

このボタンがクリックされると、1Pのパラメータがすべて
初期値に戻るように設定します。

1P_Param_Reset(OnSelect)
Set(1P_AllocationPoint,20);
Set(1P_MAX_HP,0);
Set(1P_PWR,1);
Set(1P_DFS,1);
Set(1P_SPD,1);
Set(1P_LCK,1);

⑦1Pパラメータ確定ボタン(1P_Param_Set)

このボタンがクリックされると
1Pのパラメータ操作をできなくさせ
2Pのパラメータ操作をできるように変更します。
また、このボタンは、割り振り可能ポイントが0にならないと
表示されないようにします。

1P_Param_Set(Visible)
If(1P_AllocationPoint=0,true,false)
1P_Param_Set(OnSelect)
UpdateContext({'1PVisible':true,'2PVisible':false})

⑧1P非表示スクリーン(1P_Param_UnVisible)

パラメータが確定したら、2P側に設定してもらうため
どう設定したか見えないようにするのと、操作できなくするための
スクリーンを用意します。
スクリーン表示・非表示は以下のように設定します。

1P_Param_UnVisible(Visible)
'1PVisible'

1P側の設定はこれで完了です。

2P画面の作り方

基本的に1P側の画面の作り方とほとんど変わりませんが
確定ボタンのOnSelectアクションが異なります。

image.png

⑨2Pパラメータ確定ボタン(2P_Param_Set)

基本的に1P_Param_Setと同じですが
ボタンをクリックすると、戦闘画面(Battle_Screen)に遷移する必要があります。
なので、以下のように設定します。

2P_Param_Set(OnSelect)
UpdateContext({'1PVisible':true,'2PVisible':true});
Navigate(Battle_Screen,ScreenTransition.Fade)

2P側の設定はこれで完了です。

これにより、1P及び2Pのパラメータが設定されたのち
戦闘画面に遷移します。

長くなったので今回はこれまで!
次回は戦闘画面の作り方を説明します。
PowerAppsでバトルゲームを作ろう!(その2:戦闘画面)

6
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
2