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

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

# 作ってみる
今回、作っていくのはコチラ
- サイコロの合計の目の履歴を取る
- 履歴を表示する

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

![HistoryView.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/d5b1c509-1b94-53c6-f5c6-61a8cd43c049.png)

## サイコロの目の履歴を取る

### やること
- Listを作成する
- ビジュアルスクリプティング
    - 出目をリストに追加する

#### Listを作成する

- 履歴を保存するためのリストオブジェクトを用意します
ビジュアルスクリプティングがあるオブジェクトの「インスペクター」パネルの「Variables」に「`ListDiceHistory`(Aot List)」を追加します

![ListDiceHistory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/20af66da-0957-5c1a-30a2-7a5c2ccb9459.png)

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

- `List AddItem`ノードを利用します
    - List: 参照元は`Get Variable`ノードで取得します
    - Item: この処理の前に結果を表示するためにString型の目の合計を渡します

![HistorySave.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/6b2b70f4-2c4d-ecb0-fc73-84de91a2357d.png)

#### 動作確認

Variableのリストが増えていくのがわかります

![HistorySaveLog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/75e9eab9-05c3-206c-ccfe-baccb83bb1e7.png)


## 履歴を表示する

### やること
- ScrollViewを作成する
- Panelを作成する
- ビジュアルスクリプティング
    - リストから取得する
    - パネルを作成
        - 回数、出た目の合計を代入する
        - Viewの先頭に追加する

#### ScrollViewを作成する

こちらを参考にしてScrollViewを作成しました
「ヒエラルキー」パネルで、`UI > ScrollView`を選択して作成します

https://shikaku-sh.hatenablog.com/entry/unity-popup-dialog-with-scrollview-in-canvas#%E3%83%80%E3%82%A4%E3%82%A2%E3%83%AD%E3%82%B0%E3%81%AE%E6%A7%8B%E6%88%90

完成形のScrollViewはコチラになります

![CanvsHistory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/9d0b8945-8ba3-9d38-55bc-83b6b37d7478.png)

- ScrollViewオブジェクト
    - 表示位置の調整、表示するスクロールバーの設定、スクロールの移動タイプ設定を行います
    - `Horizontal`: チェックを外します
    - `Movement Type`: `Clamped`にします
    - `Horizontal Scrollbar`: 今回利用しないので`none`にします

![HistoryViewScrollView.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/e48c5848-d96e-9cec-80e8-56be65d463f4.png)

- Viewportオブジェクト
    - 変更なし

- Contentオブジェクト
    - 2つコンポーネントを追加します
        - Content Size Fitter
            - `Vertical Fit`: `Preferred Size`にします
        - Vertical Layout Group
            - `Padding`: 余白を調整します
            - `Control Child Size`: チェックを外します
            - `Child Force Expand`: チェックを外します

![HistoryViewContent.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/8c07dca7-8570-0716-9dd9-f32f50537c99.png)

ビジュアルスクリプティングがあるオブジェクトの「インスペクター」パネルの「Variables」に「`CanvasHistoryContent(Game Object)`」を追加します

![HistoryViewValues.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/e29c50ac-b6a1-baa7-ec16-22325ff5b134.png)

#### Panelを作成する

プレハブ化したPanelオブジェクトを作成します
「ヒエラルキー」パネルで、`UI > Panel`を選択して作成します

完成形のPanelはコチラになります

![PanelHistory.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/17d39d7c-93d7-ec62-2e77-3145e9092615.png)

- Panelオブジェクト
    - Index: `UI > Text (TextMeshPro)`を選択して作成します
    - DiceValue: `UI > Text (TextMeshPro)`を選択して作成します

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

- パネルの追加
    - `Component Instantiate`ノードでPanelのクローンを作成します
        - Original: プレハブ化したPanelオブジェクトを参照します
        - Parent: CanvasHistoryContentを参照します
    - `Transform Set Sibling Index`ノードでContentオブジェクトの先頭に追加します
- パネル内のTextを更新
    - `Count Items`ノードで配列数を取得します
    - `Last Item`ノードで出目を取得します
    - `Transform Find`ノードでパネル内のTextオブジェクトを取得します
        - `Text Mesh Pro UGUI Set Text`ノードで回数、出目のテキストを更新します

![HistoryViewSave.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/5673e76c-8f28-2e10-500a-292cc3e82085.png)

# さいごに
苦労したところ
- オブジェクト内のオブジェクトの参照方法を探す
- 履歴の表示を降順にする方法を探す

ココらへんが検索で見つけるのが苦労しました。結果的にドキュメントを読み漁って、試してみてでやりました
オブジェクトの参照方法がわかったので、ビジュアルスクリプティングだけでかなり作れると思います

# 連載記事

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