Перед началом

Что такое оверлей

Оверлей — небольшая веб-страница. Racelink показывает её в прозрачном окне поверх игры (клики проходят сквозь него) и передаёт ей живые данные гонки: скорость, педали, позиции, время кругов, топливо, погоду. Данные приходят в одних и тех же полях и единицах для каждой поддерживаемой игры — скорость в км/ч, педали от 0 до 1, время в секундах, — поэтому один оверлей работает во всех играх сразу.

Оверлей пишут как обычный сайт: HTML и CSS отвечают за вид, TypeScript — за логику. Готовый оверлей вы публикуете в Мастерской Steam, а игроки добавляют его в свои макеты так же, как встроенные оверлеи Racelink.

Как пройдёт работа

1. Создаёте проект одной командой — он сразу показывает рабочий оверлей.
2. Запускаете сервер разработки: оверлей появляется в Racelink и в браузере и перезагружается при каждом сохранении файла.
3. Выводите нужные данные, добавляете настройки и доводите внешний вид.
4. Собираете и проверяете проект, снимаете превью и публикуете его из Racelink Studio.

Каждый шаг заканчивается проверкой «Что должно получиться». Не переходите дальше, пока она не пройдена.

Стек технологий

HTML и CSS

Разметка и внешний вид оверлея. Доступно всё, что умеет современный браузер: flex и grid, CSS-переменные, анимации, SVG и canvas.

TypeScript

JavaScript с типами. Все поля телеметрии и ваши настройки типизированы: редактор подсказывает имена полей и сразу подчёркивает опечатку. Если вы знаете JavaScript, этого достаточно — нужное о типах объясним по ходу.

Node.js и npm

Node.js запускает инструменты разработки на вашем компьютере, npm скачивает пакеты и выполняет команды проекта. В сам оверлей Node.js не попадает: игрок получает только готовые HTML, CSS и JavaScript.

Vite

Сервер разработки и сборщик. Во время работы показывает оверлей и мгновенно обновляет его при сохранении, а перед публикацией собирает итоговые файлы в папку dist/.

@racelink/overlay

SDK Racelink — библиотека из npm. Подключается к Racelink, отдаёт типизированные данные и настройки, без Racelink генерирует демо-данные и проверяет проект перед публикацией.

racelink.overlay.json

Манифест оверлея: id, название, версия, поддерживаемые игры, размер окна и список настроек. По нему Racelink рисует панель настроек вашего оверлея.

Racelink Studio

Раздел приложения для авторов оверлеев. Находит ваш проект, показывает живые значения всех полей, проверяет проект, снимает превью и публикует его в Мастерскую Steam. Он выключен, пока вы не включите его в Настройках, раздел «Для разработчиков»; до этого Racelink не принимает dev-серверы.

Что нужно знать

Руководство рассчитано на тех, кто уже:

• может сверстать простую страницу на HTML и CSS;
• знает основы JavaScript: переменные, функции, объекты и массивы, стрелочные функции, import и export;
• умеет открыть терминал, перейти в папку командой cd и запустить команду.

Знать заранее не обязательно:

• TypeScript — хватит JavaScript;
• npm и Vite — все нужные команды есть в руководстве;
• React — основной путь руководства написан на чистом TypeScript.

Где подтянуть основы:

• MDN: изучение веб-разработки ↗ — HTML, CSS и JavaScript с нуля;
• MDN: руководство по JavaScript ↗;
• MDN: командная строка для начинающих ↗ (на английском);
• TypeScript для программистов на JavaScript ↗ (на английском, 5 минут).

Что установить

1. Racelink — полная версия из Steam ↗, на Windows или Linux. В бесплатной Racelink Demo в макет добавляются только встроенные оверлеи, поэтому свой оверлей поверх игры там не запустить.
2. Node.js 22 или новее. Скачайте версию LTS с nodejs.org ↗ и установите с настройками по умолчанию. npm устанавливается вместе с Node.js.
3. Редактор кода. Подойдёт любой; мы рекомендуем Visual Studio Code ↗: поддержка TypeScript в нём встроена, а терминал открывается прямо в редакторе — Ctrl + `.

Сама игра для разработки не нужна: Racelink и SDK показывают демо-данные. Игра понадобится, только чтобы проверить оверлей в настоящей гонке.

Проверьте установку

Откройте новый терминал (тот, что был открыт до установки Node.js, его не увидит) и выполните две команды:

$ node -v
v22.14.0

$ npm -v
10.9.2

Первая должна вывести версию v22 или выше. Вторая — любую версию; точные номера у вас могут отличаться.