Personnalise le skin d'un jeu

Un jeu est livré avec un look par défaut. Sur l'onglet Skin de l'éditeur du jeu, tu peux surcharger ses couleurs, échanger ses ressources visuelles (images, et là où le jeu les utilise, audio et vidéo), et régler les molettes hors couleur que l'auteur a exposées (une bascule, un nombre, un choix) pour que l'épreuve corresponde à ta marque, et le changement s'applique au jeu rendu.

La personnalisation du skin est disponible à partir de l'offre Alpha (Alpha, Troop, Apex).

Règle les couleurs, ressources et autres molettes

Ouvre le jeu sur la page Jeux d'une clé de site (ou de l'équipe), puis l'onglet Skin. L'onglet montre les emplacements que l'auteur du jeu a exposés. La plupart sont des couleurs et des ressources, mais un auteur peut aussi exposer une bascule (oui/non), un nombre (souvent avec un minimum et un maximum), ou un choix dans une liste fixe. Règle une couleur avec une valeur hex ou rgb() ; règle une ressource en téléversant un fichier ou en collant une URL (voir ci-dessous) ; règle les autres emplacements avec le contrôle affiché. Laisse un emplacement intact et il garde la valeur embarquée du jeu.

Comment un skin est choisi à l'exécution

Chaque préréglage déclare le mode dans lequel il fonctionne : clair, sombre ou n'importe lequel (il se lit bien sur les deux fonds). Il y a un défaut par mode, donc le jeu a le bon look quel que soit le mode que l'appareil du visiteur préfère. Un préréglage marqué any est éligible pour être le défaut du clair, du sombre, ou des deux. En choisir un se fait en deux étapes.

D'abord le widget décide quel skin demander :

1. L'attribut skin du widget, si la page en a fixé un : un nom de préréglage exact (par exemple midnight), ou le raccourci light / dark.
2. Sinon, la préférence système du visiteur (prefers-color-scheme), qui se résout en light ou dark.

Puis le serveur fait correspondre cela aux préréglages, après avoir fusionné tes surcharges (clé de site sur équipe sur le jeu embarqué). Un nom de préréglage exact dans l'attribut l'emporte d'emblée. Sinon, pour le mode choisi, le serveur prend le premier préréglage, dans l'ordre de déclaration, qui est éligible pour ce mode et marqué défaut (un préréglage est éligible quand son mode est ce mode ou any) ; si aucun n'est marqué défaut, il prend le premier préréglage éligible.

Parce qu'un préréglage any est éligible pour les deux modes, tu peux faire d'un skin le défaut partout, ou donner à un mode un skin dédié et laisser un skin any couvrir l'autre. Sur l'onglet Skin, un skin any apparaît sous les groupes clair et sombre, et tu le règles comme défaut pour l'un ou les deux.

Sur l'élément <caputchin-game>, tu peux aussi passer un objet skin en ligne : un objet JSON écrit comme valeur d'attribut, par exemple skin='{"primary":"#7c3aed"}'. Le widget l'envoie au serveur comme signal de skin de ce montage, et le serveur le parse et le superpose aux préréglages résolus, donc tes couleurs et ressources en ligne l'emportent sur tout ce qui précède (y compris tes surcharges d'équipe et de clé de site). C'est une propriété de ton propre balisage, donc ça fonctionne sur n'importe quelle offre. Le <caputchin-widget> à case à cocher n'accepte pas de skin en ligne ; son attribut skin ne prend que light / dark ou un nom de préréglage. Vois notre philosophie pour savoir pourquoi cette rédaction par embed est gratuite.

Ressources : téléverse ou lie

Un emplacement de ressource (image, audio ou vidéo) prend soit un fichier téléversé, soit une URL que tu colles :

• Téléverser : Caputchin stocke un instantané du fichier. Il est figé, donc il ne changera pas sauf si tu téléverses de nouveau.
• Lier : tu colles une URL https vers un fichier que tu héberges. Elle est en direct, donc remplacer le fichier à cette URL met à jour le jeu au prochain chargement.

Parce que le jeu tourne dans un cadre en bac à sable, une ressource liée ne charge que si son origine est autorisée. Caputchin gère ça pour toi : il autorise exactement les origines vers lesquelles pointent tes préréglages de skin, et rien d'autre. Tu ne changes aucune politique toi-même.

Chaque type de ressource accepte un ensemble fixe de formats (par exemple PNG, JPEG, WebP, SVG et GIF pour les images). Les formats exacts et les règles de couleur sont dans la référence du schéma.

Ce qui s'applique, et où

Les surcharges de skin se résolvent sur le serveur, le plus spécifique l'emporte : un préréglage de clé de site bat le préréglage d'équipe, qui bat le skin embarqué du jeu. Tu peux étendre un préréglage embarqué et ne surcharger que les emplacements que tu veux, héritant du reste.

Comment une valeur de skin atteint le jeu

Le serveur résout ton skin (tes surcharges fusionnées sur le jeu embarqué) et remet le résultat au propre code du jeu, qui se dessine avec. Les couleurs et les URL de ressources arrivent comme du texte ; une bascule arrive comme un vrai true / false, un nombre comme un vrai nombre, un choix comme la chaîne choisie. L'auteur du jeu décide comment chaque valeur est utilisée, donc ce qu'un emplacement change réellement dépend du jeu. Tu n'écris aucun CSS pour le jeu : il tourne dans un cadre en bac à sable que tu ne peux pas styliser depuis ta page.

Le shell du widget (la chrome Caputchin autour du jeu, et la case à cocher autonome) est différent : son skin résolu est aussi exposé à ta page comme propriétés CSS personnalisées nommées --cpt-skin-<token>, que tu peux lire ou surcharger depuis ta propre feuille de style. Cette surface, et comment mettre le shell en marque blanche, est couverte dans Styliser le widget avec CSS. Ces variables sont celles du shell seul ; elles ne portent pas le skin d'un jeu.

Voir aussi

• Vue d'ensemble de la personnalisation des jeux : enregistrer un jeu et le gérer.
• Configurations et langue : les deux autres axes.
• Référence du schéma : les règles de couleur, les formats de ressources et le modèle de préréglages.
• Styliser le widget avec CSS : les variables --cpt-skin-* du shell et les parts du shadow.