【Unity】Device Simulatorで複数の端末でのプレビューを爆速で検証する

はじめに

Unityでモバイル向けのアプリケーションを開発している時、どうしてもぶち当たる問題の一つがさまざまなデバイスの解像度に合わせたレイアウトの問題です。各種解像度やセーフエリア対応など、UIをただ配置するだけでも気を使うことが多く開発者が頭を抱えている問題の一つでしょう。該当の端末にインストールして確認して、という繰り返しはつらいものがあります。
そこで活躍するのがUnityのDevice Simulatorという機能です。Device Simulatorを使うことで端末ごとのレイアウトをエディタ上で再現して確認を爆速で行うことが可能です。今回はそのDevice Simulatorの導入やその一連の機能について紹介します。

※ 本記事で使用するUnityおよびDevice Simulatorのバージョンは以下の通りです。バージョンによっては挙動および機能が異なる場合がございますので、ご了承ください。

Unity 2021.1.0f1
Device Simulator 2.2.4-preview - November 30, 2020

Device Simulatorとは

Device SimulatorはUnity公式が提供している機能です。Gameビューのサイズをさまざまな端末に対応して変更し、描画のレイアウトを確認することができる便利機能です。

f:id:myudon:20210328204037p:plain

Unity2020まではPackage Managerでの提供でしたが、Unity2021からは標準機能として導入されています。標準機能として活用できるということで、今後もアップデートされていきそうだなーと期待しています。

Device Simulatorの導入

Device SimulatorはUnity2021以降であれば標準で入っていますが、パッケージを更新したかったり、Unity2020以前を使用されている方はPackage Managerを参照する必要があります。本記事を執筆している時点ではまだpreviewのパッケージですので、Project Setting -> Package Managerの画面にあるEnable Preview Packageを有効にしてください。

f:id:myudon:20210328210723p:plain

設定してPackage ManagerのUnity Registryで検索すると出てきます。

f:id:myudon:20210328210653p:plain

インストールするとGameビューにDevice Simulatorに切り替えるメニューが出てきます。これでSimulatorを選択したら導入は完了です。

f:id:myudon:20210328211102p:plain

Device Simulatorの機能

導入するとGameビューが端末に表示されているような見た目になります。iPhoneの上部のノッチも反映されています。GameビューなのでもちろんこのままゲームをPlayすればこの画面上に表示されますし、入力も同様に行うことができます。

f:id:myudon:20210403154014p:plain

そしてDevice Simulatorの大きな特徴がセーフエリアやノッチを加味したエリアの可視化です。右上にある「Safe Area」ボタン押すと有効になります。デフォルトでは緑色の枠で表示されており、UIを安全に配置できる領域を確認することが可能です。

f:id:myudon:20210403154634p:plain f:id:myudon:20210403154744p:plain

画面のレイアウト作りで複数端末での見栄えを検証する時にはおすすめしたい機能です。

見た目の設定

見た目の解像度やセーフエリアの設定は左上のタブから切り替えることができます。iPhone、iPad、Pixel、Nexus、Galaxy、Galaxy Noteなどさまざまな端末の解像度が用意されています。

f:id:myudon:20210328211606p:plain

PortraitやLandscapeといった画面の向きの設定は左のパネルから調整できます。

f:id:myudon:20210328212341p:plain

画面の回転やズームなどは先述の「Safe Area」の有効化ボタンと同じく右上のメニューから調整可能です。

f:id:myudon:20210328212031p:plain

また、ApplicationクラスのAPIについて一部の値をGUI上から設定することができます。GUIで設定する情報だけでなく他にも色々な値が端末情報に合わせて変更されるのですが、これについては次に詳しく説明します。

f:id:myudon:20210404192633p:plain

f:id:myudon:20210404193020p:plain

Screenクラスなど値の上書きとSimulation Scope

Device Simulatorの特徴は単純な描画のプレビューだけでなく、Screenクラス、SystemInfo、Applicationクラスで参照できる情報も上書きします。たとえばScreen.widthやheight、safeAreaといった端末依存の情報を活用して独自の処理を行いたい時の検証を行うことが可能です。少し多いですが、上書きされるAPIを網羅して紹介します。

Screen

autorotateToLandscapeLeft
autorotateToLandscapeRight
autorotateToPortrait
autorotateToPortraitUpsideDown
currentResolution
cutouts
dpi
fullScreen
fullScreenMode
height
orientation
safeArea

SystemInfo

