【初心者向けチュートリアル】Boltを使用してUnityで簡単なゲームを作成する-6

こちらの記事では**スコアの実装～UIの表示**までを行います。

#スコアの実装

アイテムが作成できたので、次はアイテムがプレイヤーに当たったときスコアが加算されるようにしていきましょう。

まずは現在のスコアを保存しておく変数を作成します。
Variablesウィンドウを開き、上部メニューからAppを選択してscore変数を作成します。TypeはIntegerで、Valueは0のままでOKです。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/be70b208-b032-8ab0-67d5-101592c9a1ea.png)
突然ですがここで変数の種類についてざっと説明です。
Boltで作成できる変数は、以下の通り6つの種類があります。

- **Flow**
    - 一瞬だけ値を保持したいときに使う変数です。Variablesウィンドウのメニューには表示されず、FlowGraphウィンドウ内でのみ作成できます。
- **Graph**
    - グラフ内部でのみ共有される変数です。
- **Object**
    - オブジェクトにアタッチされているすべてのグラフの中で共有できる変数です。
- **Scene**
    - 現在のScene全体で共有される変数です。
- **App**
    - すべてのSceneで共有される変数です。
- **Saved**
    - アプリケーションを終了しても保持される変数です。

変数は基本的に再生中のみ値が保持され、再生が終わるとすべて初期値にリセットされます。
また、グラフ内で作成した変数はほかのグラフからアクセスすることはできません。例えば、PlayerMovementで作成したspeed変数はGraph変数のため、ItemControllerなど別のグラフからはアクセスできません。
ただ、今回作成するscore変数はGameScene内で加算した値をResultSceneで後々表示させたいので、Sceneをまたいでも値が保持できるApp変数にしています。

次に、加算されるポイントの変数を以下のように作成しましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/c83e1009-4bd6-798a-6d69-b263923951c0.png)
ポイントは後々アイテムの種類が増えたとき、種類ごとに違う値にしたいと思います。そのため、変数の名前は一緒でもオブジェクトごとに違う値が保持できるObject変数にします。

FlowGraphウィンドウに移り、プレイヤーに当たったら現在のScoreとPointを加算してアイテムを消去、床に当たったら何もせずアイテムを消去という処理を作成していきます。
一旦グラフを以下のノーツのみの状態にしてください。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/752b896a-8594-ee93-6f0c-778ef69edf15.png)
ここにGetscore、Getpointノーツを作成してください。

次にこれらを足していきます。Sum(in Math/Scalar)ノーツを作成しましょう。
Sumノーツは与えられた数同士を足し算して返すノーツです。
このノーツのA、Bに先ほど取得したscoreとpointを繋げましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/f6bfa3b0-6b03-8f6a-8f48-22b86a9bf4e7.png)
これで現在のスコアにポイントを加算できます。

次に、足し算した値を実際にScoreに反映させていきましょう。
Setscoreノーツを作成します。
Set○○(変数名)ノーツはGet○○ノーツの逆で、入力した値を変数に代入するノーツです。
Scoreの状態を視覚的に確認するために、Debug.Logも追加して以下のように繋げてください。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/dd836a2d-fdd0-7b05-0238-96141273e8e0.png)
再生してみましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/8edb5ae9-582a-8a02-c685-e2c954dda58d.png)
アイテムに当たるたびにScoreが+10されます。

最後にDebugLogを消して、以下のようにアイテム消去の処理を追加しましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/55a3eec3-7954-9b67-b983-cd91813ee576.png)
これで加算後にアイテムが消えます。

以上でスコアの実装は完了です。

#UIの表示

現在のスコアを画面上でも確認できるようにUIを作成しましょう。

まずHierarchyで右クリック>UI>Canvasを選択します。
UIはすべてこのCanvasの上に配置していきます。

次にCanvasの設定です。
InspectorのCanvasScalerにUIScaleModeという項目があると思いますが、これをScaleWithScreenSizeに変更します。
これによってCanvasの大きさを自分の好きなサイズに設定することができます。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/56df4118-2902-b2b5-c7ab-eee66d1f1ed7.png)
今回はフルスクリーン想定なので、上の画像のように1920*1080にサイズを変更します。

次にHierarchyで右クリック>UI>Textを選択し、Canvas内にスコア表示用のテキストを配置します。Textの名前は「ScoreText」に変更しましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/bc45ae48-669f-814b-0602-68e36cce6e38.png)
設定は上の画像のように変更してください。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/aeaf21eb-acd4-70ab-9335-31bf7c337ebc.png)
設定が終わると右上にテキストが表示されます。

テキストが作成できたので、次は実際に現在のスコアを反映させていきます。
ScoreTextオブジェクトにFlowMachineをAddComponentして、ScoreManagerという名前のグラフを作成します。Startノーツは消してしまってください。

まず表示するテキストの部分です。
StringノーツとGetScoreノーツを作成します。Stringノーツには「Score:」と入力してください。

次にString:Concat(Arg 0,Arg 1)ノーツを作成します。
StringConcatノーツは入力された二つの文字列を結合して返すノーツです。
以下のように繋いで下さい。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/b2a79af0-e77a-b660-4401-0d642005b914.png)
次に表示の部分です。
Text:Set Textノーツを作成します。
SetTextノーツは入力した文字列を自分自身のテキストに反映するノーツです。
以下のように繋いで下さい。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/9d5a9372-a592-d1dd-4062-3668ac6b326f.png)
ここまで設定ができたら再生してみましょう。
![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654796/816ce24e-66f9-d10c-1dcb-7eb0298f9944.png)
右上に現在のスコアが表示されるようになりました。

これでUIの表示は完了です。

今回のチュートリアルはここまでです。お疲れさまでした！
次回は**アイテムのPrefab化～アイテムの種類を増やす**までをやっていきます。
[【初心者向けチュートリアル】Boltを使用してUnityで簡単なゲームを作成する-7](https://qiita.com/mma/private/2ee0bfc33ce6daf74955)