new pixi guide

2022-08-11 00:06:24 +03:00 · 2022-08-11 00:06:24 +03:00 · d65f565451
parent 83605c7ee2
commit d65f565451
1 changed files with 184 additions and 0 deletions
--- a/content/posts/pixijs/01-getting-start-with-pixi.md
+++ b/content/posts/pixijs/01-getting-start-with-pixi.md
@ -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` | Богатый набор инструментов для обеспечения доступа к клавиатуре и программе чтения с экрана. |