PowerApps GameDev#1 スコア表示フォントをゲームっぽいものにしてみる

# PowerAppsゲームとは
本来はビジネスアプリを開発するツールであるPowerAppsをつかって
簡単なゲームをつくろうぜ！というものでございます。
この度、私もPowerApps GameCompetitionというものに参加するにあたり
過去記事にもあります通りゲームを作成しておりました。

# PowerApps GameDevとは？
PowerAppsでゲーム作成を行うにあたり、工夫したところ（よりゲームっぽい感じにしてみるなど）を纏めたものです。

# 本日のゴール
こんな感じなことができるようにする！
![ebcaa244-7754-4218-9a99-3c62ab0d4607.gif](https://qiita-image-store.s3.amazonaws.com/0/269159/01459557-c5eb-db17-1f98-00e779863308.gif)

# 事前準備
## スコア表示用のPNGファイル
こんな感じのPNGファイルを用意しましょう。（0～9）

|0   |1   |2   |3   |4   |5   |6   |7   |8   |9   |
|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|:--:|
|![ScoreFont_0_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/226e24ed-f5aa-e4cb-3429-c440473a47d4.png)  |![ScoreFont_1_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/ea9ab48e-30a9-d974-bb38-70763bfd68ce.png)  |![ScoreFont_2_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/a17c2b52-c677-18fb-a9a5-c2f85c77f2bb.png)   |![ScoreFont_3_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/95f2865b-884d-7d38-56d0-8c439af38886.png)|![ScoreFont_4_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/6ae78664-b442-9c17-297c-e0dadacc44d8.png)|![ScoreFont_5_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/fb26f5bd-12f3-8fae-6ffd-0aa9fcd13f99.png)|![ScoreFont_6_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/00159353-7595-d7e9-08a5-370a498ac4ed.png)|![ScoreFont_7_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/ae08cf13-443c-d5a1-ff7a-f8c85bdce8f8.png)|![ScoreFont_8_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/9f5149ec-9c2e-cf44-7d4c-3c183321e827.png)|![ScoreFont_9_Black.png](https://qiita-image-store.s3.amazonaws.com/0/269159/1963365d-cdd2-e8a7-5aa7-c73113d3db09.png)|

## イメージのアップロード
上記のPNGファイルを用意したら、作成しているアプリの
メディア > 画像 とアクセスし、アップロードを行います。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/6d3b0aa4-c807-bda4-e6b0-2800862ebde9.png)

## スコアを格納する変数を用意
とりあえず、Scoreとしときましょう。


# 実際に作成していきましょう
## 使うオブジェクトは・・・
既にお気づきだとは思いますが、画像オブジェクトを使用します。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/269159/82631abb-ff3a-f2be-a167-1af32acb9a13.png)

## 1桁目
Imageプロパティを設定します。

```bash:Score_Seg_1(Image)
Switch(Value(Mid(Text(score),Len(Text(score)),1)),
	0,ScoreFont_0_Black,
	1,ScoreFont_1_Black,
	2,ScoreFont_2_Black,
	3,ScoreFont_3_Black,
	4,ScoreFont_4_Black,
	5,ScoreFont_5_Black,
	6,ScoreFont_6_Black,
	7,ScoreFont_7_Black,
	8,ScoreFont_8_Black,
	9,ScoreFont_9_Black
)
```

### 解説
とりあえず、Scoreの１桁目の数字によって
イメージを切り替えればいいので、Switch関数を使用しています。
問題は、１桁目が０～９のどれかをどうやって出すかというところですね。

#### １桁目の出し方
スコアの桁数が仮に最大８桁だった場合は
スコアの文字列としての長さは１～８で変動します。
（０～９９９９９９９９）
なので、現在の文字列の長さの末尾を開始地点とし
その１文字目を取得すれば１桁目が取得できます。
たとえば、現在のスコアが４７８９５３点だった場合は
文字列の長さとしては６。
MID関数で１桁目をとる場合は

```
MID(TEXT(Score),Len(Text(Score)),1)
```
とすれば、戻りは３が返ってきます。
あとは、その値を再度数値型に変えて、Switch関数に渡せば、おのずと３のイメージが
表示されることになります。

## 2桁目以降
こちらもImageプロパティを使用しますが
1桁目とちょっと異なります。

```bash:Score_Seg_2(Image)
Switch(Value(Mid(Text(score),Len(Text(score))-1,1)),
	0,ScoreFont_0_Black,
	1,ScoreFont_1_Black,
	2,ScoreFont_2_Black,
	3,ScoreFont_3_Black,
	4,ScoreFont_4_Black,
	5,ScoreFont_5_Black,
	6,ScoreFont_6_Black,
	7,ScoreFont_7_Black,
	8,ScoreFont_8_Black,
	9,ScoreFont_9_Black
)
```

また、スコア表示にて0埋めしたくない時は、Visibleプロパティも
使用することになります。

```bash:Score_Seg_2(Visible)
If(Len(Text(score))<2,false,true)
```

### 解説
基本的に、１桁目と同じ考えです。

#### ２桁目の出し方
現在の文字列の長さの末尾から **１文字引いた** 場所を開始地点とし
その１文字目を取得すれば２桁目が取得できます。
たとえば、現在のスコアが４７８９５３点だった場合は
文字列の長さとしては６。
MID関数で２桁目をとる場合は

```
MID(TEXT(Score),Len(Text(Score))-1,1)
```
とすれば、戻りは５が返ってきます。

#### ３桁目の出し方
現在の文字列の長さの末尾から **２文字引いた** 場所を開始地点とし
その１文字目を取得すれば３桁目が取得できます。
たとえば、現在のスコアが４７８９５３点だった場合は
文字列の長さとしては６。
MID関数で３桁目をとる場合は

```
MID(TEXT(Score),Len(Text(Score))-2,1)
```
とすれば、戻りは９が返ってきます。

# 最後に
皆さんも、お好きなフォントのイメージを用意して
素敵なスコア表示をさせてみましょう！
見た目は結構大事ですよ♪