--- type: how-to title: Kustomisasi skin sebuah game summary: Timpa warna dan aset visual game di tab Skin, dikelompokkan per mode (terang, gelap, atau keduanya); tersedia dari paket Alpha ke atas. --- Sebuah game dikirim dengan tampilan baku. Di tab **Skin** editor game kamu bisa menimpa warnanya, menukar aset visualnya (gambar, dan di mana game memakainya, audio dan video), dan menyetel tombol non-warna mana pun yang dipaparkan penulis (sakelar, angka, pilihan) agar tantangan cocok dengan merekmu, dan perubahan berlaku ke game yang dirender. Kustomisasi skin tersedia dari **paket Alpha ke atas** (Alpha, Troop, Apex). ## Setel warna, aset, dan tombol lain Buka game di halaman **Game** kunci situs (atau tim), lalu tab **Skin**. Tab menunjukkan slot yang dipaparkan penulis game. Kebanyakan adalah warna dan aset, tapi seorang penulis juga bisa memaparkan sebuah **sakelar** (nyala/mati), sebuah **angka** (sering dengan minimum dan maksimum), atau sebuah **pilihan** dari daftar tetap. Setel sebuah warna dengan nilai hex atau `rgb()`; setel sebuah aset dengan mengunggah berkas atau menempel URL (lihat di bawah); setel slot lain dengan kontrol yang ditunjukkan. Biarkan sebuah slot tak tersentuh dan ia menjaga nilai bawaan game. ## Bagaimana sebuah skin dipilih saat runtime Tiap preset mendeklarasikan **mode** yang ia berfungsi di dalamnya: terang, gelap, atau **any** (ia terbaca baik di kedua latar). Ada satu default per mode, jadi game tampak tepat mode mana pun yang lebih disukai perangkat pengunjung. Sebuah preset yang ditandai `any` layak menjadi default untuk terang, gelap, atau keduanya. Memilih satu terjadi dalam dua tahap. Pertama widget memutuskan skin mana yang diminta: 1. Atribut `skin` widget, jika halaman menyetel satu: nama preset persis (misalnya `midnight`), atau jalan pintas `light` / `dark`. 2. Kalau tidak, preferensi sistem pengunjung (`prefers-color-scheme`), yang menyelesaikan ke `light` atau `dark`. Lalu server mencocokkan itu terhadap preset, setelah menggabungkan penggantianmu (kunci situs di atas tim di atas set bawaan game). Nama preset persis di atribut menang langsung. Kalau tidak, untuk mode terpilih server mengambil preset pertama, dalam urutan deklarasi, yang layak untuk mode itu dan ditandai **default** (sebuah preset layak saat mode-nya adalah mode itu atau `any`); jika tak ada yang ditandai default ia mengambil preset layak pertama. Karena preset `any` layak untuk kedua mode, kamu bisa membuat satu skin menjadi default di mana-mana, atau memberi satu mode skin khusus dan membiarkan skin `any` menutupi yang lain. Di tab Skin, sebuah skin `any` muncul di bawah kelompok terang maupun gelap, dan kamu menyetelnya sebagai default untuk salah satu atau keduanya. Pada elemen `` kamu juga bisa melewatkan objek `skin` inline: sebuah objek JSON yang ditulis sebagai nilai atribut, misalnya `skin='{"primary":"#7c3aed"}'`. Widget mengirimnya ke server sebagai sinyal skin mount itu, dan server menguraikannya dan melapisinya di atas preset terselesaikan, jadi warna dan aset inline-mu menang atas semua di atas (termasuk penggantian tim dan kunci-situs-mu). Ia adalah properti markup-mu sendiri, jadi ia berfungsi di paket mana pun. Checkbox `` tak menerima skin inline; atribut `skin`-nya hanya menerima `light` / `dark` atau nama preset. Lihat [filosofi kami](/docs/understanding-caputchin/philosophy) untuk mengapa penulisan per-sematan ini gratis. ## Aset: unggah atau tautkan Sebuah slot aset (gambar, audio, atau video) menerima entah berkas yang diunggah atau URL yang kamu tempel: - **Unggah**: Caputchin menyimpan snapshot berkas. Ia beku, jadi ia tak akan berubah kecuali kamu mengunggah lagi. - **Tautan**: kamu menempel URL `https` ke berkas yang kamu hosting. Ia live, jadi mengganti berkas di URL itu memperbarui game di muatan berikutnya. Karena game berjalan di frame ber-sandbox, sebuah aset tertaut hanya memuat jika origin-nya diizinkan. Caputchin menanganinya untukmu: ia mengizinkan persis origin yang ditunjuk preset skin-mu, dan tak lebih. Kamu tak mengubah kebijakan apa pun sendiri. Tiap tipe aset menerima set format tetap (misalnya PNG, JPEG, WebP, SVG, dan GIF untuk gambar). Format persis dan aturan warna ada di [referensi skema](/docs/references/customization-schema). ## Apa yang berlaku, dan di mana Penggantian skin diselesaikan di server, paling-spesifik-menang: preset kunci-situs mengalahkan preset tim, yang mengalahkan skin bawaan game. Kamu bisa memperluas preset bawaan dan menimpa hanya slot yang kamu mau, mewarisi sisanya. ## Bagaimana sebuah nilai skin mencapai game [#how-a-skin-value-reaches-the-game] Server menyelesaikan skin-mu (penggantianmu digabung di atas set bawaan) dan menyerahkan hasilnya ke **kode game sendiri**, yang menggambar dirinya dengannya. Warna dan URL aset tiba sebagai teks; sebuah sakelar tiba sebagai `true` / `false` nyata, sebuah angka sebagai angka nyata, sebuah pilihan sebagai string terpilih. Penulis game memutuskan bagaimana tiap nilai dipakai, jadi apa yang sebenarnya diubah sebuah slot terserah game. Kamu tak menulis CSS apa pun untuk game: ia berjalan di frame ber-sandbox yang tak bisa kamu beri gaya dari halamanmu. **Shell widget** (chrome Caputchin di sekitar game, dan checkbox berdiri-sendiri) berbeda: skin terselesaikannya juga dipaparkan ke halamanmu sebagai properti kustom CSS bernama `--cpt-skin-`, yang bisa kamu baca atau timpa dari stylesheet-mu sendiri. Permukaan itu, dan cara me-white-label shell, dibahas di [Beri gaya widget dengan CSS](/docs/widget-customization/css-parts). Variabel itu hanya milik shell; mereka tak membawa skin sebuah game. ## Lihat juga - [Ikhtisar kustomisasi game](/docs/game-customization/overview): daftarkan sebuah game dan kelola ia. - [Konfigurasi](/docs/game-customization/configurations) dan [bahasa](/docs/game-customization/locale): dua sumbu lainnya. - [Referensi skema](/docs/references/customization-schema): aturan warna, format aset, dan model preset. - [Beri gaya widget dengan CSS](/docs/widget-customization/css-parts): variabel `--cpt-skin-*` shell dan shadow part.