Blog/content/posts/pixijs/01-start-with-pixi.md
2022-09-03 00:07:20 +03:00

187 lines
6.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: "Начало работы с PixiJS"
date: 2022-08-14T23:40:07+03:00
draft: false
tags: [pixijs, javascript, gamedev, tutorial]
---
# Предисловие
Эта страница, попытка отложить знания и написать серию обучающих уроков
по [PixiJS](https://pixijs.com/).
Если в процессе чтения, у тебя появились вопросы, стучись на почту `iiiypuk {at} fastmail.fm`.
А можешь даже прислать [pull-request](https://git.a2s.su/iiiypuk/Blog/src/branch/master/content/posts/pixijs).
# Подготовка
На момент написания руководства, я использовал стабильный релиз
[6.5.1](https://github.com/pixijs/pixijs/releases/tag/v6.5.1).
Предпологается, что у тебя уже создана директория для проекта, где лежат
`index.html`, `app.js` и другие файлы, необходимые для работы :)
Осталось лишь только скачать саму библиотеку.
```sh
wget https://pixijs.download/v6.5.1/pixi.js
wget https://pixijs.download/v6.5.1/pixi.js.map
```
Для этого и последующий примеров я на [itch.io](https://itch.io/)
взял [пак ассетов](https://pixelprogrammer.itch.io/pixel-platformer-art-pack)
(Pixel Platformer Tileset)
за авторством [pixelprogrammer](https://pixelprogrammer.itch.io/).
А ещё отдельно вырезал сундук. Скачать можно по
[этой ссылке].
# Пишем код приложения
**Важно!** — скрипт `pixi.js` необходимо разместить в теге `<head> .. </head>`.
```html
<head>
<script src="pixi.js"></script>
</head>
<body>
<!-- app.js - код нашей игры -->
<script type="text/javascript" src="app.js"></script>
</body>
```
Вот полный код с комментариями
```javascript
// Создаём приложение 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;
});
```
Если открыть страницу в браузере, мы увидим, что по верхнему краю холста вправо-влево
будет перемещаться наш сундук.
Клёво, работает!
Но, если он будет перемещаться по центру холста и будет побольше,
я думаю будет смотреться ещё лучше.
```javascript
// Установим точку привязки спрайта по центру
sprite.anchor.set(0.5);
// Увеличим размер спрайта вдвое
sprite.width *= 5;
sprite.height *= 5;
// Разместим спрайт по центру
sprite.y = app.screen.height / 2;
```
Сработало, вот только... страшненько)
А что, если отключить сглаживание для пиксельного сундука?
И добавить фон?
Легко.
```javascript
// Отключаем сглаживание
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;
// Добавляем фон
app.renderer.backgroundColor = 0x779911;
console.log(app.renderer.options);
```
В PixiJS есть два [SCALE_MODE](https://pixijs.download/release/docs/PIXI.settings.html#SCALE_MODE).
- `LINEAR` - сглаженное масштабирование
- `NEAREST` - пиксельное масштабирование
`renderer` имеет много интересных свойств.
Полный список доступен по этой ссылке [PIXI.Renderer](https://pixijs.download/release/docs/PIXI.Renderer.html#constructor).
А теперь давай попробуем сделать со спрайтом что-нибудь ещё?
Я предлагаю покрутить его вокруг своей оси.
Нам нужно для начала разместить спрайт по оси X по центру, и заменить код ticker'а.
```javascript
sprite.x = app.screen.width / 2;
app.ticker.add((delta) => {
sprite.rotation += 0.05 * delta;
});
```
Заметь, что если убрать код точки привязки по центру спрайта,
он будет вращаться относительно верхнего левого края.
А теперь добавим немного интерактива.
```javascript
sprite.interactive = true;
sprite.cursor = 'zoom-out';
```
Теперь, если навести курсор на спрайт, он изменит свой стиль на "загрузку".
Список [cursor](https://developer.mozilla.org/en-US/docs/Web/CSS/cursor) и примеры
можно посмотреть на Developer Mozilla.
```text
help, wait, crosshair, not-allowed, zoom-in, zoom-out, grab
```
Ну а где же интерактив спросишь ты? Держи.
```javascript
sprite.on('click', (event) => {
alert('hello :)');
});
```
Наверное ты уже догадался, что если кликнуть по спрайту, появится всплывающее окно
с текстом `hello`.
Обрати внимание, что в коде обрабатывается событие по клику мыши.
Если необходимо обрабатывать тапы, нужно написать ещё один обработчик.
```javascript
sprite.on('tap', (event) => {
alert('Touch me again');
});
```
В окончание этой страницы, [уничтожим](https://pixijs.download/dev/docs/PIXI.Container.html#destroy) яшик. Да, насовсем.
```javascript
sprite.on('click', (event) => {
alert('bye!');
sprite.destroy();
});
app.ticker.add((delta) => {
if (sprite._destroyed != true) {
sprite.rotation += 0.05 * delta;
}
});
```
`destroy` уничтожает спрайт и при необходимости, его текстуру и дочерние элементы.
Что, мало?) Хочешь взрывов? Пробуй [сам](https://pixijs.io/examples/#/sprite/animatedsprite-explosion.js).