Racelink
Шаги руководства · 06 / 08

// Руководство по оверлеям · 06

Соберите и проверьте

Сервер разработки показывает оверлей, пока работает. Для Мастерской нужен готовый пакет: папка dist с собранными файлами, манифестом и превью. Соберём его и проверим так же, как Racelink проверяет перед публикацией. Около 15 минут.

Соберите проект

npm run dev можно не останавливать. Во втором терминале, в папке my-hud, выполните:

$ npm run build
Терминал
> my-hud@1.0.0 build
> racelink-overlay typegen && tsc --noEmit && vite build

Already up to date.
vite v8.3.6 building client environment for production...
✓ 9 modules transformed.
dist/index.html                   0.39 kB │ gzip:  0.26 kB
dist/assets/index-DwLSqiF8.css    0.92 kB │ gzip:  0.53 kB
dist/assets/index-CdIWPwfm.js   147.16 kB │ gzip: 52.83 kB
✓ built in 79ms
[racelink] Package built: 4 files in dist/. To publish it, add preview/preview.png or capture a preview in Racelink Studio.

Сборка делает четыре вещи по порядку:

racelink-overlay typegen
Обновляет src/racelink-settings.ts по манифесту. «Already up to date» — файл уже совпадает.
tsc --noEmit
Проверяет типы во всём проекте. Сервер разработки этого не делает, поэтому ошибки, которые он пропустил, найдутся здесь.
vite build
Собирает код и стили в несколько маленьких файлов в папке dist/.
Проверка пакета
Плагин Racelink копирует в dist/ манифест и картинки из preview/ и проверяет пакет. Строка [racelink] в конце — его итог.

Строка Package built значит, что пакет собран, но превью для Мастерской ещё нет. Добавим его ниже.

Что попало в dist

index.html
Страница оверлея со ссылками на собранные файлы.
assets/
Код и стили, собранные из src/ вместе с React. Имена с хешем, вроде index-CdIWPwfm.js, меняются при каждом изменении кода.
racelink.overlay.json
Копия манифеста.
preview/
Превью и скриншоты для Мастерской, когда они есть.

Это ровно то, что уйдёт в Мастерскую: ни исходников, ни node_modules. Руками в dist/ ничего не меняйте — следующая сборка всё перезапишет.

Собранный оверлей в Racelink

Откройте Studio и выберите My HUD. В карточке проекта есть Путь проекта: Разработка, Сборка, Проверка, Превью, Публикация. После сборки у пункта Сборка стоит «dist/ готов».

Теперь проект не зависит от сервера разработки. Остановите npm run dev (Ctrl + C): My HUD остаётся в Studio и в окне Добавить оверлей, и его можно поставить на любой макет — Racelink берёт собранный пакет из dist/.

Сделайте превью для Мастерской

Без главной картинки оверлей не опубликовать: её игроки видят в каталоге Мастерской. Проще всего снять её в Studio:

  1. В Studio выберите My HUD и найдите блок Превью для Workshop.
  2. В Фон превью выберите фон: трассу (Нюрбургринг, Батерст, Сузука, в том числе в дождь), Тёмный, Светлый или Своё фото — снимок экрана из игры.
  3. Нажмите Снять анимированное превью. Около 6 секунд Racelink записывает оверлей на демо-данных и сохраняет preview/preview.gif в проекте и в dist/.

Можно сделать картинку и самому: положите preview/preview.png (или .jpg, .gif) — до 1 МБ, стороны от 256 до 2048 пикселей, лучше квадрат. До 9 дополнительных картинок кладите в preview/screenshots/: игроки листают их на странице оверлея. После своих картинок выполните npm run build, чтобы они попали в dist/.

Проверьте пакет

Racelink проверяет пакет перед публикацией. Ту же проверку можно запустить самому:

$ npm run validate

Без превью она скажет, чего не хватает:

Терминал
Checked C:\Users\you\Documents\racelink-overlays\my-hud\dist: 4 files.
  preview/preview.png: add a preview image or capture one in Racelink Studio [PREVIEW_MISSING]
The overlay package is invalid.

С превью — что всё в порядке:

Терминал
Checked C:\Users\you\Documents\racelink-overlays\my-hud\dist: 5 files.
No problems found.

В Studio то же делает кнопка Проверить, а в пути проекта у Проверка появится «без ошибок». Код в квадратных скобках, вроде [PREVIEW_MISSING], — номер проблемы: по нему её легко найти в списке ниже или в справочнике ошибок node_modules/@racelink/overlay/docs/errors.md.

Если что-то пошло не так

  • PREVIEW_TOO_LARGE, PREVIEW_DIMENSIONS — картинка больше 1 МБ или её стороны вне 256–2048 пикселей. Уменьшите её или снимите превью в Studio.
  • FILE_TYPE_NOT_ALLOWED — в пакете файл, который не нужен веб-странице (например, .ts или .exe). Обычно так бывает, когда в public/ или preview/ положили лишнее.
  • MANIFEST_FIELD — в манифесте поле с ошибкой; путь после двоеточия показывает, какое.
  • PACKAGE_NOT_BUILT в Studio — проект ещё не собирали. Выполните npm run build.

Что должно получиться

  • npm run build заканчивается строкой [racelink] Package без ошибок.
  • В проекте есть превью: preview/preview.gif из Studio или своя картинка.
  • npm run validate пишет No problems found.
  • В Studio у My HUD пункты «Сборка», «Проверка» и «Превью» отмечены.