Небольшая заметка, которая будет особенно полезна начинающим разработчикам. Посмотрим на удобства, которые может предложить штатный симулятор, а также создадим свой девайс и добавим его в список устройств.
Документация: Device Simulator, Adding a device
Исходники: GitHub, Яндекс Диск, Google Drive
Разделы:
Далее любое упоминание проекта подразумевает сборку под 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 всегда открыт к изменениям и расширениям!
Создаём свой девайс
Мы попробуем добавить 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, после чего можно будет выбрать устройство в редакторе.
На этом всё. Спасибо, что ознакомились! Надеюсь вы нашли что-то новое и полезное для себя.
Вернуться к оглавлению | Исходники: GitHub, Яндекс Диск, Google Drive
