218 lines
12 KiB
Markdown
218 lines
12 KiB
Markdown
---
|
||
title: "Начало работы с Pixi.js"
|
||
date: 2022-08-10T23:08:03+03:00
|
||
draft: true
|
||
tags: [javascript, tutorial, gamedev]
|
||
---
|
||
|
||
**DANGER: Это черновик, скорее всего будет сложно для новичка**
|
||
|
||
# Введение в Pixi.js
|
||
|
||
## О Pixi.js
|
||
...
|
||
|
||
## Краткое содержание
|
||
|
||
В данном руководстве, мы создадим каркас приложения, добавим изображение на сцену
|
||
и напишем цикл.
|
||
|
||
## Подключение библиотеки к HTML странице
|
||
|
||
В релизной версии желательно использовать конкретный релиз, который можно скачать
|
||
со страницы проекта на [GitHub](https://github.com/pixijs/pixijs/releases).
|
||
|
||
Можно использовать версию из CDN по следующей ссылке:
|
||
|
||
```html
|
||
<script src="https://pixijs.download/release/pixi.js"></script>
|
||
```
|
||
|
||
Но я буду использовать стабильный на момент написания руководства
|
||
[6.5.1](https://github.com/pixijs/pixijs/releases/tag/v6.5.1).
|
||
|
||
```sh
|
||
wget https://pixijs.download/v6.5.1/pixi.js
|
||
wget https://pixijs.download/v6.5.1/pixi.js.map
|
||
```
|
||
|
||
**Важно!** — скрипт необходимо разместить в теге `<head> .. </head>`.
|
||
|
||
## Создание приложения
|
||
|
||
После добавления скрипта на страницу можно перейти к написанию кода.
|
||
|
||
Добавим в наш скрипт код инициализации приложения.
|
||
|
||
```javascript
|
||
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](https://pixijs.download/release/docs/PIXI.DisplayObject.html),
|
||
который оборачивает (_wraps_) загружаемое изображение, позволяя рисовать его,
|
||
масштабировать, поворачивать и ещё некоторые другие вещи.
|
||
|
||
Прежде чем отрисовывать изображение, его необходимо загрузить.
|
||
Загрузка изображений происходит асинхронно.
|
||
Вспомогательный метод в классе `PIXI.Sprite` загружает изображение самостоятельно.
|
||
|
||
Добавим код загрузки изображения.
|
||
|
||
```javascript
|
||
// Асинхронная загрузка изображения
|
||
let sprite = PIXI.Sprite.from('sample.png');
|
||
```
|
||
|
||
**sample.png** – можно скачать со страницы проекта,
|
||
по [прямой ссылке](https://pixijs.io/guides/static/images/sample.png).
|
||
|
||
## Добавление спрайта на сцену
|
||
|
||
Сцена — это просто контейнер.
|
||
Каждый дочерний элемент контейнера будет отображаться в каждом кадре.
|
||
|
||
Добавляя наш спрайт на сцену, мы сообщаем рендереру PixiJS, что хотим его нарисовать.
|
||
|
||
Добавить спрайт на сцену:
|
||
|
||
```javascript
|
||
app.stage.addChild(sprite);
|
||
```
|
||
|
||
## Написание цикла обновления
|
||
|
||
PixiJS можно использовать и для статического контента,
|
||
но для большинства проектов потребуется добавить анимацию.
|
||
|
||
Наш пример на самом деле анимирован.
|
||
Он отображает один и тот же спрайт в одном и том же месте несколько раз в секунду.
|
||
|
||
Все, что нам нужно сделать, чтобы заставить изображение двигаться,
|
||
это обновлять его атрибуты один раз за кадр.
|
||
Чтобы сделать это, необходимо подключиться к тикеру приложения.
|
||
|
||
Ticker - это объект PixiJS, который запускает одну
|
||
или несколько callback функций в каждом кадре.
|
||
|
||
Добавим следующий код в наш скрипт:
|
||
|
||
```javascript
|
||
// Переменная для подсчёта секунд
|
||
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 функцию, а затем обновить вашу сцену в этой функции.
|
||
|
||
Тикер будет вызываться каждый кадр, и мы сможем перемещать, поворачивать и все,
|
||
что захотим, чтобы анимировать проект.
|
||
|
||
## Полный листинг кода
|
||
|
||
```html
|
||
<!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](https://pixijs.io/customize/)
|
||
можно создать пользовательский файл 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](https://pixijs.download/release/docs/PIXI.Container.html)
|
||
предоставляет простой отображаемый объект, который выполняет то,
|
||
что подразумевает его название - собирает дочерние объекты вместе.
|
||
|
||
Но помимо группировки объектов, у контейнеров есть несколько применений,
|
||
о которых вы должны знать.
|
||
|
||
## Контейнеры как группы
|
||
|
||
Почти все типы отображаемых объектов являются производными от контейнера - даже спрайты!
|
||
Это означает, что во многих случаях можно создать иерархию «родитель-потомок» с объектами,
|
||
которые вы хотите отобразить.
|
||
|
||
## Маскировка
|
||
|
||
Другое распространенное применение объектов-контейнеров - это замаскировка содержимого. Маскировка - это метод, при котором части вашей сцены видны только в пределах заданной области.
|
||
|
||
Например всплывающее окне. Оно имеет рамку, состоящую из одного или нескольких спрайтов
|
||
и имеет прокручиваемую область.
|
||
|
||
Контейнер плюс маска упрощают реализацию этой прокручиваемой области.
|
||
|
||
PixiJS поддерживает два типа масок:
|
||
|
||
- Можно использовать графический объект для создания маски произвольной формы.
|
||
Тип мощный, но не поддерживает сглаживание.
|
||
|
||
- Спрайт: используется альфа-канал из спрайта в качестве маски, обеспечивая сглаженную окантовку, но не поддерживается в Canvas.
|