Надіслав: Admin , дата:

Я продовжив експериментувати з pixi.js та почав створювати шутер у стилі RPG.
Цього разу був використаний завантажувач спрайтів з програми Aseprite. Вихідний код знайшов десь в інтернеті. Я хотів, щоб карти завантажувалися з формату JSON від Tiled software, але вперше вони завантажувалися з масиву. Нічого особливого. Був написаний спеціальний модуль для керування гравцем - контролер, схожий на стік.

01-cucu_hero_pixi-first-versions.png

Але головна проблема полягала в ПАУЗІ в грі. Я хотів зробити скріншот поточного стану полотна та додати до нього якісь ефекти. У цьому випадку я міг би створити шар вище та додати туди текст. Але мені не вдалося цього досягти.

Єдине рішення, яке я знайшов, це цей фрагмент коду:

      spritePause = new PIXI.Sprite(PIXI.Texture.from(app.renderer.view));
      spritePause.width = global.APP_WIDTH;
      spritePause.height = global.APP_HEIGHT;
      //spritePause.filters = [new PIXI.filters.BlurFilter(1)];
      app.stage.addChild(spritePause);

але це спрацювало лише один раз. Під час другого спрацьовування воно не спрацювало, відображалося попереднє зображення спрайта. Я був дуже розчарований. У мене немає часу шукати документацію та читати купу вихідного коду pixi.js.

02-cucu_hero_pixi-last-version.png

А інша проблема — це дуууже довге попереднє завантаження між сценами, коли мені потрібно було видалити всі спрайти зі сцени та заповнити її новими. Здається, це видно на відео.
Ще один баг був знайдений, коли на екрані створювалося забагато об'єктів.

  constructor() {
    // TODO: here is the bug when killing too much enemies.
    super(window.app.loader.resources.enemyAntSprites.spritesheet);
  }

Це була остання моя робота з Pixi.

В іншому випадку, головна мета була досягнута: заставки, звуки, рівні, прості вороги. Було справді весело розробляти ці речі майже простим способом за допомогою Pixi. Але в іншому випадку я дійшов висновку, що мені трохи бракує інтересу писати ці речі за допомогою Pixi. Місяцем раніше була спроба з мого боку написати гру на рушії GODOT. Це був простий космічний шутер, але він був не таким веселим. Схоже, що інші розробники зробили все за вас, і все, що вам потрібно, це розмістити акторів на сцені та продовжувати. Це підхід геймдизайнера, а не розробника ігор.

03-cucu_hero_rom-render.png

Тож для молодого розробника ігор набагато цікавіше створювати речі з нуля самостійно. І моєю першою метою було написати власний рендерер із необробленим HTML5 Canvas.
А щоб навчитися чогось нового, я вирішив обрати TypeScript як основну мову.

Рендерер має бути якомога простішим, і вперше я просто переписав методи Pixi та додав щось від себе.
Отже, я створив сцени, які можуть мати купу шарів з назвами. На шари ми можемо додавати спрайти. Зберігайте простоту. Базові спрайти, спрайти з Aseprite, завантажувач файлів TiledMap, шрифт TTF, растровий шрифт PNG тощо.

04-Tiled-map-example.png
05-Tiled-map-object-types.png

Щодо відредагованої карти з плитками: у мене немає часу писати власну, але я вже почав. Тож плитки — це швидкий спосіб не лише створити карту, але й навіть прості об'єкти на ній! Саме це я шукав. Отже, я створив об'єкти: ціль, місце відродження ворога, тригер наступного рівня та поля зіткнень. Просте рішення, але трохи складно впоратися з усіма цими значеннями та положеннями об'єктів на карті.

На даний момент я припинив роботу над цією грою. Я зрозумів, що це вимагає багато часу, а я до цього не готовий. Краще спробувати спочатку прості ігри!

Теґи