Что такое blue print

К этому моменту мы с вами создали проект (WSGI-приложение), состоящий из нескольких файлов и реализующий некоторый типовой функционал: отображение статей, авторизацию и регистрацию пользователей. Но даже в этом простом приложении становится непросто ориентироваться, вносить изменения, не говоря уже о тестировании отдельных его компонент, например, авторизации пользователей. Наверное, главной проблемой разрастающегося проекта, является все большая мешанина программного кода, усложнение его понимания, редактирования и переноса части функционала в какой-либо другой подобный проект.

Так вот, все эти слова я, конечно, говорю не просто так. Фреймворк Flask позволяет разделять большой, сложный проект на набор независимых модулей. Например, на сайте могут быть модули авторизации, админ-панели, подсчета числа просмотров страниц и так далее. Причем, каждый модуль может иметь свои шаблоны, стили оформления, наборы изображений. Все это хранится в отдельном подкаталоге, что делает фрагмент приложения совершенно независимым. И при необходимости, этот каталог можно просто скопировать в другой проект и подключить к другому сайту.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Такие модули в терминологии Flask называются Blueprint (эскизами) и о них пойдет речь на этом занятии. Чтобы не копаться в уже написанном коде и не усложнять занятие, я покажу пример реализации Blueprint на примере создания простейшей админ-панели.

Структура подкаталога admin

Вся наша админ-панель будет реализована в отдельном подкаталоге admin со следующей структурой:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

В корне этого каталога будет лежать файл 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, перейдем в панель администратора.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Видео по теме

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #1: Что это такое? Простое WSGI-приложение

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #2: Использование шаблонов страниц сайта

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #3: Контекст приложения и контекст запроса

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #4: Функция url_for и переменные URL-адреса

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #5: Подключение внешних ресурсов и работа с формами

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #7: Декоратор errorhandler, функции redirect и abort

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #8: Создание БД, установление и разрыв соединения при запросах

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #9: Добавление и отображение статей из БД

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #10: Способ представления полноценных HTML-страниц на сервере

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #11: Формирование ответа сервера, декораторы перехвата запроса

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #12: Порядок работы с cookies (куками)

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #13: Порядок работы с сессиями (session)

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #14: Регистрация пользователей и шифрование паролей

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #15: Авторизация пользователей на сайте через Flask-Login

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #16: Улучшение процесса авторизации (Flask-Login)

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #17: Загрузка файлов на сервер и сохранение в БД

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #18: Применение WTForms для работы с формами сайта

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #19: Обработка ошибок во Flask-WTF

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Flask #23: Операции с таблицами через Flask-SQLAlchemy

© 2021 Частичное или полное копирование информации с данного сайта для распространения на других ресурсах, в том числе и бумажных, строго запрещено. Все тексты и изображения являются собственностью сайта

Источник

Туториал по Unreal Engine. Часть 2: Blueprints

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Blueprints — это система визуального скриптинга Unreal Engine 4. Она является быстрым способом создания прототипов игр. Вместо построчного написания кода всё можно делать визуально: перетаскивать ноды (узлы), задавать их свойства в интерфейсе и соединять их «провода».

Кроме быстрого прототипирования, Blueprints также упрощают создание скриптов для непрограммистов.

В этой части туториала мы будем использовать Blueprints для следующих операций:

В этой части также используются векторы. Если вы с ними незнакомы, то рекомендую эту статью про векторы на gamedev.net.

Примечание: эта статья является одной из восьми частей туториала, посвящённого Unreal Engine:

Приступаем к работе

Скачайте начальный проект и распакуйте его. Чтобы открыть проект, перейдите в папку проекта и откройте BananaCollector.uproject.

Примечание: если откроется окно, сообщающее, что проект создан в более ранней версии Unreal editor, то всё в порядке (движок часто обновляется). Можно или выбрать опцию создания копии, или опцию преобразования самого проекта.

На рисунке ниже показана сцена. Именно в ней игрок будет перемещаться и собирать предметы.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Для простоты навигации я разбил файлы проекта на папки, как показано на рисунке:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Выделенную красным кнопку можно использовать, чтобы показать или скрыть панель исходников.

