Gaya kanvas untuk gim browser HTML5 Anda

Bagian penting dari setiap permainan adalah bagaimana itu disajikan. Membuat game adalah bagian dari industri hiburan dan konsumen ingin memiliki pengalaman hebat bermain game Anda. Permainan yang baik tidak akan berhasil jika presentasi tidak meyakinkan para pemain untuk mencoba atau memotivasi mereka untuk bermain lebih banyak. Sekarang perlu diingat bahwa presentasi tidak harus berarti grafis kelas atas. Ada beberapa hal yang bisa kita lakukan menggunakan CSS.

Browser sebagai konsol game

Satu hal yang saya suka bayangkan ketika saya membuat game HTML5 adalah browser sebagai konsol game. Saat menggunakan pendekatan ini, ada dua hal yang langsung muncul di pikiran: bingkai dan layar terpusat. Dengan bantuan sedikit CSS, kami dapat memberikan kanvas kami tepi dan tengah di tengah jendela browser. Selain itu, jika kita menetapkan warna latar belakang gelap untuk ruang putih di sekitar kanvas, kita bisa memiliki layar permainan yang tampak bagus yang menyebabkan pengunjung baru mulai bermain.

Memberi kanvas pada tepi

Hal pertama yang ingin kita lakukan adalah memberi kanvas kita tepi yang terganggu. Anda tentu saja dapat juga menggunakan perbatasan tetap atau bertitik. Namun, saya lebih suka permainan bergaris, terutama selama pengembangan permainan. Saat Anda menambahkan tag kanvas ke halaman web Anda, Anda juga mengatur ID pada kanvas. Sekarang kita dapat memberikan keunggulan dengan menulis kode CSS berikut: 1px bergaris hitam. Jika Anda me-refresh halaman web Anda sekarang, Anda akan melihat kanvas sebagai persegi panjang kecil di sudut kiri atas jendela browser Anda.

Memusatkan Kanvas

Seperti yang dapat Anda bayangkan, bahkan gim hebat pun tidak menarik jika Anda harus memainkannya di sudut kiri atas jendela peramban Anda. Itulah sebabnya kami ingin memindahkan kanvas ke tengah jendela browser kami. Sekali lagi, kita dapat melakukan ini menggunakan kode CSS. Hal pertama yang harus dilakukan adalah menambahkan tag div di sekitar tag kanvas. Kami akan memberikan tag div ini id "wrapper". Wrapper adalah nama ID umum yang banyak digunakan dalam desain web untuk mengatur elemen di situs web dengan benar. Kemasan tersebut berisi konten paling penting yang dalam kasus kami adalah kanvas untuk game HTML5 kami. Sekarang kita bisa memusatkan pembungkus dan handuk di dalamnya. Kami melakukan ini dengan mengatur lebar sampul ke 800 piksel dan mengatur margin ke otomatis. Penting untuk memberi lebar pembungkus, jika tidak margin otomatis tidak terpusat.



Source by James R. Pierce