PixiJS - это невероятно быстрый движок рендеринга 2D графических объектов. И зачем же он нам нужен? Pixi js позволяет отображать, анимировать и управлять интерактивной графикой, легко создавать игры и приложения с использованием JavaScript и других технологий HTML5. Он имеет хороший API и включает в себя множество полезных функций, таких как поддержка текстурных атласов и предоставление оптимизированной системы для анимации спрайтов (интерактивных изображений). Он также дает вам полный граф сцены, так что вы можете создавать иерархии вложенных графических объектов (спрайтов внутри спрайтов), а также позволяет прикреплять события мыши и касания непосредственно к спрайтам. И, самое главное, Pixi делает все возможное, чтобы вы могли легко адаптировать его к своему стилю кодирования и легко интегрировать с другими полезными средами.
В этой серии уроков вы узнаете, как объединить мощные функции рендеринга изображений Pixi и граф сцены, чтобы начать создавать игры. Но Pixi может использоваться не только для игр - вы можете использовать эти же методы для создания любых интерактивных мультимедийных приложений и потрясающих эффектов для веб-сайтов.
Какие знания вам понадобятся, прежде взяться за Pixi js? У вас должно быть разумное понимание HTML и JavaScript. Вам не нужно быть экспертом, просто амбициозным новичком, готовым учиться. Если вы не знаете HTML и JavaScript, лучше всего начать с изучения именно с них. Знаете ли вы, что такое переменные, функции, массивы и объекты JavaScript и как их использовать? У вас должно быть знание, что такое файлы данных JSON.
Чтобы использовать Pixi, вам также необходимо запустить веб-сервер в корневом каталоге проекта. Лучший способ - использовать node.js, а затем установить чрезвычайно простой в использовании http-сервер. Или вы можете установить Open Server.
1 Подготовка к работе
Прежде чем начать писать какой-либо код, создайте папку для своего проекта и запустите веб-сервер в корневом каталоге проекта. Если вы не используете веб-сервер, Pixi не будет работать. Далее необходимо установить Pixi.
Установка Pixi
Найдите файл pixi.min.js в репозитории на GitHub, либо скачайте файл pixi.min.js v5.2.1 Этот файл - все, что вам нужно для использования Pixi, вы можете игнорировать остальные файлы в репозитории.
Затем создайте главную страницу index.html и добавьте тег script, чтобы подключить файл pixi.min.js, который вы только что загрузили. Ваш скрипт должен выглядеть примерно так:
HTML
<script src="pixi.min.js"></script>
Вот страница index.html, которую вы можете использовать, чтобы подключить Pixi и проверить, работает ли библиотека. (Ожидается, что pixi.min.js находится в подпапке с именем js):
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script src="js/pixi.min.js"></script>
<body>
<script type="text/javascript">
let type = "WebGL"
if (!PIXI.utils.isWebGLSupported()) {
type = "canvas"
}
PIXI.utils.sayHello(type)
</script>
</body>
</html>
Если вы все сделали правильно, то в JavaScript консоли вашего веб-браузера по умолчанию будет выведена следующая строка:
Console
PixiJS 5.2.1 - * canvas * http://www.pixijs.com/ ♥♥♥
2 Создаем спрайты
Основным строительным блоком в работе с Pixi является объект, называемый спрайтом. Спрайты - это просто изображения, которыми можно управлять с помощью кода. Вы можете управлять их положением, размером и множеством других свойств, которые используются при создания интерактивной и анимированной графики. Научиться создавать и управлять спрайтами - это действительно самое важное в обучении. Если вы знаете, как создавать и отображать спрайты, то вы в шаге от начала создания игр или любого другого интерактивного приложения.
Прежде чем мы начнем создавать спрайты, мы должны создать экран для их отображения. Давайте выясним, как его создать.
Создаем отрисовщик и сцену
Pixi имеет объект отрисовки, который создает для вас холст, на котором будет происходить отображение. Он автоматически генерирует HTML-элемент canvas и определяет, как отображать ваши изображения на холсте. Но вы также должны создать специальный Pixi объект-контейнер, называемый сценой. (Не волнуйтесь, чуть позже вы узнаете, что такое контейнерные объекты и зачем они вам нужны.) Этот объект stage будет использоваться в качестве корневого контейнера, который содержит все то, что вы хотите отобразить с помощью Pixi. Вот код, который вам нужно написать, чтобы создать отрисовщик и сцену.
HTML
<script>
//Создание отрисовщика
let renderer = PIXI.autoDetectRenderer(256, 256);
//Добавляем отрисовщик в HTML документ
document.body.appendChild(renderer.view);
//Создаем объект-контейнер, называемый сцена
let stage = new PIXI.Container();
//Говорим отрисовщику отобразить сцену
renderer.render(stage);
</script>
Это простой код, который вам нужно написать, чтобы начать использовать Pixi. Он создаст черный холст размером 265 на 256 пикселей и добавляет его в ваш HTML-документ. Ниже показано, как это выглядит в браузере.
Давайте более подробно рассмотрим, что делает весь этот код.
Параметры отрисовщика
Pixi метод autoDetectRenderer определяет, что использовать Canvas Drawing API или WebGL для визуализации графики, в зависимости от того, что доступно.
JS
let renderer = PIXI.autoDetectRenderer(256, 256);
Его первый и второй аргументы - это ширина и высота холста. Однако вы можете включить необязательный третий аргумент с некоторыми дополнительными значениями, которые вы можете установить. Этот третий аргумент можно использовать для настройки сглаживания, прозрачности и разрешения отрисовщика:
JS
renderer = PIXI.autoDetectRenderer(
256, 256,
{antialiasing: false, transparent: false, resolution: 1}
);
Этот третий аргумент является необязательным. Если вы довольны настройками Pixi по умолчанию, вы можете их оставить, обычно нет необходимости их менять. Но что они делают? Первый параметр сглаживает края шрифтов и графических примитивов. Параметр прозрачности делает фон холста прозрачным. Параметр разрешения упрощает работу с дисплеями с различным разрешением и плотностью пикселей. Для большинства проектов просто укажите разрешение на уровне 1.
AutoDetectRenderer будет решать, следует ли использовать Canvas Drawing API или WebGL для отображения изображений. По умолчанию используется WebGL, и это хорошо, потому что WebGL невероятно быстр и позволяет использовать некоторые впечатляющие визуальные эффекты, о которых вы узнаете далее. Но если вам нужно заставить Canvas Drawing API работать поверх WebGL, вы можете сделать это следующим образом:
JS
renderer = new PIXI.CanvasRenderer(256, 256);
Требуются только первые два аргумента: ширина и высота. Вы также можете принудительно выполнить рендеринг WebGL следующим образом:
JS
renderer = new PIXI.WebGLRenderer(256, 256);
Теперь давайте выясним, как улучшить внешний вид отрисовщика.
Настройка холста
Объект renderer.view - это обычный объект canvas, поэтому вы можете управлять им так же, как и любым другим объектом canvas. Вот так можно задать холсту пунктирную границу:
JS
renderer.view.style.border = "1px dashed black";
Если вам нужно изменить цвет фона холста после его создания, задайте для свойства backgroundColor объекта renderer любое шестнадцатеричное значение цвета. Вот как вы можете настроить его на чистый белый цвет:
JS
renderer.backgroundColor = 0xFFFFFF;
Если вы хотите получить ширину или высоту отрисовщика, используйте свойство
Чтобы изменить размер холста, используйте метод resize и введите любые новые значения ширины и высоты, как показано ниже:
JS
renderer.resize(512, 512);
Если вы хотите, чтобы холст был размером во все окно, вы можете использовать следующие CSS стили:
JS
renderer.view.style.position = "absolute";
renderer.view.style.width = window.innerWidth + "px";
renderer.view.style.height = window.innerHeight + "px";
renderer.view.style.display = "block";
Также убедитесь, что все padding-и и margin-ы имеют значение 0 для всех ваших HTML-элементов с помощью такого CSS кода:
CSS
* {
padding: 0;
margin: 0
}
