iiiypuk/Blog

Fork 0

Alexander Popov 81e5ad7ff3

draft

2022-08-15 01:13:32 +03:00

12 KiB

Raw Blame History

title

date

draft

Введение в Pixi.js

О Pixi.js

...

Краткое содержание

В данном руководстве, мы создадим каркас приложения, добавим изображение на сцену и напишем цикл.

Подключение библиотеки к HTML странице

В релизной версии желательно использовать конкретный релиз, который можно скачать со страницы проекта на GitHub.

Можно использовать версию из CDN по следующей ссылке:

<script src="https://pixijs.download/release/pixi.js"></script>

Но я буду использовать стабильный на момент написания руководства 6.5.1.

wget https://pixijs.download/v6.5.1/pixi.js
wget https://pixijs.download/v6.5.1/pixi.js.map

Важно! — скрипт необходимо разместить в теге <head> .. </head>.

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

После добавления скрипта на страницу можно перейти к написанию кода.

Добавим в наш скрипт код инициализации приложения.

let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view);

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

Класс PIXI.Application создаёт элемент <canvas>, в котором всё будет отображаться.

Строка document.body.appendChild(app.view); добавляем <canvas> в DOM веб-страницы.

Создание спрайта

В Pixi.js существует несколько способов для рисования изображений на холсте (canvas далее и всегда будет назваться холстом).

Спрайт – это тип DisplayObject, который оборачивает (wraps) загружаемое изображение, позволяя рисовать его, масштабировать, поворачивать и ещё некоторые другие вещи.

Прежде чем отрисовывать изображение, его необходимо загрузить.
Загрузка изображений происходит асинхронно. Вспомогательный метод в классе PIXI.Sprite загружает изображение самостоятельно.

Добавим код загрузки изображения.

// Асинхронная загрузка изображения
let sprite = PIXI.Sprite.from('sample.png');

sample.png – можно скачать со страницы проекта, по прямой ссылке.

Добавление спрайта на сцену

Сцена — это просто контейнер. Каждый дочерний элемент контейнера будет отображаться в каждом кадре.

Добавляя наш спрайт на сцену, мы сообщаем рендереру PixiJS, что хотим его нарисовать.

Добавить спрайт на сцену:

app.stage.addChild(sprite);

Написание цикла обновления

PixiJS можно использовать и для статического контента, но для большинства проектов потребуется добавить анимацию.

Наш пример на самом деле анимирован. Он отображает один и тот же спрайт в одном и том же месте несколько раз в секунду.

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

Ticker - это объект PixiJS, который запускает одну или несколько callback функций в каждом кадре.

Добавим следующий код в наш скрипт:

// Переменная для подсчёта секунд
let elapsed = 0.0;

// Говорим тикеру приложения запускать новый callback вызов каждый кадр,
// передавая количество времени, прошедшего с момента последнего тика
app.ticker.add((delta) => {
    // добавляем это время к общему затраченному времени
    elapsed += delta;
    // Обновляем положение спрайта по оси X на основе косинуса нашего прошедшего времени.
    // Делим на 50, чтобы немного замедлить анимацию
    sprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
});

Все, что вам нужно сделать, это вызвать app.ticker.add(...), передать ему callback функцию, а затем обновить вашу сцену в этой функции.

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

Полный листинг кода

<!doctype html>
<html>
<head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
</head>
<body>
    <script>
    // Создаём приложение и добавляем его на страницу
    let app = new PIXI.Application({ width: 640, height: 360 });
    document.body.appendChild(app.view);

    // Создаём спрайт и добавляем его на сцену
    let sprite = PIXI.Sprite.from('sample.png');
    app.stage.addChild(sprite);

    // Добавляем ticker callback для перемещения спрайта туда-сюда
    let elapsed = 0.0;
    app.ticker.add((delta) => {
        elapsed += delta;
        sprite.x = 100.0 + Math.cos(elapsed/50.0) * 100.0;
    });
    </script>
</body>
</html>

Обзор архитектуры

PixiJS – это модульный движок рендеринга. Каждая задача, необходимая для создания, обновления и отображения контента, разбита на свой собственный компонент.

Это не только делает код более чистым, но и обеспечивает большую расширяемость. Кроме того, с помощью инструмента PixiJS Customize tool можно создать пользовательский файл PixiJS, содержащий только подмножество функций, необходимых вашему проекту, экономя размер загрузки.

Вот список основных компонентов, из которых состоит PixiJS. Обратите внимание, что этот список не является исчерпывающим.

Основные компоненты

Компонент	Описание
Renderer `@pixi/core`	Ядром системы PixiJS является средство визуализации, которое выводит изображение на экран. Средство визуализации по умолчанию для PixiJS WebGL.
Container `@pixi/display`	Основной отображаемый объект, который содержит: дерево отображаемых объектов: спрайты, графика и текст.
Loader `@pixi/loader`	Система для асинхронной загрузки ресурсов, таких как изображения и аудиофайлы.
Ticker `@pixi/ticker`	Логика обновления игры, как правило, будет выполняться один раз за кадр. Вы можете использовать несколько тикеров одновременно.
Application `@pixi/app`	Представляет собой простой помощник, который объединяет загрузчик, тикер и средство визуализации в единый удобный простой в использовании объект. Отлично подходит для быстрого начала работы, создания прототипов и создания простых проектов.
Interaction `@pixi/interaction`	PixiJS поддерживает как сенсорное взаимодействие, так и взаимодействие с помощью мыши - делает объекты кликабельными, запускает события наведения курсора и т.д.
Accessibility `@pixi/accessibility`	Богатый набор инструментов для обеспечения доступа к клавиатуре и программе чтения с экрана.

Containers

Класс Container предоставляет простой отображаемый объект, который выполняет то, что подразумевает его название - собирает дочерние объекты вместе.

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

Контейнеры как группы

Почти все типы отображаемых объектов являются производными от контейнера - даже спрайты!
Это означает, что во многих случаях можно создать иерархию «родитель-потомок» с объектами, которые вы хотите отобразить.

Маскировка

Другое распространенное применение объектов-контейнеров - это замаскировка содержимого. Маскировка - это метод, при котором части вашей сцены видны только в пределах заданной области.

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

Контейнер плюс маска упрощают реализацию этой прокручиваемой области.

PixiJS поддерживает два типа масок:

Можно использовать графический объект для создания маски произвольной формы. Тип мощный, но не поддерживает сглаживание.
Спрайт: используется альфа-канал из спрайта в качестве маски, обеспечивая сглаженную окантовку, но не поддерживается в Canvas.

12 KiB Raw Blame History Unescape Escape