# Разработка десктопной игры на Cplay и Tauri: от кода до MSI-установщика

Источник: https://www.youtube.com/watch?v=fyqRSaSJf0I
Канал: freeCodeCamp.org
Опубликовано: 07.08.2024

---

Создание десктопных игр на JavaScript долгое время ограничивалось веб-браузерами, однако современные технологии позволяют превращать веб-проекты в полноценные установочные приложения для ПК. В этом руководстве автор под псевдонимом JS Legend показывает, как использовать связку библиотеки Cplay (ранее известной как Kaboom.js) и платформы Tauri для разработки игры в стиле Flappy Bird с поддержкой различных устройств ввода и системы сохранений на жестком диске.

## 🛠️ Технологический стек: Почему Tauri лучше Electron?
[[JUMP:04:25]]

Традиционным выбором для переноса JavaScript на десктоп долгое время считался Electron, однако автор видео отдает предпочтение современному инструменту Tauri [04:40]. Основное различие заключается в способе отрисовки:

*   **Electron** упаковывает в каждое приложение полноценный браузер Chromium. Это гарантирует одинаковую работу на всех платформах, но делает даже пустое приложение «тяжелым» (около 100 МБ) [05:06].
*   **Tauri** использует системный движок WebView, уже предустановленный в операционной системе (например, WebView2 в Windows) [05:31]. Благодаря этому размер готовой игры составляет всего 6 МБ [05:19].

По мнению спикера, Tauri проще в настройке, хотя и требует установки Rust для сборки проекта. Важным преимуществом является наличие JavaScript API для работы с файловой системой, что позволяет новичкам реализовывать сохранение данных без глубокого погружения в системное программирование [07:34].

## 🏗️ Подготовка окружения и архитектура проекта
[[JUMP:08:03]]

Процесс создания игры начинается с инициализации проекта через команду `npm create tauri-app`. Автор рекомендует использовать шаблон React для удобства работы с API Tauri, но при этом предлагает удалить все зависимости React и переписать интерфейс на чистом JavaScript, чтобы не перегружать игровую логику лишними абстракциями [09:12]. 

Для отрисовки графики и обработки физики используется библиотека Cplay (версия 3000.0.1.7). Ключевые настройки контекста игры включают:

*   Разрешение 1280x720 пикселей.
*   Режим `letterbox: true`, позволяющий масштабировать игру под любое окно с сохранением пропорций [14:24].
*   Отключение глобальных переменных (`global: false`) для поддержания чистоты кода и вызова функций только через контекст `k` [14:53].

## 🎮 Реализация игровых механик и управление
[[JUMP:17:36]]

Главный герой, птица по имени Creby, представляет собой объект с компонентами спрайта, физического тела и области столкновения (hitbox). JS Legend подчеркивает важность «честного» геймдизайна: хитбокс игрока намеренно сделан меньше визуального спрайта (8x5 пикселей при размере персонажа 16x16), чтобы уменьшить раздражение игрока при близких контактах с препятствиями [43:30].

В игре реализована мультиплатформенная система управления:

1.  **Клавиатура:** прыжок при нажатии пробела [21:15].
2.  **Мышь:** прыжок по клику [22:28].
3.  **Геймпад:** использование кнопки «South» (A на Xbox или X на PlayStation). JS Legend объясняет, что использование именования по сторонам света позволяет коду быть независимым от типа контроллера [02:42].

Особое внимание уделено фоновым объектам. Для создания эффекта бесконечного полета используется трюк с «телепортацией» облаков: когда группа облаков уходит за правую границу экрана (координата X > 700), она мгновенно перемещается далеко за левую границу (X = -500), создавая цикличную анимацию [38:57].

## 💾 Работа с файловой системой и сохранениями
[[JUMP:56:40]]

В отличие от веб-игр, где данные часто хранятся в Local Storage и могут быть удалены при очистке кэша браузера, десктопная игра на Tauri позволяет надежно записывать прогресс в файлы [01:02]. 

Для реализации системы рекордов автор настраивает файл конфигурации `tauri.conf.json`, открывая права на чтение и запись в папку `appLocalData` [22:09]. Процесс сохранения выглядит следующим образом:

*   При каждом завершении игры текущий счет сравнивается с максимальным, загруженным из `save.json`.
*   Если счет выше рекорда, данные перезаписываются с помощью функции `writeTextFile` [58:24].
*   Если файл отсутствует (первый запуск), используется блок `try...catch` для создания новой структуры данных [1:00:38].

## 📦 Сборка и дистрибуция
[[JUMP:1:28:22]]

Финальный этап — создание установочного файла. Команда `npm run build` инициирует сложный процесс компиляции, на выходе которого разработчик получает файл формата `.msi` или `.exe` [1:29:16].

JS Legend настоятельно рекомендует распространять именно установщик (`MSI`), а не простой исполняемый файл. Это связано с тем, что установщик автоматически проверяет наличие в системе пользователя среды выполнения `WebView2 Runtime` и устанавливает её при необходимости. Без этой среды игра на базе Tauri просто не запустится на старых версиях Windows 10 или Windows 7 [07:21]. В завершение автор напоминает о необходимости добавить поле `shortDescription` в конфигурацию, чтобы при наведении курсора на иконку игры пользователь видел описание, а не стандартную надпись «Tauri App» [1:31:03].