Шаблоны

Вы можете сгенерировать новый проект из шаблона, выполнив:

npm create pixi-vn@latest

Интерактивная демонстрация

Как использовать шаблон

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

Первоначальная настройка

Откройте папку проекта в своей IDE. В примерах ниже используется Visual Studio Code.

После открытия проекта VS Code автоматически предложит несколько действий:

• Установить рекомендуемые расширения — появится уведомление с предложением установить расширения, рекомендованные для рабочей области. Настоятельно рекомендуется согласиться. Если уведомление не появилось, вы можете установить их вручную из панели Extensions, отфильтровав по рекомендуемым расширениям.
• Выполнить стартовые задачи — VS Code может предложить выполнить настроенные стартовые задачи, которые установят все зависимости проекта. Если вы предпочитаете сделать это вручную, выполните:

npm install

Запуск проекта

Шаблон включает набор предварительно настроенных конфигураций запуска для VS Code. Если вы не знакомы с ними: конфигурации запуска — это ярлыки, которые сообщают VS Code, как запустить ваш проект (и, при необходимости, подключить отладчик), чтобы вам не нужно было каждый раз вводить команды в терминале. Вы можете получить доступ к ним из панели Run and Debug (иконка кнопки воспроизведения в левой боковой панели, или нажмите F5). Выберите нужную конфигурацию из раскрывающегося списка в верхней части панели и нажмите зелёную кнопку воспроизведения.

Доступны следующие конфигурации:

• • Debug Game: это конфигурация, которую вы будете использовать чаще всего во время разработки — каждый раз при сохранении файла браузер автоматически обновляется. Учтите, что в этом режиме анимации могут быть не идеально плавными, а загрузка ресурсов может быть медленнее, чем в финальной опубликованной сборке.
• Debug Game Preview: которая максимально точно имитирует, как игра будет вести себя после публикации: анимации плавные, время загрузки реалистичное, оптимизации активны. Используйте эту конфигурацию, когда хотите убедиться, что всё выглядит и работает правильно перед публикацией.
• Run as Desktop App (Dev): она компилирует backend на Rust/Tauri и запускает игру как нативное desktop-окно. Если ваш шаблон не ориентирован на desktop или мобильные платформы, эта конфигурация будет отсутствовать.

Настройка стиля

Интерфейс (UI) шаблона полностью построен на shadcn/ui, что означает, что вы можете настроить цветовую тему без изменения кода компонентов.

Откройте конструктор темы shadcn/ui, настройте цвета по своему вкусу, затем перейдите в раздел Copy страницы, чтобы скопировать сгенерированную команду CSS. Выполните эту команду из корня вашего проекта:

npx shadcn@latest add <paste-the-generated-command-here>

После применения рекомендуется переформатировать исходные файлы:

npm run format

Для дальнейшей настройки — шрифтов, глобальных стилей и прочего — см. Стили и шрифты.

Структура проекта

Экраны шаблона

Шаблон поставляется с набором готовых экранов, охватывающих основные части визуальной новеллы. Каждый экран — это компонент React, связанный с маршрутом, управляемым TanStack Router.

• Главное меню (/) — первый экран, который видит игрок при запуске игры. Он предоставляет точку входа для начала новой игры, продолжения сохранённой и открытия настроек.
• Экран повествования (/game/narration) — основной игровой экран, на котором отображается история. Он рендерит диалоги, спрайты персонажей, фоны и варианты выбора.
• Настройки — панель настроек не имеет собственного отдельного маршрута. Вместо этого она использует Search Params, чтобы отображаться поверх текущего активного экрана. Такой подход позволяет сохранять URL чистым, при этом позволяя игроку открывать настройки из любого места в игре и переключаться между разделами настроек (аудио, изображение, язык и т.д.) без потери контекста, где он находился.
• Экран навигации (/game/navigation) — только для Point & Click. Позволяет игроку перемещаться между комнатами и выполнять различные действия, доступные в текущей локации.
• Экран карты (/game/map) — только для Point & Click. Показывает карту и позволяет игроку перемещаться из одной локации в другую. Также поддерживает управление несколькими картами.