Unity2021の2D Mobile[初期設定]

# はじめに
　スマホのゲーム開発を始めようと思い至ったのは夏休みが暇すぎたからです。
　幸い僕にはあまりある時間と大量のプログラミングの経験とコンピュータに関する知識がありました。一日で簡単なゲームくらいは作れるだろうと思い適当なサイトを参照しながら開発を進めようとしたところ、参照しているサイトより進んだUnityのバージョンが存在していることに気が付きました。それがUnity2021です。正確にはUnity2021.3.8f1です。
　まぁ大丈夫だろうと最新の安定バージョンらしいそれをインストールして進めていたのですが、どうにも文字化けがあったり、エラーが起きたりで進められない。こうして僕の簡単な目論見をした一日は消費されていきました。
　この記事を書いているのは、その次の日です。
　この記事では僕が忘れてもいいように、Unityの2021において行うべきだと判断した初期設定の数々を書いていきたいと思います。

# Unity Hub

　Unityをインストールするため、あるいはバージョン管理をするためのソフトです。Unityを扱うにはこれを入れるのが最も賢いらしく、僕もそれには同じ意見ですね。

## Unity Hubのダウンロード

　次のサイトの右の緑ボタンからインストールしました。
　適当にぽちぽちしていればUnity Hubはダウンロードできます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/5421a1c1-6c48-7554-268e-5d174492bf88.png)


https://unity3d.com/jp/get-unity/download

## Unity Hub

### Unity Hubの日本語化

　正直必要かは悩むところですが、英語が苦手なら設定しとくに越したことはないかもしれません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/862d8358-56a5-19da-58ce-69f9e5e68ff2.png)

　左上にある歯車マークをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/490dd070-7e39-3df0-68de-5641c38bb375.png)

　Appearanceをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/c67bb4e9-0f61-1032-8262-2fe16e22a962.png)

　Languageをクリックして日本語に変更。
　閉じれば次のようになっているはず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/3c9ccd15-759e-deaf-f980-2d6034a8ad5d.png)

## Editer のインストール

　今回はmobileの開発を想定しているのでそれ用の設定をしましょう。
　インストールタブから次の画面に行ったら、エディターをインストールをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/d6a840fd-7f81-7bd6-fc5e-86c87a38e4c3.png)

　2021バージョンをインストールします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/0875327d-baa9-1da7-cbbf-7e153856b8df.png)

　そうするとVisual Studioにだけチェックの入ったモジュール一覧が表示されます。
　僕の場合、プログラムの編集はatomでやりたいのでVisual Studioなんていらねぇ！とおもむろにチェックを外し、Android Build Support と iOS Build Supportにチェックを入れて、その次に一覧の一番下にある言語パック日本語にもチェックを入れます。
　ドキュメントは…まぁうんまぁいいやろ(適当)。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/da90eaad-8b1e-a89c-23a2-b2a2f4906de7.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/5127751d-ea43-3fab-47d1-5bda429a8565.png)

　インストール。
　何も表示されなければ成功、なのかな？
　この記事を書くために一回アンインストールしてからインストールしなおしているので、キャッシュなどで何も出なかった可能性はありますが…。
　ま、インストールが完了したらそれで良しです。

## プロジェクトの作成

　プロジェクトタブより右上の新しいプロジェクトをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/a0e9fce3-950f-0d3d-3582-9774c36f6a5d.png)

　一度プロジェクトを作成したことがあるため目的の2D Mobileがすでにインストールされていますが、ここでは3D Mobileを例にします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/8cdd496c-05d4-5186-17c6-3274352a80c8.png)


　初期状態であればこの下に2D Mobileが非アクティブのような状態で配置されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/62b04450-bb33-82c2-c11e-c8c8afc2f289.png)

　自分が欲しいテンプレートをダウンロードしてください。
　ダウンロードが完了すれば右下のプロジェクトの作成がアクティブになるのでクリック。
　プロジェクトの作成にはしばらくかかると思います。

# Unity2021

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/92569059-7edf-68f4-c92e-fa70b9fa0db8.png)

　僕の場合はこのような画面が最初に表示されます。

## 画面構成

　ただ、もう少し見やすい表示にしたいので右上の**Default**をクリック、表示された**2 by 3**をクリックすると画面は次のような構成に変わる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/1f1502f5-5f28-c14c-667a-af0d359966be.png)


　初期構成よりこの構成の方が好きなので、**2 by 3**で進めさせていただきます。

## 日本語化

　モジュールインストールで日本語パックを選択していればこれが出来るようです。
　左上にあるEditのPreferences...をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/8bc03205-2dec-a12c-0ff6-275301210609.png)

　LanguesのEnglishをクリックして、日本語を選択すると日本語化される。
　ただし、インスペクターなどは一度再起動させないと日本語化されないみたい。
　なのでLanguesの変更をすれば一度、Unityを閉じてプロジェクトを開きなおすのを推奨する。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/a543abee-83a7-c0a5-a04f-aa679b106ceb.png)

　＊ここは追加した部分なので、この記事では英語で進めていることに注意してほしい。

## Platform の変更

　ゲーム画面をスマホ型に変更するために左上のFileからBuild Settings...をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/0891c499-8b45-e638-f784-70ba542445fc.png)

　Platformの一覧をAndroidに変更。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/9723abb6-555b-cb31-26be-4cf7b05fe0f1.png)

　もし**Editor のインストール**でAndroid Build Supportを選択していなければ、ここでもインストールすることが可能です。iOSも同様。
　ただ僕は詳しく調べてないのですが、その方法でBuild SupportをインストールすればSwitch Platformをクリックした後のBuildボタンが非アクティブのままになりました。

　右下のSwitch Platformmをクリック。
　完了したらウィンドウを閉じても大丈夫です。

