From d65f565451a7ac0272a74c5636ace80ebdf20c96 Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Thu, 11 Aug 2022 00:06:24 +0300 Subject: [PATCH] new pixi guide --- .../pixijs/01-getting-start-with-pixi.md | 184 ++++++++++++++++++ 1 file changed, 184 insertions(+) create mode 100644 content/posts/pixijs/01-getting-start-with-pixi.md diff --git a/content/posts/pixijs/01-getting-start-with-pixi.md b/content/posts/pixijs/01-getting-start-with-pixi.md new file mode 100644 index 0000000..77a72f5 --- /dev/null +++ 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 + +``` + +Но я буду использовать стабильный на момент написания руководства +[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 +``` + +**Важно!** — скрипт необходимо разместить в теге ` .. `. + +## Создание приложения + +После добавления скрипта на страницу можно перейти к написанию кода. + +Добавим в наш скрипт код инициализации приложения. + +```javascript +let app = new PIXI.Application({ width: 640, height: 360 }); +document.body.appendChild(app.view); +``` + +Здесь можно заметить, что размеры области рисования будут шириной **640** пикселей +и высотой **360** пикселей. + +Класс `PIXI.Application` создаёт элемент ``, в котором всё будет отображаться. + +Строка `document.body.appendChild(app.view);` добавляем `` в 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 + + + + + + + + + +``` + +# Обзор архитектуры + +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` | Богатый набор инструментов для обеспечения доступа к клавиатуре и программе чтения с экрана. |