【Unity】サイコロアプリを作ってみる 2

記事の内容は間違っていないですが、作り方を大きく変更しました
以下の記事が最新になります!!

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


# これはなに？
Unity初心者がサイコロアプリを作るまでの過程をまとめた記事になります
手探りなところがあり、また制作途中での記事のため、後で修正するかもしれないです

前回の続きになります

# 作ってみる
今回はタップでサイコロをふる。サイコロの合計が表示されるまで作ってみます

## 画面タップできるようにする

### Canvasを用意
「ヒエラルキー」パネルから「UI > Canvas」を追加します

Canvasについてはこちらを読んだほうがわかりやすいと思いますが、UIを配置していくために使います

https://docs.unity3d.com/ja/2021.3/Manual/class-Canvas.html

https://docs.unity3d.com/ja/2019.4/Manual/script-CanvasScaler.html

「インスペクター」パネルから「UI Scale Mode > Scale With Screen Size」に変更します
こうすることで、表示する画面サイズが変わっても調整して合わせてくれます

![canvas.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/8e8dbd85-de07-01e8-8dcd-feae2c9c8c47.png)

### 透明なImageを用意
「ヒエラルキー」パネルから「UI > Image」を追加します
「UI > Button」でもよかったかもですが、今回はImageで作ります

https://docs.unity3d.com/ja/2019.4/Manual/script-Image.html

オブジェクト名を「RolledDice」にします
「Width」「Height」をCanvasと同じサイズに調整して画面いっぱいにします
イメージを透明にしたいので「Color」でアルファ値を0にします

このままだとタップを検知できないので、「インスペクター」パネルの「Add Component」で「Button」を追加します

https://docs.unity3d.com/ja/2019.4/Manual/script-Button.html

今回は視覚的な反応とナビゲーションは利用しないので「None」を設定します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/0b1c83bb-fbfe-d2a0-dd2d-8ab02b930cb9.png)

## タップでサイコロを振るようにする

前回作成したビジュアルスクリプティングを以下のように変更します

１，右側のObject欄で先程追加したイメージオブジェクトを設定します
２．設定したらドラック&ドロップで右側の画面にもっていくとノードが作られます
３．ノード追加で「On Botton Click」を追加します
４．それらを結びます

![scripts2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/6fdf5504-e01a-7f7f-04a8-0d3ce8f1ec1a.png)

実行すると画面をタップするとサイコロを振るようになりました:v:

## サイコロの合計を画面に表示する

### サイコロの合計を取得する

DiceアセットのC#スクリプトに既に用意されているのを利用します

#### 失敗

１．ノード追加で「Dice:Value」を追加します
２．ノード追加で「Debug:Log」を追加します
３．それらを「Dice:Roll」から結びます

![scripts3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/1b0dab0c-c27d-bc82-08d6-c9fbe1046ac0.png)

実行して確認します

![unity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/b6d61015-f3b2-c453-0f4b-2a8d3a41f7e2.png)

あれ？コンソールに表示された合計と画面のサイコロの合計が合わないです:eyes:

#### 成功?

１．ノード追加で「Dice:Value」を追加します
２．ノード追加で「Debug:Log」を追加します
３．それらを「On Update」から結びます

![scripts4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/18cd39ae-48c1-ea74-5b2e-3e6c2fc5b3ad.png)

実行して確認します
コンソールのログが流れ続けますが、合計数はあっていそうです

#### 成功
![scripts5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/0d8b02bb-55ba-966f-7884-353968a7eba9.png)

Rollingとか変数があったのですが思っていた感じでは使えなかった…
試行錯誤してダイスを振ったときにフラグを立てて、２秒後くらいにチェックして１度だけログに出すみたいな動きを作りました
工夫したのはサイコロが静止しているかが分からない事です
高都度でチェックしないといけなかったのですが、たぶん２秒くらいしたら止まっていると仮定して作りました

#### 合計を画面に表示する

ここはチュートリアルでやったスコア表示と勝敗表示を参考に作ります

https://learn.unity.com/tutorial/show-item-count-visual-scripting-jp?uv=2021.2&projectId=62c7ff31edbc2a0dd74d11ce

付け加えたビジュアルスクリプティングはこんな感じです

![scripts6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/dd4e83d4-20fe-d675-9aec-3a84db3c154c.png)

# 今回の成果物

![cap2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/266407/fdd86f3d-024b-85e9-e480-5542ca47427a.png)

# さいごに

なんとかビジュアルスクリプティングだけで動きそうなものができました！！:relaxed:
まだ粗いところはありますが、最後のほうでブラッシュアップしていきたいと思います

# 連載記事

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