[Unity]60分で作るTerrainジオラマ地形

#初めに
　この記事は「**[サムザップ #2 Advent Calendar 2020](https://qiita.com/advent-calendar/2020/sumzap2)**」の12月2日目の記事です。
　昨日の記事は@RyotoKitajimaさんの「**[Sumzap Engineering Vision を作ってから約半年が経ちました](https://tech.sumzap.co.jp/entry/look-back-sumzap-engineering-vision)**」でした。

　この記事ではUnity標準機能の**Terrain**について解説いたします。
　読者の皆さんにはぜひ自分で実際に手を動かしつつ、Terrainの「**地形生成**」「**テクスチャペイント**」「**木や草の生やし方**」の基本的な項目についてこの記事で学んでもらえればと思います。

##作成する地形
　今回サンプルとして作成する地形はこちらです。

![gif_animation_00208h54m.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/fe255d6f-7c38-135e-63bc-8e14b23ab2a8.gif)

　水面と木や草のモデルは**LowPolyWater**と**NatureStarterKit2**の物を使用し、島の形や木と草の配置はTerrainを用いて行っています。今回は約60分でこのジオラマ地形を作りつつ、Terrainの基礎を学んでいきます。

#Terrain作成
それでは早速地形を生成していきましょう。

##環境
　使用したバージョンは以下の通りです。

・**Unity　2019.4.10f1**
・**[LowPolyWater](https://assetstore.unity.com/packages/tools/particles-effects/lowpoly-water-107563?locale=ja-JP)**　**1.0.0**
・**[NatureStarterKit2](https://assetstore.unity.com/packages/3d/environments/nature-starter-kit-2-52977)**　**1.0**

##地形の生成
　空のシーンを作り、Hierarchyから右クリックで**3D Object>Terrain**を選択しTerrainを生成します。

![Create.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/0026036b-e7d8-2f57-75d1-5be15c9bd327.png)

　生成されたTerrainは以下のような平面の地形です。

![スクリーンショット 2020-11-30 006.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/6c1addde-6be1-08dc-61a9-3aaf9b5f3372.png)

　生成直後の初期の状態では非常に広大な地形が生成されているため、地形全体の大きさを調整します。
　TerrainのInspecterから歯車アイコンの**TerrainSetting**を選択し、MeshResolutionから**Terrain Width**と**Terrain Length**を100にしましょう。

![スクリーンショット 2020-11-29 224149.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/6b1b3343-5ebc-6060-b34a-767b4cd98695.png)

![TerrainSettingWH.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/6c1cabe2-7d58-2cda-cb65-ea22a2824e9f.png)

　それでは地形を想定している形に変えて行きましょう。
　TerrainのInspecterから筆アイコンの**PaintTerrain**を選択し、ドロップダウンから**RaiseorLowerTerrain**を選択します。

![TerrainSetting2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/ff2b9484-4249-07ba-712f-3fec78bae359.png)
![RaiseLowerTerrain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/ed0031fb-9125-c748-fd67-3069b02e4c86.png)

　これで地形編集の準備が完了しました。
　それでは実際に地形を編集していきましょう。
　地形を編集するにはBrusheからブラシを選んでBrushSizeでブラシの大きさを、Opacityでブラシの影響力を設定し、Scene上で地形を隆起させていきます。
　左クリックで地形が山になり、シフトと左クリックを同時に押すと地形が谷になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/def2de08-5427-d33d-d70e-7ff56c28132e.png)

　この状態でマウスを地形上に持って行くと編集後の地形が見えるため、この地形を参考に進めていくと良いでしょう。
　ある程度形になったら次に進んでいきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/758897ce-96d4-1b7c-8cf6-772138872496.png)

　地形を上下させるブラシのみで島を作った場合、島の大きさは適切でも凹凸が大きい地形になることがしばしばあります。
　そんなときのために、ブラシで地形を滑らかにする方法があるので紹介します。
ドロップダウンから**SmoothHeight**を選択し、滑らかにしたい部分にブラシを当てて調整していきましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/624d74cd-466b-af84-ae57-2dae5e7eb1a1.png)

　ある程度スムースをかける事で以下のように余分な凹凸の少ない滑らかな地形を作る事ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/b2880a34-b30c-7458-4cfa-f35f7e399f30.png)

　ここまでで地形の編集は完了です。
　次は地形にテクスチャを塗っていきます。ドロップダウンから**PaintTexture**を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/df49fad9-f500-773d-5dee-8bff29e35c41.png)

## テクスチャの設定

　次にテクスチャを設定します。**EditTerraiLayers>CreateLayer**を選択し緑のテクスチャの**ground01**を適応します。
　再度**EditTerraiLayers>CreateLayer**を選択し、次は浜辺用に**ground02**を選択してください。
　選択が終わったら下の画像のようになっているはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/2ddf09ff-4828-63a0-aaf5-685b60356096.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/5b0f1a0d-1721-5f8e-8b68-17fa79de08bc.png)

