Pebble Kombat. История разработки игры для часов на Javascript

в 13:06, , рубрики: game development, javascript, Pebble, pebble.js, разработка игр

Здравствуйте, меня зовут Александр и я анонимный питоноголик. Но год назад мне посчастливилось написать одну игру исключительно на JavaScript для умных часов Pebble…

Pebble Kombat. История разработки игры для часов на Javascript - 1

Концепт

Идея игры была рождена случайно, в муках и попытках объяснить школьникам основы ООП. Компьютеру и игроку сопоставлялся класс бойца с тремя наборами хитпоинтов для головы, тела и ног. По очереди игрок выбирал что он будет атаковать или блокировать. Компьютер же решал это случайным образом. Написать пошаговый файтинг было интересно всем, и школьникам и мне. Но затем меня посетила мысль, почему бы не развить игру из обучающей до полноценной (относительно). К тому же на днях мне пришли мои первые Pebble Steel, чьи три замечательные боковые кнопочки как нельзя лучше подходили под формат игры.

Pebble Kombat. История разработки игры для часов на Javascript - 2

Что ж, процесс пошел. В результате творческих порывов на выходе к версии 1.0 я придумал 8 персонажей, каждый со своим уникальным умением, которое активировалось каждую фазу игры при атаке или блоке. К примеру Берсерк при определенных условиях начинал пробивать блок, а Некромант и вовсе отражал весь блокируемый урон обратно атакующему. Запланировано было и два игровых режима: Турнир и Выживание.

Название для своего первого пет-проджекта хотелось придумать эффектное и со смыслом. Так получился гибрид небезызвестного файтинга Mortal Kombat и бренда самих Pebble Smartwatch.

Графика

Логика логикой, а персонажей и интерфейс нужно было нарисовать. Тут мне на помощь пришли фрилансеры. Точнее один. Точнее одна. Точнее я сам ее нашел. Сработались мы быстро. Предоставив ей всю имеющуюся информацию, в том числе и технические характеристики экрана, она нарисовала отменных персонажей и фоны к ним.

Pebble Kombat. История разработки игры для часов на Javascript - 3

Интересным моментом было придумать на чем персонажи будут стоять. Сначала мы пытались расположить обоих бойцов на одной платформе, но смотрелось это довольно просто и ограничивало нас в дальнейшей.

Отдельной историей была разработка стартового экрана, которую я не мог принять вплоть до последнего варианта. (Кстати идея иконки режима «Турнир» была мной подсмотрена из игры Guild Wars 2, в которой подобным образом изображалась способность Quickness, но я надеюсь никто меня не побъет.)

Pebble Kombat. История разработки игры для часов на Javascript - 4

Через пару недель я получил весь сет графики и теперь спокойно можно было приступать к работе.

Разработка

Обратившись к порталу разработчиков, я обнаружил, что, увы, своим любимым питоном я воспользоваться не смогу. Недолго посмотрев примеры на С и JavaScript, я обратился к документации библиотеки Pebble.JS. Игра оказалась достаточно объемной (более 800 строк кода). К тому же на новом для меня языке. К тому же игру хотелось дорабатывать и дорабатывать.

Все оказалось проще, чем я думал. Создаем экземпляр окна, добавляем в него необходимую графику (загружалась в список _items) и запускаем метод show() для отображения.

var main_wnd = new UI.Window();

function main_wnd_gen(){
  var main_menu = new UI.Image({
    position: new Vector2(0, 0),
    size: new Vector2(144, 168),
    image: 'MENU',
    compositing: 'set'
  });
  main_wnd.add(main_menu);
}

main_wnd_gen();
main_wnd.show();

Правда в процессе разработки появлялись некоторые нюансы. Оказалось, не совсем разумно было позволять компьютеру случайно выбирать блок, иначе игра сводилась к битью по одному месту. Пришлось вмешаться, увеличив шанс блокирования именно критической зоны с наименьшим количеством хитпоинтов.

