Почему вам стоит использовать Unity Simulator при разработке под мобильные платформы

Небольшая заметка, которая будет особенно полезна начинающим разработчикам. Посмотрим на удобства, которые может предложить штатный симулятор, а также создадим свой девайс и добавим его в список устройств.

Документация: Device Simulator, Adding a device

Исходники: GitHub, Яндекс Диск, Google Drive

Разделы:

Про Unity Simulator
Начало работы
Создаём свой девайс

Далее любое упоминание проекта подразумевает сборку под Android/IOS.

Почему вам стоит использовать Unity Simulator при разработке под мобильные платформы

К созданию своего девайса

Симулятор — одна из стандартных функций Unity про которую новички, обычно, узнают далеко не сразу. Зачастую это и вовсе происходит случайно, когда процесс разработки уже отлажен и разбираться с чем-то новым нет никакого желания: по этой причине многие задвигают фичу в долгий ящик и никогда больше не используют.

И зря, ведь она может существенно облегчить работу над проектом.

Несмотря на то, что основная цель симулятора — демонстрация того, как игра будет выглядеть на современных устройствах с учётом их разнообразных вырезов: чёлок, капель и прочего; его функционал этим не ограничивается.

Возможно, тебе уже доводилось костылями проверять локализацию в своей игре и пытаться понять, правильно ли её распознаёт целевое устройство? Или ты задумывался, как узнать реакцию билда на отсутствие интернета у игрока, не лишая рабочую машину доступа к сети?

Теперь эти вопросы тоже легко решаются!

Так что же симулируется?

Экран устройства, вырезы на экране
Язык по умолчанию
Доступ к интернету (локальная сеть/оператор/без доступа)

Что не получится симулировать?

