Пошаговые туториалы

Назначение

Пошаговые туториалы служат для интерактивного обучения новых игроков основным этапам и механикам игры. Этот механизм помогает пользователям быстро освоить интерфейс и ключевые действия: выбор локации для боя, выбор элемента и элементаля для сражения. В отличие от общего описания обучения и подсказок, данный подмодуль реализует динамическое выделение элементов интерфейса с последующим пояснением и контролем прогресса пользователя на каждом шаге.

Основная проблема, которую решает пошаговый туториал — снижение порога входа в игру за счёт наглядного сопровождения действий и предотвращения ошибок новичков, что повышает вовлечённость и удержание игроков.

Функциональность

• Динамическое выделение элементов интерфейса
  Каждый шаг туториала связан с конкретным элементом UI, который выделяется специальной рамкой. Для этого используется CSS-класс tutorial-target и позиционирование подсказки рядом с элементом.

• Управление позиционированием подсказок
  Расчёт положения всплывающей подсказки и рамки выделения основывается на реальных координатах целевого элемента с учётом размеров окна браузера для предотвращения перекрытий и выхода за границы экрана.

• Поддержка нескольких фаз туториала
  Шаги сгруппированы по игровым фазам (menu, elementSelection, elementalSelection), что позволяет запускать обучение поэтапно, соответствуя текущему состоянию игры.

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

• Адаптивность к динамическому интерфейсу
  Особенно для выбора элементаля, где кнопки могут загружаться с задержкой, реализован периодический поиск целевого элемента с интервальным опросом и подпиской на событие готовности интерфейса. Также используется ResizeObserver и отслеживание событий прокрутки и изменения размера окна для постоянного обновления позиции подсказки и рамки.

• Визуальные компоненты

  • Затенённый фон для фокусировки внимания.

  • Подсветка выбранного элемента с помощью полупрозрачной рамки с закруглёнными углами.

  • Всплывающая подсказка с заголовком, описанием, прогрессом и кнопкой пропуска обучения.

• Пример данных шагов (Battle Tutorial)
  Каждый шаг содержит уникальный ID, CSS-селектор для поиска, заголовок, описание, фазу, позицию подсказки и параметры, управляющие поведением (требуется ли действие, авто-переход и т.п.).

{
  id: 'element-select',
  targetSelector: '.element-grid .element-btn.focused',
  title: 'Step 2: Choose Element',
  description: 'Fire element is recommended for beginners...',
  phase: 'elementSelection',
  position: 'bottom',
  actionRequired: true,
  triggerNext: 'click',
}

Взаимосвязь с родительской темой и другими подмодулями

Пошаговые туториалы являются одной из ключевых составляющих раздела "Обучение и поддержка игрока" и тесно интегрированы с остальными подмодулями:

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

• С настройками и справкой
  В настройках предусмотрена возможность включения/отключения туториалов, а также их сброс для повторного прохождения.

• С бизнес-логикой игры
  Компонент получает из gameLogic.ts информацию о текущей фазе игры и состоянии интерфейса, что обеспечивает корректный выбор шагов и целевых элементов.

• Отличие от общего учебного модуля
  В отличие от статических подсказок и справочной информации, пошаговые туториалы реализуют интерактивный и контекстный процесс обучения с реальным контролем пользовательских действий и динамическим выделением элементов интерфейса.

Иллюстрация: основной процесс работы пошагового туториала

flowchart TD
    Start[Старт туториала]
    LoadSteps[Загрузка шагов для текущей фазы]
    FindTarget[Поиск целевого элемента UI]
    Highlight[Выделение элемента и отображение подсказки]
    WaitAction{Требуется действие пользователя?}
    WaitUserClick[Ожидание клика по элементу]
    AutoProceed[Автоматический переход (таймаут)]
    NextStep[Переход к следующему шагу]
    PhaseChange{Смена фазы?}
    EndTutorial[Завершение туториала]

    Start --> LoadSteps --> FindTarget --> Highlight --> WaitAction
    WaitAction -->|Да| WaitUserClick --> NextStep
    WaitAction -->|Нет| AutoProceed --> NextStep
    NextStep --> PhaseChange
    PhaseChange -->|Да| LoadSteps
    PhaseChange -->|Нет| LoadSteps
    LoadSteps -->|Шаги закончились| EndTutorial

Таким образом, пошаговые туториалы обеспечивают плавное, удобное и наглядное введение игроков в основные игровые механики, минимизируя ошибки и повышая удовлетворённость от игрового процесса. Их архитектура учитывает динамический и адаптивный характер интерфейса, что делает обучение максимально эффективным и непрерывным.