Соберите и проверьте
Сервер разработки показывает оверлей, пока работает. Для Мастерской нужен готовый пакет: папка 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:
- В Studio выберите My HUD и найдите блок Превью для Workshop.
- В Фон превью выберите фон: трассу (Нюрбургринг, Батерст, Сузука, в том числе в дождь), Тёмный, Светлый или Своё фото — снимок экрана из игры.
- Нажмите Снять анимированное превью. Около 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 пункты «Сборка», «Проверка» и «Превью» отмечены.