ゲームのスキンをカスタマイズする

ゲームは既定の見た目とともに出荷されます。ゲームのエディターの スキン タブで、その色を上書きし、その視覚アセット（画像、そしてゲームが使う場合は音声と動画）を入れ替え、作者が公開した色以外のつまみ（トグル、数値、選択肢）を設定できるので、チャレンジがあなたのブランドに合います。変更はレンダリングされるゲームに適用されます。

スキンのカスタマイズは Alpha プラン以上（Alpha、Troop、Apex）で利用可能です。

色、アセット、その他のつまみを設定する

サイトキー（またはチーム）の ゲーム ページでゲームを開き、それから スキン タブを開きます。タブは、ゲームの作者が公開したスロットを示します。ほとんどは色とアセットですが、作者は トグル（オン/オフ）、数値（しばしば最小と最大つき）、あるいは固定リストからの 選択肢 も公開できます。色は hex か rgb() 値で設定し、アセットはファイルをアップロードするか URL を貼り付けて設定し（下記参照）、ほかのスロットは示されるコントロールで設定します。スロットに触れずに残せば、ゲームのバンドル済みの値を保ちます。

実行時にスキンがどう選ばれるか

各プリセットは、それが働く モード を宣言します。ライト、ダーク、または any（どちらの背景でもよく読めます）です。モードごとに 1 つの既定があるので、訪問者のデバイスがどちらのモードを好んでも、ゲームは正しく見えます。any とマークされたプリセットは、ライト、ダーク、または両方の既定になる資格があります。1 つを選ぶのは 2 段階で起きます。

まずウィジェットが、どのスキンを求めるか決めます：

ページが設定していれば、ウィジェットの skin 属性。厳密なプリセット名（たとえば midnight）か、ショートカット light / dark です。
それ以外は、訪問者のシステム設定（prefers-color-scheme）。light か dark に解決されます。

それからサーバーが、あなたの上書きをマージした後（サイトキー、チーム、ゲームのバンドル済みセットの順）、それをプリセットに対して照合します。属性の厳密なプリセット名はきっぱり勝ちます。それ以外は、選ばれたモードについて、サーバーは宣言順で、そのモードの資格があり既定とマークされた最初のプリセットを取ります（プリセットは、そのモードがそのモードか any のとき資格があります）。既定とマークされたものがなければ、最初の資格あるプリセットを取ります。

any プリセットは両方のモードの資格があるので、1 つのスキンをどこでも既定にしたり、片方のモードに専用のスキンを与えて 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 のクロームと、単独のチェックボックス）は別です。その解決済みのスキンは、--cpt-skin-<token> という名前の CSS カスタムプロパティとしてあなたのページにも公開され、あなた自身のスタイルシートから読んだり上書きしたりできます。その面と、シェルをホワイトラベルする方法は CSS でウィジェットをスタイルするで扱います。それらの変数はシェルのものだけです。ゲームのスキンは運びません。

あわせて読む

ゲームのカスタマイズの概要：ゲームを登録して管理する。
構成と言語：ほかの 2 つの軸。
スキーマリファレンス：色のルール、アセットのフォーマット、プリセットモデル。
CSS でウィジェットをスタイルする：シェルの --cpt-skin-* 変数とシャドウパーツ。