copyTextureSupport
deviceModel
deviceType
graphicsDeviceID
graphicsDeviceName
graphicsDeviceType
graphicsDeviceVendor
graphicsDeviceVendorID
graphicsDeviceVersion
graphicsMemorySize
graphicsMultiThreaded
graphicsShaderLevel
graphicsUVStartsAtTop
hasDynamicUniformArrayIndexingInFragmentShaders
hasHiddenSurfaceRemovalOnGPU
hasMipMaxLevel
hdrDisplaySupportFlags
maxComputeBufferInputsCompute
maxComputeBufferInputsDomain
maxComputeBufferInputsFragment
maxComputeBufferInputsGeometry
maxComputeBufferInputsHull
maxComputeBufferInputsVertex
maxComputeWorkGroupSize
maxComputeWorkGroupSizeX
maxComputeWorkGroupSizeY
maxComputeWorkGroupSizeZ
maxCubemapSize
maxTextureSize
minConstantBufferOffsetAlignment
npotSupport
operatingSystem
operatingSystemFamily
processorCount
processorFrequency
processorType
renderingThreadingMode
supportedRandomWriteTargetCount
supportedRenderTargetCount
supports2DArrayTextures
supports32bitsIndexBuffer
supports3DRenderTextures
supports3DTextures
supportsAccelerometer
supportsAsyncCompute
supportsAsyncGPUReadback
supportsAudio
supportsComputeShaders
supportsCubemapArrayTextures
supportsGeometryShaders
supportsGpuRecorder
supportsGraphicsFence
supportsGyroscope
supportsHardwareQuadTopology
supportsInstancing
supportsLocationService
supportsMipStreaming
supportsMotionVectors
supportsMultisampleAutoResolve
supportsMultisampledTextures
supportsRawShadowDepthSampling
supportsRayTracing
supportsSeparatedRenderTargetsBlend
supportsSetConstantBuffer
supportsShadows
supportsSparseTextures
supportsTessellationShaders
supportsTextureWrapMirrorOnce
supportsVibration
systemMemorySize
unsupportedIdentifier
usesLoadStoreActions
usesReversedZBuffer

Application

internetReachability
isConsolePlatform
isEditor
isMobilePlatform
platform
systemLanguage
LowMemoryCallback

SystemInfoとApplicationクラスのAPIまで上書きしてくれる便利な機能ですが、逆にエディタ拡張などで都合が悪い場合もあるかと思います。その場合に役立つのがSimulation Scopeという設定です。Project Settings -> Device Simulatorの所で設定が可能になっています。

f:id:myudon:20210404184327p:plain

標準ではdefault assemblyにチェックが入っており、全ての実装箇所でAPIが上書きされます。これを外すと下のCustom Assembliesに設定した名前のasmdef配下でのみ上書きが有効となります。（ちなみに、ScreenクラスだけはこのSimulation Scopeの設定の影響を受けず、常に反映されるっぽいです。）

独自で定義した端末情報の追加

PreferencesにDevice Simulatorの設定があり、そこでセーフエリアのハイライト表示設定などの細かな設定が可能です。

f:id:myudon:20210403002600p:plain

そして一番上の項目ですが、独自で定義した端末情報を使う際のファイルの読み込み先の指定になります。Unityの管理外のディレクトリでも可能です。端末情報はjson形式で定義されており、必要な値を設定します。

{
    "friendlyName": "Sample Device",
    "version": 1,
    "Screens": [
        {
            "width": 1080,
            "height": 1920,
            "dpi": 450.0
        }
    ],
    "SystemInfo": {
        "operatingSystem": "Android"
    }
}

このjsonは.device.jsonという拡張子をつけて保存します。正しく設定されればDevice Simulatorの起動時にロードされ、選択肢に追加されます。

f:id:myudon:20210404191609p:plain

詳細なデータ構造は公式ドキュメントを参照してください。先述のScreenやSystemInfo、ApplicationクラスのAPIについて書き換える値も設定できます。 iPhoneやGalaxyといった公式側で定義されている端末以外の画面サイズやセーフエリアの検証を行いたい時に活用しましょう。

Adding Custom Devices | Device Simulator | 2.2.4-preview

おわりに

Device Simulatorを活用することで、実機で画面を見たり値を検証しないといけない場面の開発コストを削減することが可能です。このUIはセーフエリアに対応して、背景はフルスクリーンにして、といった実機ならではの検証も迅速にUnity Editor上で確認できるのは便利ですね。まだpreviewの機能ということで機能が最低限だったり、たまに挙動が怪しい場合もありますが個人的には期待している機能の一つです。