Создание игрока

В Content Browser перейдите к папке Blueprints. Нажмите на кнопку Add New и выберите Blueprint Class.

Мы хотим, чтобы актор получал вводимую игроком информацию, поэтому нам подходит класс Pawn. Выберите во всплывающем окне Pawn и назовите его BP_Player.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Примечание: класс Character тоже подойдёт. В нём даже по умолчанию есть компонент перемещения. Однако мы будем реализовывать собственную систему движения, поэтому класса Pawn нам достаточно.

Прикрепление камеры

Камера — это способ игрока смотреть на мир. Мы создадим камеру, смотрящую на игрока сверху вниз.

В Content Browser дважды нажмите на BP_Player, чтобы открыть его в Blueprint editor.

Для создания камеры перейдите на панель Components. Нажмите на Add Component и выберите Camera.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы камера смотрела сверху вниз, нужно расположить её над игроком. Выбрав компонент камеры, перейдите во вкладку Viewport.

Активируйте манипулятор перемещения, нажав клавишу W, а затем переместите камеру в (-1100, 0, 2000). Или же можно ввести координаты в поля Location. Она находится в разделе Transform панели Details.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Если вы потеряли камеру из виду, нажмите клавишу F, чтобы сфокусироваться на ней.

Затем активируйте манипулятор поворота, нажав клавишу E. Поверните камеру вниз на -60 градусов по оси Y.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Отображаем игрока

Мы обозначим персонажа игрока красным кубом, поэтому для его отображения нужно будет использовать компонент Static Mesh.

Во-первых, снимите выделение с компонента Camera, нажав левой клавишей мыша на пустом пространстве в панели Components. Если этого не сделать, то следующий добавленный компонент будет дочерним по отношению к камере.

Нажмите на Add Component и выберите Static Mesh.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы отобразить красный куб, выберите компонент Static Mesh, а затем перейдите во вкладку Details. Нажмите на раскрывающийся список, находящийся справа от Static Mesh и выберите SM_Cube.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Вы должны увидеть следующее (можно нажать F внутри Viewport, чтобы сфокусироваться на кубе, если вы его не видите):

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь настало время заспаунить актора Pawn игрока. Нажмите на Compile и вернитесь к основному редактору.

Спаун игрока

Чтобы игрок мог управлять Pawn, нужно указать две вещи:

Создание Game Mode

Класс Game Mode (игровой режим) — это класс, управляющий тем, как игрок входит в игру. Например, в многопользовательской игре Game Mode используется для задания спауна каждого игрока. Что более важно, Game Mode определяет. какой Pawn будет использовать игрок.

Перейдите к Content Browser и зайдите в папку Blueprints. Нажмите на кнопку Add New и выберите Blueprint Class.

Во всплывающем меню выберите Game Mode Base и назовите его GM_Tutorial.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь нужно указать, какой класс Pawn будет использоваться по умолчанию. Дважды нажмите на GM_Tutorial, чтобы открыть его.

Перейдите на панель Details и загляните в раздел Classes. Нажмите на раскрывающийся список Default Pawn Class и выберите BP_Player.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы использовать новый Game Mode, нужно сообщить уровню, какой Game Mode он должен использовать. Это можно указать в World Settings. Нажмите на Compile и закройте Blueprint editor.

Каждый уровень имеет собственные параметры. Получить доступ к этим параметрам можно, выбрав Window\World Settings. Или же можно зайти в Toolbar и выбрать Settings\World Settings.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Рядом со вкладкой Details откроется новая вкладка World Settings. В ней нажмите на раскрывающийся список GameMode Override и выберите GM_Tutorial.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь вы увидите, что классы сменились на те, которые выбраны в GM_Tutorial.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Наконец, нам нужно задать точку спауна игрока. Это реализуется размещением на уровне актора Player Start.

Размещение Player Start

В процессе спауна игрока Game Mode ищет актор Player Start. Если Game Mode находит его, то предпринимает попытку заспаунить игрока там.

