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

Документация: 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. И приступаем:

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

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

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

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

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

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

Вернуться к оглавлению | Исходники: GitHub, Яндекс Диск, Google Drive