Первая статья по PixiJS

2022-08-15 01:13:52 +03:00 · 2022-08-15 01:13:52 +03:00 · 2b83157c1d
parent 81e5ad7ff3
commit 2b83157c1d
1 changed files with 186 additions and 0 deletions
--- a/content/posts/pixijs/01-start-with-pixi.md
+++ b/content/posts/pixijs/01-start-with-pixi.md
@ -0,0 +1,186 @@
+---
+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.
+
+```
+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).