コガネブログ

平日更新を目標に Unity や C#、Visual Studio、ReSharper などのゲーム開発アレコレを書いていきます

【Unity】50種類以上のデバイスでゲーム画面がどう表示されるかエディタ上で確認できて、ノッチやセーフエリアの対応もできる「Universal Device Preview」紹介

はじめに

この記事は「Unityアセット冬のアドベントカレンダー 2019 Winter」の 12/2 の記事です

 
「Universal Device Preview」を Unity プロジェクトに導入することで
50種類以上のデバイスでゲーム画面がどう表示されるかエディタ上で確認できて、
ノッチやセーフエリアの対応もできるようになります

Unity 2019.3 以降であれば、各デバイスにおけるゲーム画面の表示を
公式からリリースされている「Device Simulator」を使用して確認できますが、
「Universal Device Preview」であれば

  • Unity 2017.2 から Unity 2019.3 でも使用できる
  • 複数のデバイスにおける表示を一括で確認できる
  • 複数のデバイスにおける表示を画像ファイルとして保存できる
  • ノッチやセーフエリアの対応ができるコンポーネントが使用できる

といった特徴があります

現在、Cyber Week Mega Sale で 50% OFF の $22.49 で購入できます

目次

検証環境

  • Windows 10
  • Unity 2018.4.8f1
  • Universal Device Preview v1.8.0

使用例

f:id:baba_s:20191201152727p:plain

iPhone や Google Pixel、Samsung Galaxy といった
様々なデバイスにおいてゲーム画面がどう表示されるのかを
エディタ上で一括で確認することができます

ノッチやセーフエリアも可視化できるため、
UI が重なってしまっていないかどうかもわかります

f:id:baba_s:20191126152432p:plain

各デバイスにおける表示を一括でキャプチャして
PNG などの画像ファイルとして保存することもできます

f:id:baba_s:20191126153020p:plain

ノッチやセーフエリアの対応ができるコンポーネントも含まれています

各デバイスにおける表示を一覧で確認

f:id:baba_s:20191126153526p:plain

Unity メニューの
「Window > Almost Engine > Universal Device Preview > Gallery」を選択すると

f:id:baba_s:20191126153558p:plain

各デバイスにおける表示を一覧で確認できる Gallery ウィンドウが開きます

メニュー

f:id:baba_s:20191126154436p:plain

Update

表示を更新します

Export to file(s)

f:id:baba_s:20191126152432p:plain

各デバイスにおける表示を画像ファイルで保存します
保存先や拡張子は後述する設定画面から変更できます

Safe Area

f:id:baba_s:20191126155323g:plain

セーフエリアを可視化するかどうかを変更できます

LANDSCAPE / PORTAIT

f:id:baba_s:20191126155539g:plain

横持ちか縦持ちかを変更できます

Display mode

f:id:baba_s:20191126155545g:plain

解像度の単位を変更できます

Drawing mode

f:id:baba_s:20191126155557g:plain

項目 内容
TEXTURE_ONLY ゲーム画面のみ表示
SCREEN_MASK デバイスの形、ノッチをマスクで表示
FULL_DEVICE デバイスの画像にゲーム画面を埋め込んで表示

Settings

設定画面を開きます

Auto refresh

表示を自動で更新したい場合は ON にします
「Refresh delay (s)」で更新間隔(秒)を変更できます

デフォルトでは、Auto refresh を ON にすると
プレイモード中のみ表示が自動で更新されるようになります
エディタモード中も表示を自動で更新したい場合は
後述する設定画面で変更できます

Zoom

f:id:baba_s:20191126155619g:plain

表示の拡大・縮小ができます

1:1

拡大・縮小をリセットします

特定のデバイスにおける表示を確認

f:id:baba_s:20191126160529p:plain

Unity メニューの「Window > Almost Engine > Universal Device Preview >
Device Preview」を選択すると

f:id:baba_s:20191126160532p:plain

特定のデバイスにおける表示を確認できる Preview ウィンドウが開きます

f:id:baba_s:20191126160750g:plain

プルダウンメニューから、デバイスを変更することができます
その他のメニューは Gallery ウィンドウと同様です

設定画面

f:id:baba_s:20191126161223p:plain

Unity メニューの
「Window > Almost Engine > Universal Device Preview > Settings」を選択するか
Gallery ウィンドウや Preview ウィンドウで「Settings」を選択することで

f:id:baba_s:20191126161403p:plain

設定画面が開きます

Refresh Mode

f:id:baba_s:20191126161625p:plain

Auto Refresh がオンの時の挙動を変更できます

項目 内容
ONLY_IN_PLAY_MODE プレイモード中のみ表示を自動更新
ONLY_IN_EDIT_MODE エディットモード中のみ表示を自動更新
ALWAYS 常に表示を自動更新

