Настрой скин игры

Игра поставляется с видом по умолчанию. На вкладке Скин редактора игры ты можешь переопределить её цвета, заменить её визуальные ассеты (изображения, а где игра их использует, аудио и видео) и задать любые нецветовые ручки, которые выставил автор (переключатель, число, выбор), чтобы испытание подходило твоему бренду, и изменение применяется к отрисованной игре.

Настройка скина доступна от тарифа Alpha и выше (Alpha, Troop, Apex).

Задай цвета, ассеты и другие ручки

Открой игру на странице Игры ключа сайта (или команды), затем вкладку Скин. Вкладка показывает слоты, которые выставил автор игры. Большинство это цвета и ассеты, но автор может также выставить переключатель (вкл/выкл), число (часто с минимумом и максимумом) или выбор из фиксированного списка. Задай цвет значением hex или rgb(); задай ассет, загрузив файл или вставив URL (см. ниже); задай остальные слоты показанным элементом управления. Оставь слот нетронутым, и он сохранит встроенное значение игры.

Как скин выбирается в рантайме

Каждый пресет объявляет режим, в котором он работает: светлый, тёмный или любой (он хорошо читается на обоих фонах). Есть одно умолчание на режим, так что игра выглядит правильно, какой бы режим ни предпочитало устройство посетителя. Пресет, помеченный any, годится быть умолчанием для светлого, тёмного или обоих. Выбор одного происходит в два этапа.

Сначала виджет решает, какой скин запросить:

1. Атрибут skin виджета, если страница его задала: точное имя пресета (например midnight) или сокращение light / dark.
2. Иначе системное предпочтение посетителя (prefers-color-scheme), которое разрешается в light или dark.

Затем сервер сопоставляет это с пресетами, после слияния твоих переопределений (ключ сайта поверх команды поверх встроенного набора игры). Точное имя пресета в атрибуте побеждает безоговорочно. Иначе для выбранного режима сервер берёт первый пресет, в порядке объявления, который годится для этого режима и помечен умолчанием (пресет годится, когда его режим это тот режим или any); если ни один не помечен умолчанием, он берёт первый годный пресет.

Поскольку пресет any годится для обоих режимов, ты можешь сделать один скин умолчанием везде или дать одному режиму выделенный скин и дать скину any покрыть другой. На вкладке Скин скин any появляется и под светлой, и под тёмной группой, и ты задаёшь его умолчанием для одной или обеих.

На элементе <caputchin-game> ты также можешь передать инлайновый объект skin: объект JSON, записанный как значение атрибута, например skin='{"primary":"#7c3aed"}'. Виджет шлёт его на сервер как скин-сигнал этого монтирования, а сервер парсит его и накладывает поверх разрешённых пресетов, так что твои инлайновые цвета и ассеты побеждают всё выше (включая твои переопределения команды и ключа сайта). Это свойство твоей собственной разметки, так что оно работает на любом тарифе. Галочный <caputchin-widget> не принимает инлайновый скин; его атрибут skin принимает только light / dark или имя пресета. Смотри нашу философию о том, почему это пер-встраивательное авторствование бесплатно.

Ассеты: загрузи или сошлись

Слот ассета (изображение, аудио или видео) принимает либо загруженный файл, либо URL, который ты вставляешь:

• Загрузка: Caputchin хранит снимок файла. Он заморожен, так что не изменится, пока ты не загрузишь снова.
• Ссылка: ты вставляешь https-URL на файл, который размещаешь сам. Он живой, так что замена файла по этому URL обновляет игру при следующей загрузке.

Поскольку игра работает в кадре-песочнице, связанный по ссылке ассет загружается, только если его источник разрешён. Caputchin делает это за тебя: он разрешает ровно те источники, на которые указывают твои пресеты скина, и ничего больше. Ты сам никакую политику не меняешь.

Каждый тип ассета принимает фиксированный набор форматов (например PNG, JPEG, WebP, SVG и GIF для изображений). Точные форматы и правила цвета в справочнике схемы.

Что применяется и где

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

Как значение скина доходит до игры

Сервер разрешает твой скин (твои переопределения, слитые поверх встроенного набора) и вручает результат собственному коду игры, который рисует себя с ним. Цвета и URL ассетов прибывают как текст; переключатель прибывает как настоящий true / false, число как настоящее число, выбор как выбранная строка. Автор игры решает, как используется каждое значение, так что то, что слот реально меняет, зависит от игры. Ты не пишешь никакого CSS для игры: она работает в кадре-песочнице, который ты не можешь стилизовать со своей страницы.

Оболочка виджета (хром Caputchin вокруг игры и отдельная галочка) другая: её разрешённый скин также выставлен твоей странице как пользовательские свойства CSS с именами --cpt-skin-<token>, которые ты можешь читать или переопределять из своей собственной таблицы стилей. Эта поверхность и то, как сделать white-label оболочки, покрыты в Стилизуй виджет через CSS. Эти переменные только оболочки; они не несут скин игры.

См. также

• Обзор настройки игр: зарегистрируй игру и управляй ею.
• Конфигурации и язык: две другие оси.
• Справочник схемы: правила цвета, форматы ассетов и модель пресетов.
• Стилизуй виджет через CSS: переменные оболочки --cpt-skin-* и shadow parts.