iiiypuk/Blog
iiiypuk/Blog
1
0
Fork 0
Code Issues 5 Pull Requests Projects Releases Wiki Activity

new pixi guide

Browse Source
This commit is contained in:
Alexander Popov 2022-08-11 00:06:24 +03:00
parent 83605c7ee2
commit d65f565451
Signed by: iiiypuk
GPG Key ID: D8C9B59A9F04A70C
1 changed files with 184 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

184
content/posts/pixijs/01-getting-start-with-pixi.md Normal file
View File

@ -0,0 +1,184 @@
---
title: "Начало работы с Pixi.js"
date: 2022-08-10T23:08:03+03:00
draft: true
tags: [javascript, tutorial, gamedev]
---
# Введение в 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` | Богатый набор инструментов для обеспечения доступа к клавиатуре и программе чтения с экрана. |