2022-08-15 01:13:52 +03:00
|
|
|
|
---
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
2022-09-03 00:07:20 +03:00
|
|
|
|
```text
|
2022-08-15 01:13:52 +03:00
|
|
|
|
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).
|
