はじめに
この記事は「Unityアセット冬のアドベントカレンダー 2019 Winter」の 12/2 の記事です
「Universal Device Preview」を Unity プロジェクトに導入することで
50種類以上のデバイスでゲーム画面がどう表示されるかエディタ上で確認できて、
ノッチやセーフエリアの対応もできるようになります
Unity 2019.3 以降であれば、各デバイスにおけるゲーム画面の表示を
公式からリリースされている「Device Simulator」を使用して確認できますが、
「Universal Device Preview」であれば
- Unity 2017.2 から Unity 2019.3 でも使用できる
- 複数のデバイスにおける表示を一括で確認できる
- 複数のデバイスにおける表示を画像ファイルとして保存できる
- ノッチやセーフエリアの対応ができるコンポーネントが使用できる
といった特徴があります
目次
検証環境
- Windows 10
- Unity 2018.4.8f1
- Universal Device Preview v1.8.0
使用例
iPhone や Google Pixel、Samsung Galaxy といった
様々なデバイスにおいてゲーム画面がどう表示されるのかを
エディタ上で一括で確認することができます
ノッチやセーフエリアも可視化できるため、
UI が重なってしまっていないかどうかもわかります
各デバイスにおける表示を一括でキャプチャして
PNG などの画像ファイルとして保存することもできます
ノッチやセーフエリアの対応ができるコンポーネントも含まれています
各デバイスにおける表示を一覧で確認
Unity メニューの
「Window > Almost Engine > Universal Device Preview > Gallery」を選択すると
各デバイスにおける表示を一覧で確認できる Gallery ウィンドウが開きます
メニュー
Update
表示を更新します
Export to file(s)
各デバイスにおける表示を画像ファイルで保存します
保存先や拡張子は後述する設定画面から変更できます
Safe Area
セーフエリアを可視化するかどうかを変更できます
LANDSCAPE / PORTAIT
横持ちか縦持ちかを変更できます
Display mode
解像度の単位を変更できます
Drawing mode
| 項目 | 内容 |
|---|---|
| TEXTURE_ONLY | ゲーム画面のみ表示 |
| SCREEN_MASK | デバイスの形、ノッチをマスクで表示 |
| FULL_DEVICE | デバイスの画像にゲーム画面を埋め込んで表示 |
Settings
設定画面を開きます
Auto refresh
表示を自動で更新したい場合は ON にします
「Refresh delay (s)」で更新間隔（秒）を変更できます
デフォルトでは、Auto refresh を ON にすると
プレイモード中のみ表示が自動で更新されるようになります
エディタモード中も表示を自動で更新したい場合は
後述する設定画面で変更できます
Zoom
表示の拡大・縮小ができます
1:1
拡大・縮小をリセットします
特定のデバイスにおける表示を確認
Unity メニューの「Window > Almost Engine > Universal Device Preview >
Device Preview」を選択すると
特定のデバイスにおける表示を確認できる Preview ウィンドウが開きます
プルダウンメニューから、デバイスを変更することができます
その他のメニューは Gallery ウィンドウと同様です
設定画面
Unity メニューの
「Window > Almost Engine > Universal Device Preview > Settings」を選択するか
Gallery ウィンドウや Preview ウィンドウで「Settings」を選択することで
設定画面が開きます
Refresh Mode
Auto Refresh がオンの時の挙動を変更できます
| 項目 | 内容 |
|---|---|
| ONLY_IN_PLAY_MODE | プレイモード中のみ表示を自動更新 |
| ONLY_IN_EDIT_MODE | エディットモード中のみ表示を自動更新 |
| ALWAYS | 常に表示を自動更新 |
RESOLUTIONS
Gallery ウィンドウや Preview ウィンドウで選択できる
デバイスの情報を管理できます
リストの「+」ボタンを押すと、あらかじめ用意されているプリセットの中から
Gallery ウィンドウや Preview ウィンドウで使用したいデバイスを追加できます
DESTINATION / FILE NAME
各デバイスにおけるゲーム画面の表示を画像ファイルで保存する時の
保存先のフォルダやファイル名、拡張子などを変更できます
「Destination Folder」で保存先のフォルダを変更できます
| 項目 | 内容 |
|---|---|
| CUSTOM_FOLDER | 絶対パスでフォルダを指定 |
| DATA_PATH | Unity プロジェクトの Assets フォルダ |
| PRESITENT_DATA_PATH | AppData フォルダ |
| PIXTURES_FOLDER | ピクチャフォルダ |
PERMISSIONS
「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」を無効化する方法
Assets/AlmostEngine/UltimateScreenshotCreator/Plugins/iOS フォルダを削除する
Player Settings で Android の「Scripting Define Symbols」に
「IGNORE_ANDROID_SCREENSHOT」を追加する
Player Settings で iOS の「Scripting Define Symbols」に
「IGNORE_IOS_SCREENSHOT」を追加する
Player Settings で Android の「Write Permission」を「Internal」に変更する
ノッチやセーフエリアの対応
すでに多解像度における UI の表示の対応が済んでおり、
ノッチやセーフエリアへの対応が未実装で、
Canvas 内に上記のように UI のオブジェクトが存在している場合は
Canvas 内に空のゲームオブジェクトを作成して
作成したゲームオブジェクトの RectTransform で Anchor Presets を開いて
上記の GIF 動画のように Alt キーを押しながら右下のアイコンをクリックします
次に、作成したゲームオブジェクトに「Safe Area」コンポーネントをアタッチして
「Horizontal Constraint Type」と「Vertical Constraint Type」を
どちらも「SNAP」に変更します
後は、ノッチやセーフエリアに重なってほしくない UI オブジェクトを
このゲームオブジェクトの子供にすることで
ノッチやセーフエリアに対応することができます
デバイスによっては画面の角にセーフエリアが設定されておらず
UI の一部が隠れてしまうことがあるので、こういったケースは許容する、
UI の配置を調整するなどの対応が別途必要になるかと思います
セーフエリア対応用のオブジェクトを簡単に作れるエディタ拡張
上記のスクリプトを Unity プロジェクトの「Editor」フォルダに追加すると
Hierarchy メニューの「Create > UI > Safe Area」から
前述した設定が既に対応されたゲームオブジェクトを作成することができます
もしセーフエリア対応用のゲームオブジェクトをたくさん作るのが大変な場合は
このエディタ拡張スクリプトもご活用いただければと思います
まとめ
この「Universal Device Preview」を Unity プロジェクトに導入することで
50種類以上のデバイスでゲーム画面がどう表示されるか
エディタ上で確認できて、ノッチやセーフエリアの対応もできます
もしも iOS / Android 向けのアプリを開発しており、
多解像度の対応や、ノッチ・セーフエリアの対応に追われている方は
ぜひ使ってみていただければと思います
- もっと読む
コメントを書く