Создание десктопных игр на JavaScript долгое время ограничивалось веб-браузерами, однако современные технологии позволяют превращать веб-проекты в полноценные установочные приложения для ПК. В этом руководстве автор под псевдонимом JS Legend показывает, как использовать связку библиотеки Cplay (ранее известной как Kaboom.js) и платформы Tauri для разработки игры в стиле Flappy Bird с поддержкой различных устройств ввода и системы сохранений на жестком диске.
🛠️ Технологический стек: Почему Tauri лучше Electron? 4:25
Традиционным выбором для переноса JavaScript на десктоп долгое время считался Electron, однако автор видео отдает предпочтение современному инструменту Tauri . Основное различие заключается в способе отрисовки:
- Electron упаковывает в каждое приложение полноценный браузер Chromium. Это гарантирует одинаковую работу на всех платформах, но делает даже пустое приложение «тяжелым» (около 100 МБ) .
- Tauri использует системный движок WebView, уже предустановленный в операционной системе (например, WebView2 в Windows) . Благодаря этому размер готовой игры составляет всего 6 МБ .
По мнению спикера, Tauri проще в настройке, хотя и требует установки Rust для сборки проекта. Важным преимуществом является наличие JavaScript API для работы с файловой системой, что позволяет новичкам реализовывать сохранение данных без глубокого погружения в системное программирование .
🏗️ Подготовка окружения и архитектура проекта 8:03
Процесс создания игры начинается с инициализации проекта через команду npm create tauri-app. Автор рекомендует использовать шаблон React для удобства работы с API Tauri, но при этом предлагает удалить все зависимости React и переписать интерфейс на чистом JavaScript, чтобы не перегружать игровую логику лишними абстракциями .
Для отрисовки графики и обработки физики используется библиотека Cplay (версия 3000.0.1.7). Ключевые настройки контекста игры включают:
- Разрешение 1280x720 пикселей.
- Режим
letterbox: true, позволяющий масштабировать игру под любое окно с сохранением пропорций . - Отключение глобальных переменных (
global: false) для поддержания чистоты кода и вызова функций только через контекстk.
🎮 Реализация игровых механик и управление 17:36
Главный герой, птица по имени Creby, представляет собой объект с компонентами спрайта, физического тела и области столкновения (hitbox). JS Legend подчеркивает важность «честного» геймдизайна: хитбокс игрока намеренно сделан меньше визуального спрайта (8x5 пикселей при размере персонажа 16x16), чтобы уменьшить раздражение игрока при близких контактах с препятствиями .
В игре реализована мультиплатформенная система управления:
- Клавиатура: прыжок при нажатии пробела .
- Мышь: прыжок по клику .
- Геймпад: использование кнопки «South» (A на Xbox или X на PlayStation). JS Legend объясняет, что использование именования по сторонам света позволяет коду быть независимым от типа контроллера .
Особое внимание уделено фоновым объектам. Для создания эффекта бесконечного полета используется трюк с «телепортацией» облаков: когда группа облаков уходит за правую границу экрана (координата X > 700), она мгновенно перемещается далеко за левую границу (X = -500), создавая цикличную анимацию .
💾 Работа с файловой системой и сохранениями 56:40
В отличие от веб-игр, где данные часто хранятся в Local Storage и могут быть удалены при очистке кэша браузера, десктопная игра на Tauri позволяет надежно записывать прогресс в файлы .
Для реализации системы рекордов автор настраивает файл конфигурации tauri.conf.json, открывая права на чтение и запись в папку appLocalData . Процесс сохранения выглядит следующим образом:
- При каждом завершении игры текущий счет сравнивается с максимальным, загруженным из
save.json. - Если счет выше рекорда, данные перезаписываются с помощью функции
writeTextFile. - Если файл отсутствует (первый запуск), используется блок
try...catchдля создания новой структуры данных .
📦 Сборка и дистрибуция 1:28:22
Финальный этап — создание установочного файла. Команда npm run build инициирует сложный процесс компиляции, на выходе которого разработчик получает файл формата .msi или .exe .
JS Legend настоятельно рекомендует распространять именно установщик (MSI), а не простой исполняемый файл. Это связано с тем, что установщик автоматически проверяет наличие в системе пользователя среды выполнения WebView2 Runtime и устанавливает её при необходимости. Без этой среды игра на базе Tauri просто не запустится на старых версиях Windows 10 или Windows 7 . В завершение автор напоминает о необходимости добавить поле shortDescription в конфигурацию, чтобы при наведении курсора на иконку игры пользователь видел описание, а не стандартную надпись «Tauri App» .