this.blocking = function (block) {
    if (this.ai == 'Enemy'){
      this.save = ['h', 'b', 'f'];
      for (var i = 0; i < 3; i++){
        if (this.hp[parts[i]] < 10){
          this.save.push(parts[i], parts[i], parts[i]);
        }
        if (this.hp[parts[i]] < 20){
          this.save.push(parts[i]);
        }
      }
      this.block = this.save[Math.floor(Math.random() * this.save.length)];
    } else {
      this.block = block;
    }
  };

Были и другие казусы. Не знаю почему, но я так и не смог менять объекты по их именам — пришлось напрямую обращаться к массиву _items объекта окна и менять элементы

var game_wnd = new UI.Window();
...
function game_wnd_gen(){
  game_wnd._items = [];
...
  var attack = new UI.Image({
    position: new Vector2(0, 0),
    size: new Vector2(30, 30),
    image: '',
    compositing: 'set'
  });
  game_wnd.add(attack);
...
};
function game_wnd_update(){
  game_wnd._items[9].image('images/attack/' + heroes[1].name + side[1] + '.png');

В конце меня ждало разочарование. На платформе Aplite (это как раз первые Pebble и Pebble Steel) некоторые картинки отказывались загружаться, что привело к полной неиграбельности. Оставался лишь Basalt.

Pebble Kombat. История разработки игры для часов на Javascript - 5

5 сентября 2016

Так в сентябре игра увидела мир. Никакой рекламы, никаких статей, лишь удовлетворение от того, что проект закончен. И каково было мое удивление, что уже через несколько дней один маленький мальчик написал видеообзор. Эта милота согревала мне сердце.

А еще через несколько дней сам Jon Barlow (я на самом деле не знаю кто это, но «сам Jon Barlow» должен был поднять мое ЧСВ), в то время член команды Pebble и модератор магазина добавил игру в категорию Fresh Picks (сейчас он, конечно, никакой не свежий)

Pebble Kombat. История разработки игры для часов на Javascript - 6

Май 2017

Я оставил тщетные попытки нормально запустить игру на Aplite. На этот момент в игре присутствовал, но никак не отображался дополнительный урон, что вносило небольшую путаницу.

Но появился Pebble 2. Перенос игры на еще одну платформу не составил труда, достаточно было добавить в файл appinfo.json поддержку Diorite. К тому же весь сет черно-белой графики остался еще с Aplite, который на новом SDK 4.x и вовсе отказался запускаться.

Pebble Kombat. История разработки игры для часов на Javascript - 7

Октябрь 2017

Уже прошел год с момента публикации игры. В статистике числилось порядка 360 скачиваний и 47 честных лайков игроков (ну ладно, 46. Один мой). У меня оставался нерешенный вопрос с отображением дополнительного урона у некоторых персонажей и пара спрайтов женских персонажей.

Pebble Kombat. История разработки игры для часов на Javascript - 8

Да-да, все 8 бойцов в результате оказались мужиками. Но никакого сексизма. Взяв волю в кулак, я уже самостоятельно дорисовал недостающие спрайты, дописал код, плюс добавил женского персонажа, лучницу (правда оставил его неиграбельным) и придумал еще один режим игры «Сумасброд», в котором уже и защищаться стало не так то просто. Это уже можно было назвать полноценным дополнением.

P.S.

Что дальше? Да вроде бы и ничего. Можно было бы извратиться и написать многопользовательский режим. Но это мне кажется уже излишним, по крайней мере для часов.

На самом деле осталось множество идей вроде сюжетной линии, активных способностей, амуниция и артефакты. Но если тому и быть, и проект перерастет в Pebble Kombat 2, то он уже будет для мобильных. Заодно будет повод изучить еще один язык. ;)

Владельцы часов Pebble Time и Pebble 2 могут побаловаться и «заценить» проект лично.
А вот для интересующихся копнуть глубже я выложил исходники на Github.

Автор: Александр Меньшиков

Источник


* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js