Slate UI Framework (UE4/5) — standalone application

Slate is written entirely in C++ and runs on all Unreal Engine 4 supported platforms. It is render interface agnostic, which allows it to be used in standalone desktop and mobile applications that do not depend on the game engine.

Gerke Max Preussner

Последние 6 лет я много работаю с Unreal Engine 4. Вернее не с самим движком, а с его различными модулями, с помощью которых мы выстраиваем свою базу тулов и различных технических решений вокруг основного игрового проекта. Несмотря на зоопарк различных технологий, который образовался вначале, со временем наша собственная экосистема постепенно начала стандартизироваться. В команде начали писать более качественные расширения для Unreal Editor именно на Slate UI Framework. Конечно, когда нужно сделать UI для функциональности, которую можно "впихнуть" в одну кнопку, проще реализовать это на UMG в Editor Utility widget. Но если нужно что-то посложней, например, нужна асинхронность в процессе выполнения или, например, необходимо рисовать сложные иерархические UI элементы, то тут без обращения к Slate модулю - не обойтись. Так же для многих UI тулов рано или поздно встаёт вопрос о возможности их самостоятельного существования, в отвязке от конкретного проекта, а в идеале - без привязки к Unreal Editor. Про сборку автономного приложения, с UI от редактора UE4/5, я и хочу вам рассказать.

1. Quick start

2. Overview demo projects

   2.1 BlankProgram

   2.2 SlateViewer

3. Custom standalone Slate UI application

4. Summary

1. Quick start

Ну "быстрый старт" из заголовка раздела - это немного громко сказано. Если под рукой нет уже собранного движка из исходников, то старт этот окажется вовсе не быстрым.

Для начала потребуется:

1. Получить доступ к исходному коду Unreal Engine через GitHub

2. Скачать или клонировать (git clone) исходный код Unreal Engine

3. (частично опциональный) Собрать Unreal Engine из исходников

К каждому шагу я прикрепил ссылки на официальную документацию от EpicGames. Если вы читаете эту статью, то вероятнее всего GitHub аккаунт у вас уже есть и, возможно, есть доступ к коду движка. Если это так, то можно пропустить некоторые пункты и не заглядывать под спойлеры.

Теперь уже точно можем начинать! У нас есть исходники движка, сгенерированные файлы для IDE и всё готово для разработки автономного приложения на базе Slate UI Framework.

При жгучем желании, можно собрать сам редактор UE4 или UE5, но для standalone приложений в этом нет необходимости, необязательно собирать бинарные файлы всех моделей движка, которые включает в себя Unreal Editor. Да и сам процесс сборки редактора может занять достаточно много времени. Поэтому этот шаг опциональный.

На этом этапе достаточно открыть нашу IDE и посмотреть список проектов в solution или workspace, которые были добавлены на этапе генерации.

2. Overview demo projects

Цель этой статьи - научиться собирать автономные приложения, на базе Slate UI Framework. А значит и большинство проектов из этого списка не будем рассматривать. Обратим внимание только на три проекта:

• UE4 (или UE5, если вы сразу переключились на ветку раннего доступа) - это исходный код Unreal Editor, который в свою очередь сам является standalone Slate приложением.

• BlankProgram - проект пустого консольного приложения, но к которому можно подключать любые модули из движка.

• SlateViewer - проект с демонстрацией основных UI элементов.

Я пользуюсь IDE Rider for Unreal Engine, поэтому дальнейшие скриншоты для Windows буду делать именно с неё.

2.1 BlankProgram

Хотелось бы подробнее остановиться на структуре этого проекта, но лицензионное соглашение EpicGames не позволяет публиковать фрагменты исходного кода. Поэтому расскажу только поверхностно.

C:\EpicGames\UnrealEngine\Engine\Binaries\Win64\BlankProgram.exe
LogInit: Display: Loading text-based GConfig....
LogBlankProgram: Display: Hello World

После сборки и запуска этого проекта на экране появится консольное окно, которое выводит "Hello World". Это приложение является самым базовым каркасом для автономного приложения, которое имеет доступ к кодовой базе движка. Код достаточно простой и находится он в файле {path-to-engine}\Engine\Source\Programs\BlankProgram\Private\BlankProgram.cpp

Файлы BlankProgram.Build.cs и BlankProgram.Target.cs задают правила для сборки приложения. Там описано, к каким именно модулям движка необходим доступ, какой тип у этого приложения и каким образом его собирать на разных платформах. Об этом тоже можно писать отдельную статью, поэтому пока не буду вдаваться в подробности.

2.2 SlateViewer

Если глянуть на структуру проекта SlateViewer, то очень радует, что ребята из EpicGames заботливо подготовили несколько точек входа для популярных платформ:

Основа приложения находится в файле {path-to-engine}\Engine\Source\Programs\SlateViewer\Private\SlateViewerApp.cpp

А сами UI виджеты для этого приложения описаны в модуле движка {path-to-engine}\Engine\Source\Runtime\AppFramework . Создание вкладок и их дизайн описаны в в файле {path-to-engine}\Engine\Source\Runtime\AppFramework\Private\Widgets\Testing\STestSuite.cpp , где точкой входа является функция void RestoreSlateTestSuite()

После сборки и запуска приложения, откроется окно, которое перегружено всевозможными UI элементами. Но если разобраться, то это отличная демонстрация возможностей Slate. Чтобы уберечь глаза от кровоточения, я покажу только скриншот со вкладкой Widget Gallery , где структурировано отображены основные UI элементы.

3. Custom standalone Slate UI application

Я спрашивал в переписке у Gerke Max Preussner (одного из разработчиков Slate), есть ли на данный момент простой способ сгенерировать пустой проект для Slate UI приложения, но он ответил, что такого способа пока нет. Поэтому, у нас есть два пути самурая:

