Unityで3D地図をつくろっ! ビルも山もにょきにょきっ.

![スクリーンショット 2019-09-05 20.36.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/297c8b42-71e5-5d0f-141c-7734a375c511.png)
マンハッタンのビル群がにょきにょきっと.
すごいっ!:satisfied:
もういっちょ.
![スクリーンショット 2019-09-05 20.26.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/cc8fb0ad-be75-d5bd-a037-f6d8c181be37.png)
日本が誇る飛騨山脈がにょきにょきっと!

#はじめに
学生アルバイトのSSOOです.

この記事では, **Unityで実際の地図からビルや山を生成する方法**を説明します.
超簡単に作れます.

mapboxというサービス(基本的に無料)を使っていきます.

#アセットの導入

Unityにmapboxのアセットをいれていきます.
[ここから](https://www.mapbox.com/unity/)mapboxのUnity向けのページにアクセスして, "Install the SDK"をクリックしてアカウントを作成しましょう:point_down:.
![スクリーンショット 2019-09-04 19.26.49 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/600fee57-0bbb-5f5a-58f0-1c7b4f9cbce0.png)

---
次に, [自分のアカウントのページ](https://account.mapbox.com/)からUnity向けのSDKをダウンロードします:point_down:.
![スクリーンショット 2019-09-04 19.32.51 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/6a9ad4c2-f33f-c7a8-de59-17a1a76c77be.png)

---
すると下の画面になるので, 指示に従いながら"Install"から"Open an example"までやってみましょう.<img width="1234" alt="スクリーンショット 2019-10-01 19.26.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/449826f2-c225-945d-9905-1d1387b8162f.png">


---
マイクラ風の山が生成できたら:point_down:, 記事冒頭のビルや山を作る準備は完了です:wink:.
![スクリーンショット 2019-09-04 20.05.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/63a6cadd-62d3-cafb-0395-96b02b068f25.png)

#ビルや山をにょきにょきっと!

ビルや山を作っていきましょう.
ここでは, self-containedになるように説明します.

###ビルの生やし方

(山の生やし方だけ知りたい人は["山の生やし方"](#山の生やし方)から読めば大丈夫です)
Unityで新しくプロジェクトを開き, mapboxのアセットを入れてください.
次にmapboxのアセットを開き, PrefabのMapをHierarchyにドラッグ&ドロップしてください:point_down:.
![スクリーンショット 2019-09-06 16.54.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/f924f68a-880b-acf6-a85a-55900a03de16.png)

---
HierarchyのMapにアタッチされているAbstractMapというスクリプトを, Inspectorから設定していきます.
AbstractMapは地面やビルを実際の地図からGameObjectとして生成するスクリプトです.

まず, 全体的な調整ができるGENERALから設定していきます.
表示させい場所の緯度経度をGENERALのLatitudeLongitudeに入力してください(例としてNewYork"40.706843, -74.011370"をここでは用います).
表示させる場所の拡大率を調整するZoomを17に設定してください.
![スクリーンショット 2019-09-09 19.38.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/90ce93c6-3720-3af9-c435-2ccb0cc73517.png)

---
地面の画像を設定するIMAGEを開きます. DataSourceをMapboxStreetsにしてください(地面の画像を地図に設定).
![スクリーンショット 2019-09-09 19.43.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/fffd4602-6fc8-46ec-784e-5e6c2172e7f0.png)

---
地形(地面の高さ)を決めるTERRAINを開きます.
ElevationLayerTypeをFlatTerrainにして, 地面を平にします.![スクリーンショット 2019-09-09 19.50.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/92a7d48c-40b9-55d9-17cb-36261f3f4eab.png)

---
最後に, MapLayersを開きます. ここでは, ビルなどのGameObjectを地面の上に生成して調整もできます.
DataSourceをMapboxStreetsにします. またFEATURESを開き, AddFeatureをクリックしてBuildingsを選択してください.
![スクリーンショット 2019-09-09 19.56.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/cf5bef86-2ff7-f052-03b0-926f5fd05acb.png)

---
再生すると......
![スクリーンショット 2019-09-09 19.58.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/0727c9fc-4d24-545e-3081-1da994872300.png)
ジャジャ～ン:grin:, "夢だけど!"

###山の生やし方
Unityで新しくプロジェクトを開き, mapboxのアセットを入れてください.
次にmapboxのアセットを開き, PrefabのMapをHierarchyにドラッグ&ドロップしてください:point_down:(ビルを生やした人は必要なし).
![スクリーンショット 2019-09-06 16.54.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/f924f68a-880b-acf6-a85a-55900a03de16.png)

---
HierarchyのMapにアタッチされているAbstractMapというスクリプトを, Inspectorから設定していきます.
AbstractMapは地面やビルを実際の地図からGameObjectとして生成するスクリプトです.

まず, 全体的な調整ができるGENERALから設定していきます.
表示させい場所の緯度経度をGENERALのLatitudeLongitudeに入力してください(例としてアメリカのフッド山"45.374218, -121.688341"をここでは用います).
表示させる場所の拡大率を調整するZoomを13に設定してください.
![スクリーンショット 2019-09-09 20.07.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/9b8e2ae2-fe1f-2028-3bc2-729763d7f8eb.png)

---
地面の画像を設定するIMAGEを開きます. DataSourceをMapboxSatelliteにしてください(地面の画像を衛星写真に設定).
![スクリーンショット 2019-09-09 20.09.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/694bf091-e131-83a1-734b-9563e87d5b12.png)

---
地形(地面の高さ)を決めるTERRAINを開きます.
ElevationLayerTypeをTerrainWithElevationにして, 地面の高さを実際の標高と一致させます.
![スクリーンショット 2019-09-09 20.10.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/9323d33f-8779-9647-f7bf-2fd2cf2495f4.png)

---
最後に, MapLayersを開きます. ここでは, ビルなどのGameObjectを地面の上に生成して調整もできます.
今回はビルを生やさないので, MapLayersのDataSourceはNoneにしてください.
![スクリーンショット 2019-09-09 20.13.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/c92db156-fe87-5b85-3ace-ce095c7e4f56.png)

---
再生すると......![スクリーンショット 2019-09-09 20.15.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/303261/40f1b0e9-ad1c-dd16-9316-ee322b18d318.png)
ジャジャ～ン:wink:, "夢じゃなかった!"

※ここで紹介した方法は[公式のチュートリアル](https://docs.mapbox.com/help/tutorials/create-a-map-in-unity/)を参考にしました. ただ, このチュートリアルはmapboxのバージョンが古いので注意が必要です.

###Tips
AbstractMapの補足説明をします. 公式レファレンスは少しわかりづらいので.

- **AbstractMapのInspectorで設定できる4つの機能**
    - GENERAL：地面やビルなどのGameObjectを生成する位置やタイミングの設定.
    - IMAGE：地面の画像の設定.
    - TERRAIN：地面の高さに関する設定.
    - MAP LAYERS：ビルや山などの生成に関する設定.
- **Colliderの付け方**
    - 地面にColliderをつけたい場合は, TERRAINのAddColliderにチェック.
    - ビルにColliderをつけたい場合は, MapLayersのFEATURES-Modeling-ColliderTypeで選択.
- **ビルの見た目を変える方法**
    - MapLayersのFEATURES-Texturing-StyleTypeで建物のTextureを変更できる.
- **プレイヤーの位置に応じて, 地面やビルを生成する方法**
    - GENERALのExtentOptionsをRangeAroundTransformに変更して, プレイヤーを指定する.

#mapboxを選んだ理由
他にもmapboxと同様に, 実際の地図からUnityで山やビルを生成するサービスがあります.
ここでは, なぜmapboxを利用しているかについて書きます.
mapbox以外のサービス

- [GoogleMapsPlatform](https://cloud.google.com/maps-platform/gaming/?hl=ja)：きれいで使いやすいが, 無料版ではマンハッタンのみ利用可能. 完全版(有料)は個人で利用することができないので断念.
- [WRD3D](https://www.wrld3d.com/)：アプリの利用者が1000人以下なら無料で利用できるが, 日本では東京の地図くらいしか使えないので断念.
- [GoMap](https://assetstore.unity.com/packages/tools/integration/go-map-3d-map-for-ar-gaming-68889)：デモ版がなく有料版しかない. 公式レファレンスはわかりやすいが, いきなり有料版は怖いので断念.


mapboxは月のアクティブユーザーが25,000人までなら無料([価格表](https://www.mapbox.com/pricing/?utm_medium=blog&utm_source=mapbox-blog&utm_campaign=blog|mapbox-blog|pricing|new-pricing-46b7c26166e7-19-05&utm_term=pricing&utm_content=new-pricing-46b7c26166e7))で日本中の地図も使える!
ということで, mapboxを利用しています.

コメント頂けると, 嬉しいです.