【Unity】mapbox for Unity を使ってみる

OverView

mapbox for Unityを使ってUnity上に地図を表示するまで
Androidで動作させようとしている方はAPI Level 24(Android7.0)以上でしか投稿日現在,動作しないので注意してください.iOSに関してはarm64アーキテクチャ向けにビルドできん…なぜ

Environment

  • Windows10
  • Unity 2018.2.14f1
  • mapbox sdk v2.0.0

Method

mapboxのアカウントを作成

https://www.mapbox.com からmapboxのアカウントを作成する.アカウントが作成できたらダッシュボードページからトークンが入手できるのでコピペしておく.

赤枠の中にトークンが通常表示されます.

mapbox for UnityのsdkをDL

unitypackageファイルでまとめられているのでhttps://www.mapbox.com/install/unity/ からDLします.

Unityのプロジェクトを作成しunitypackageをimport

mapbox-unity-sdk_vxxx.unitypackageをUnityにドラッグアンドドロップするなりしてインポートします.

mapbox for Unityの初期設定

インポートが完了すると同時に,初回セットアップの画面が表示されます.この画面にさっき入手したトークンをペーストしSubmitを押します.

Submitを押したあとVaild(承認)が表示されたら自分のアカウントでmapboxを使う初期設定は完了です.
Vaildが表示されたあとLocation-based GameやCity Simulatorなど色々面白そうなボタンがあるのですが興味ある方は押して見てください.
サンプルが起動して「こんなことも簡単にできるのか~」と面白くなってくると思います. デモを見なくてもええよって方はVaildと出たウィンドウの右上のxボタンを押してしまいましょう.

新規Sceneにmapを表示してみる

いつもの画面に戻ったら,マップの作成をしましょう.
まず新規シーンを作成をEmptyObjectを作成,”Map”など分かりやすい名前に変更します. 作成後,Abstract Mapスクリプトをアタッチします.

Abstract Mapがアタッチできたら再生ボタンを押してみてください.
地図の表示か完了しました.簡単でしたね.しかしGameビューの方から確認できるかと思いますが,カメラの位置を調整していないため,よくわからんものが写っているかと思いますので調整をしていきます.

カメラの調整

地図をちゃんとした向きに表示するにはいろんなやり方があるのですが,今回はUIとして地図を表示するのではなく空間上にPlaneとして配置する方法で行きます. 現在地図のtransform.positionは(0, 0, 0)です.最初に作成したEmptyObjectの座標と一緒です.その地点から上に向いているのでカメラを下向きにして全体が映るようにしてみます.
インスペクターからカメラの設定を変更していきます.
  • Transformコンポーネントのpositionを(0, 100, 0)に変更
  • TransformコンポーネントのRotationを(90, 0, 0)に変更
  • Projection を Orthographicに変更
  • Size を 90 に変更
  • Clipping PlanesのNearを0.01に.Farを200に変更
で再生してみてください.以下のように地図が表示されるかと思います. 今回モバイルで地図を表示することをなんとなく想定してGameViewの解像度は1080×1920に設定してあります. 画面を横長にしたい,解像度はもっと高いほうが良いというかたはカメラのpositionとsizeを適宜調整してみてください.

マップのマテリアル変更

ここで気になる方も多いかもしれませんが,GameViewのマップを見ると分かる通り,Directional Lightの光を受けてマップがテカっていますね. わざと演出としてそのほうがいいという方は大丈夫なのですが,調整方法を書きます.
  • 新規マテリアルを作成します.今回名前はMap_matにしました.
  • マテリアルのシェーダーを “Unlit/Texture” に設定します.
  • 作成したマップのオブジェクトにアタッチされたAbstract MapのOthersの中にあるTile Materialに作成したMap_matをアタッチします,
これで再生してみるとテカらなくなりました. 原理は簡単ですね.マップの表面のライティングを行ってしまっていたので,Unlighting Shaderに変えただけです.

マップの場所を変えてみる

Abstract MapコンポーネントのnLatitude Longitudeの値を”35.681236, 139.767125″に変更して再生をしてみてください.
日本が表示されました. ちょっと拡大してみましょう.Abstract MapコンポーネントのZoomの値を15にしてみてください.

マップが拡大されました.また,緯度 35.681236,経度 139.767125は東京駅でした.
Abstract Mapの値を変更するだけでマップは拡大率を変更でき,表示する場所も変更できることがわかりました. 次mapbox for Unityの記事を書くときはスクリプトからこれらの値を制御したりする方法を書きます.

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です