<< Как разрабатывалась игра «Свинцовые тучи сорок первого»От идеи после видео о ПВО до браузерной игры: технологии, находки и переделки
Как разрабатывалась игра «Свинцовые тучи сорок первого»: от видео о ПВО до браузерной аркады. Технологии, модели, эффекты, управление и скриншоты.
Иногда идея для игры появляется после обычного просмотра видео. Так было и со «Свинцовыми тучами сорок первого»: отправной точкой стал ролик о ПВО России. Захотелось превратить интерес к теме в небольшую игру, где нужно защищать свою позицию от самолётов.
Для действия выбрали 1941 год. Поле, лес, река, зенитный пулемёт и небо, за которым приходится постоянно следить. Из этой простой сцены постепенно выросла браузерная 3D-аркада «Свинцовые тучи сорок первого».
С чего началась разработка
Первым делом понадобился работающий бой: камера поворачивается, самолёт летит, пулемёт стреляет, попадание засчитывается. Уже на этой основе можно было понять, чего не хватает и что мешает играть.
Наведение оставили довольно медленным. Установка поворачивается на 360 градусов по горизонтали, а ствол поднимается до 80 градусов. Чтобы успеть встретить очередной самолёт, приходится заранее смотреть на радар и выбирать направление. Слишком быстрый поворот убрал бы это напряжение.
По той же причине постепенно упростили меню. Игра сразу показывает поле, а перед началом боя достаточно нажать одну кнопку. Подсказки по управлению собраны отдельно и не заслоняют происходящее.
Технологический стек
Проект собран на Phaser 4, Three.js, Vue 3 и TypeScript. Phaser отвечает за игровой цикл и радар, Three.js — за объёмную сцену, камеру, модели и эффекты. Меню, показатели состояния, пауза и статистика сделаны на Vue. TypeScript помогает держать в порядке связи между управлением, состоянием боя и правилами игры.
Для запуска в разработке и подготовки готовой сборки используется Vite. Звук работает через Web Audio, а поддержка контроллера — через Gamepad API. После сборки игру можно разместить на обычном сайте: вся логика боя выполняется в браузере.
Пулемёт, самолёты и поле
Центром сцены стал ДШК — крупнокалиберный пулемёт Дегтярёва — Шпагина. Его длинный ствол и круглый зенитный прицел постоянно находятся перед игроком. От их размера и положения зависит не только внешний вид: оружие должно хорошо читаться, оставляя достаточно места для наблюдения за небом.
Модели в игре создаются кодом из простых геометрических форм. У самолёта отдельно собраны корпус, крылья, хвост и двигатель. Такая конструкция удобна для правок: можно поменять размеры детали и сразу проверить, как она выглядит в полёте.
Сначала растительность выглядела слишком однообразно. Поле оживили берёзы, хвойные деревья с несколькими ярусами, разные лиственные кроны, кусты и пучки травы. Добавились сухие колосья и небольшие цветы. Повторяющиеся элементы объединены с помощью InstancedMesh — так браузеру нужно меньше отдельных команд для отрисовки леса и травы.
Почему над попаданиями пришлось поработать
В стрельбе быстро обнаруживается любая неточность. Если очередь визуально проходит через крыло, а самолёт продолжает лететь как ни в чём не бывало, это раздражает. Поэтому попадания проверяются по корпусу, обоим крыльям, хвосту и двигателю. Учитывается и движение цели, и путь пули между кадрами.
У пуль появилась параболическая траектория, а у каждого пятого выстрела — трассирующий след. Сначала следы получились слишком толстыми и мешали обзору. Их заменили тонкими линиями. При попадании добавили искры и короткий глухой хлопок: успешную очередь теперь можно и увидеть, и услышать.
Сбитая цель тоже потребовала отдельной доработки. Самолёт кренится, теряет высоту и тянет за собой дым. При столкновении с землёй происходит взрыв, а обломки разлетаются с дымными шлейфами. Плотность дыма менялась несколько раз: эффект должен быть заметным, но следующую цель за ним всё-таки нужно видеть.
Как появился ритм боя
Одновременные атаки со всех сторон оказались слишком хаотичными. Самолёты стали заходить волнами из одного сектора, а затем направление меняется. Каждые 30 секунд появляется тройка клином. По мере продолжения боя противники летят быстрее, а паузы между ними сокращаются.
Разные цвета самолётов добавляют повод рискнуть. Серые — обычные цели, жёлтые дают 100 патронов, зелёные восстанавливают одно очко здоровья. Красный самолёт включает на 10 секунд повышенную скорострельность, бесконечные патроны и двойную скорость наведения. На телефоне во время этого бонуса работает автоматический огонь.
За полезным самолётом легко увлечься погоней и пропустить опасного соседа. Именно такие ситуации делают бой интереснее. Ремонт позиции в итоге ограничили одним очком здоровья: более щедрый бонус слишком сильно прощал ошибки.
Бомбы — отдельная угроза
Уничтожение самолёта не спасает от бомбы, которую он уже успел сбросить. Поэтому появилась возможность сбивать и сами бомбы. Перехват на достаточной высоте сохраняет позицию, а подрыв ниже 25 метров над местным рельефом всё равно отнимает одно очко здоровья.
Это добавило ещё одну короткую, нервную задачу: заметить сброс, перевести прицел и попасть до того, как станет слишком поздно. После уничтожения бомба не может нанести урон повторно.
Небо должно быть слышно
Звук двигателей помогает обнаруживать самолёты за пределами экрана: громкость и направление меняются в зависимости от положения цели. Полупрозрачные красные указатели подсказывают, куда повернуться. Когда противник опасно приближается, радар мигает красным и звучит сирена.
Для окружения добавили медленно плывущие облака и дымку, из которой постепенно проявляются самолёты. Солнце может засветить обзор. Это небольшие детали, но с ними небо ощущается живым, а поиск целей становится чуть сложнее.
Управление на разных устройствах
Не все первоначальные решения прижились. От наведения мышью отказались: на компьютере остались стрелки для поворота и пробел для стрельбы. Контроллер Xbox позволяет наводить любым из двух стиков, стрелять правым триггером RT и начинать бой кнопкой A.
На телефоне управление другое: движение пальца поворачивает установку, короткое касание делает выстрел. Можно наводить одним пальцем, а стрелять вторым. Для небольшого экрана пришлось заново разместить показатели и радар, убрать подсказки клавиатуры и добавить удобную кнопку паузы.
Доводка и публикация
В конце оставалось проверить то, что легко пропустить во время обычной игры: попадания в края крыльев, начисление бонусов, урон от низкого подрыва, расписание волн и поведение управления на паузе. Для правил и игровых механик в проекте есть автоматические проверки.
Отдельная история получилась с музыкой. Браузер не всегда разрешает включать её сразу, поэтому перед главным экраном появилась кнопка «Играть». После первого нажатия можно запускать музыку меню. Во время боя звучат двигатели, выстрелы и тревога.
Для публикации достаточно загрузить готовые файлы на сайт. Скрипты и стили получают уникальные имена при каждой сборке, чтобы обновления не застревали в кеше браузера. Так идея, возникшая после просмотра видео, превратилась в игру, которую можно открыть по ссылке.
«Свинцовые тучи сорок первого» получились про внимание, своевременный разворот и выбор целей. Иногда важнее отказаться от бонуса и сбить бомбу. А иногда десять секунд усиленного огня дают возможность пережить особенно плотный налёт.
