Блюпринт что это такое
🎮 Как использовать Blueprint для быстрого прототипирования игр на Unreal Engine 4?
wcobalt
Что нужно знать перед прочтением этой статьи?
Предполагается, что читатель уже базово знаком с Unreal Engine 4: умеет создавать проекты, приблизительно знает, где в интерфейсе что находится, а также имеет представление об основных концепциях движка. Также предполагается, что читатель знаком с программированием на любом императивном языке и имеет опыт работы с отладчиком (вне зависимости от языка программирования и IDE).
Что такое Blueprint?
Пример графа Blueprint
Как и многие подобные языки, он позволяет создавать классы и их экземпляры (объекты), которые зачастую называют просто блюпринтами.
Для чего нужен Blueprint?
Как ни странно, Blueprint нужен не только для программирования акторов (игровых объектов) и подобных игровых вещей. Приведём несколько примеров использования этого инструмента:
Какова польза от Blueprint?
Если же говорить о BP имея в виду классы и экземпляры классов, то их главным преимуществом является, пожалуй, возможность визуального создания игровых объектов: расположение различных компонентов (компонент – обособленная функциональность, предназначенная для переиспользования) в пространстве, а также их настройка прямо из редактора. Это аналогичная упомянутой в предыдущем абзаце идея, только касающаяся не логики, а данных – настроек компонентов.
Обзор редактора Blueprint и создание класса
Для создания BP-классов существует несколько путей, но основной – сделать т.н. ассет Blueprint из панели Content Browser. Необходимо щёлкнуть правой кнопкой мыши в Content Browser и выбрать Blueprint Class:
Создание BP-класса
На следующем шаге необходимо выбрать базовый класс для создаваемого:
Выбор базового класса
По двойному щелчку на созданном классе будет открыт редактор BP. Остановимся на нём (на скриншоте ниже создан BP-класс, наследник класса Actor):
Переменные в Blueprint
Создадим унаследованный от Actor BP-класс, назовём его Bulb и с помощью кнопки “Add Component” добавим в него точечный источник света ( Point Light Component ):
Добавление компонента
Создадим простую сцену, на которой расположим выполняющий роль пола куб, а посередине – наш актор:
Тестовая сцена
Запустим проект и убедимся, что куб освещён скучным белым светом:
Скучный белый свет
Добавление переменной 
Настройки переменной
Выберем тип “Linear Color” и установим флаг “Instance Editable”. Этот флаг позволит задавать значение переменной для каждого экземпляра класса.
BeginPlay » data-src=»https://media.proglib.io/posts/2021/11/22/8e853eb99caaaa0b1050c0d2a3d7177a.png» > Событие BeginPlay
Отпустим левую кнопку мыши – тут же появится окно выбора функции. Снимем флаг “Context Sensitive” (без него редактор предложит все возможные функции, а не только те, которые укладываются в текущий контекст) и найдём функцию Set Light Color компонента Point Light Component :
Панель выбора действия
Должно получиться так:
BeginPlay » data-src=»https://media.proglib.io/posts/2021/11/22/128adbea7b380ab2417eee15f84d9cc7.png» > Установка цвета на срабатывании BeginPlay
Белая линия означает порядок выполнения. Иначе говоря, белая линия – это возможный путь передачи управления из одной BP-ноды (узла BP-графа) в другую.
Цветные пины (pin) означают входные данные/выходные данные. Как видно на скриншоте, Set Light Color ожидает три значения на входе:
После изменения BP его необходимо скомпилировать. Для этого есть специальная кнопка на панели инструментов в верхней части редактора.
Тулбар BP-редактора. Кнопка для компиляции – крайняя слева
При успешной компиляции кнопка будет гореть зелёным:
Индикатор успешной компиляции
Перейдем к редактору уровня, выделим наш актор и обратимся к панели “Details”:
Свойства актора
Нескучный голубой цвет
Операторы ветвления
Вернёмся к переменной LightColor и сделаем из неё массив. Для этого необходимо нажать на иконку справа от типа переменной и выбрать иконку с квадратами три на три:
Выбор модификации переменной: одиночное значение, массив, множество и карта/словарь (map)
Вероятно, редактор попросит вас подтвердить: действительно ли вы хотите изменить тип переменной: смело отвечайте “Да”. После этого ваш граф сломается:
Граф сломался
Чтобы это исправить, удалите ноду с LightColor и перекомпилируйте BP.
Значение переменной по умолчанию
Создадим такую конструкцию:
Мне надо подписать картинку, но я сам не знаю, что здесь происходит
Правая часть блюпринта
В случае, если элементы в массиве ещё не закончились, взять текущий и установить цвет источника света равный этому элементу, подождать одну секунду, увеличить CurrentColorIndex на один и перейти обратно к условию. Если элементы закончились, установить цвет в чёрный и завершить выполнение.
Итоговый блюпринт целиком
Добавим цветов в находящийся на уровне актор:
Массив цветов внутри нашего актора
Запустив игру, проверим результат.
Циклы
Конструкцию выше можно с легкостью заменить на встроенный в BP цикл For Each :
Встроенная в BP нода-цикл
Запустим и убедимся, что всё работает. Ничего не работает? У меня тоже.
Это старый баг движка (или фича – уже никто не знает). Delay внутри For each игнорируется, поэтому цикл выполняется настолько быстро, что становится невозможным заметить реальную смену цвета, а лишь только черный экран.
Функции
Создание новой функции
В панели “Details” добавим параметр для функции с именем NewColor и типом Linear Color :
Создание нового параметра функции
Заметьте, для новой функции в рабочей области BP-редактора появилась новая вкладка. Перенесём туда вызов функции SetLightColor на компоненте Point Light:
Функция Set Color
Заменим оба вызова Set Light Color в Event Graph на вызов нашей функции:
Обновлённый блюпринт
Запустим проект и убедимся, что всё работает, как и работало.
Отладка Blueprint
Брейкпоинт на BP-ноде
При запуске игры выполнение остановится на этой ноде, и вы сможете просмотреть значения переменных или, например, пошагово пройтись по следующим нодам.
Сработавший брейкпоинт
Для управления выполнением в режиме отладки в верхней части редактора имеется множество кнопок, значение большинства из которых должно знакомо любому знакомому с отладчиками программисту:
Тулбар дебаггера
Баланс между C++ и Blueprint
Blueprint
Для команды из одного человека и небольшого проекта вполне приемлемо использовать только BP. Использование же только C++ (в любом проекте) вряд ли является обоснованным решением.
Вывод
Blueprint – система визуального программирования в UE, призванная увеличить количество участников команды, способных самостоятельно создавать игровую логику. Блюпринтами также называют определённые через эту систему классы. BP поддерживает все фичи обычных языков программирования: переменные, функции, операторы ветвления, циклы. В редакторе UE имеется встроенный отладчик BP. Перед началом проекта стоит серьезно задуматься о балансе между C++ и BP, которого стоит придерживаться.
Несмотря на кажущуюся простоту BP – система с большим количеством тонкостей, в особенности если смешивать её с C++. Полное изучение всех особенностей работы с BP может занять время. Удачи в обучении!
От as-is к as-to-be: что такое Service Blueprint и при чем здесь BABOK
В этой статье мы продолжим разговор про Customer Journey Map (CJM) и рассмотрим, чем карта взаимодействия с клиентом отличается от Service Blueprint, зачем вообще нужен сервисный сценарий и как он связан с классикой бизнес-анализа: моделями as-is и as-to-be, а также с руководством BABOK.
Что такое Service Blueprint и чем он отличается от CJM
Начнем с определения: Service Blueprint или карта сервисного сценария – это визуальное представление идеального процесса взаимодействия с клиентом, направленное на достижение конкретной бизнес-цели с учетом всех возможных точек контакта: физических и цифровых [1]. Обычно Service Blueprint рассматривают как модификацию CJM, которая включает не только элементы потребительского поведения, но и бизнес-процессы обеспечения контактов, в т.ч. те, которые находятся «за сценой» [2]. Например, работа банковского бэк-офиса, складские операции в интернет магазине и прочие действия, которые не видны пользователю напрямую, но непосредственно связаны с оказанием бизнес-услуги. Таким образом, CJM — это внешний взгляд на продукт, сервис или бренд с позиции пользователя, а Service Blueprint – это представление бизнес-процессов, обеспечивающих эффективное взаимодействие с клиентом [3].
Как построить карту сервисного сценария
Карта сервисного сценария включает следующие компоненты [4]:
Разделение бизнес-процессов по уровням показывается с помощью линий:
Как и в случае CJM, наиболее популярным способом практического построения Service Blueprint является ручной – по крайне мере, на первом этапе проектирования. Действия на каждом уровне бизнес-процессов изображаются с помощью графических примитивов (круг, квадрат, прямоугольник), связанных между собой. Здесь не идет речь об использовании строгих нотаций бизнес-моделирования (IDEF, EPC, UML, BPMN), хотя на практике имеет смысл определить правила для изображения элементов и придерживаться их.
Пример Service Blueprint
А что скажет BABOK: сервисный сценарий и классический бизнес-анализ
С точки зрения классического бизнес-анализа, подробно описанного в профессиональном руководстве BABOK®Guide (A Guide to the Business Analysis Body of Knowledge®), CJM описывает текущее состояние (модель «как есть», as-is). А Service Blueprint можно рассматривать в качестве модели желаемого будущего («как должно быть», as-to-be), которая будет реализована с помощью соответствующих решений: программных средств или организационных мероприятий. Примечательно, что BABOK не включает понятия CJM и Service Blueprint в перечень наиболее распространенных техник бизнес-анализа. Впрочем, это руководство подчеркивает, что за его рамками осталось еще множество полезных методов и средств. Некоторые из них, в частности, CJM, международный институт бизнес-анализа упоминает в качестве техник продуктового анализа в Guide to Product Ownership Analysis.
Кроме того, главные достоинства CJM и Service Blueprint (наглядность, понятность, простота построения и удобство использования) позволяют работать с ними не только профессиональным аналитикам, но и руководителям, маркетологам, дизайнерам, менеджерам и прочим профильным специалистам. Подробнее о том, что такое BABOK, мы рассказываем здесь.
К этому моменту мы с вами создали проект (WSGI-приложение), состоящий из нескольких файлов и реализующий некоторый типовой функционал: отображение статей, авторизацию и регистрацию пользователей. Но даже в этом простом приложении становится непросто ориентироваться, вносить изменения, не говоря уже о тестировании отдельных его компонент, например, авторизации пользователей. Наверное, главной проблемой разрастающегося проекта, является все большая мешанина программного кода, усложнение его понимания, редактирования и переноса части функционала в какой-либо другой подобный проект.
Так вот, все эти слова я, конечно, говорю не просто так. Фреймворк Flask позволяет разделять большой, сложный проект на набор независимых модулей. Например, на сайте могут быть модули авторизации, админ-панели, подсчета числа просмотров страниц и так далее. Причем, каждый модуль может иметь свои шаблоны, стили оформления, наборы изображений. Все это хранится в отдельном подкаталоге, что делает фрагмент приложения совершенно независимым. И при необходимости, этот каталог можно просто скопировать в другой проект и подключить к другому сайту.
Такие модули в терминологии Flask называются Blueprint (эскизами) и о них пойдет речь на этом занятии. Чтобы не копаться в уже написанном коде и не усложнять занятие, я покажу пример реализации Blueprint на примере создания простейшей админ-панели.
Структура подкаталога admin
Вся наша админ-панель будет реализована в отдельном подкаталоге admin со следующей структурой:
В корне этого каталога будет лежать файл admin.py, в котором и реализуем админ-панель с использованием Blueprint. В подкаталоге templates/admin будут располагаться файлы шаблонов, а в static – файлы оформления, js, изображений и другие статические данные, подключаемые к HTML-страницам в панели администратора. Таким образом, мы строго разделяем данные, относящиеся к нашему модулю admin от всех остальных файлов приложения. В дальнейшем, при необходимости, можно будет просто скопировать этот подкаталог в другой проект и в нем реализовать похожую админ-панель.
Здесь может возникнуть вопрос: зачем в подкаталоге templates создавать еще один каталог admin? Фактически, здесь используется Django’вский подход, когда шаблоны в каждом модуле помещаются в дополнительный подкаталог с тем же именем. Это необходимо, т.к. при компиляции проекта все шаблоны собираются в одну кучу и может возникнуть конфликт имен, когда в разных модулях будут файлы с одинаковыми именами. Чтобы этого избежать, как раз и создается дополнительный подкаталог. В этом случае в момент выполнения, шаблоны будут отделяться от других этим подкаталогом.
Создание и регистрация Blueprint
Итак, теперь у нас все готово, чтобы создать Blueprint в модуле admin.py. В начале выполним импорт класса Blueprint:
и ниже создадим экземпляр этого класса:
После создания эскиза его нужно зарегистрировать в основном приложении. Перейдем в файл flsite.py и выполним импорт переменной admin:
Обратите внимание, мы импортируем именно переменную, а не класс или функцию. Далее, ниже выполним непосредственно регистрацию Blueprint:
Здесь admin – ссылка на созданный Blueprint; url_prefix – префикс для всех URL модуля admin. Это необязательный параметр. Без него все URL внутри Blueprint будут записываться непосредственно после домена сайта. Но это не лучшая практика, так как, подключая несколько таких модулей, можно опять же столкнуться с проблемой дублирования URL. Поэтому лучше использовать префик, по которому они будут четко разделяться.
Итак, мы создали Blueprint и зарегистрировали его в приложении. Если теперь перейти по URL:
то получим ошибку 404 – страница не найдена, так как внутри эскиза не создано ни одного представления. Давайте его добавим.
Маршрутизация в Blueprint
Перейдем в модуль admin.py и пропишем декоратор route:
Смотрите, мы вызываем route для admin, а не app, как это делали в основном приложении. Тем самым указываем, что корневая (главная) страница – это страница Blueprint, а не приложения app. Причем, адрес этого URL определяется по правилу:
и в нашем случае будет выглядеть так:
то есть, это главная страница админ-панели, а не сайта. И благодаря префиксу, указанному при регистрации этого эскиза, мы можем не беспокоиться о дублировании URL в нашем модуле.
Авторизация в админ-панели
Давайте теперь добавим возможность авторизации в нашей тестовой панели администратора. Для этого пропишем еще одну функцию представления login, следующим образом:
Здесь все достаточно просто и очевидно. Сначала проверяем, что пришли данные по POST-запросу, затем, проверяем правильность логина и пароля и при истинности условий, выполняем авторизацию с помощью функции login_admin, которую пропишем чуть позже. Далее, делается перенаправление на главную страницу админ-панели, а иначе – формируется мгновенное сообщение «Неверная пара логин/пароль». В конце возврашается шаблон ‘admin/login.html’ с заголовком ‘Админ-панель’.
Обратите внимание, как здесь записан параметр в функции
Перед index указана точка. Эта точка означает, что функцию-представления index следует брать для текущего Blueprint, а не глобальную из приложения. Если убрать точку, то будет возвращен URL-адрес главной страницы сайта, а не панели администратора. Как вариант, функцию url_for можно еще вызвать и так:
Здесь admin – это имя Blueprint, а не название файла admin.py. Например, если изменить имя эскиза на bp, то придется уже прописывать:
Но, в данном случае, это избыточная запись и, кроме того, идет жесткая привязка к имени Blueprint. Поэтому, я в дальнейшем буду писать просто точку.
Итак, возвращаясь к обработчику login, добавим функцию login_admin в модуль admin.py:
Мы здесь просто в сессии создаем и сохраняем запись ‘admin_logged’ со значением 1. И в дальнейшем будем полагать, если она существует, то пользователь зашел в админ-панель.
Некоторые из вас могут задаться вопросом: почему бы нам здесь не использовать рассмотренный ранее модуль Flask-Login? Дело в том, что нельзя создать еще один его экземпляр в рамках одного приложения. А Blueprint – это лишь дополнение, расширение, но не самостоятельная программа. Конечно, мы могли бы передать ссылку на Flask-Login в наш модуль admin и как то его использовать, но тогда теряется концепция независимости и модульности Blueprint. И наша реализация будет ничем не лучше обычного дополнительного вспомогательного класса, записанного в отдельном файле проекта. Поэтому, я авторизацию сделал через сессии.
Давайте здесь же рядом объявим еще две вспомогательные функции:
Первая проверяет: авторизован ли администратор, а вторая – удаляет из сессии запись об авторизации и будет использоваться при выходе из админ-панели. И сразу пропишем функцию представления logout:
Шаблоны для страницы админ-панели и авторизации
Теперь давайте добавим первые шаблоны для нашей панели администратора. Я специально для демонстрации сделаю другое оформление и пропишу новый базовый шаблон. В каталоге templates/admin добавлю файл base_admin.html, который будет иметь следующий вид:
Здесь все, опять же, достаточно очевидно. Обратите внимание, для обращения к каталогу static первый параметр функции
записан с точкой вначале. Эта точка будет указывать брать каталог static из подкаталога admin, то есть, сформируется следующий путь:
Далее, в шаблоне идет отображение меню, если оно передается в шаблон и записан именованный блок content для добавления информации в дочерних шаблонах. И первый такой шаблон будет login.html со следующим содержимым:
Мы здесь отображаем форму авторизации, где пользователь вводит логин/пароль.
А шаблон index.html будет пока пустой:
Далее, нам нужно прописать стили оформления. Они представлены в файле
(подробнее см. в файле проекта).
И перед первым пробным тестированием, изменим обработчик главной страницы админ-панели:
Вначале идет проверка: если пользователь не авторизован, то он перенаправляется на страницу авторизации. Иначе, будет отображена панель администратора. Здесь в шаблон ‘admin/index.html’ передаются два параметра: menu и title. И для menu пропишем следующую коллекцию:
Все, теперь при запуске, мы увидим окно авторизации и, вводя admin/12345, перейдем в панель администратора.
Видео по теме
Flask #1: Что это такое? Простое WSGI-приложение
Flask #2: Использование шаблонов страниц сайта
Flask #3: Контекст приложения и контекст запроса
Flask #4: Функция url_for и переменные URL-адреса
Flask #5: Подключение внешних ресурсов и работа с формами
Flask #7: Декоратор errorhandler, функции redirect и abort
Flask #8: Создание БД, установление и разрыв соединения при запросах
Flask #9: Добавление и отображение статей из БД
Flask #10: Способ представления полноценных HTML-страниц на сервере
Flask #11: Формирование ответа сервера, декораторы перехвата запроса
Flask #12: Порядок работы с cookies (куками)
Flask #13: Порядок работы с сессиями (session)
Flask #14: Регистрация пользователей и шифрование паролей
Flask #15: Авторизация пользователей на сайте через Flask-Login
Flask #16: Улучшение процесса авторизации (Flask-Login)
Flask #17: Загрузка файлов на сервер и сохранение в БД
Flask #18: Применение WTForms для работы с формами сайта
Flask #19: Обработка ошибок во Flask-WTF
Flask #23: Операции с таблицами через Flask-SQLAlchemy
© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта