Kustomisasi skin sebuah game

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:

Atribut skin widget, jika halaman menyetel satu: nama preset persis (misalnya midnight), atau jalan pintas light / dark.
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 <caputchin-game> 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 <caputchin-widget> tak menerima skin inline; atribut skin-nya hanya menerima light / dark atau nama preset. Lihat filosofi kami 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.

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

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-<token>, 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. Variabel itu hanya milik shell; mereka tak membawa skin sebuah game.

Lihat juga

Ikhtisar kustomisasi game: daftarkan sebuah game dan kelola ia.
Konfigurasi dan bahasa: dua sumbu lainnya.
Referensi skema: aturan warna, format aset, dan model preset.
Beri gaya widget dengan CSS: variabel --cpt-skin-* shell dan shadow part.