Unityで自作の背景を設定する（Skybox /6 Sidedを使用）

###対象読者

これを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/dec7daac-1433-78c9-088e-95571fbdb811.png)
↓
こうしたい人向けの記事です。自分のメモ書きレベルですが、自分で絵柄を描きたい！という方の参考になれば幸いです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/cb2707a3-5405-a555-bf88-3686314db336.png)

###使用環境
・Unity 2018 4.8f1
・Photoshop CC 21.2.2（←Photoshopである必要はないので、好みのソフトでOKです）

###(1)Photoshopでテクスチャを作ろう！
まず、**8192 x 6144** でキャンパスを用意します。
2048 x 2048四方となるように、ガイドを引いてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/619619df-c761-605e-d561-3d5432b35d2e.png)

使うのは、緑の○を書いた部分のみです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/4495a855-01bc-af74-032c-f0a080df5019.png)

なぜ○のところしか使わないか、というと、
UnityでSkyboxのMaterialを作る際に、立方体の6面に描いたテクスチャを貼ることになるためです。

◎UnityのMateral設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/cc9cbca5-ecfc-1031-200f-bbc6001fa9cf.png)

◎テクスチャとの対応表
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/e1aaa958-b787-8d4d-ea15-be8520ce5f5b.png)
あとは、好きに絵を描いてみてください。

注意としては、
・グラデーションしたいときは均一にする（まだらにすると、貼り付けたときにズレる）
・境目（UpとFrontの間とか）に絵を描くと、表示したときにくぼむので見え方には注意する
くらいでしょうか。

今回私は、大気圏をイメージした絵を描いてみました。あくまでイメージです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/b36066f1-0d2a-5cb9-08b4-8d84dc8a2612.png)
本当は雲とか、地球の丸さ、みたいなものを表現したかったのですが、
Unityで貼り付けたときに違和感出まくりだったので簡素化しました。
~~（絵心の問題な気もする）~~

トライ＆エラーでやっていきましょう。


最後に、緑の○をつけた部分を書き出して、準備完了です。


###(2)UnityでSkyboxの設定をしよう！

適用したいプロジェクトを開いて、さきほど作ったテクスチャをドラッグ＆ドロップで放り込みます。
右クリック > Create > Material　で新しくMaterialを作成したら、inspectorを確認します。
ShaderがStandardなので、 **Skybox/6 Sided** に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/5a91d3b8-d7fe-6239-d516-0106d9a1692c.png)

そして、さきほど作ったテクスチャを各部位に設定する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/cc9cbca5-ecfc-1031-200f-bbc6001fa9cf.png)
これで、Materialは完成です。

最後に、メニューから、Window > Rendering > Lighting Settingsを開きます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/9262299a-9114-922a-3c24-9c8525ef76bf.png)
一番上にSkybox Materialという項目があるので、さきほど作成したMaterialを設定すると完成です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/fdb6799d-8d2a-0b14-60bf-ca7598b1432b.png)

‥といいたいところですが、うっすらと横に1本白く線が入っているのが見えます。。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/a4110756-5612-80ed-20e0-8df4be5c33bf.png)

テクスチャとテクスチャの間に白い線でも引いてしまったか、確認したのですがどうやら違うようで。

この場合は、**テクスチャのWrapModeをClamp** に変更すると解決しました。
Clampはテクスチャを引き伸ばす設定なんだそうです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/694513/0f27c919-40d5-2aab-c3b2-308d88092983.png)
※詳細は[コチラ](https://sleepygamersmemo.blogspot.com/2017/04/unity-mesh-texture-extra.html)のサイトが大変わかりやすかったのでリンク先をご確認ください。

###さいごに。参考URL情報
Skyboxを作成＋記事を書くにあたり、参考にしたサイトを記載して終わりとします。

★[Unityインターハイブログ「スカイボックス（Skybox）でゲームの雰囲気をガラッと変えよう」](http://inter-high-blog.unity3d.jp/2017/07/06/skybox/)
★[うにty生活「【Unity】Skyboxを自分で作成 #21」](https://www.lovehatetubaki.work/entry/Unity-skybox1)
★[おねむゲーマーの備忘録「Unity 動的にメッシュを作成する　～テクスチャ手直し編～」](https://sleepygamersmemo.blogspot.com/2017/04/unity-mesh-texture-extra.html)
★[Kyle AndrewsさんのYoutube動画「How To Make a Unity Skybox with Photoshop」](https://www.youtube.com/watch?v=-ZutidNYVRE)

調べると、この6面テクスチャを作成して貼り付ける方法は少し古いようですね‥。
背景をグリッド線にしたいときなどには、まだまだ使えそうな手法だと思いますので、参考になれば幸いです。
ありがとうございました。