Небольшая заметка, которая будет особенно полезна начинающим разработчикам. Посмотрим на удобства, которые может предложить штатный симулятор, а также создадим свой девайс и добавим его в список устройств.
Документация: 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
