К содержанию
Все заметки

НАверстали

Игра на 176 килобайт: как мы готовим «Хранителя Искры» к Яндекс Играм

Наша idle-RPG, где вся графика нарисована кодом. Что внутри и какой путь проходит игра до каталога Яндекс Игр, по шагам.

Обложка игры. Всё на ней нарисовано кодом
Обложка игры. Всё на ней нарисовано кодом

Мы делаем idle-RPG под названием «Хранитель Искры». Сюжет начинается у костра. С неба падает звезда, огонь становится золотым, и на его свет идут звери, а следом Бездна. Ты стоишь у огня и защищаешь его.

Игра почти готова. Расскажем, из чего она сделана и какой путь проходит игра до каталога Яндекс Игр. Если вы тоже хотите выложить туда свою игру, второй половины статьи хватит как чек-листа.

Что за игра

Герой сражается сам. Игрок решает, кем ему стать. На старте у вас пещерный человек с дубиной. Через пару походов он вырастает в охотника, шамана или мастера, а дальше в оборотня, рыцаря, друида. Всего в игре 20 форм, последние из них дракон, киборг и звёздное дитя.

Бой у лагеря. Герой в форме друида, третий акт, Огненные земли
Бой у лагеря. Герой в форме друида, третий акт, Огненные земли

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

Экран героя: форма, снаряжение, мастерство
Экран героя: форма, снаряжение, мастерство

В сюжете шесть актов, и в некоторых нужно сделать выбор. Можно приручить детёныша мамонта, отдать его Искре или отпустить. Выбор нельзя переиграть, и он меняет мир до конца игры.

Сюжетная развилка в первом акте
Сюжетная развилка в первом акте

Почему 176 килобайт

В игре нет ни одной картинки. Героев, врагов, джунгли, лаву и лагерь рисует код: каждый персонаж собирается из векторных фигур прямо в браузере. Поэтому весь архив с игрой, шрифтами и заставкой весит 176 КБ. Даже на мобильном интернете скачивать почти нечего.

Заставку мы тоже нарисовали кодом. Шесть кадров рассказывают завязку: ночь у костра, падающая звезда, золотой огонь, превращения героя и первые враги. Заставку можно пропустить.

Последний кадр заставки
Последний кадр заставки

Код игры состоит из двух частей. Правила (урон, опыт, награды, баланс) лежат в одном файле без интерфейса. Его можно прогнать тестами и симуляцией без браузера. Мы так и делаем: бот проигрывает десяток походов, а мы смотрим, на каком из них у него открывается вторая сложность, «Кошмар». Сейчас это 9–11-й поход. Если цифра поползёт вниз, игра стала слишком лёгкой.

Путь до каталога

Вот шаги, которые мы проходим сами.

1. Аккаунт разработчика. Заходите в консоль Яндекс Игр под Яндекс ID и принимаете соглашение. Чтобы получать деньги с рекламы и покупок, заполняете платёжные данные: подходят самозанятый, ИП или юрлицо.

2. SDK. Яндекс отдаёт свой SDK по адресу /sdk.js внутри страницы игры. Через него идут реклама, покупки, облачные сохранения и пауза. Мы спрятали все вызовы в один небольшой модуль. Локально SDK нет, и модуль подменяет его заглушкой: вместо ролика полторы секунды затемнения, вместо оплаты окно подтверждения. Так игру можно отлаживать на своём компьютере.

3. Требования модерации. Проверяющие смотрят на конкретные вещи:

  • игра сообщает платформе, что загрузилась (LoadingAPI.ready);
  • размечает, когда игрок играет, а когда стоит на паузе (GameplayAPI);
  • выключает звук, пока идёт реклама или вкладка свёрнута;
  • не даёт выделять текст и не открывает контекстное меню;
  • не ведёт по внешним ссылкам и не грузит чужие скрипты;
  • работает без входа в аккаунт.

Мы закрыли каждый пункт до первой отправки.

4. Сохранения. Прогресс хранится в браузере и в облаке Яндекса. При запуске игра берёт более свежую копию. Ещё мы держим резервную копию: если сохранение испортится, игра откатится к последнему рабочему состоянию.

5. Покупки. Их включает поддержка Яндекса по запросу из консоли. В «Хранителе» две постоянные покупки: «Без рекламы» и VIP со скоростью боя ×3. Игра проверяет список покупок при каждом запуске, поэтому возврат денег тоже срабатывает.

6. Карточка. Для неё нужны иконка 512×512, обложка 800×470, скриншоты для телефона и компьютера и описание. Иконку и обложку мы тоже нарисовали кодом игры.

Иконка игры для каталога
Иконка игры для каталога
Скриншот для компьютера
Скриншот для компьютера

7. Черновик и модерация. Архив с index.html в корне загружаете в черновик. Консоль даёт ссылку, где работает настоящий SDK с тестовой рекламой. Проверяете там рекламу, покупку, сохранение и вид на узком телефоне, а потом отправляете на модерацию.

Что дальше

Архив и карточка у нас готовы, впереди черновик и модерация. Следом добавим музыку и звуки и посмотрим на первых игроков: Яндекс Метрика покажет, где новички бросают игру и кто возвращается на второй день.

Когда «Хранитель Искры» появится в каталоге, оставим здесь ссылку.

  1. BilimHaus: уроки, доска и домашние задания в одном кабинете

    Что умеет наша платформа для репетиторов и школ и что в ней появилось этой осенью: стикеры учителя, формулы на доске, урок из видео или PDF.

  2. Почему агрегатор автомобильных аукционов сложнее каталога

    Данные из разных источников нужно собрать, очистить и сделать полезными для дилера.

  3. Как мы делаем SEO Monitor

    Сервис для ежедневного контроля позиций, без попытки скопировать огромные SEO-комбайны.