Чтобы разместить Player Start, перейдите к панели Modes и найдите Player Start. Нажмите левой клавишей и перетащите Player Start из панели Modes во Viewport. Отпустите левую клавишу мыши, чтобы разместить его.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Можете разместить его где угодно. Когда закончите, перейдите в Toolbar и нажмите Play. Вы будете заспаунены в точке расположения Player Start.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы выйти из игры, нажмите кнопку Stop в Toolbar или нажмите клавишу Esc. Если вы не видите курсор, нажмите Shift+F1.

Это не похоже на игру, если мы не можем двигаться. Наша следующая задача — настроить параметры ввода.

Настройка ввода

Назначение клавиши действию называется привязкой клавиши.

В Unreal можно настроить привязки клавиш, чтобы при их нажатии срабатывали события. События — это ноды, выполняющиеся при определённых действиях (в этом случае — при нажатии указанной клавиши). При срабатывании события выполняются все ноды, соединённые с событием.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Такой способ привязки клавиш удобен, потому что он означает, что нам не нужно жёстко задавать клавиши в коде.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Если мы будем задавать клавиши жёстко, то нам придётся заходить в каждый актор и менять клавиши отдельно.

Привязка осей и действий

Чтобы перейти к параметрам ввода, зайдите в Edit\Project Settings. В разделе Engine выберите слева Input.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

В разделе Bindings выполняется настройка ввода.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Unreal предоставляет два способа создания привязок клавиш:

Создание привязок движения

Во-первых, мы создадим две группы привязки осей. Группы позволяют привязывать несколько клавиш к одному событию.

Для создания новой группы привязки осей нажмите на значок + справа от Axis Mappings. Создайте две группы и назовите их MoveForward и MoveRight.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

MoveForward будет управлять движением вперёд и назад. MoveRight будет управлять движением влево и вправо.

Мы привяжем движение к четырём клавишам: W, A, S и D. Пока у нас есть только два слота для привязки клавиш. Добавим к каждой группе ещё одну привязку осей, нажав на значок + рядом с полем имени группы.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы привязать клавишу, нажмите на раскрывающийся список с перечислением клавиш. Привяжите клавиши W и S к MoveForward. Привяжите клавиши A и D к MoveRight.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь нужно задать значения в полях Scale.

Значение оси и масштаб ввода

Перед заданием полей Scale нам нужно больше узнать о том, как работать со значениями осей.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Мы можем использовать значение оси для управления скоростью Pawn. Например, если мы нажмём стик до упора, то значение оси будет 1. Если нажать наполовину, то значение будет 0.5.

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

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Также значение оси можно использовать для задания направления вдоль оси. Если умножить скорость Pawn на положительное значение оси, то мы получим положительное смещение. При использовании отрицательного значения оси получим отрицательное смещение. Прибавляя это смещение к местонахождению Pawn, мы задаём направление его движения.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

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

Умножив положительное (значение оси) на отрицательный (масштаб), мы получим отрицательное значение.

Задайте масштаб клавиш S и A, нажав на поле Scale и введя -1.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь начинается интересное: заставим Pawn двигаться! Закройте Project Settings и откройте BP_Player в Blueprints editor, дважды нажав на него.

Перемещение игрока

Сначала нам нужно выбрать события для привязок движения. Нажмите правой клавишей мыши на пустом пространстве в Event Graph, чтобы открыть список нодов. Найдите в этом меню MoveForward. Добавьте нод MoveForward из списка Axis Events. Учтите, что вам нужен красный нод в Axis Events, а не зелёный нод в Axis Values.

Повторите процесс для MoveRight.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь мы настроим ноды для MoveForward.

Использование переменных

Для перемещения необходимо указать, с какой скоростью будет двигаться Pawn. Один из простых способов указания скорости — хранение её в переменной.

