Превратить «Жизненный цикл софтварного существа» в играбельную Visual Novel: полный разбор одной итерации
На этот раз я делал не «просто накинул скин ридера», а действительно превратил полный текст 软件体的生命周期.md в играбельную визуальную новеллу в японском стиле GALGAME — и от начала до конца соблюдал жёсткое ограничение: оригинального текста может быть только больше, но не меньше; нельзя потерять ни одной текстовой детали.
Весь процесс не был «сделал с первого раза», а представлял собой типичную цепочку непрерывных итераций по принципу «сначала пусть просто работает, а потом понемногу сточить все места, которые выглядят неестественно». Если оглянуться назад, его в целом можно разбить на следующие этапы.
1. Стартовая точка была предельно ясной: не адаптация отрывков, а полная сохранность текста
С самого начала цель была жёсткой:
- источник сценария — локальный
软件体的生命周期.md - весь текст должен попасть в игру
- нельзя из‑за игрового формата урезать оригинал до конспекта, «версии в диалогах» или «лёгкой новеллизации»
- подачу текста можно усилять, но сам текст не должен сокращаться
Поэтому базовая идея проекта — не «написать VN‑сценарий», а «разрезать оригинал на структуру абзацев, подходящую для продвижения визуальной новеллы, одновременно сохранив полный оригинал с возможностью просмотра».
Дальше во всей системе — навигация по главам, обзор оригинала, покадровая/постабзацная привязка, перечитывание, сохранение прогресса — всё на самом деле обслуживает именно эту предпосылку.
2. Первая версия запускалась, но не была похожа на Visual Novel
После первой сборки главной проблемой была не нехватка функций, а неправильная «атмосфера».
Хотя текст уже можно было продвигать, отображать и разбивать на сегменты, интерфейс выглядел скорее как веб‑ридер с панелью управления, а не как японская GALGAME. Первая реакция пользователя тоже была прямой: «Этот интерфейс вообще не тот, сделай UI как у японских galgame».
Поэтому в первой волне рефакторинга я сфокусировался не на добавлении функций, а на том, чтобы выправить визуальный язык:
- заново разделил слой сцены, слой переднего плана и слой текстового окна
- по‑новому оформил заголовки глав, титульную страницу и переходные карточки в стиле визуальной новеллы
- заменил «обычную веб‑карточку» на VN‑диалоговое окно, закреплённое на сцене
- оформил зону реплик персонажей, табличку имени, прогресс‑бар и кнопки продвижения ближе к классической компоновке японских VN
Смысл этой итерации: сначала сделать так, чтобы это выглядело как игра, и только потом добирать интерактив, который у игры должен быть.
3. Дополнили ростеры персонажей, и сцена эволюционировала от «есть картинки» к «это похоже на сцену»
Пользователь чётко обозначил требование: у каждого персонажа должна быть立绘 (персонажная спрайтовая иллюстрация).
Поэтому дальше я не «подобрал картинки паре главных героев», а реально построил систему персонажных спрайтов:
- данные по спрайтам вынесены в отдельное управление
- у разных персонажей — своя сценическая позиция и стиль отображения
- поддерживается раскладка: один персонаж, два персонажа, несколько персонажей одновременно
- говорящий персонаж подсвечивается, «слушающие» ослабляются
- для текста реплик разных персонажей поддерживаются разные цвета
Но и этот блок проходил через много шлифовки. По пути возникали типовые проблемы:
- у некоторых персонажей отображалась только нижняя половина тела
- текстовое окно было слишком большим и перекрывало сцену
- при нескольких персонажах одновременно сцена выглядела тесной
- в миниатюрах сохранений спрайты часто обрезались по голове или оставались «одни ноги»
Дальше вокруг этого было сделано множество правок:
- настроена высота сцены и логика масштабирования спрайтов
- разделены размеры спрайтов для трёх категорий: human / digital / entity
- разрешены общий сдвиг сцены по X/Y и масштабирование
- для «много персонажей на сцене» сделано более разумное распределение слотов
- исправлена композиция миниатюр, чтобы по возможности сохранять фигуру целиком и не «резать персонажа в карточке сохранения»
После этого это перестало быть «поставили несколько картинок», и стало ощущаться как настоящая сценическая постановка.
4. Свобода текстового окна почти превратилась в настраиваемую систему лейаута
В этом проекте текстовое окно — место, за которым пользователь следил наиболее пристально; и именно его я затем проработал глубже всего.
Пользователь подряд выдавал очень конкретные требования:
- поддержать пользовательскую настройку позиции текстового окна
- поддержать изменение размера за углы
- поддержать регулировку прозрачности
- поддержать максимальную скорость текста — мгновенный вывод
- поддержать соответствие «персонаж → цвет текста»
- текстовое окно нельзя намертво фиксировать на всю ширину
- можно делать уже, можно делать шире
- нельзя постоянно закрывать спрайты
- при 顺时 (правосторонней компоновке) окно нужно ставить максимально вправо
Поэтому я не ограничился «перетаскиваемым окном», а постепенно довёл это до полноценной системы лейаута:
- поддержка drag‑and‑drop для перемещения окна
- поддержка масштабирования по 8 направлениям: 4 стороны + 4 угла
- свободная регулировка ширины и высоты
- предустановки лейаута: по центру, снизу слева, снизу справа, сверху слева, сверху справа
- регулировка прозрачности, размера шрифта и межстрочного интервала
- сохранение пользовательских настроек вместе с прогрессом и восстановление при следующем запуске
- изменение позиции окна синхронизируется с «уступанием» сцены, чтобы меньше перекрывать персонажей
Здесь был важный поворотный момент:
Сначала размер менять уже можно было, но оставалась проблема «самое узкое всё равно во всю ширину» и общее ощущение «будто всё равно зафиксировано». Потом я отдельно поправил минимальную ширину, ширину по умолчанию и логику кастомных размеров — и только тогда получилось то, что пользователь ожидал: настоящая свободная трансформация, а не «кажется, что можно настроить, но по факту не получается».
5. Заголовки, переходы между главами и плейсхолдеры: многократно делали «меньше»
Ещё одно очевидное направление итераций — постепенно убирать лишний UI, который прерывает чтение.
Пользователь высказывал типичные претензии:
- можно ли сделать так, чтобы два блока слева сверху исчезали автоматически и не оставляли плейсхолдеров
- большие заголовки «название книги» и «глава X» показывать только один раз при переключении главы, а не всплывать на каждую фразу
- не надо постоянно держать на экране какие‑то поясняющие блоки
Поэтому дальше я сделал несколько кругов «показывать только тогда, когда нужно»:
- титульная страница / заголовок главы показываются кратко только при реальном переключении главы
- в обычном режиме чтения большие заголовки и плейсхолдеры скрываются автоматически
- в сценах без спрайтов больше не показывается большой пустой плейсхолдер‑кард
- верхний HUD при бездействии автоматически затухает
- подсказки чтения на десктопе при простое автоматически уходят
- подсказки перетаскивания и ручки масштабирования в спокойном режиме ослабляются и возвращаются только во время взаимодействия
- подписи у ног спрайтов в спокойном режиме чтения автоматически затухают и снова подсвечиваются при взаимодействии или смене персонажей
Вся эта серия правок на самом деле делает одно и то же:
приглушает ощущение «инструментального интерфейса» и усиливает ощущение «сценического чтения».
6. Довели способы продвижения текста: управление стало ближе к настоящей визуальной новелле
Помимо базового «продвинуть текст», я дополнил привычные для VN паттерны взаимодействия:
- клик вне текстового окна продвигает
- колёсико мыши: следующая / предыдущая реплика
- пробел, Enter, стрелки — продвижение
- автопроигрывание
- пропуск прочитанного
- правая кнопка мыши или горячая клавиша — скрыть интерфейс
- долгое нажатие по пустой области — переключение скрытия интерфейса (мобильные)
И здесь тоже не получилось «сразу идеально».
Например, одну из последних правок я делал из‑за проблемы: когда панель управления развёрнута — колёсико работает, а когда свернуть — колёсико перестаёт работать. Причина оказалась в том, что область основного текста ошибочно считалась «зоной, где нужно перехватывать скролл». Я исправил это условие и отдельно добавил авто‑возврат, чтобы в дальнейшем гарантировать: «после сворачивания панели — если курсор на тексте, колёсико всё равно листает вперёд/назад».
Такие мелочи маленькие, но критичные: они напрямую определяют, похоже ли это на VN, в которой реально можно долго читать.
7. Сохранения, перечитывание, обзор оригинала: это не «доп. функции», а ядро
Так как проект с самого начала требовал «полной сохранности оригинала», то функции, которые в обычных играх часто идут «плюсом», здесь по сути являются основными:
- автосейв
- быстрый сейв / быстрый лоад
- ручные сохранения в несколько слотов
- при загрузке восстанавливаются позиция/размер текстового окна и предпочтения чтения
- просмотр последних абзацев
- навигация по главам
- обзор оригинала и оглавление
- обратный поиск: из игрового абзаца найти номер строки оригинала и перейти к нему
Особенно «обзор оригинала» и «привязка абзацев к строкам оригинала» делают процесс «превращения в игру» максимально прозрачным:
ты не обязан двигаться только по «игровому слою» — можно в любой момент вернуться к полной структуре оригинала и посмотреть, до какой строки ты дочитал.
8. Миниатюры сохранений и мелочи режима чтения: всё вытягивалось микроподстройками
Дальше времени стало уходить уже не на «крупные функции», а на массу деталей, которые «пользователю сразу неприятны», но не всегда формулируются одной фразой.
Например:
- в миниатюрах сейвов у спрайтов обрезается голова
- подписи у ног спрайтов слишком напоминают отладочную информацию
- подсказки текстового окна и ручки перетаскивания слишком бросаются в глаза
- верхний HUD, висящий постоянно, перетягивает внимание
- при нескольких персонажах одновременно UI «разрывает» направление чтения
Эти проблемы в основном решались не добавлением функций, а настройкой ритма:
- что должно быть постоянно видно
- что должно затухать
- что появляется только по hover
- что показывать только коротко при смене состояния
После этого ощущение игры заметно смещается от «веб‑страницы с кучей функций» к «визуальной новелле, которую можно спокойно читать».
9. Автоматизированная проверка — ключ к тому, чтобы в конце можно было итеративно улучшать
Позже пользователь сформулировал это очень прямо: «Ты просто постоянно сам усиливай, оптимизируй и проверяй функциональность нашего сервиса».
Поэтому дальше я не только правил визуал, но и дополнил цепочку автоматической валидации. В проекте появилась серия UI‑проверок в стиле Playwright, которые снова и снова прогоняют ключевые точки:
- заголовки появляются/скрываются вовремя
- текстовое окно по умолчанию не перекрывает сцену
- drag/resize/snap текстового окна работают корректно
- пользовательские позиция и размер сохраняются и восстанавливаются
- верхний HUD автоматически затухает
- подсказки чтения и ручки перетаскивания ослабляются при простое
- ящик сохранений, автосейв, миниатюры быстрых сохранений работают корректно
- несколько персонажей на сцене на десктопе/мобиле не выходят за границы
- мобильное «долгое нажатие для скрытия интерфейса» работает
- после сворачивания панели управления колёсико корректно листает
Это означает, что последующие улучшения — не «поправил одно место и молись, чтобы другое не сломалось», а полноценная итерация с регрессией.
Для такого насыщенного интерактивом UI‑проекта это критично — иначе к финалу легко попасть в ситуацию «починили A — взорвали B».
10. Текущее состояние проекта
На данный момент этот GALGAME‑проект по «软件体的生命周期» уже обладает достаточно полной играбельностью и читабельностью:
- весь оригинальный текст сохранён, не «адаптация‑конспект»
- главный интерфейс в японском стиле GALGAME
- подключены спрайты всех персонажей
- разные персонажи — разные цвета текста
- переходы между главами и титульная страница
- текстовое окно свободно перетаскивается, масштабируется, настраивается по прозрачности
- скорость вывода текста поддерживает мгновенный показ
- клик вне текстового окна продвигает
- колёсико: предыдущая / следующая
- автопроигрывание, пропуск, скрытие UI
- авто / быстрые / ручные сохранения
- перечитывание, навигация по главам, обзор оригинала
- адаптация под десктоп / мобильные
- многократная шлифовка взаимодействий с уходом от «инструментальности»
- автопроверки постоянно гоняют регрессию
Если изначальная цель была «превратить md‑текст в игру», то теперь точнее будет сказать так:
полный длинный текст превратили в систему визуальной новеллы, которую можно читать, играть, откатываться и стабильно шлифовать итерациями.
11. Самое интересное в этом проекте
Для меня самым интересным здесь было не «сделали страницу в стиле GALGAME», а то, что весь процесс очень типично показывает одну вещь:
чтобы «выглядело как надо», обычно недостаточно в первой версии навалить все функции — важно, чтобы пользователь постоянно указывал «где что-то не так», а ты итерация за итерацией убирал эти ощущения «неестественности».
Фидбек пользователя был очень конкретным, и многое из него — не абстрактное «давай ещё оптимизируем», а вот такие вещи:
- здесь перекрывает картинку
- почему здесь намертво во всю ширину
- почему здесь всплывает на каждую фразу
- почему тут показывается только нижняя половина тела
- почему слева сверху не исчезает до конца
- почему колёсико перестаёт работать, если свернуть управление
Именно такие конкретные «смотрится неудобно» пункты в итоге протолкнули проект от «можно пользоваться» к «похоже на полноценную вещь».
Если продолжать дальше, направления для дальнейшей шлифовки, как мне кажется, такие:
- более единый стиль спрайтов персонажей
- более тонкая постановка глав и система BGM/SE
- более полноценная система CG / смены фонов
- более сильные возможности сценарной компоновки
- более официальный способ упаковки и публикации
Но в рамках текущего витка это уже не демо, а довольно цельный VN‑прототип, который можно продолжать итеративно развивать.