Предисловие

Эта страница, попытка отложить знания и написать серию обучающих уроков по PixiJS.

Если в процессе чтения, у тебя появились вопросы, стучись на почту iiiypuk {at} fastmail.fm.
А можешь даже прислать pull-request.

Подготовка

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

Предпологается, что у тебя уже создана директория для проекта, где лежат index.html, app.js и другие файлы, необходимые для работы :)

Осталось лишь только скачать саму библиотеку.

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

Для этого и последующий примеров я на itch.io взял пак ассетов (Pixel Platformer Tileset) за авторством pixelprogrammer.

А ещё отдельно вырезал сундук. Скачать можно по [этой ссылке].

Пишем код приложения

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

<head>
    <script src="pixi.js"></script>
</head>
<body>
    <!-- app.js - код нашей игры -->
    <script type="text/javascript" src="app.js"></script>
</body>

Вот полный код с комментариями

// Создаём приложение app...
let app = new PIXI.Application({ width: 640, height: 360 });
document.body.appendChild(app.view); // и добавляем его на страницу

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

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

Если открыть страницу в браузере, мы увидим, что по верхнему краю холста вправо-влево будет перемещаться наш сундук.

Клёво, работает!

Но, если он будет перемещаться по центру холста и будет побольше, я думаю будет смотреться ещё лучше.

// Установим точку привязки спрайта по центру
sprite.anchor.set(0.5);

// Увеличим размер спрайта вдвое
sprite.width *= 5;
sprite.height *= 5;

// Разместим спрайт по центру
sprite.y = app.screen.height / 2;

Сработало, вот только… страшненько)

А что, если отключить сглаживание для пиксельного сундука?
И добавить фон?

Легко.

// Отключаем сглаживание
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

// Добавляем фон
app.renderer.backgroundColor = 0x779911;
console.log(app.renderer.options);

В PixiJS есть два SCALE_MODE.

LINEAR - сглаженное масштабирование
NEAREST - пиксельное масштабирование

renderer имеет много интересных свойств.
Полный список доступен по этой ссылке PIXI.Renderer.

А теперь давай попробуем сделать со спрайтом что-нибудь ещё?

Я предлагаю покрутить его вокруг своей оси.

Нам нужно для начала разместить спрайт по оси X по центру, и заменить код ticker’а.

sprite.x = app.screen.width / 2;

app.ticker.add((delta) => {
  sprite.rotation += 0.05 * delta;
});

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

А теперь добавим немного интерактива.

sprite.interactive = true;
sprite.cursor = 'zoom-out';

Теперь, если навести курсор на спрайт, он изменит свой стиль на “загрузку”.

Список cursor и примеры можно посмотреть на Developer Mozilla.

help, wait, crosshair, not-allowed, zoom-in, zoom-out, grab

Ну а где же интерактив спросишь ты? Держи.

sprite.on('click', (event) => {
  alert('hello :)');
});

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

Обрати внимание, что в коде обрабатывается событие по клику мыши.
Если необходимо обрабатывать тапы, нужно написать ещё один обработчик.

sprite.on('tap', (event) => {
  alert('Touch me again');
});

В окончание этой страницы, уничтожим яшик. Да, насовсем.

sprite.on('click', (event) => {
  alert('bye!');
  sprite.destroy();
});

app.ticker.add((delta) => {
  if (sprite._destroyed != true) {
    sprite.rotation += 0.05 * delta;
  }
});

destroy уничтожает спрайт и при необходимости, его текстуру и дочерние элементы.

Что, мало?) Хочешь взрывов? Пробуй сам.