はじめに

Unity 2019.3 から Game View の新モードの Device Simulator が追加されました。

わざわざ実機にビルドしなくても、 Unity エディタ上で各端末のレイアウトの確認ができるらしいので、早速触ってみました。

調査環境

準備

① Package Manager から Device Simulator をインストールする。

Setup1

② Game ウィンドウ を Simulator に切り替える。

Setup2

③ 以下のように Simulator モードになったら完了です。

Setup3

機能

セーフエリアの表示

  • 右上にある Highlight Safe Area を有効にすると、デバイスごとのセーフエリアを緑色の矩形で視覚化してくれます。

SafeArea

デバイスの変更

  • いくつかのデバイスがデフォルトで対応しています。これらはパッケージのアップデートで今後増えていくようです。

SwitchDevices

デバイスの追加

  • /Library/PackageCache/com.unity.device-simulator@x.x.x-preview/.DeviceDefinitions に (デバイス名).device.json ファイルを追加することで、任意の端末を対応させることができます。

  • 以下は試しに Pixel 3a を追加した画面です。 Pixel 3 の .device.json ファイルを複製してデバイス名を変更しただけなので、中身は Pixel 3 と同じです。

AddDevices

  • 設定項目が結構な量あるので、元々入っている .device.json ファイルを複製して必要な項目だけ変更していくと楽だと思います。
    • このファイルの15 行目辺りから書かれている "Screens" の中身さえ設定すれば UI のレイアウトチェックはできそうな気がします。

画面の回転

  • Screen Settings -> Auto Rotation を有効にすると、画面を回転させた時の挙動を確認することができます。

RotationSetting

  • 右上の Rotate で時計回り、反時計回りに回転できます。

Rotation

Player Settings の上書き

  • Simulator ウィンドウの Player Settings -> Override Player Settings を有効にすると、 Project Settings の Player Settings を上書きすることができます。
    • あくまで、 Simulator 上の設定が上書きされるだけなので、ビルドしたアプリには Project Settings 側の設定が適用されます。
  • Simulator ウィンドウの Player Settings の変更は、上部の Restart ボタンで適用することができます。

OverridePlayerSettings

  • 上の画像の場合は、エディタ上でのみ Auto Rotation になります。

  • UI のレイアウトの確認だけなら Project Settings の方を直接いじればいいんじゃないかな、という気がします。

  • 公式ドキュメント的には、「 Android や iOS のサポートをインストールしていなくても設定を変更できるようにするため」の機能らしいです。

Play モード

  • Simulator も Game ウィンドウなので、 Play モードで実行することができます。

  • デバイスの切替や、画面の回転を行うこともできるので、動的に変化する UI の動作の確認もできます。

PlayMode

スクリプトから触ってみる

コールバック

  • 用意されているコールバックは DeviceSimulatorCallbacks.OnDeviceChange のみのようです。
    • デバイスの変更を通知するコールバックです。
    • Editor モード ( = 実行中以外 ) でも通知してくれます。

CallBack

  • デバイスの回転は通知してくれないので、微妙に使いづらそうです。

  • Input.deviceOrientation も常に Unknown が返ってくるので、回転を取得したい場合は Screen.currentResolution の縦横を比較する等の一手間が必要なようです。

デバイス情報の取得

  • 実機上でデバイス情報を取得する時と同じ実装で、 Simulator で選択中のデバイスの情報を取得することができます。

  • 下の GIF では DeviceSimulatorCallbacks.OnDeviceChange のタイミングで SystemInfo.deviceModel と Screen.safeArea を Console に表示しています。

DeviceInfo

おわりに

まだ Preview 版なので使いづらい部分もありますが、エディタ上で UI のレイアウトの確認ができるので、とても便利な機能だと思います。



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる