Personaliza el skin de un juego

Un juego viene con un aspecto por defecto. En la pestaña Skin del editor del juego puedes sobrescribir sus colores, cambiar sus assets visuales (imágenes, y donde el juego los usa, audio y vídeo), y fijar cualquier perilla no de color que el autor expuso (un interruptor, un número, una opción) para que el reto encaje con tu marca, y el cambio se aplica al juego renderizado.

La personalización de skin está disponible desde el plan Alpha en adelante (Alpha, Equipo, Apex).

Fija colores, assets y otras perillas

Abre el juego en la página de Juegos de una clave de sitio (o del equipo), luego la pestaña Skin. La pestaña muestra las ranuras que el autor del juego expuso. La mayoría son colores y assets, pero un autor también puede exponer un interruptor (on/off), un número (a menudo con un mínimo y un máximo), o una opción de una lista fija. Fija un color con un valor hex o rgb(); fija un asset subiendo un archivo o pegando una URL (ver abajo); fija las otras ranuras con el control mostrado. Deja una ranura intacta y conserva el valor incluido del juego.

Cómo se elige un skin en tiempo de ejecución

Cada preset declara el modo en el que funciona: claro, oscuro o any (se lee bien sobre ambos fondos). Hay un default por modo, así que el juego se ve bien sea cual sea el modo que prefiera el dispositivo del visitante. Un preset marcado any es elegible para ser el default de claro, oscuro o ambos. Elegir uno ocurre en dos etapas.

Primero el widget decide qué skin pedir:

1. El atributo skin del widget, si la página fijó uno: un nombre de preset exacto (por ejemplo midnight), o el atajo light / dark.
2. Si no, la preferencia de sistema del visitante (prefers-color-scheme), que resuelve a light o dark.

Luego el servidor empareja eso contra los presets, tras fusionar tus overrides (clave de sitio sobre equipo sobre el conjunto incluido del juego). Un nombre de preset exacto en el atributo gana de plano. Si no, para el modo elegido el servidor toma el primer preset, en orden de declaración, que es elegible para ese modo y está marcado default (un preset es elegible cuando su modo es ese modo o any); si ninguno está marcado default toma el primer preset elegible.

Como un preset any es elegible para ambos modos, puedes hacer de un skin el default en todas partes, o darle a un modo un skin dedicado y dejar que un skin any cubra el otro. En la pestaña Skin un skin any aparece bajo el grupo claro y el oscuro, y lo fijas como el default para uno o ambos.

En el elemento <caputchin-game> también puedes pasar un objeto skin inline: un objeto JSON escrito como el valor del atributo, por ejemplo skin='{"primary":"#7c3aed"}'. El widget lo envía al servidor como la señal de skin de ese montaje, y el servidor lo parsea y lo superpone sobre los presets resueltos, así que tus colores y assets inline ganan sobre todo lo de arriba (incluidos tus overrides de equipo y de clave de sitio). Es una propiedad de tu propio markup, así que funciona en cualquier plan. El <caputchin-widget> de checkbox no acepta un skin inline; su atributo skin toma solo light / dark o un nombre de preset. Mira nuestra filosofía para saber por qué este autoría por incrustación es gratis.

Assets: sube o enlaza

Una ranura de asset (imagen, audio o vídeo) toma o un archivo subido o una URL que pegas:

• Subir: Caputchin guarda una instantánea del archivo. Queda congelado, así que no cambiará a menos que subas de nuevo.
• Enlazar: pegas una URL https a un archivo que tú alojas. Está en vivo, así que reemplazar el archivo en esa URL actualiza el juego en la siguiente carga.

Como el juego corre en un marco en sandbox, un asset enlazado solo carga si su origin está permitido. Caputchin lo gestiona por ti: permite exactamente los origins a los que apuntan tus presets de skin, y nada más. No cambias ninguna política tú mismo.

Cada tipo de asset acepta un conjunto fijo de formatos (por ejemplo PNG, JPEG, WebP, SVG y GIF para imágenes). Los formatos exactos y las reglas de color están en la referencia de esquema.

Qué aplica, y dónde

Los overrides de skin se resuelven en el servidor, gana-lo-más-específico: un preset de clave de sitio gana al preset del equipo, que gana al skin incluido del juego. Puedes extender un preset incluido y sobrescribir solo las ranuras que quieras, heredando el resto.

Cómo un valor de skin llega al juego

El servidor resuelve tu skin (tus overrides fusionados sobre el conjunto incluido) y entrega el resultado al propio código del juego, que se dibuja a sí mismo con él. Los colores y las URLs de assets llegan como texto; un interruptor llega como un true / false real, un número como un número real, una opción como la cadena elegida. El autor del juego decide cómo se usa cada valor, así que lo que una ranura cambia realmente depende del juego. No escribes ningún CSS para el juego: corre en un marco en sandbox que no puedes estilar desde tu página.

El shell del widget (la chrome de Caputchin alrededor del juego, y la checkbox independiente) es distinto: su skin resuelto también se expone a tu página como CSS custom properties llamadas --cpt-skin-<token>, que puedes leer o sobrescribir desde tu propia hoja de estilos. Esa superficie, y cómo hacer white-label del shell, se cubre en Estila el widget con CSS. Esas variables son solo del shell; no llevan el skin de un juego.

Véase también

• Visión general de personalización de juego: registra un juego y gestiónalo.
• Configuraciones e idioma: los otros dos ejes.
• Referencia de esquema: reglas de color, formatos de asset, y el modelo de presets.
• Estila el widget con CSS: las variables --cpt-skin-* del shell y los shadow parts.