## はじめに
Unityにおいて、Arduino等のマイコンをコントローラーとして利用する事例は多いと思います。
私も同じようなことをやりたいと考え、最新版のArduinoであるArduino Uno R4 Minimaとのシリアル通信の検証を行いました。

## 結論
UnityとArduino Uno R4 Minimaとのシリアル通信は実現できませんでした。
代わりにArduino Nanoの最新版であるArduino Nano Everyを用いた場合、従来のコードでシリアル通信できました。

## やりたいこと
Arduinoに接続したジャイロセンサ（BMX055）の値をシリアル通信でUnityに送ります。Unity側でジャイロセンサの姿勢を用いてゲームを実装します。
今回はArduino-Unity間の通信のみにフォーカスを当てます。
使用するArduinoには最新のArduino Uno R4 Minimaを何も考えずに採用しました。これが誤りでした。

## 実装

### Unity
バージョン: 2021.3.36f1

Unity側の下の記事を参考にさせていただきました。感謝いたします。

[https://qiita.com/yjiro0403/items/54e9518b5624c0030531](https://qiita.com/yjiro0403/items/54e9518b5624c0030531)

一応ソースコードを貼っておきます。
Serial通信の実装部分であるSerialHandlerとそれを呼び出すSerialReceiverがあります。
両方ともコンポーネントにアタッチした上で、SerialReceiverのpublicにSerialHandlerをアタッチします。

```cs:SerialHandler.cs
using UnityEngine;
using System.Collections;
using System.IO.Ports;
using System.Threading;

public class SerialHandler : MonoBehaviour
{
    public delegate void SerialDataReceivedEventHandler(string message);
    public event SerialDataReceivedEventHandler OnDataReceived;

    public string portName = "/dev/tty.usbmodem101";
    public int baudRate = 9600;

    private SerialPort serialPort_;
    private Thread thread_;
    private bool isRunning_ = false;

    private string message_;
    private bool isNewMessageReceived_ = false;

    void Awake()
    {
        Open();
    }

    void Update()
    {
        if (isNewMessageReceived_) {
            OnDataReceived(message_);
        }
    }

    void OnDestroy()
    {
        Close();
    }

    private void Open()
    {
        serialPort_ = new SerialPort(portName, baudRate, Parity.None, 8, StopBits.One);
        serialPort_.Open();

        isRunning_ = true;

        thread_ = new Thread(Read);
        thread_.Start();
    }

    private void Close()
    {
        isRunning_ = false;

        if (thread_ != null && thread_.IsAlive) {
            thread_.Join();
        }

        if (serialPort_ != null && serialPort_.IsOpen) {
            serialPort_.Close();
            serialPort_.Dispose();
        }
    }

    private void Read()
    {
        while (isRunning_ && serialPort_ != null && serialPort_.IsOpen) {
            try {
                if (serialPort_.BytesToRead > 0) {
                    message_ = serialPort_.ReadLine();
                    isNewMessageReceived_ = true;
                }
            } catch (System.Exception e) {
                Debug.LogWarning(e.Message);
            }
        }
    }

    public void Write(string message)
    {
        try {
            serialPort_.Write(message);
        } catch (System.Exception e) {
            Debug.LogWarning(e.Message);
        }
    }
}
```

```cs:SerialReceiver.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class SerialReceiver : MonoBehaviour
{
  public SerialHandler serialHandler;
  public RotateController rotateController;

  void Start()
  {
    serialHandler.OnDataReceived += OnDataReceived;
  }

  void Update()
  {
  }

  //受信した信号(message)に対する処理
  void OnDataReceived(string message)
  {
    try {
	Debug.Log("received: " + message);
    } catch (System.Exception e) {
        Debug.LogWarning(e.Message);
    }
  }
}
```

### Arduino
テスト用のシリアル通信のコードです。「Hello from Arduino!」と１秒おきに送信します。

```c:serialTest.ino
void setup() {
  Serial.begin(9600);
}

void loop() {
  Serial.print("Hello from Arduino!");
  Serial.println("");
  delay(1000);
}
```

## 検証
ArduinoとUnityの通信速度とシリアルポートが一致していることを確認します。
Unityを実行します。

### Arduino Uno R4 Minima
まずはUno R4 Minimaから。

はい。

うんともすんとも言いません。
シリアルポートは認識しているようなのですが、実際のデータを受信できていないようです。

下の記事を見させていただいたのですが、Uno R4 Minimaは以前のArduinoとは異なる部分が多いようです。
シリアル通信のプロトコルにも影響があるのではと仮説を立てました。

[https://note.com/electric_mecha60/n/nbee952a948a9](https://note.com/electric_mecha60/n/nbee952a948a9)

### Arduino Nano Every
昔ながらのArduino Nanoの最新版Nano Everyで試してみます。

なんということでしょう。いとも簡単にシリアル通信できたではありませんか。

## おわりに
今回は、Arduino Uno R4 MinimaとUnityの間でのシリアル通信を試みましたが失敗に終わりました。
結論としては失敗の原因は分かっておらず、R4 MinimaとUnity特有の仕様が影響しているからだと考えられます（Arduino IDEのシリアルモニタでは確認できる）。
これに関する研究は継続しますが、一旦は Arduino Nano Everyへの乗り換えという形で進めようと思います。

最後までご閲覧いただきありがとうございました。

【Unity】Arduino Uno R4 Minimaとシリアル通信しようとしたらできなかった話

## はじめに
本ブログをNuxtからNextにリプレイスしました。

その中で、next/linkのリンクから、動的ルーティングのページに遷移したときに、スクロール位置が本当は一番上に戻って欲しいのに、中途半端な位置になってしまうバグにハマりました。

自分へのメモも兼ねて、記事に残します。

## 結論
cssの中にoverflow系のものがあれば、消してみましょう。

## next/link
next/linkは、Next.jsにおけるページ遷移のためのリンクを提供する機能です。

このPropsには、scrollなるものが含まれおり、これをtrueにすると、ページ遷移後に一番上までスクロールしてくれます

そもそもReactでは、DOMを書き換えてページを更新しているために、何もしなければ、スクロール位置はそのままです。
なので、わざわざ一番上までスクロールしてもらう必要があるのですね。

しかし、このPropsのscrollは、デフォルトでtrueらしいのです。なぜ、一番上までスクロールしてくれないことがあるんだああああ

## 解決法
ネットの海をさまようこと２時間、
NextのGithubのIssueに答えはありました。やはり公式は神なのか。
[https://github.com/vercel/next.js/issues/7594](https://github.com/vercel/next.js/issues/7594)

overflow系のcssプロパティがついている要素で、ページがラッピングされていると、heightを正しく計算できないために、スクロールに失敗するということでした。

## daisyui
vscodeの検索欄に「overflow」と入力しました。検索結果は０件でした。
なんとか探しまわった結果、tailwindベースのdaisyuiが犯人であることがわかりました。

今回はdaisyuiを使って、スマホ用のナビゲーションドロワーを実装していたのですが、その中に```overflow-y: auto```の文字が。。

泣く泣くdaisyuiでの実装から、tailwindだけでの実装に書き直したのでした。

## おわりに
もう一生解決できないのではないかと、あきらめかけていました。
でも最後の砦はやっぱり、Githubなのですね。

問題解決能力がちょっとだけ上がった気がしました。


next/linkから動的ルーティングのページに遷移したときに、スクロール位置が一番上じゃないバグへの対処法を説明します。

【Next.js】next/linkから動的ルーティングのページに遷移したときに、スクロール位置が一番上じゃないバグへの対処法

## はじめに
今回は、Google製のML系ライブラリであるMediapipeのUnityプラグインを使って、指認識を試してみたいとおもいます。
## Mediapipe
カメラからの入力画像をAI画像処理して、物体認識や指認識、顔認識ができる、Googleが提供するオープンソースライブラリです。
## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Unity: 2021.3.4f1(SILICON)
- MediaPipeUnityPlugin: v0.10.1

## MediaPipeUnityPluginの導入
### Githubリポジトリのクローン
下のURLのMediaPipeUnityPluginのGithubリポジトリをクローンしてきまししょう。

[https://github.com/homuler/MediaPipeUnityPlugin](https://github.com/homuler/MediaPipeUnityPlugin)

### 一度Unityで開いてみる
クローンしたディレクトリをUnityで開いてみましょう。
僕は、ここでパッケージが足りてない系のエラーがめっちゃ出ました。

### パッケージの追加
MediaPipe関係のパッケージはリポジトリに含まれていないので、自分で追加します。
これまでは、自分でパッケージをビルドする必要があったようなのですが、最近のMediaPipeUnityPluginのリリースにビルド済みのパッケージを含めていただいているようなので、ご好意に甘えてこちらを拝借します。

[https://github.com/homuler/MediaPipeUnityPlugin/releases/tag/v0.10.1](https://github.com/homuler/MediaPipeUnityPlugin/releases/tag/v0.10.1)

最新のリリースから```com.github.homuler.mediapipe-0.10.1.tgz```をダウンロードしてきます。400MBくらいありました。

解凍すると```package```ディレクトが展開されますので、その中身をコピーしてください。
```Packages/com.github.homuler.mediapipe```内に貼り付けましょう。

## 指認識
```Assets/MediaPipeUnity/Samples/Scenes/Hand Tracking/Hand Traking```を開いて実行してみましょう。
下の動画のように、指の上に認識された形状がオーバーレイされて表示されると思います。
フレームレートもぬるぬるですね。
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/MHCsjrRvhfY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

## おわりに
今回は、MediapipeUnityPluginをインストールして、指認識のサンプルを動かしてみました。
M1 Macでもすんなり動いてくれたので、安心しました。
めちゃめちゃ簡単なので、皆さんも試されてみてください。


Google製のML系ライブラリであるMediapipeのUnityプラグインを使って、M1 Macで指認識を試してみました。

【Unity】MediaPipeUnityPluginを使って超簡単に指認識をM1 Macで試す

## はじめに
今回は、Google Open Images Dataset V6のデータセットを```oidv6```というPythonのライブラリを使用して、簡単にダウンロードする方法をご紹介します。

## Google Open Images Dataset V6
Google Open Images Dataset V6は、Googleが作成している物体検出向けの学習用データセットです。Yolo等のためのバウンディングボックスの他に、セマンティックセグメンテーション向けのマスクデータ等も用意されています。

## oidv6のインストール
oidv6は、Google Open Images Dataset V6のデータセットを簡単にダウンロードできるPython
ライブラリです。
早速pipでインストールしましょう。
```bash
pip3 install oidv6
```

## oidv6の使い方
コマンドの使い方は以下の通りです。
```bash
oidv6 downloader en --dataset $(DATASET_DIR) --type_data $(TYPE) --classes $(CLASS_LIST) --limit $(LIMIT) --yes
```
- $(DATASET_DIR): ダウンロード先のディレクトリパスを指定します。
- $(TYPE): 'train', 'validation', 'test'の中から必要なデータのタイプを指定します。
- $(CLASS_LIST): ダウンロードするデータのクラスを指定します。（指定可能なクラスのリスト[https://github.com/DmitryRyumin/OIDv6/blob/master/oidv6/classes.txt](https://github.com/DmitryRyumin/OIDv6/blob/master/oidv6/classes.txt))
- $(LIMIT): 各クラスの画像の枚数を指定します。

## oidv6でデータセットをダウンロードする
今回は、```person```と```ball```クラスのデータをダウンロードしてみます。
画像の枚数を増やすと、めちゃ時間がかかります。
```bash
oidv6 downloader en --dataset './download_repo' --type_data 'train' --classes person ball --limit '5' --yes
```

## おわりに
今回は、PythonライブラリOIDv6を利用して、Google Open Images Datasetからデータセットをダウンロードする方法について説明しました。
皆さまのお役に立てれば幸いです。


Python ライブラリを使って、Google Open Images Dataset V6のデータセットを簡単にダウンロードする方法を紹介します。

【OIDv6】PythonライブラリでGoogle Open Images Dataset V6のデータセットを簡単にダウンロードする

## はじめに
 この記事では、M1 MacにlabelImgをインストールする手順について説明します。
 Yolo用の学習データを弄りたい案件があり、labelImgというアノテーションツールをインストールした時のことです。ちょこっとハマったので今後のために記録を残します。

## labelImg
labelImgは、Yolo等の物体検出のための学習用データ作成を支援するアノテーションツールのひとつです。
Python環境があれば実行できるので、利用者のOS環境に影響されにくいというメリットがあります。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Homebrew: 3.5.2
- Python: 3.9.13
- pyqt@5: 5.15.7
- labelImg: 1.8.6 

## Pythonのインストール
クリーンインストール直後だったので、まずPythonをインストールしました。
```bash
brew install python
```

## pyqtのインストール
pyqtは、PythonでGUIアプリケーションを作成するときに使うライブラリです。
下のコマンドでインストールします。
```bash
brew install pyqt@5
```
ここで少しハマりました。最初は```brew install pyqt5```でインストールしていたのですが、うまくいかず、```pyqt@5```に変更すると成功しました。

## labelImgのインストール
ここまで来ればもう少しです。
pipでlablelImgをインストールします。
``` bash
pip3 install labelImg
```

## labelImgを起動してみる
下のコマンドで簡単に起動できます。
```bash
labelImg
```
![labelimg](//images.ctfassets.net/p6xsvcchdqws/4EJ6oS9p7eqZ6bpMXYZmx/a3d66cdd8a56330cee2a8d4bd1b85735/____________________________2022-06-23_15.57.41.png)
## おわりに
今回は、M1 MacでのlabelImgのインストール手順について説明しました。
labelImgの使用方法については割愛させていただきますが、他のブログ様などをご参照ください。
皆さまのお役に立てれば幸いです。


M1 MacにlabelImgをインストールする手順について説明します。

M1 MacにlabelImgをインストールする方法

## はじめに
今回は、Vuetifyのv-progress-circularを使って、ローディング表示を実装してみます。とっても簡単なので皆さんもやってみてください。

## Vuetify
Vuetifyは、Vue.js用のUIフレームワークです。マテリアルデザインに準拠しているため、きれいなページを簡単に作れます。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- @vue/cli: 5.0.4
- "vue": "^2.6.14",
- "vuetify": "^2.6.0"

## プロジェクトの作成
```bash
vue create .
vue add vuetify
```

## プログラム
```App.vue```を次のように変更します。
```markup
<template>
  <v-app>
    <v-overlay :value="isLoading">
      <v-progress-circular indeterminate size="64" />
    </v-overlay>
  </v-app>
</template>

<script>
export default {
  name: "App",

  data: () => ({
    isLoading: true,
  }),
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
    }, 1000);
  },
};
</script>

```

## 結果
静止画ですが、画像のようなローディング表示が表示されて、1秒後に消えるはずです。
![vuetify-loading](//images.ctfassets.net/p6xsvcchdqws/5cUwahYKnv52iDHMHUvxap/050ff8692bd3b6334d7e63bb078c5cea/____________________________0004-06-07_11.19.56.png)

## おわりに
Vuetifyのv-progress-circularを使えば、簡単にローディング表示を実装できました。皆さまも是非ご活用ください。

Vuetifyのv-progress-circularを使って、ローディング表示を実装してみます

【Vuetify】v-progress-circularを使って簡単にローディング表示を実装する

## はじめに
Unity Physicsのプロジェクトで、下のような警告が出ることがありました。
```bash
The Progressive CPU lightmapper is not supported on Apple silicon, switching to the Progressive GPU lightmapper.
```
この対処法について説明します。

## 対処法
メニューバーから、Window > Rendering > Lightingを開きます。
下の画像のように、Lightmapping settingのLight mapperをProgressive GPU(Preview)変更します。

![m1用ライティング設定](//images.ctfassets.net/p6xsvcchdqws/6dAyRWHPGFDsT5de3zNt0o/bbf2a415e7a550c51816ccb05b8415a5/unity-m1-lighting.png)

## おわりに
今回は、M1 Mac(Apple Silicon)で発生した警告の解決法を説明しました。
みなさまのお役に立てれば幸いです。


Unity Physicsのプロジェクトで、下のような警告が出ることがありました。 ```bash The Progressive CPU lightmapper is not supported on Apple silicon, switching to the Progressive GPU lightmapper. ``` この対処法について説明します。

【Unity】M1 Macで"The Progressive CPU lightmapper is not supported on Apple silicon, switching to the Progressive GPU lightmapper."と警告が出たときの対処法

## はじめに
[前回の記事](https://haruton3301.com/articles/unity-mapbox-3d "https://haruton3301.com/articles/unity-physics-demo")でUnity Physicsの公式デモを触ってみました。

今回はUnity Physicsの真価を見るために、大量のオブジェクトを準備して物理演算してみようと思います。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Unity: 2021.2.16f1(SILICON)

## 参考動画
Youtubeに、Unity Physicsを使ってキューブのタワーを召喚して、それを崩すような動画がありました。
動画の検証環境は、i7-8700k、GTX1080tiというかなり高スペックなPCです。

僕のM1 Macでは、どのくらいのオブジェクト数、FPSで処理できるか試してみたいと思います。
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/U6idEdIEsa0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

## プロジェクトの準備
[前回](https://haruton3301.com/articles/unity-mapbox-3d "https://haruton3301.com/articles/unity-mapbox-3d")使用したUnity Physicsのデモプロジェクトを使いますので、Unityで開いてください。

## SceneとPrefabの準備
### Sceneを作成する
適当にSceneを作りましょう。
### Planeを配置する
HierarchyからPlaneを配置します。
Scaleは(50,1,50)に設定しました。

次のようにコンポーネントを設定します。
- Convert To Entityを追加
- Physics Shapeを追加
- Mesh Colliderを削除

### キューブのPrefabを作成する
まず、HierarchyからCubeを配置します。

次のようにコンポーネントを設定します。
- Convert To Entityを追加
- Physics Bodyを追加
- Physics Shapeを追加
- Box Colliderを削除

最後にキューブをPrefabディレクトリにドラッグして、プレハブを生成します。
## キューブをジェネレートするスクリプトを書く
```TowerGenerator```という名前でスクリプトを作成します。
下のプログラムを入力してください。
```csharp
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Unity.Entities;
using Unity.Transforms;
using UnityEngine.UI;

public class TowerGenerator : MonoBehaviour
{
    public GameObject cubePrefab;
    public int length;
    public int width;
    public int height;

    private Entity _cubeEntity;
    private EntityManager _entityManager;
    private BlobAssetStore _blobAssetStore;
    private GameObjectConversionSettings _settings;

    void Start()
    {
        _entityManager = World.DefaultGameObjectInjectionWorld.EntityManager;
        _blobAssetStore = new BlobAssetStore();
        _settings = GameObjectConversionSettings.FromWorld(World.DefaultGameObjectInjectionWorld, _blobAssetStore);
        _cubeEntity = GameObjectConversionUtility.ConvertGameObjectHierarchy(cubePrefab, _settings);

        for (int h = 0; h < height; h++)
        {
            for (int w = 0; w < width; w++)
            {
                for (int l = 0; l < length; l++)
                {
                    if (l != 0 && w != 0 && l != length - 1 && w != width - 1)
                    {
                        continue;
                    }

                    Entity cube = _entityManager.Instantiate(_cubeEntity);
                    Translation cubeTranslation = new Translation
                    {
                        Value = new Unity.Mathematics.float3(l, h + 0.5f, w)
                    };
                    _entityManager.SetComponentData(cube, cubeTranslation);
                }
            }
        }
    }

    private void OnDisable()
    {
        _blobAssetStore.Dispose();
    }

    // Update is called once per frame
    void Update()
    {

    }
}
```

## スクリプトのアタッチ
作成したスクリプトを、シーン上のどのオブジェクトでもいいのでアタッチしてください。
キューブのプレハブをセットするのと、生成するタワーの大きさを設定します。
一旦全て10でやってみます。
## 実行
動画のように、キューブのタワーが生成されて崩れる様子が見れました。
<div class="youtube">
<iframe width="560" height="315" src="https://www.youtube.com/embed/SiWt40KR588" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

## キューブの数を増やす
タワーの大きさのパラメータを変化させて、実行時のFPSを測ります。
FPSの表示には、[Lite FPS Counter](https://assetstore.unity.com/packages/tools/integration/lite-fps-counter-probably-the-world-s-fastest-fps-counter-132638)というアセットを使用しました。

動画ではフレームレートが揃えられて滑らかに動いていますが、実行時には割とカクカクしています。

### パラメータを全て50にした場合
フレームレートは20FPS前後でした。
[動画はこちら](https://www.youtube.com/embed/-2tSg-Te7gg)

### パラメータを全て100にした場合
動画のような感じです。フレームレートは8FPS前後でした。
[動画はこちら](https://www.youtube.com/embed/76hOlJzvRT4)

## おわりに
今回は、UnityPhisicsを使って大量のオブジェクトの物理演算をしてみました。

M1 MacでもFPSこと下がりましたが、数万個のオブジェクトの物理演算ができるのはDOTSの恩恵だなと思います。
リアルタイム演算は難しいかもですが、動画のためにレンダリングする等の用途であれば、十分に使えそうです。

みなさまもUnity Physicsを応用されてみてください。

Unity Physicsの真価を見るために、大量のオブジェクトを準備して物理演算してみようと思います。

【DOTS】Unity Physicsで大量のオブジェクトの物理演算を試す

## はじめに
[前回の記事](https://haruton3301.com/articles/unity-mapbox-3d "https://haruton3301.com/articles/unity-mapbox-3d")でUnityにマップを召喚しました。

今回はその続きで、マップ上の任意の緯度経度の座標にオブジェクトを配置してみたいと思います。
マップを配置したところからスタートするのでお済みでない方は、先にそこまで進めてみてください。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Unity: 2021.2.16f1(SILICON)
- mapbox-unity-sdk: v2.1.1

## プロジェクトの準備
[前回](https://haruton3301.com/articles/unity-mapbox-3d "https://haruton3301.com/articles/unity-mapbox-3d")のプロジェクトを使いますので、Unityで開いてください。

## 緯度経度をワールド座標に変換する
### スクリプト
まず、スクリプトを追加しましょう。名前は`MapboxLocation`とします。
緯度経度は、長崎市役所の座標にしています。
```cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Mapbox.Unity.Utilities;
using Mapbox.Unity.Map;
using Mapbox.Utils;

public class MapboxLocation : MonoBehaviour
{
    public AbstractMap map = null;

    void Start()
    {
        map.MapVisualizer.OnMapVisualizerStateChanged += (state) =>
        {
            if (state == ModuleState.Finished) {
                double lat = 32.7503353; // 緯度
                double lng = 129.8777355; // 経度

                Vector2d latlng = new Vector2d(lat, lng);

                Vector3 pos = map.GeoToWorldPosition(latlng);
                Debug.Log(pos);
            }
        };
    }

    void Update()
    {

    }
}
```

### スクリプトをアタッチ
スクリプトを適当なオブジェクトにアタッチして、マップのコンポーネントを入れます。

![マップボックスの緯度経度の設定](//images.ctfassets.net/p6xsvcchdqws/4fKIeXhXGmMXsiBF31bKA2/b9be000d23744a22ee41ead2ac7659f4/mapbox_location_set.png?fm=webp&q=50)

### 結果
実行すると画像のようにワールド座標を取得できました。

![mapbox-location-debug](//images.ctfassets.net/p6xsvcchdqws/5Bvb1hoZnahv7GJHJYJ312/3790e60187b2b94af2aab16e84957757/mapbox-location-debug.png?fm=webp&q=50)

## オブジェクトを配置する
### Cubeを配置する

検証用のオブジェクトを配置します。Sphereでも何でもいいですが、ここではCubeにします。

![キューブ（マップボックスローケーション）](//images.ctfassets.net/p6xsvcchdqws/4U4G4fZ19mwaXWB86h3Pvh/cc6d96fca688cb731fd3b419154f6061/mapbox-location-cube.png?fm=webp&q=50)

### スクリプトの改造

単純にCubeのPositionにワールド座標を代入するだけです。
コンパイルが済んだら、Cubeをスクリプトコンポーネントにアタッチしてください。

```cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using Mapbox.Unity.Utilities;
using Mapbox.Unity.Map;
using Mapbox.Utils;

public class MapboxLocation : MonoBehaviour
{
    public AbstractMap map = null;
    public GameObject cube = null;

    void Start()
    {
        map.MapVisualizer.OnMapVisualizerStateChanged += (state) =>
        {
            if (state == ModuleState.Finished) {
                double lat = 32.7503353; // 緯度
                double lng = 129.8777355; // 経度

                Vector2d latlng = new Vector2d(lat, lng);

                Vector3 pos = map.GeoToWorldPosition(latlng);
                Debug.Log(pos);

                cube.transform.position = pos;
            }
        };
    }

    void Update()
    {

    }
}
```

### 結果
y座標をいじってないので埋もれていますが、指定した緯度経度にCubeが配置されていることがわかります。

![結果（キューブ）](//images.ctfassets.net/p6xsvcchdqws/4cPQdYOo7EDL3MTYp6uP8v/d33b70aaed756f263758f13e403fd5b6/mapbox-location-result.png?fm=webp&q=50)

## おわりに
Mapbox Unity SDKを使って、マップ上の指定した緯度経度にオブジェクトを配置してみました。
今回はCube１個だけでしたが、複数のオブジェクトに適用することも可能ですので、試してみて欲しいです。

それでは素敵なUnityライフをお過ごしください。

Mapbox Maps SDK for Unityで、マップ上の任意の緯度経度の座標にオブジェクトを配置してみたいと思います。

【Unity】Mapbox SDKでマップ上の任意の緯度経度の座標にオブジェクトを配置する

## はじめに
今回は、Mapbox Maps SDK for Unityというパッケージを使って、Unity上に3D地形マップを召喚してみます。
Mapboxは、さまざまなプラットフォームで利用できるマップAPIです。Google Mapsの有料化に伴って、近年勢いを増しているナウなマップAPIです。

そんなMapboxですが、なんとUnityにも対応しています。これは試してみないと！と思いました。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Unity: 2021.2.16f1(SILICON)
- mapbox-unity-sdk: v2.1.1

## 事前準備
1. Mapboxのアカウントを[作成](https://www.mapbox.com/ "Mapbox公式")
2. Mapboxのアクセストークンを取得
3. mapbox-unity-sdkのパッケージを[ダウンロード](https://www.mapbox.com/install/unity/ "ダウンロードページ")
4. Unityで空の3Dプロジェクトを作成
## パッケージをインポートする
ダウンロードしたパッケージのファイルをダブルクリックして開きます。

![mapboxパッケージインポート（間違い）](//images.ctfassets.net/p6xsvcchdqws/2EnUnfn6RQFHI6tclHkRhS/02467d49038bace8650fd5758afe5564/mapbox_import_first.png?fm=webp&q=50)

と、このままインポートしたいところですが、エラーになります！

### エラー

```bash
Assets/GoogleARCore/SDK/InstantPreview/Scripts/InstantPreviewManager.cs(32,23): error CS0234: The type or namespace name 'SpatialTracking' does not exist in the namespace 'UnityEngine' (are you missing an assembly reference?)
Assets/GoogleARCore/SDK/Scripts/ARCoreBackgroundRenderer.cs(43,17): error CS0246: The type or namespace name 'ARBackgroundRenderer' could not be found (are you missing a using directive or an assembly reference?)
Assets/UnityARInterface/ARRemote/Scripts/ARRemoteEditorInterface.cs(40,17): error CS0246: The type or namespace name 'ARBackgroundRenderer' could not be found (are you missing a using directive or an assembly reference?)
Assets/UnityARInterface/Scripts/ARKitInterface.cs(26,17): error CS0246: The type or namespace name 'ARBackgroundRenderer' could not be found (are you missing a using directive or an assembly reference?)
Assets/UnityARInterface/Scripts/ARCoreInterface.cs(51,17): error CS0246: The type or namespace name 'ARBackgroundRenderer' could not be found (are you missing a using directive or an assembly reference?)
```

なんかARうんぬんのエラーが。。。

### 解決方法

パッケージをインポートするときに、ARっぽいモジュールを全て無効にします。

![mapboxパッケージインポート（正解）](//images.ctfassets.net/p6xsvcchdqws/4h0S0vQaqhJCK9YqmHxkDJ/6ee003e5b5650e1e966959f5da6e1c94/mapbox_import_second.png?fm=webp&q=50)

MapboxでARしたかった方すみません。根本的な解決方法はまた調査します。。

## セットアップ

インポート完了後、セットアップ画面が立ち上がります。
Mapboxのアクセストークンを入力欄に入れてSubmitをクリックしましょう。

設定が終わったらセットアップ画面は閉じてOKです。

![マップボックスのセットアップ](//images.ctfassets.net/p6xsvcchdqws/6I4gWVzzEUOJqJZmpjr9Vu/2fcba7a6d02b347c12a33131422ca22b/mapbox_setup.png?fm=webp&q=50)

## 普通のマップを召喚する
シーンは、元からある`Scenes/SampleScene`を使います。

最初に`Mapbox/Prefabs/Map`をシーンにドラッグして、プレハブのインスタンスを生成しましょう。

### 設定
マップの各種設定をしていきます。
#### General > Location
緯度経度を設定します。フォーマットは`緯度,経度`です。ここでは、長崎駅の`32.750297,129.870348`　にしました。
#### General >Zoom
ズームの度数です。ここでは、`13`にしました。
#### General >Extent Options, West, North, East, South
マップの広さです。ここでは、Extent Optionsをデフォルトの`Range Around Center`、東西南北それぞれを`5`にしました。
#### Image > Data Source
マップの見た目を変えられます。ここでは、`Mapbox Satellite`にしました。

現状のシーンを確認してみると、こんな感じになってます。

![マップボックスの例（平面）](//images.ctfassets.net/p6xsvcchdqws/4kbWvGE1gbGoan6he8pHPk/ea98d8b049615aeeea58cb101ef03442/mapbox_planemap.png?fm=webp&q=50)
## 3D地形マップを召喚する
### 設定
ここから地形を描画するように設定していきます。
#### Terrain > Elevation Layer Type
`Terrain With Elevation`に設定します。他にもLow Polyバージョン等も設定できます。
#### Terrain > Exggeration Factor
地形の標高の縮尺です。`1`に設定しました。
#### Terrain > Others > Sample Factor
サンプル数です。大きくする程、精度が高くなります。ここでは、`120`に設定しました。

下の画像のように、実際の地形を反映した３D地図を表示できました。

![mapbox_3dmap](//images.ctfassets.net/p6xsvcchdqws/3bhHX0m4chemVSf0G1n6nO/b1f13f32a9c146b03e22f981c7146e07/mapbox_3d_map.png?fm=webp&q=50)
### コライダーで当たり判定も追加できる
`Terrain > Add Collider`でマップにコライダーを追加できます。

こんな感じで、ボールが当たっているのがわかると思います。

![mapboxコライダー](//images.ctfassets.net/p6xsvcchdqws/3dXXfU9FxKoqzAjJaXjbue/ede0feca7352430392c4ab70585f77b5/movie_001.gif)
## おわりに
今回は、MapboxのUnity SDKを使って３D地形マップを召喚してみました。

コライダーも使えることから、かなり色々な応用ができると思います。
是非ゲーム開発などにご活用ください。

Mapbox Maps SDK for Unityというパッケージを使って、Unity上に3D地形マップを召喚してみます。

【Unity】Mapbox Maps SDK for Unityで3D地形マップを召喚する

## はじめに
近頃DOTSがアツいですね。DOTSとは、Unityの次世代基盤とされるデータ指向型のテクノロジースタックです。

今回はDOTS上で動く物理エンジンであるUnity Physicsについて、公式が用意したサンプルプロジェクトをさわってみたいと思います。

## 検証環境
- 機種: MacBook Air(m1)
- OS: MacOS Monterey(12.3.1)
- メモリ: 8GB
- Unity: 2021.2.16f1(SILICON)

## サンプルプロジェクトの準備
Unity-TechnologiesのGithubリポジトリから、ECSのサンプル集リポジトリをクローンします。
https://github.com/Unity-Technologies/EntityComponentSystemSamples

クローンしたディレクトリ内の`UnityPhysicsSamples`ディレクトリをUnityで開きます。

## エラー発生
`Assets/Demos/1. Hello World`ディレクトリ内の、シーン`1a. Hello World`を開いて実行してみます。

![physics_miss](//images.ctfassets.net/p6xsvcchdqws/jzapjXrKMAKIufhQwJWS7/ad1b4e107040893a6c0d2d4f25958a20/physics_miss__1_.gif)

あれれ。。オブジェクトが床をすり抜けてしまいました。
何が正解かも分からないですが、間違いなく何かおかしいですよね。

コンソールを確認してみると。。

![Unity Physics エラーコンソール](//images.ctfassets.net/p6xsvcchdqws/72987Jh1LdMeiSmVMQ7QNU/4cbb5f8f90d04d8693af0d72a9bec5a5/unity_physics_error_console.png?fm=webp&q=50)

```js
System.IndexOutOfRangeException: Index {0} is out of range of ‘{1}’ Length.
This Exception was thrown from a job compiled with Burst, witch has limited exception support.
```
Index out of rangeみたいなエラーがいっぱい。。

## 解決方法
ネットの海をさまよって１時間半、ついに解決方法が載ってるサイトが見つかりました。
https://forum.unity.com/threads/2021-2-8f1-broke-asdeferredjobarray-and-deferred-jobs.1225635/#post-7815393

こちらのUnityのフォーラムです。tertleさんという方が方法を示されていたのですが、それはもう彼への賞賛の嵐でした。
みんなこのエラーで詰んでたんですね。。
### 手順
1. `Library/PackageCache/com.unity.collections@0.15.0-preview.21`ディレクトリをコピーして、`Packages`ディレクトリ内にペーストします。
1. ペーストした`com.unity.collections@0.15.0-preview.21`ディレクトリ内の`Unity.Collections/NativeList.cs`をエディタで開いてください。
1. `NativeList.cs`の599行目の`Allocator.None`を`Allocator.Invalid`に変更します。

以上です！

## 成功
先ほどはオブジェクトがすり抜けてしまっていましたが、再度実行してみると。。

![unity_physics_success](//images.ctfassets.net/p6xsvcchdqws/7ixV6d4YzIPTTrPFneQkdT/aabc3c0ff6a1bb2af4d1533a7b90e419/movie_004.gif)
今度はオブジェクトがすり抜けませんでしたね。成功です。

## おわりに
思わぬエラーに遭遇しましたが、ネットコミュニティの力をお借りして解決できました。改めて感謝申し上げます。

Unity Physicsのデモは、上に登場したHello Worldだけでなく、他にもいくつか入っています。ここでは詳細まで紹介しませんが、皆さんの方で試してみてください。

それでは素敵なDOTSライフをお過ごしください。


DOTS上で動く物理エンジンであるUnity Physicsについて、公式が用意したサンプルプロジェクトをさわってみました。

記事一覧