Javascript

С прошлого поста про игру на хакатон прошло чуть больше года, было не до геймдева. Всё как обычно началось с желания создать игру, игру которая бы сочетала элементы idle и менеджмента. Хотелось, чтобы игроки могли развивать свой город, но при этом не были привязаны к постоянному управлению. Так родилась концепция City States Idle.

Выбор технологий

Для реализации проекта был выбран игровой фреймворк Phaser, так как эта библиотека отлично подходит для создания браузерных игр и имеет множество готовых инструментов для работы с графикой и физикой.

Первый прототип

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

Система покупок и размещения

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

Система производства и доставки

Одним из ключевых элементов стала система производства ресурсов. Здания автоматически генерировали ресурсы, но так же и перерабатывали их. Это создавало интересный баланс между развитием инфраструктуры и управлением финансами.

Графика

Как обычно графика сгенерирована нейросетями, лучший помощник при разработке игр.

Система соединений

Важной частью геймплея стала система соединений между зданиями. Здания должны были быть связаны с другими открытыми зданиями для эффективной работы - некий стратегический элемент в процессе игры.

Инструменты

Отдельно пришлось создать редактор карт на базе самой игры и локальный сервер для обработки и хранения этих карт. Это очень сильно облегчило создание и редактирование карт.

Оптимизация и балансировка

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

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

Релиз и обновления

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

Заключение

Разработка City States Idle стала интересным проектом, который объединил элементы градостроительства и idle-геймплея. Продолжается работа над улучшением игры, основываясь на обратной связи от игроков и новых идеях для развития проекта.

City States Idle на Яндекс Играх

🗿 Подводные камни при переходе с ES5 на ES6

Недавно мы с командой, наконец-то перешли с ES5 на ES6.

Всё прошло достаточно плавно, нам пришлось исправить всего несколько ошибок в рантайме. Почти все ошибки были в очень старых файлах, где были отключены проверки typescript с помощью @ts-nocheck.

Ошибка 1️⃣ — Action is not a constructor

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


const Action = () => {}; // ES6
const action = new Action(); // Action is not a constructor

var Action = function () {} // ES5
var action = new Action(); // Всё ОК


Ошибка 2️⃣ — Функции, объявленные через let, больше не попадают в window


let openAction = function () {}
window.openAction() // window.openAction is not a function

// Раньше let заменялся на var и всё работало
var openAction = function () {}
window.openAction() // всё ок


Дело в том, что когда переменная объявляется глобально через var, она автоматически становится свойством глобального объекта window. Подробнее тут.

Ошибка 3️⃣ — Cannot access variable before initialization

Одна из ошибок случалась, когда мы пытались получить доступ к переменной promise до её инициализации.


class Queue {
executing;

run(thenable) {
const promise = new Promise(async (resolve, reject) => {
// пытаемся получить значние promise
while (this.executing != promise) {
// ...
}
// ...
});
}
}

// Cannot access 'promise' before initialization
new Queue().run(Promise.resolve())


Раньше, const превращался в var и ошибки не было. Это связано с понятием временной мертвой зоны TDZ, которая не возникает у переменных, объявленных через var.

Были и другие ошибки, но они по сути вариации или комбинации тех ошибок, что я привел выше.

👉 Кстатии, размер бандлов уменьшился процентов на 20.

#TypeScript #JavaScript

Сидишь, листаешь посты и замечаешь какую-то хрень на экране, то-ли волос, то-ли трещина. При скроле не пропадает, пальцем не смахивается. А вот когда окно муваешь - плывет)

Смотрим под капотом, а там вот такая пакость висит

Текстом, для тех, кому не вылезло

ЪУЪ @admin, @moderator, с 1 апреля!