## 画面サイズ

　スマホの縦画面アプリを作りたかったのに対して今のゲーム画面では対応したアプリが作れません。そのため画面をスマホの縦画面みたいにします。
　2 by 3なら左下に、初期構成ならSceneタブの隣にあるタブにあるGameタブ、その下にあるFree Aspectからアスペクト比を1920×1080に変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/e4f48a13-03f2-d6e3-576c-09db182d10ce.png)

　なお、これは余談だが、portraitは縦、landspaceは横という意味があるのと同時に、portraitには肖像画、landspaceには風景という意味もある。これは恐らく画用紙の用途に由来した言い方なのだと思われる。

## TMP(Text Mesh Pro)

　Hierarchyを右クリックし、UIから適当にTextとかButtonとかを配置すると出てくる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/b49e4dc2-64be-704a-b1a1-2cc239f4011d.png)

　とりあえずImport TMP EssentialsしてImport TMP Examples & Extrasしましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/1f8c7d6a-8723-d906-9ed4-be26ee279208.png)

　するとTextかButtonの中に文字が現れたと思います。
　よっしこれで日本語を入力してみんぜ、とはいきません。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/b4bc965b-c0dc-e1b8-d0a0-c55eddba47cf.png)

　Textオブジェクトに「新しいテキスト」
　Buttonオブジェクトには「Buボタン」と入力しましたが
　日本語部分が文字化けしていますね。
　日本語パックで言語自体を日本語に変えていれば表示できないだろうかと試してみたのですが、それは淡い期待だったみたいです。
　おとなしくTMPの日本語化をしていきましょう。

## TMP日本語化


　初めに使いたい日本語フォントをダウンロードしてきます。

https://fonts.google.com/

　例としてGoogle FontsのNoto Sans Japaneseをダウンロードしてきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/0a1e5538-a0be-6c1e-d971-7f0ac49a8763.png)

　Download familyからzipをダウンロード。解凍してフォルダを開いておきましょう。
　使用したいのはこの中のMediumだけ。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/a86edffe-f338-b28d-690b-99abc5035ff2.png)

 UnityのAssetsフォルダに新しくFontsフォルダを作成(Projectの＋ボタンからFolder)し、Mediumをドラッグ&ドロップします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/cc909a15-cc67-616a-0145-f563baacd37b.png)

　ついでに後で使うので文字のファイルのテキストという良く分からないものをダウンロードして解凍しておきます。解凍したらjapanese_full.txtというAAが隠れてそうなファイルを開いておいてください。

https://gist.github.com/kgsi/ed2f1c5696a2211c1fd1e1e198c96ee4/archive/118bb818cffe159eb4e906f82980465cd0b0021e.zip

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/d65fc141-51e6-f849-7a5d-37495cea2eb3.png)


　左上にあるWindowからTexxtMeshProからFont Asset Creatorをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/4e90e483-ef95-cd73-fba5-a47cd2a18176.png)

　一番上にあるSource Font Fileに、ドラッグ&ドロップでも右の◎ボタンから検索でもいいので、NotoSansJP-Mediumを選択してください。他の設定は参考(というかモロパクり)させて頂いた記事を参考に48、8192と8192という風に変更します。
　次にCharacter SetをCustom Charactersに変更します。これは必ず行わなくてはいけないようです。すると下にCustom Character Listが現れます。
　そのCustom Character Listに先ほど開いたjapanese_full.txtを**Ctrl + a**ですべて選択してコピー&ペーストしてください。
　ここまで同じようにしていれば次のように画面になっているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/39830d24-d238-1f0d-79b3-a397ccca6fd6.png)

　Generate Font Atlasをクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/2ad8777f-7efd-7db8-31bc-0b582a46974f.png)

　Missing Charactersというのは作成できなかった文字をいうそうで、19個は許容範囲らしいです。許容範囲を超えれば、文字のサイズを変えて調整するようですが、僕にはよくわかりません。
　最後にSaveを忘れずにクリック。
　AssetsのFontsフォルダへ保存してください。
　そしたらFont Asset Creatorは不要なのでウィンドウを閉じても大丈夫です。
　青いFマークが現れてるはず。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/dcee851e-8182-fd4f-201c-9cfd6fdde45a.png)

　Text(TMP)のインスペクターにあるFont AssetをFontsフォルダにあるAtlasファイルをドラッグ&ドロップでも右にある◎ボタンからの検索でもいいのでNotoSansJP-Mediumを選択してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/ca9aaa43-2493-3e79-f290-f90fa6ac2e03.png)

　ちょっと日本語フォントが大きいせいで改行してしまってますが、日本語化は完了です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2647158/2e636b9c-c17a-1644-dbd8-fc3fd1da53cc.png)

# 終わりに

　Unityを初めて2日目ということもあって解説出来るほどの知識もありませんが、備忘録という形で記事にさせて頂きました。間違いやこれをこうしたほうが良いなどの改善点がありましたら、この記事内でもTwitterの方でもいいので教えていただけたら幸いです。
　次はプログラミングの仕方でも書こうかな？

Twitter:
https://twitter.com/dog_king_fun

　実はこの記事書くの2回目なんですよね…Qiitaに投稿しようとした瞬間にデータが消えたんですがこういう経験をまともに食らうのは初めてでした。結構こたえるものですねｗ
　そのせいもあって最後の方はかなり雑になりましたが、まぁ備忘録ですから！

# 参考

https://taidanahibi.com/unity/text-mesh-pro/#index_id1

https://qiita.com/kgsi/items/08a1c78b3bee71136156

https://www.udemy.com/course/unity_app_increase_profit/

https://qiita.com/dainabeblog/items/db4fed7005c646fb1944#%E9%96%8B%E7%99%BA%E7%B7%A8