RESOLUTIONS

f:id:baba_s:20191126161851p:plain

Gallery ウィンドウや Preview ウィンドウで選択できる
デバイスの情報を管理できます

f:id:baba_s:20191126162112g:plain

リストの「+」ボタンを押すと、あらかじめ用意されているプリセットの中から
Gallery ウィンドウや Preview ウィンドウで使用したいデバイスを追加できます

DESTINATION / FILE NAME

f:id:baba_s:20191126162706p:plain

各デバイスにおけるゲーム画面の表示を画像ファイルで保存する時の
保存先のフォルダやファイル名、拡張子などを変更できます

f:id:baba_s:20191126162711p:plain

「Destination Folder」で保存先のフォルダを変更できます

項目 内容
CUSTOM_FOLDER 絶対パスでフォルダを指定
DATA_PATH Unity プロジェクトの Assets フォルダ
PRESITENT_DATA_PATH AppData フォルダ
PIXTURES_FOLDER ピクチャフォルダ

PERMISSIONS

f:id:baba_s:20191126171318p:plain

「Universal Device Preview」には、「Ultimate Screenshot Creator」という
iOS や Android でスクリーンショットを撮影できるアセットが内包されており
この「Ultimate Screenshot Creator」はビルドしたアプリに含まれてしまうため

もしも「Ultimate Screenshot Creator」が必要ない場合は
上記の PERMISSIONS の項目にある
「Remove permission needs for iOS and Android」ボタンを押します

手動で「Ultimate Screenshot Creator」の機能を無効化したい場合は
下記の手順を踏む必要があるとのことです

手動で「Ultimate Screenshot Creator」を無効化する方法

f:id:baba_s:20191126173913p:plain

Assets/AlmostEngine/UltimateScreenshotCreator/Plugins/iOS フォルダを削除する

f:id:baba_s:20191126173935p:plain

Player Settings で Android の「Scripting Define Symbols」に
「IGNORE_ANDROID_SCREENSHOT」を追加する

f:id:baba_s:20191126174048p:plain

Player Settings で iOS の「Scripting Define Symbols」に
「IGNORE_IOS_SCREENSHOT」を追加する

f:id:baba_s:20191126174053p:plain

Player Settings で Android の「Write Permission」を「Internal」に変更する

ノッチやセーフエリアの対応

f:id:baba_s:20191126163907g:plain

すでに多解像度における UI の表示の対応が済んでおり、

f:id:baba_s:20191126163915p:plain

f:id:baba_s:20191126164019p:plain

ノッチやセーフエリアへの対応が未実装で、

f:id:baba_s:20191126164544p:plain

Canvas 内に上記のように UI のオブジェクトが存在している場合は

f:id:baba_s:20191126164546p:plain

Canvas 内に空のゲームオブジェクトを作成して

f:id:baba_s:20191126164556g:plain

作成したゲームオブジェクトの RectTransform で Anchor Presets を開いて
上記の GIF 動画のように Alt キーを押しながら右下のアイコンをクリックします

f:id:baba_s:20191126164604p:plain

次に、作成したゲームオブジェクトに「Safe Area」コンポーネントをアタッチして

f:id:baba_s:20191126164607p:plain

「Horizontal Constraint Type」と「Vertical Constraint Type」を
どちらも「SNAP」に変更します

f:id:baba_s:20191126164610p:plain

後は、ノッチやセーフエリアに重なってほしくない UI オブジェクトを
このゲームオブジェクトの子供にすることで

f:id:baba_s:20191126164614p:plain

ノッチやセーフエリアに対応することができます

f:id:baba_s:20191126165309p:plain

デバイスによっては画面の角にセーフエリアが設定されておらず
UI の一部が隠れてしまうことがあるので、こういったケースは許容する、
UI の配置を調整するなどの対応が別途必要になるかと思います

セーフエリア対応用のオブジェクトを簡単に作れるエディタ拡張

上記のスクリプトを Unity プロジェクトの「Editor」フォルダに追加すると

f:id:baba_s:20191129172651p:plain

Hierarchy メニューの「Create > UI > Safe Area」から

f:id:baba_s:20191129172713p:plain

前述した設定が既に対応されたゲームオブジェクトを作成することができます
もしセーフエリア対応用のゲームオブジェクトをたくさん作るのが大変な場合は
このエディタ拡張スクリプトもご活用いただければと思います

まとめ

 
この「Universal Device Preview」を Unity プロジェクトに導入することで
50種類以上のデバイスでゲーム画面がどう表示されるか
エディタ上で確認できて、ノッチやセーフエリアの対応もできます

もしも iOS / Android 向けのアプリを開発しており、
多解像度の対応や、ノッチ・セーフエリアの対応に追われている方は
ぜひ使ってみていただければと思います

関連記事