>MARAT_SHVETS.portfolio
> cd ../projects
009
Frontend · Архитектура

Движок визуальной новеллы на Next.js

Frontend-архитектор · Fullstack·2024 · 2 месяца

Кастомный движок ветвления диалогов: сценарный формат, динамическая подгрузка, плагинная система.

Next.jsReactTypeScriptSSGПлагины
Ветвлений сценария
Зависимостей от внешних движков0
Поддержка мультимедиачерез плагины
Формат сценарияJSON + валидация
Обучено нарратологов3 человека
// ЗАДАЧА

Команде нарратологов требовался инструмент для создания интерактивных историй с ветвлением диалогов. Готовые решения (Ren'Py, Twine) не подходили: нужен веб, кастомный UI, встраивание аналитики. Разработчик должен был создать движок с нуля и передать его дизайнерам без глубоких технических знаний.

// ПРОЦЕСС
01
Проектирование сценарного формата

Разработал JSON-формат описания сценариев: узлы диалогов, условные переходы, переменные состояния персонажей, триггеры событий. Формат читаемый — нарратолог может редактировать без IDE. Написал JSON Schema для валидации и автодополнения в редакторах.

02
Движок ветвлений

TypeScript-ядро: интерпретатор сценария, стек состояний для реализации save/load, система переменных с поддержкой условий (если игрок выбрал X и Y, то показать Z). Чистое разделение: логика движка не зависит от UI.

03
React UI-компоненты

Компоненты диалогов, портретов персонажей, анимированных переходов. Next.js с SSG для статической генерации «оглавления» новеллы. Динамическая подгрузка глав — пользователь не ждёт загрузки всего сценария. Адаптивность: работает на мобильных.

04
Плагинная система и документация

Разработал Plugin API: подключение мультимедиа (фоновая музыка, SFX), локализации, аналитики поведения пользователей. Провёл воркшоп для команды дизайнеров и нарратологов. Написал документацию формата сценария с примерами.

// РЕШЕНИЕ

Нарратолог описывает сценарий в JSON → движок интерпретирует и строит дерево диалогов → React рендерит интерактивную историю. Плагины подключают музыку, аналитику, локализацию. Next.js обеспечивает быструю загрузку и SEO.

// РЕЗУЛЬТАТЫ
0
Зависимостей от внешних движков
через плагины
Поддержка мультимедиа
JSON + валидация
Формат сценария
3 человека
Обучено нарратологов
// СТЕК
Next.jsReactTypeScriptSSGJSON SchemaPlugin API