From 2b83157c1d09891877f97a5ecedeed9b123672ac Mon Sep 17 00:00:00 2001 From: Alexander Popov Date: Mon, 15 Aug 2022 01:13:52 +0300 Subject: [PATCH] =?UTF-8?q?=D0=9F=D0=B5=D1=80=D0=B2=D0=B0=D1=8F=20=D1=81?= =?UTF-8?q?=D1=82=D0=B0=D1=82=D1=8C=D1=8F=20=D0=BF=D0=BE=20PixiJS?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/posts/pixijs/01-start-with-pixi.md | 186 +++++++++++++++++++++ 1 file changed, 186 insertions(+) create mode 100644 content/posts/pixijs/01-start-with-pixi.md diff --git a/content/posts/pixijs/01-start-with-pixi.md b/content/posts/pixijs/01-start-with-pixi.md new file mode 100644 index 0000000..70e5e14 --- /dev/null +++ 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` необходимо разместить в теге ` .. `. + +```html + + + + + + + +``` + +Вот полный код с комментариями + +```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).