Чтобы создать переменную, зайдите во вкладку My Blueprint и нажмите на значок + в правой части раздела Variables.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Выбрав новую переменную, перейдите во вкладку Details. Измените имя переменной на MaxSpeed. После этого замените тип переменной на Float. Для этого нужно нажать на раскрывающийся список рядом с Variable Type и выбрать Float.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь необходимо задать значение по умолчанию. Но чтобы его задать, нужно будет нажать Compile в Toolbar.

Выбрав переменную, перейдите ко вкладке Details. Зайдите в раздел Default Value и измените значение MaxSpeed по умолчанию на 10.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Затем перетащите переменную MaxSpeed из вкладки My Blueprint на Event Graph. Выберите из меню пункт Get.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь нужно умножить MaxSpeed на значение оси, чтобы получить конечную скорость и направление. Добавим нод float * float и присоединим к нему Axis Value и MaxSpeed.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Получение направления игрока

Чтобы двигаться вперёд, нам нужно знать, куда смотрит Pawn. К счастью, в Unreal есть для этого нод. Добавьте нод Get Actor Forward Vector.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Затем добавьте нод Add Movement Input. Этот нод получает направление и значение, преобразуя их в хранимое смещение. Соедините ноды следующим образом:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Белая линия обозначает цепочку выполнения. Другими словами, когда игрок перемещает ось ввода, то генерируется событие, выполняющее нод InputAxis MoveForward. Белая линия показывает, что после этого выполняется нод Add Movement Input.

Нод Add Movement Input получает на входе следующие данные:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Добавление смещения

Чтобы действительно двигать Pawn, нам нужно получить смещение, вычисленное Add Movement Input, и прибавить его к местоположению Pawn.

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

Перейдите к ноду Event Tick в Event Graph. Он должен быть неактивным и находиться слева, но если его нет, то создайте нод самостоятельно.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы получить смещение, создадим нод Consume Movement Input Vector. Чтобы прибавить смещение, создадим нод AddActorLocalOffset. После этого соединим их следующим образом:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

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

Нажмите Compile, перейдите к основному редактору и нажмите на Play. Теперь вы можете двигаться в сцене!

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Однако у нас есть небольшая проблема. Мощные компьютеры могут рендерить кадры с большей частотой. Event Tick вызывается каждый кадр, поэтому ноды перемещения будут выполняться чаще. Это значит, что Pawn будет двигаться на мощных компьютерах быстрее, и наоборот.

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

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

Независимость от частоты кадров

Независимость от частоты кадров означает, что мы постоянно будем получать одинаковые результаты, вне зависимости от частоты кадров. К счастью, достичь такой независимости в Unreal очень просто.

Выйдите из игры, а затем откройте BP_Player. Затем перейдите к узлу Event Tick и посмотрите на Delta Seconds.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Delta Seconds — это величина времени, прошедшего после предыдущего Event Tick. Умножив смещение на Delta Seconds, мы сделаем перемещение независимым от частоты кадров.

Например, наш Pawn имеет максимальную скорость 100. Если после предыдущего Event Tick прошла одна секунда, то Pawn переместится на полные 100 единиц. Если прошли полсекунды, то он переместится на 50 единиц.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Если движение зависимо от частоты кадров, то Pawn будет перемещаться на 100 единиц в каждом кадре, вне зависимости от времени между кадрами.

Чтобы умножить смещение на Delta Seconds, добавьте нод vector * float. После этого соедините ноды следующим образом:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Время между кадрами (Delta Seconds) очень мало, поэтому Pawn будет двигаться намного медленнее. Это можно исправить, заменив значение MaxSpeed по умолчанию на на 600.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Поздравляю вам удалось добиться независимости от частоты кадров!

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Можно заметить, что куб проходить сквозь все объекты. Чтобы исправить это, нам нужно познакомиться с коллизиями.

Надевайте шлем, потому что сейчас нам придётся столкнуться с теорией!

Коллизии актора

Когда мы вспоминаем о столкновениях, то представляем автомобильные аварии. К счастью, коллизии в Unreal намного безопаснее.

