[Unity初心者]CanvasとTextについて解説

今回はCanvasやUIについて詳しく解説をしていこうと思います！

:::note info
使用PC： MacBook Pro (13-inch, M1, 2020)
OSバージョン: 11.5.2
Unityバージョン：2021.3.2f1
:::

# UIについて
Unityを立ち上げてHierarchyビューに移動します。
プラスボタンを押すと画像のように選択項目が出てくると思います。
![スクリーンショット 2022-10-11 21.42.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/474e34fb-6fc9-3372-542f-d01cfa648827.png)

```
ゲームをするときに見えている文字やボタン（例えばHPバーやスコアの表示）など、
ゲームをプレイしているユーザーに対して何かしら情報を見せてくれるもののことを ユーザーインターフェース（UI） と呼びます。
```

文字を置きたい場合はUI>Legacy>Textを選択します。

 ![スクリーンショット 2022-10-11 23.11.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/eb6b63c9-230e-7c1a-3a9f-27e1a86fdca6.png)

Textを選択すると、Hierarchyビューに`Canvas`、`Text`、`EventSystem`が置かれます。![スクリーンショット 2022-10-11 23.18.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/dbcd3321-25ef-07e1-1dd1-165e41df0841.png)

## 補足
`Text - TextMeshPro`と`Text`って何が違うの？と思う方も多いのでは🙃
そんな方は[こちらの神記事](https://kan-kikuchi.hatenablog.com/entry/TextMeshPro)を読んでいただければ大体理解できると思います！
TextMeshProの方が装飾などが豊富に設定でき、基本的にはこっちを使うことも多いようです!
今回の記事ではとりあえずTextを表示させたいだけなので、Legacyから出した古いほうのTextを使っていきます^^;

# Canvasとは
UIはCanvasがないと画面上に出すことができません。

>ペンを持っていても書く場所がないと文字や絵は書けないですよね？
Unityは最初にUIを置いたときに各場所も自動で置いてくれるようになっています。便利ですね😊

# EventSystemとは

`EventSystem`とは、ユーザーからの入力を受け取って、アプリケーション内のオブジェクトにイベントを送信するものになっています。（はにゃ？？😅）

つまり、これはゲーム中に「文字を変えて〜」「絵を変えるよ〜」「ボタンが押されたよ〜」などをUIに伝えてくれるシステムのことです。
**これがないとUIに対して何もできなくなってしまいます**が、UIを自動で作ったときにunityが自動で作ってくれます。

>もし間違って消してしまっても、Hirarchyビューのプラスボタンから再度作成できるので安心してください。

![スクリーンショット 2022-10-11 23.30.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/c99fbc8c-3b86-87e0-de22-1043aa779ab4.png)

# Canvasの各種設定
Textがこのままだと見づらいので、Canvasに設定を加えていきます！

## Render Mode
CanvasのInspectorビューにある`Render Mode`を見ていきましょう。
これはCanvasの見え方を制御している部分になります。
3つ設定方法があるので、軽く解説していきます！
![スクリーンショット 2022-10-11 23.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/8caed6a5-d54e-2e04-d680-d6c89de5c5a1.png)

### Screen Space - Overlay
**常に一番前に来るように見せる** 方法です。
サイズや解像度が変更された場合、Canvasはスクリーンに一致するように自動でサイズを変更してくれます。

### Screen Space - Camera
Canvasが指定されたカメラの前に一定距離で置かれるため、何かの後ろなどの**前後関係をいじれる** モードです。
このモードにするときは、gifのように`Render Camera`のところに指定するCameraオブジェクトを入れてください。
![画面収録-2022-10-11-23.42.49_out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/5819fc67-59cb-bdbd-fd8d-99767e463199.gif)
（Sceneビューで見やすくなるので、個人的にはこのモードが一番使いやすいです👍）


### World Space
**他のオブジェクトのように、位置やサイズをいじれる** モードのことです。
ゲーム世界に属するUIのパーツとして有用です。

## Canvas Scaler
`Canvas Scaler`はCanvas内の全体的なスケールとピクセル密度を制御するために使用されるコンポーネントです。

UI Scale Mode>Scale With Screen SizeでCanvasサイズ調整を行いましょう。
gameビューで設定してあるサイズと同じにしてあげます。
![画面収録-2022-10-12-11.52.15_out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/c55745ee-08bc-18d4-d730-f2b000d48014.gif)


# Textの編集
## 位置の調整
TextのInspectorビューの`Rect Transform`の`Pos ~`で位置を調整します。

```
位置を調整するには
1. ポジションのところをクリックしてマウスを左右に動かすことで移動する
2. Sceneビューで矢印をクリックして直感的に調整する
3. 直接数字を入れて調整する
の3つのやり方があります。
```

自分の好きなやり方でやってみてください！

![画面収録-2022-10-12-13.07.03_out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/b005e8cf-677b-7f0c-2cfb-251a4aad27f9.gif)

## 大きさの調整
TextのInspectorビューの`Rect Transform`の`Width`と`Height`で調整します。
こちらも調整の仕方はいろいろあるので、自分の好きなやり方で調整してみましょう。
![画面収録-2022-10-12-13.21.58_out.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/a0b3ebc3-2059-48db-bb80-0b27dd1481f7.gif)


## 文字の編集
Textコンポーネントの中をいじることによって、文字に様々な装飾などを加えることができます。
### 色
`Color`をクリックすると自分の好きな色に変更することができます。
今回は白色にしました。
![スクリーンショット 2022-10-12 13.42.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/f9a639d4-af04-0dcd-6aee-2cdadca3c3a0.png)

### 整列
`Paragraph>Alignment`から、文字を左よりか真ん中にするかなどのの整列を変更します。
今回は真ん中揃えにしました。
![スクリーンショット 2022-10-12 13.46.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/87d6617a-6756-fae5-901f-1df515311a43.png)

### 大きさ
`Font Size`で調整します。
最初に設定した縦幅や横幅より大きな文字にすると見切れてしまうので注意してください。
![スクリーンショット 2022-10-12 13.50.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/fc5d701b-df75-338c-1678-c978813de333.png)

`Best Fit`にチェックを入れて`Max Size`などを調整すると、自動で縦幅や横幅にあったサイズになってくれるので便利です👍
![スクリーンショット 2022-10-12 13.50.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/9f41cad4-676b-2d28-b251-21467b405e1f.png)

### 文字の中身
Textの四角の中に直接文字を入力するとそれが表示されます。
![スクリーンショット 2022-10-12 13.55.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/890419/67fa0f4e-766c-7552-3f46-81692063c50a.png)

# 以上！
まだまだUIには機能が盛り沢山ですが、超基本的なテキストの使い方や知識について簡単にまとめてみました！
参考になったら嬉しいです😊