• либо нарастить функционал на BlankProgram для запуска простого UI окна

• либо обрезать всё лишнее со SlateViewer.

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

https://github.com/lpestl/UnrealSlateAppTemplate

Помимо простого "обрезания" всего лишнего из уже существующего проекта я выделил отдельный модуль-заготовку внутри самого приложения, по аналогии с архитектурой игровых C++ проектов на движке Unreal Engine. Так же заложил возможность с минимумом усилий переделать этот проект в код обычного плагина для Unreal Editor.

Чтобы воспользоваться этим шаблоном, необходимо:

1. Скачать исходный код или склонировать его с помощью git из GitHub репозитория (по аналогии с получением исходного кода самого движка)

2. Для простоты создания своего кастомного приложения, подготовил простенький python скрипт, который переделывает этот шаблон в код приложения с введённым вами именем проекта.

   Если python не установлен, то понадобиться скачать его и установить с официальной страницы: https://www.python.org/downloads/

   Скрипт протестирован только на версиях 3.8, 3.9 и 3.10.

   После установки версию Python интерпретатора можно проверить с помощью командной строки, выполнив `python --version`:

c:\>python --version
Python 3.10.0

Из папки с репозиторием можно запустить CreateNewProject.bat для Windows или CreateNewProject.sh для Linux. Скрипт попросит ввести имя вашего приложения и путь, куда его сохранить:

В папке, указанной для создания нового проекта, появятся *.uproject файл и папка Source.

WARNING: Здесь *.uproject файл создан НЕ для запуска проекта в Unreal Editor, а только для простоты генерации проектных файлов (solution или workspace)

При нажатии правой кнопкой мыши на *.uproject файл, в контекстном меню необходимо выбрать пункт Generate project files

При первой генерации проекта, откроется окно Select Unreal Engine Version, где необходимо выбрать Source build at ... и только после этого нажать кнопку Ok

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

Running D:/ProgramFiles/UE_4.27/Engine/Binaries/DotNET/UnrealBuildTool.exe  -projectfiles -project="E:/Projects/UE4/HelloSlateUIApp/HelloSlateUIApp.uproject" -game -rocket -progress -log="E:\Projects\UE4\HelloSlateUIApp/Saved/Logs/UnrealVersionSelector-2021.11.24-14.32.37.log"
Discovering modules, targets and source code for project...
ERROR: Targets with a unique build environment cannot be built an installed engine.

После чего необходимо дождаться окончания процесса генерации

И запустить проект в своей IDE

Summary

По моему мнению, это отличный старт для разработки самостоятельных тулов и утилит, которые могут взаимодействовать с огромной кодовой базой и возможностями самого Unreal Engine.

Если говорить о Slate немного отстранившись от самого движка, то я считаю, что это уже самостоятельный, достаточно крутой и мощный кроссплатформенный UI Framework, который не уступает таким титанам как QT или ImGUI, только до сих пор по каким-то причинам живёт с мамой (Unreal Engine). Я думаю, что сами разработчики Unreal Engine не заинтересованы его "отделять" от основной кодовой базы, хотя, по моему мнению, это было бы очень крутым выходом Slate в публичный свет.

UPD: Подводя итог, выделим основные шаги для сборки автономного Slate приложения:

1. Скачать исходный код Unreal Engine

2. Запустить Setup (.bat,.sh или .command), который скачает и установит необходимые зависимости

3. Запустить GenerateProjectFiles (.bat, .sh или .command), который собирает UnrealBuildTool из исходников, перед генерацией проектных файлов

4. Создать исходный код standalone Slate app из шаблона. Для этого

   1. Скачать шаблон UnrealSlateAppTemplate

   2. Выполнить скрипт CreateNewProject (.bat/.sh)

5. Сгенерировать проект для IDE, выбрав пункт Generare project files в контекстном меню, после клика ПКМ на *.uproject файле созданного проекта на предыдущем шаге

6. Собрать созданный проект в IDE, в выбранной конфигурации

Шаблонный проект включает в себя следующие модули движка: "AppFramework", "Core", "ApplicationCore", "Projects", "Slate", "SlateCore", "StandaloneRenderer". Я не уверен, что это минимальный набор модулей, необходимый для запуска автономного Slate приложения, но опытным путём я пришёл пока только к такому набору. Стоит учесть, что перечисленные модули включают в себя ещё какие-то движковые модули, которые тоже будут собираться.

Oops! What about hard disk space?

Итого. Чтобы собрать standalone Slate UI app, вам потребуется места на жёстком диске:

• Около 40 GB для исходников UnrealEngine, его зависимостей и бинарей (без сборки UnrealEditor)

• (опционально) Если исходники выкачаны с помощью Git, то для локального репозитория папка .git будет занимать ещё около 41 GB

• 1.6 MB для шаблонного проекта

• И около 3 GB для сборки проекта Slate приложения (включая конечные бинари и Intermediate)

А само собранное Slate приложение весит от 15 MB и выше.

Хвост в 40-80 GB исходников движка для UI Frameworks великоват. Но качество и размеры Slate приложений достаточно хороши и вполне могли бы стоять в одном ряду с QT и ImGUI.

Я НЕ проповедую Slate и НЕ призываю всех бросать QT и писать на Slate. Я лишь рассказал о такой возможности, как сборка автономных Slate приложений.

Так же, помечтав, могу предположить, что если Slate UI Framework возможно было бы отделить от UnrealEngine и отправить его в свободное плавание в Open Source, то и размеры всех библиотеки были бы в пределах нормы, и, возможно, над его качеством и производительностью было бы проще работать энтузиастам.