Why you should use the Unity Simulator when developing for mobile platforms

A small note that will be especially useful for novice developers. Let’s look at the amenities that a full-time simulator can offer, as well as create our own device and add it to the list of devices.

Documentation: Device Simulator, Adding a device

Sources: GitHub, Yandex Disk, Google Drive

Sections:

Further, any mention of the project implies an assembly for Android / IOS.

About Unity Simulator

The simulator is one of the standard features of Unity that beginners usually do not learn about right away. Often this happens by accident, when the development process has already been debugged and there is no desire to deal with something new: for this reason, many people shelve the feature and never use it again.

And in vain, because it can greatly facilitate the work on the project.

Despite the fact that the main goal of the simulator is to demonstrate how the game will look on modern devices, taking into account their various cutouts: bangs, drops and more; its functionality is not limited to this.

Perhaps you have already used crutches to check the localization in your game and try to understand whether the target device recognizes it correctly? Or wondered how to find out the reaction of the build to the absence of the Internet from the player, without depriving the working machine of access to the network?

These questions are also easy to solve!

So what is being simulated?

Device screen, cutouts on the screen
Default language
Internet access (the local network/operator/without access)

What can’t be simulated?

Multitouch
The work of the gyroscope
Device specifications
platform directives (#IF UNITY_IOS/UNITY_ANDROID)

Beginning of work

First, let’s add the simulator as one of the active editor windows. To do this, in the top menu, go along the path: Window/General/Device Simulator

Alternative option: RMB on the line of active windows> Add Tab> Game and in the window that opens, change Game to Simulator:

Now you can start learning it. There are not many settings, so we will quickly go over each.

Target device – select the device that interests us and move on.

Scale — increase or decrease the display.

FitToScreen – adjust Scale to fit the screen.

Rotate – rotate the device.

safe area – one of the functions for which, in principle, it makes sense to include a simulator. Draws a safe zone on the screen, taking into account the features of the selected device. For example, it can be very useful to check how the interface will look on different phones or to estimate its boundaries in advance.

play mode — focused/unfocused. We select the first one if we want the game to start in the simulator window at startup; the second (default) in the Game window.

control panel – the usefulness of this tab is difficult to overestimate. It opens the settings panel of the simulated device, where you can change the system language and set network access.

The two most useful features of the simulator

Everything is clear with the settings, but what if the desired device is not in the list?

First of all, do not worry – the fleet of devices is still quite extensive and covers almost all significant models, screen sizes and cutouts.

If the issue of simulating a specific missing phone is acute, then you should not worry either: adding it is not so difficult, since Unity is always open to changes and extensions!

We create our device

We will try to add the iPhone 14 Pro, which is not there by default even with the latest engine update.

Each simulated device essentially consists of two parts:
settings file Your Device.device and images Your Device_Overlay.png.

.device (Device Info Asset) is a JSON file that can be edited with any text editor. Let’s write down its first lines:

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

A start. Now let’s define the screen resolution, its orientation and display. All parameters are taken from the Apple website: iPhone 14 Pro

// Declare screen settings "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
            }    
        ]
    } ],

And finally Presentation, which will complete our work with the screen (not counting the creation of the image):

"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
                }
            }
        }
    ],

Now you need to deal with 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": [
            {
                // ...
            }
        ]
    }
}

More about GraphicsDependentData – this is a fairly extensive item with many of its own settings, on which I would not like to linger for a long time, since it will stretch the article twice.

There is nothing complicated there, so you can familiarize yourself with documentation or study the Asset I have already filled in sources.

This is where the creation of the asset is finished and finally you can start creative work!

Unity easily eats any image in .png format as the frame of our device, so we download the vending phone mockup from Google. And in principle, you can already throw it into the project, after making the screen area and background transparent, but …

As you can see, the image is quite out of the list of standard Unity devices, which are absolutely minimalistic.

If it seems like a small thing – you can go straight to the end.

With the rest, we open any image editor. I have this PaintDotNet. And let’s get started:

We copy the color from the standard image of the device and outline the frames and cutout of the mockup with it, getting rid of all the details.

2. Add a white frame around the edges (I also added a shadow for clarity). It plays an important role: firstly, it separates the device and the background of the editor, preventing them from merging, and secondly, it hides the corners of the screen under itself.