Ukuran dan tata letak

Sebuah <caputchin-game> bisa dirender dalam tiga tata letak (disetel dengan atribut layout): inline, modal, dan fullscreen. Cara kamu mengatur ukurannya bergantung pada tata letak, karena tata letak modal dan fullscreen menampilkan dua kotak terpisah:

• Elemen di halaman: hal yang duduk di alur halamanmu. Di inline itu adalah seluruh panel game; di modal / fullscreen itu adalah checkbox kecil yang diklik pengunjung untuk membuka game.
• Kotak game: dialog yang terbuka di atas pada modal / fullscreen, dengan game di dalamnya. (Di inline tak ada dialog terpisah: panel itulah game-nya.)

Empat atribut mengatur ukuran kedua kotak ini. Setiap nilai adalah salah satu dari auto (bawaan), full (memenuhi ruang yang tersedia), atau angka piksel positif seperti 480.

Inline

Inline punya satu kotak, jadi width / height mengatur ukuran seluruh panel. overlay-width / overlay-height tak melakukan apa pun di sini dan diabaikan (widget mencatat peringatan kalau kamu menyetelnya).

<!-- A panel that spans its container, at a fixed height -->
<caputchin-game sitekey="cpt_pub_..." layout="inline" width="full" height="480"></caputchin-game>

Modal dan fullscreen

Di sini kedua kotak itu independen. width / height mengatur ukuran checkbox masuk di halamanmu; overlay-width / overlay-height mengatur ukuran dialog dan game yang terbuka saat pengunjung mengkliknya.

<!-- Full-width entry checkbox; the game opens at its natural size, centered -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" width="full"></caputchin-game>

<!-- Compact entry checkbox; the game fills the dialog -->
<caputchin-game sitekey="cpt_pub_..." layout="modal" overlay-width="full" overlay-height="full"></caputchin-game>

<!-- A 500px entry, opening a fixed 900x600 game dialog -->
<caputchin-game
  sitekey="cpt_pub_..."
  layout="modal"
  width="500"
  overlay-width="900"
  overlay-height="600"
></caputchin-game>

overlay-width="full" membuat game memenuhi dialog sepanjang sumbu itu; sebuah nilai piksel mematok game ke ukuran itu (sebuah modal membungkus ketat di sekelilingnya). Di fullscreen dialog sudah menutupi viewport, jadi overlay-* mengendalikan apakah game merentang untuk memenuhinya atau duduk di tengah pada ukurannya sendiri.

Saat kamu membiarkan kotak game tak disetel

Kalau kamu tak menyetel overlay-width / overlay-height, kotak game memakai ukuran yang dipilih penulis game untuk game itu (jejak yang ia sukai, dideklarasikan di caputchin.json game tersebut). Jadi sebagian besar waktu kamu hanya perlu width / height untuk tata letak halamanmu, dan game mengatur ukurannya sendiri dengan masuk akal. Setel overlay-* hanya saat kamu mau menimpa itu.

Di layar sempit

Saat game lebih lebar daripada ruang yang didapatnya (ponsel, kolom sempit), widget menjaganya tetap di dalam ruang itu, jadi game tak pernah mendorong halamanmu ke samping. Cara game menyesuaikan diri bergantung pada cara penulis game mendeklarasikannya di caputchin.json game tersebut:

• Game yang responsif mengambil lebar yang lebih sempit dan menggambar ulang dirinya untuk lebar itu, pada tingginya yang biasa.
• Game yang ditandai tidak responsif ("responsive": false di bawah marketplace.support) mempertahankan bentuknya. Widget mengecilkan seluruh game secara merata, jadi tampilannya tetap sama, hanya lebih kecil. Di modal dan fullscreen game juga mengecil agar muat di tinggi layar, untuk ponsel yang dipegang menyamping.

Ini berlaku saat game mengatur ukuran kotaknya sendiri. Di inline artinya kamu membiarkan width dan height tak disetel; di modal / fullscreen artinya baik overlay-width maupun overlay-height tidak bernilai full. Sumbu yang kamu biarkan tak disetel juga dihitung full kalau penulis game menyetel sumbu itu ke full di jejak yang disukai game tersebut (di caputchin.json). Kotak yang bernilai full pada suatu sumbu justru merentangkan game untuk memenuhinya.

Nilai piksel

Sebuah angka biasa adalah piksel CSS: width="500" dan width="500px" setara. Nilai nol, negatif, dan non-numerik ditolak (atribut jatuh kembali ke bawaannya dan widget mencatat peringatan).

Lihat juga

• Elemen widget game: set atribut <caputchin-game> yang lengkap.
• Metode dan event widget: mengemudikan widget dan menanggapinya.