Мультитач
Работу гироскопа
Характеристики устройства
Директивы платформы (#IF UNITY_IOS/UNITY_ANDROID)

Сперва добавим симулятор, как одно из активных окон редактора. Для этого в верхнем меню идём по пути:

Window/General/Device Simulator

Альтернативный вариант: ПКМ по строке активных окон > Add Tab > Game и в открывшемся окне меняем Game на Simulator.

Теперь можно приступить к его освоению. Настроек не так много, поэтому быстро пробежимся по каждой.

Целевое устройство — выбираем аппарат, который нас интересует и идём дальше.

Scale — увеличить или уменьшить отображение.

FitToScreen — подогнать Scale по размеру экрана.

Rotate — повернуть устройство.

Safe Area — одна из функций, ради которой в принципе имеет смысл включать симулятор. Отрисовывает безопасную зону на экране с учётом особенностей выбранного устройства. Например, бывает очень полезно проверить как интерфейс будет смотреться на разных телефонах или прикинуть его границы заранее.

Play Mode — Focused/Unfocused. Выбираем первое, если хотим, чтобы при старте игра запускалась в окне симулятора; второе (по умолчанию) в окне Game.

Control Panel — полезность этой вкладки сложно переоценить. Она открывает панель настроек симулируемого устройства, в которой можно изменить язык системы и установить доступ к сети.

С настройками всё понятно, но как быть если желаемого аппарата нет в списке?

Во первых не переживать — парк устройств все равно достаточно обширный и охватывает почти все значимые модели, диагонали экрана и вырезы.

Если вопрос по симуляции конкретного отсутствующего телефона стоит остро, то волноваться тоже не стоит: добавить его не так сложно, благо Unity всегда открыт к изменениям и расширениям!

Про Unity Simulator

Мы попробуем добавить iPhone 14 Pro, которого нет по умолчанию даже с последним обновлением движка.

Каждое симулируемое устройство по сути состоит из двух частей:
файла с настройками Your Device.device и изображения Your Device_Overlay.png.

.device (Device Info Asset) — это JSON файл, который можно отредактировать в любом редакторе текста. Запишем его первые строки:

{ // Название нашего устройства в интерфейсе редактора "friendlyName": "Apple iPhone 14 Pro", // Версия файла "version": 1,

Начало положено. Теперь определим разрешение экрана, его ориентацию и отображение. Все параметры берём с сайта Apple: iPhone 14 Pro

// Объявляем настройки экрана "screens": [ { // Ширина и высота в пикселях "width": 1179, "height": 2556, /* Высота панели навигации Android (назад/домой/запущенные приложения) Для нас, в данный момент, бесполезно */ "navigationBarHeight": 0, "dpi": 460.0,

Как пример добавим для экрана только портретную ориентацию. Но нет ничего сложного дописать в asset горизонтальную:

Документация

"orientations": [ { /* Число, отображающее порядковый номер ScreenOrientation Из документации Unity: https://docs.unity3d.com/ScriptReference/ScreenOrientation.html Отсчёт начинается с 1, следовательно 1 — это портретный режим */ "orientation": 1, /* Безопасная область экрана (необязательный параметр, но если не прописать, то весь экран будет считаться безопасным) */ "safeArea": { "serializedVersion": "2", // начала отсчёта: x - от левого борта экрана, y - со дна экрана "x": 0.0, "y": 122.0, // Размеры безопасной области в пикселях "width": 1179.0, "height": 2260.0 }, /* Вырезы на экране (необязательно) Отображает области, в который не будет отрисовываться содержимое экрана Параметры те же, что и у safeArea */ "cutouts": [ { "serializedVersion": "2", "x": 0.0, "y": 184.0, "width": 66.0, "height": 460.0 } ] } ],

И наконец Presentation, на котором завершится наша работа с экраном (не считая создание изображения):

"presentation": { /* Путь к изображению устройства относительно нашего ассета. Обычно я создаю директорию Device, которая хранит Asset и в ней Overlays содержащий изображения. Путь может быть любой, если указать только название самого изображения, то Unity будет пытаться найти его там же, где расположен ассет */ "overlayPath": "Overlays/Apple iPhone 14 Pro_Overlay.png", /* Границы экрана. Советую поставить для всех 70 и вручную подогнать значения под ваше изображение: Чтобы и углы не выходили за рамки, но и в пределах экрана не было мест, в которых не рендерится изображение */ "borderSize": { "x": 67.0, "y": 67.0, "z": 67.0, "w": 67.0 } } } ],

Теперь нужно разобраться с System Info:

"systemInfo": { // https://docs.unity3d.com/ScriptReference/SystemInfo-deviceModel.html "deviceModel": "iPhone11,8", /* Тип устройства, числовое значение соответствует одному из типов: 1 - телефон или планшет 2 - консоль */ 3 - настольный или портативный компьютер "deviceType": 1, /* Операционная система. Я взял значение из документации, так-как проверить какую последнюю поддерживает Unity можно только методом "тыка" */ "operatingSystem": "iOS 12.0", /* Семейство операционной системы. 0 - Другое 1 - MacOSX 2 - Windows 3 - Linux */ "operatingSystemFamily": 0, "processorCount": 6, // Количество ядер процессора "processorFrequency": 0, // Частота процессора "processorType": "arm64e", // Тип процессора "supportsAccelerometer": true, // Поддержка акселерометра "supportsAudio": true, // Поддержка аудио "supportsGyroscope": true, // Поддержка гироскопа "supportsLocationService": true, // Может ли передавать данные о геолокации "supportsVibration": true, // Поддержка вибрации "systemMemorySize": 2813, // Приблизительный объём системной памяти в Мб "graphicsDependentData": [ { // ... } ] } }

Подробнее про GraphicsDependentData — это достаточно обширный пункт с множеством собственных настроек, на котором мне не хотелось бы надолго задерживаться, так-как это растянет статью раза в два.

Ничего сложного там нет, поэтому вы можете ознакомиться с документацией или изучить уже заполненный мною Asset в исходниках.

На этом с созданием ассета закончили и наконец можно приступить к творческой работе!

Unity без проблем скушает любое изображение в .png формате в качестве рамки нашего устройства, поэтому качаем из гугла приглянувшийся мокап телефона. И в принципе уже можно закидывать его в проект, предварительно сделав прозрачной область экрана и фон, но...

Как видим изображение достаточно сильно выбивается из списка стандартных девайсов Unity, которые абсолютно минималистичны.

Если это кажется мелочью — можете сразу переходить к финалу.

С остальными мы открываем любой редактор изображений. У меня это PaintDotNet. И приступаем:

Копируем цвет у стандартного изображения устройства и обрисовываем им рамки и вырез мокапа, избавляясь от всех деталей.

2. Добавляем белую рамку по краям (для наглядности добавил ещё и тень). Она играет важную роль: во первых отделяет устройство и фон редактора, не давая им сливаться, а во вторых скрывает под собой углы экрана.

Как видим без белой рамки зона рендеринга значительно выходила бы за края устройства.

4. Восхищаемся проделанной работой!

Осталось лишь закинуть изображение в проект и дать ему название, которое указали в OverlayPath, после чего можно будет выбрать устройство в редакторе.

Спасибо, что ознакомились! Надеюсь вы нашли что-то новое и полезное для себя.

Вернуться к оглавлению | Исходники

#оподлинок #gamedev #unity #guide #гайды

24 комментария

Linar Khilazhev

14.04.2023

Из интересных вещей, которые не было в статье, это расширения окна Control Panel своей логикой, отнаследовав DeviceSimulatorPlugin (смотрите ссылку)

https://docs.unity3d.com/Manual/device-simulator-plugins.html

Дам один простой совет при использование Device Simulator (и в целом, работе с Mobile платформами), если вы занимаетесь профилированием(исследование производительности приложения), это всегда нужно делать на реальных мобильных девайсах. Так как часто результаты профилирования на симуляторе и реальном девайсе отличаются.

К примеру, если профилировать на Device Simulator простую сцену с UI, оно показывать, что происходит перерендер UI, из-за чего, может сложиться ложное ощущение, что есть проблемы. Хотя без Device Simulator/на девайсе/или просто в Editor, такой проблемы нет.