PowerAppsでバトルゲームを作ろう！（その１：パラメータ設定画面）

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

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

## 実際の画面
### パラメータ設定画面
#### 1P側
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/53f04941-f2f9-1ee5-221d-0c7132925891.png)

#### 2P側
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/4c2f5e66-0036-5190-7eb5-b0f567e22816.png)
 
### 戦闘画面
#### 攻撃前
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/e03a546d-790d-409c-6f8b-f48d5043baf9.png)

#### 攻撃
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/72388d84-979d-ff24-b3d4-b2a8a2b1342d.png)

#### 1P HP半分以下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/7996874a-9466-1547-6620-3276e09491dc.png)

#### 1P HP25%以下
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/87d40438-7207-6dcd-238e-62d695041385.png)

#### 2Pの勝利
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/acd6492d-5a85-4e28-23e1-77e2642c5335.png)

# それでは実際に作っていきましょう！
## パラメータ設定画面（Player_Param_Set）
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/062af02f-e7b6-1274-3844-445a6fcf6e8c.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プロパティにて宣言します。

```bash: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](https://qiita-image-store.s3.amazonaws.com/0/269159/78e8ba6e-cf4b-78f8-887b-60f882b9de72.png)

### 各部の設定
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/d2433f2d-2926-cfcb-5feb-e272e55c7ba1.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/79637e03-000e-6b05-ef18-43f9c342fc97.png)

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/085ebef2-7461-cfeb-f5a5-ade7c49544a7.png)


#### ①割り振りポイントパラメータ（1P_AllocattionPoint_Param）

```bash:1P_AllocattionPoint_Param(Text)
1P_AllocationPoint
```
#### ②最大HPパラメータ（1P_MAXHP_Param）
最大HPは攻撃力×3＋防御力×5として設定します。

```bash:1P_MAXHP_Param(Text)
(1P_PWR*3)+(1P_DFS*5)
```

#### ③攻撃力パラメータ（1P_PWR_Param）

```bash:1P_PWR_Param(Text)
1P_PWR
```

#### ④攻撃力上昇ボタン（1P_PWR_Upper）
この上矢印をクリックすると
1P_PWRに1加算され
1P_AllocationPointが1減算されます。
また、1P_AllocationPointが0になったら
1P_PWRに加算されないようにする必要があります。

```bash: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にも加算されないようにする必要があります。

```bash: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のパラメータがすべて
初期値に戻るように設定します。

```bash: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にならないと
表示されないようにします。

```bash:1P_Param_Set(Visible)
If(1P_AllocationPoint=0,true,false)
```

```bash:1P_Param_Set(OnSelect)
UpdateContext({'1PVisible':true,'2PVisible':false})
```

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

```bash:1P_Param_UnVisible(Visible)
'1PVisible'
```

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/a22db6a1-2259-821f-ec49-826da1f9414f.png)

#### ⑨2Pパラメータ確定ボタン（2P_Param_Set）
基本的に1P_Param_Setと同じですが
ボタンをクリックすると、戦闘画面（Battle_Screen）に遷移する必要があります。
なので、以下のように設定します。

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

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

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


長くなったので今回はこれまで！
次回は戦闘画面の作り方を説明します。
[PowerAppsでバトルゲームを作ろう！（その２：戦闘画面）](https://qiita.com/rnakamuramartiny/items/ded3774e698a3b4351d8)