Чтобы иметь возможность сталкиваться с объектами, актору нужно обозначение его пространства столкновений (обычно называемого коллизией). Можно использовать одно из следующих пространств:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Коллизия происходит, когда коллизия актора касается коллизии другого актора.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь настало время включить коллизии.

Включение коллизий

Вы, наверно, недоумеваете, почему куб не сталкивается с объектами, хотя у него есть меш коллизии. При перемещении актора Unreal учитывает для коллизий только корневой компонент. Поскольку корневой компонент Pawn не имеет коллизии, он проходит сквозь все объекты.

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

Итак, чтобы использовать меш коллизии, StaticMesh должен быть корневым. Для этого перейдите в панель Components. Затем зажмите левую клавишу мыши и перетащите StaticMesh на DefaultSceneRoot. Отпустите левую клавишу мыши, чтобы сделать StaticMesh новым корневым компонентом.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Чтобы коллизии начали работать, нужно выполнить ещё одно действие. Переключитесь на Event Graph и перейдите к узлу AddActorLocalOffset. Найдите вход Sweep и измените значение на true, нажав левой клавишей мыши на флажок.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

AddActorLocalOffset занимается тем, что телепортирует актора в новое место. Sweep гарантирует, что актор будет сталкиваться со всем, что находится между старым и новым местоположением.

Перейдите в основной редактор и нажмите на Play. Теперь куб будет реагировать на коллизии с уровнем!

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Последнее, что мы создадим — это предмет, исчезающий при контакте с персонажем игрока.

Создание предмета

В общем случае предметом является любой собираемый игроком объект. Мы используем в качестве предмета BP_Banana.

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

Реакция на коллизию также определяет, как актор реагирует на коллизию с другим актором. Существует три типа реакций на коллизии: Ignore, Overlap и Block. Вот как они взаимодействуют друг с другом:

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Хотя здесь можно использовать и Overlap, и Block, в этом туториале мы будем использовать только Overlap.

Задание реакции на коллизию

Закройте игру и откройте BP_Banana. Выберите компонент StaticMesh, а затем перейдите в панель Details. Реакции на коллизии задаются в разделе Collision.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Как вы видите, большинство параметров неактивно. Чтобы сделать их изменяемыми, нажмите на раскрывающийся список рядом с Collision Presets. Выберите в списке Custom.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Теперь нам нужно указать реакцию на коллизию между предметом и кубом.

Компоненты имеют атрибут под названием object type (тип объекта). Тип объекта — это просто удобный способ группировки похожих акторов. Подробнее о типах объектов можно прочитать здесь.

Куб имеет тип WorldDynamic, поэтому нам нужно изменить реакцию на коллизию этого типа. В разделе Collision Responses измените реакцию на коллизию WorldDynamic на Overlap. Это можно сделать, нажав на средний флажок справа от WorldDynamic.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Обработка коллизий

Для обработки коллизий нужно использовать событие наложения. Перейдите в панель Components и нажмите правой клавишей мыши на StaticMesh. В контекстном меню выберите Add Event\Add OnComponentBeginOverlap.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Так мы добавим в Event Graph нод OnComponentBeginOverlap (StaticMesh).

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Наконец, создадим нод DestroyActor и соедините его с нодом OnComponentBeginOverlap (StaticMesh). Как можно догадаться по названию, он удаляет целевой актор из игры. Однако поскольку целевого актора нет, он уничтожит актор, вызвавший его.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Размещение предмета

Закройте Blueprint editor и перейдите в папку Blueprints.

Начните располагать бананы на уровне зажав левую клавишу мыши и перетаскивая BP_Banana во Viewport.

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Нажмите Play и начните собирать бананы!

Что такое blue print. Смотреть фото Что такое blue print. Смотреть картинку Что такое blue print. Картинка про Что такое blue print. Фото Что такое blue print

Куда двигаться дальше?

Готовый проект можно скачать отсюда.

Вы сделали ещё один шаг к тому, чтобы стать специалистом по Unreal Engine.

Если вы хотите продолжить обучение, то прочитайте следующий пост в серии, где мы подробнее рассмотрим материалы Unreal Engine.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *