【Unity】ノーコードでサイコロアプリを作ってみる（ダイスをふる）

# これはなに？
Unity初心者がサイコロアプリを作るまでの過程をまとめた記事になります
アセット以外のところは、ビジュアルスクリプティングを利用して作成したいと思います

# 作ってみる
今回、作っていくのはコチラ
- サイコロをふる
- 出目を表示する

完成した画面はコチラになります

![DiceRoll.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/f2ece1c0-7a09-6234-fb1d-598da3032d27.png)

## サイコロをふる

### やること
- ダイスのパラメータを追加する
- 出目を表示するテキストを追加する
- サイコロをふるボタンを追加する
- ビジュアルスクリプティング
    - サイコロをふる
    - 出目を表示する

#### ダイスのパラメータを追加する

- ダイスの個数、面の数、色を変更できるようにします
- 「ヒエラルキー」パネルの`VisualScripting SceneVariables`を選択します
    - 「インスペクター」パネルの「Variables」に以下を追加します
        - 「`RollDiceCount`(Float)」を追加します
        - 「`RollDiceType`(String)」を追加します
        - 「`RollDiceMaterial`(String)」を追加します

![DiceRollSave.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/cc7ded26-4042-8e12-5ef3-7c96fcf54a6f.png)

#### 出目を表示するテキストを追加する

![DiceRollCanvas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/4d930fa6-9dc2-ff35-3feb-65cc425cd388.png)

- 「ヒエラルキー」パネルに`UI > Canvas`を選択して追加します
    - `UI Scale Mode`:  Scale With Screen Sizeにします

![Canvs.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/a9c408ee-5f40-b636-3808-446eb937c553.png)

- 追加したCanvas内に`UI > Text (TextMeshPro)`を選択して`LabelDiceValue`で追加します
    - 非表示にしたいので、オブジェクト名の左にあるチェックを外します

![DiceRollText.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/d1c5a309-f4b6-0d13-2e67-54b5f47d3dea.png)

- ビジュアルスクリプティングがあるオブジェクトの「インスペクター」パネルの「Variables」に「LabelDiceValue(Text Mesh Pro UGUI)」を追加します

![DiceRollValues.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/78356e24-1b8b-911e-c2f6-e5cdfead8c84.png)

#### サイコロをふるボタンを追加する

- 追加したCanvas内に`UI > Imae`を選択して`ButtonDiceRoll`で追加します
    - `Cull Transparent Mesh`にチェックします
    - `Color`: アルファー値を0にして透過します

#### ビジュアルスクリプティング

##### サイコロをふる

- `Dice Clear`ノードで前に作ったダイスを削除します
- `For Loop`ノードを利用して作成するダイス分ループします
    - Last: `RollDiceCount`を参照します
    - Body: このFlowの先でダイスの生成をします
- `Dice Roll`ノードでダイスをふります
    - Dice: `RollDiceType`を参照します
    - Mat: `RollDiceMaterial`を参照します
    - Spawn point: 画面のどの位置から開始するか決めます
    - Force: ふるサイコロの力を決めます(ふる方向、回転)

![DiceRollRun.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/19ca789b-e34b-bfa5-58a0-7067468e30b1.png)

##### 出目を表示する

サイコロをふった事で`StateGraph`の状態が`Rolling for Dice`から`Rolled for dice`に移動します

![State2-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/643f7d54-3be3-8ba7-149d-99f5c792ebf1.png)

- 出目が確定するまでWaitをもたせる
    - `Cooldown`ノードでWaitします
        - アセットのダイスが止まっているかの判定が微妙だったため
- 判定
    - - `Dice As String`ノードでふったダイスの出目をすべて取得します
    - `String Contains`ノードで判定できなかったダイスがあるか探します
        - あった場合はやり直し
- 出目を取得と表示
    - `Dice Value`ノードで出目の合計を取得します
    - `Text Mesh Pro UGUI Set Text`ノードで出目のテキストを更新します
    - `Game Object Set Active`ノードで非表示にしていたテキストを可視化します

![DiceRollResult.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/5e466e9e-0b86-c2f8-c4d3-af664d868736.png)

# さいごに
苦労したところ
- サイコロの確定が不安定だったのでWaitをもたせた事

有料のアセットだとダイスごとに確定したか検知できるようになってました
無料のアセットは、ダイスごともなかったためダイスの出目を表示するノードからどうにかして判定を作成しました

# 連載記事

https://qiita.com/acronhub/items/a46c6f5c16c4d262728c

https://qiita.com/acronhub/items/ccbdda267de28730d68e

https://qiita.com/acronhub/items/25d626d7ae2956942735

https://qiita.com/acronhub/items/7fa83565ffdd05576605

https://qiita.com/acronhub/items/7c3a39d384c0b6ea277c

https://qiita.com/acronhub/items/c273a54507b07a5937e3