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

Документация: Device SimulatorAdding 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 ModeFocused/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

Комментарии (3)


  1. Ipashelovo
    20.04.2023 12:24
    +1

    В самом начале четкое описание того, почему же симулятором многие не пользуются. Совершенная непрозрачность функционала. Почему, например, новая инпут система не детектиться? У меня проблема или у юнити? Почему гироскоп не работает? Я виноват или юнити? Почему ошибки с интернетом не сыпяться? Я виноват или юнити? Ого, так на этот раз действительно я?! Ужас какой-то


    1. Opodlinok Автор
      20.04.2023 12:24

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


  1. Nteela
    20.04.2023 12:24
    +1

    Чем ещё мне он не нравится - это различия в производительности