　先に緑のテクスチャを設定したため、地形全部が緑色になっています。
　浜辺と海の部分を**ground02**で塗っていきます。
　塗り方は地形編集で行った方法と同じくブラシを使って塗っていきます。
　必要な部分を**Opacity**の値を100で塗り、後で**Opacity**を2程度まで下げて境界線を薄く塗っていくとより自然に見えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/6baf3df1-000e-f3e3-6c21-64912dc11260.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/4932c7f9-f7ad-0c40-7395-02197c9a8efc.png)

## 水面の作成

　次は水面を作りましょう。
　今回はアセットストアから**[LowPoly Water](https://assetstore.unity.com/packages/tools/particles-effects/lowpoly-water-107563)**を導入し、水面を作りました。

![スクリーンショット 2020-11-30 075454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/7ffcdea8-fd9d-c309-eec3-dc9fd70d405c.png)

　水面のオブジェクトは地形と同じ大きさのPlaneを用意し、そのPlaneに**LowPoly Water**の**LowPolyWaterMaterial**をD&Dする事で作成できます。
　作成後、Y軸の位置を上下させて位置を調節してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/0378da8b-6c29-5e04-57d8-8f5a909ad3ca.png)

## 草を生やす

　次に草を生やしていきます。
　後に登場する草や木は**[NatureStarterKit2](https://assetstore.unity.com/packages/3d/environments/nature-starter-kit-2-52977)**を使用しています。
　PaintDetailアイコンを選択し、**EditDeails>AddGrassTexture**からAddGrassTextureウィンドウを開きます。
　DetailTextureに今回使用する草のテクスチャの**bush01**を設定し、Addボタンを押します。

![TerrainSetting4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/d37799e3-7e93-10ef-1d0c-e7f455ba48ea.png)
![EditDetail.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/7e44a889-27ab-9620-3f0a-c9ed0e1de724.png)
![スクリーンショット 2020-11-30 075454.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/562b6c2b-97c7-92db-8f21-43d29e7160a2.png)

　**Details**から追加した**bush01**を選択し、草を生やしていきます。
　ペイントと同じようにブラシを選択し、**Setting**からブラシの大きさや影響力を調整しながら生やしていきましょう。
![GrassBrushe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/47db45f4-5bac-8c3a-d24f-55978a6f927e.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/acc2ffc3-3529-9370-9acb-60387e8db582.png)

## 木を生やす

　次は木を生やしていきます。
　PaintTreesアイコンを選択し、**Trees>EditTrees**からAddTreeウィンドウを開きます。
　TreePrefabに今回使用する木の**tree03**を設定し、Addボタンを押します。

![TerrainSetting3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/b7ab3d00-a45b-d1da-93a7-b2ab0e4f4d69.png)
![treesetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/1e5cf21d-7852-414b-d6f0-adfad3c8be69.png)
![tree03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/843f5bbb-aed1-ff55-668c-0499257455e8.png)

　Treesから追加した**tree03**を選択し、木を生やしていきます。
　木を生やすときのSettingsは今までと違い、TreeHeightという項目が追加されています。
　この部分は木の高さを設定する部分になっており、右側のバーの位置と幅を設定する事で、その範囲内の高さの木が生えます。Random?のチェックマークを外すことで固定値に設定する事もできます。
　それでは実際に木を生やしていきましょう。
![TreesSetting.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/84129323-eb3f-b0ad-4196-a22981ad2d79.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/d6516606-b103-5a62-e10b-2255c978a6eb.png)

## 茂みを生やす

　最後に茂みを生やしていきましょう。
　木と同じように**Trees>EditTreesからAddTree**ウィンドウを開きます。
　TreePrefabに**bush03**を設定し、Addボタンを押して追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/a7a39b4a-1085-e888-d75b-fcc82c001210.png)

　追加が完了するとTreesでbush03が選択できるようになります。
　同様に**bush04**も追加し、木の時と同じく設置していきましょう。

![bush0304.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/68d3bb5d-d0f3-a366-feb2-f1fcf31c47f5.png)

　ここまでの操作で以下のような島を作る事ができました。

![gif_animation_00208h54m.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/393006/fe255d6f-7c38-135e-63bc-8e14b23ab2a8.gif)

## まとめ
　Terrainによる地形生成の基礎と「**地形生成**」「**テクスチャペイント**」「**木や草の生やし方**」の基本的な使い方について紹介しました。
　これを読んだ読者が地形生成の最初の一歩を踏み出せたら幸いです。

## 最後に
　明日は@kojima_akiraさんの「CIサービスはもういらない！？github actionsでphp-cs-fixerを使ってみる」です。