Unity のメモ with mapbox (2)

間が空いたけど、前回の続き。

準備

前回メモしたように、事前に mapbox のアカウントを作り、Unity のプロジェクトにインポートして、アクセストークンを設定する。

www.toyfish.blog

地図を追加してみる

チュートリアルに、地図の置き方が書かれている。

docs.mapbox.com

Assets > Mapbox > Prefabs にある Map という名前の prefab を scene に追加する。Scene ビューには何も見えないが、ゲームを開始すると、何かしら地図っぽいものが表示される。

f:id:sardine:20210611214752p:plain
地図らしきもの

角度的にすごく見づらいので、ゲーム実行中のまま Scene ビューに戻ってみると、確かに地図なんだなということがわかる。

f:id:sardine:20210611215042p:plain
確かに地図らしきもの

ギズモで角度を変えることもできる。もしくは、ゲーム実行中のまま、Main Camera の Transform をいじれば、Game ビューに反映される。例えば Position を X: 0, Y: 50, Z: -10 に、Rotation を X: 90, Y: 0, Z: 0 にしたのが次の画像。

f:id:sardine:20210611220011p:plain
ほんとに地図だ

表示されてる地名で検索したところ、サンフランシスコの地図らしい。

場所を変えてみる

Hierarchy ビューで、先ほど追加した Map を選択して、Inspector を見ると、Abstract Map (Script) というコンポーネントがある。Abstract なのにインスタンス化できているのが、なんか不思議な感じがする。

チュートリアルによれば、ここを色々変えることで地図の範囲や見た目をカスタマイズできるようだ。

f:id:sardine:20210611220549p:plain:w300

General > Location で、Search ボタンを押して地名を入力すると、それっぽい場所が検索される。いくつか候補が出るので、選択すれば、その地点を中心とした地図が表示される。

f:id:sardine:20210611221053p:plain:w300

試しに「品川駅」を検索してみた。

f:id:sardine:20210611222001p:plain
次は品川~ 次は品川~

おお、ちゃんと品川駅周辺の地図だ。日本語と英語が混じってるのは、なんでかな。

地図の種類を変える

チュートリアルによると、Abstract Map の Image > Data Source で、地図の種類を変えられるらしい。

デフォルトでは "Mapbox Street" で、例えば "Mapbox Dark" にすると、ダークモード的な地図になった。

f:id:sardine:20210611222737p:plain
闇に隠れて生きる

さらに、"Mapbox Satellites" にすると、衛星写真になる。

f:id:sardine:20210611222937p:plain
リアル上から目線

立体的にする

Abstract Map の Terrain > Data Source で、Elevation Layer Type をデフォルトの "Flat Terrain" から "Terrain With Elevation" にすると、平面の地図ではなく、高度に応じて盛り上がった立体地図になるようだ。

品川駅ではよくわからなかったので、「高尾山」で検索して出てきた「高尾山頂」に変更。Main Camera も、Position を X: 200, Y: 200, Z: -200 に、Rotation を X: 45, Y: 0, Z: 0 にしてみた。

f:id:sardine:20210611223916p:plain
天狗のしわざ

やった。これは確実に、僕自身のスキルではまったく描けない画像なので、まさに Unity と mapbox のおかげといえる。

引いてみる

チュートリアルにはこの後、マンハッタンの地図の上にビルを立体的に描画させるという手順が説明されているが、これはできなかった。チュートリアルでは Abstract Map に Vector という設定があることになっているのに対して、僕の環境では Vector がなく、代わりに Map Layers というのがある。

ただ、その中で、縮尺の変え方があったので、日本全体を表示させてみることにした。

日本の中心がどこなのかわからなかったのでググったところ、複数の市町村が日本の中心を自称しているとあった。そのうち、北海道から九州までを 1 つの円に収めたときの中心が群馬県渋川市にあるということだったので、General > Location > Search で検索して、「Japan, Gunma渋川市」というのを選んでみた。

General > Zoom をデフォルトの 15 から 4 に変更し、Main Camera の Position を X: 0, Y: 80, Z: -60 に、Rotation を X: 60, Y: 0, Z: 0 にした結果がこちら。

f:id:sardine:20210611232015p:plain
ジパング

高度が反映されているのかいまいちわからないけど、一応北海道から沖縄までを表示させることができた。