Membangun Game HTML5 Pertama Anda – Sepertinya baru kemarin Super Nintendos dan Game Boys masuk ke rak-rak toko. Selama bertahun-tahun, grafik video game telah berkembang pesat, dan metode pengembangan game telah meningkat secara dramatis. Namun saat ini, sepertinya lebih banyak anak-anak yang bermain di perangkat seluler daripada konsol tradisional.
Membangun Game HTML5 Pertama Anda
wimi5 – Masukkan HTML5 dengan spesifikasi dan dukungan baru untuk elemen kanvas tercinta. Menggunakan elemen kanvas dengan JavaScript dan beberapa grafik 2D, siapa pun kini dapat membuat game sederhana namun lucu yang berjalan di browser web apa pun.
Baca Juga : Jelajahi Tutorial Game HTML5 Gratis
Posting ini akan menjelaskan konsep inti pengembangan game HTML5. Mengesampingkan batasan grafis yang diharapkan, Anda mungkin terkejut betapa banyak yang dapat dicapai hanya dengan bahasa pengembangan front-end.
Dasar-dasar Permainan HTML5
Meskipun game browser sering diberi nama “game HTML5”, game ini membutuhkan lebih dari sekadar HTML5 untuk berjalan dengan benar. Awalan HTML5 merujuk pada penggunaan elemen kanvas untuk pengembangan game. Saat ini semua browser utama mendukung kanvas , itulah sebabnya ini biasanya dilihat sebagai pilihan utama.
Item dalam elemen kanvas dapat dihasilkan secara terprogram atau dimuat sebagai grafik. Sebagian besar game HTML5 mengandalkan sprite dan pola tileable, sangat mirip dengan judul SNES & Game Boy lama. Grafik yang lebih canggih dapat dirender menggunakan pustaka WebGL/3D , tetapi kebanyakan orang yang baru mulai mempelajari pengembangan game lebih menyukai 2D karena kesederhanaannya.
Sebuah game web biasa dipecah menjadi dokumen HTML dengan elemen kanvas untuk interaksi. Kanvas menyimpan aset/sprite untuk karakter, musuh, peti harta karun, dll. Sebagian besar grafik ini dapat dimuat melalui CSS. Permainan komputer mengandalkan klik mouse atau penekanan tombol untuk interaksi pengguna. Cara paling andal untuk menangani interaksi ini adalah melalui JavaScript. Setelah layar kanvas disiapkan, sebagian besar pengembang bekerja di JavaScript atau pustaka JS untuk mengimplementasikan fungsionalitas.
Contoh di atas adalah klon Space Invaders yang dibuat dengan HTML5/CSS/JS. Jika Anda melihat HTML, Anda akan melihat bahwa itu hanya berisi elemen kanvas. Semuanya dimanipulasi di dalam kanvas menggunakan grafik CSS dan pendengar acara JavaScript.
HTML5 pada dasarnya telah menggantikan pengembangan game Flash dengan API yang lebih luas dan lebih banyak dukungan publik. Sayangnya, versi IE yang lebih lama tidak mendukung kanvas, jadi Anda harus mengabaikan demografi tersebut atau mencoba menggunakan pustaka tambahan seperti ExploreCanvas .
Menentukan Tujuan
Bahkan sebelum menulis sebaris kode, akan bermanfaat untuk merencanakan desain game Anda. Ketik (atau tulis) panduan umum untuk tujuan game, cara pengguna bermain, dan apa yang menentukan “memenangkan” game. Baik Anda sedang membangun teka-teki atau penggulung samping, mekanisme permainan itu penting. Peristiwa tertentu perlu diprogram dalam JavaScript untuk merespons ketika pemain mencapai sesuatu – atau gagal mencapai sesuatu.
HTML5/CSS3/JavaScript semuanya bekerja sama dengan baik dan dapat digunakan untuk menciptakan pengalaman bermain yang menyenangkan. Tetapi mekanismenya masih baru, jadi penting untuk merencanakan ide Anda jauh-jauh hari sebelumnya. Pikirkan tentang daftar fungsi yang diperlukan dan bagaimana fungsi-fungsi ini akan dikodekan. Kapan seorang pemain kehilangan seluruh hidup mereka dan harus memulai kembali permainan? Bagaimana Anda mengelola skor tinggi?
Pikirkan juga tentang interaksi pengguna tentang bagaimana game akan terasa “paling nyaman” untuk dimainkan. Indiara dan Tengkorak Emas adalah kemunduran Indiana Jones dengan pemeran utama wanita dan grafik vektor. Permainannya sendiri terasa cukup lancar, dan hanya mengandalkan mouse untuk input. Mungkinkah game telah dikembangkan secara berbeda untuk memasukkan acara keyboard? Sangat. Tetapi ini juga merupakan contoh yang bagus tentang bagaimana kesederhanaan dapat menguntungkan Anda.
Grafik & Sprite Sheets
Pengembang game mengacu pada siklus musik, grafik, dan animasi sebagai aset . Untuk game kanvas HTML5, aset ini harus dibuat dan disimpan secara lokal di server dengan game tersebut. Saat mengatur aset grafis, Anda ingin mempertimbangkan elemen interaktif dan elemen non-interaktif. Untuk game RPG kecil, elemen interaktif akan menjadi karakter pemain bersama dengan musuh dan peti harta karun. Apa pun yang dapat berinteraksi dengan item lain di layar harus dianggap interaktif.
Grafik non-interaktif lebih seperti latar belakang dan ubin. Photoshop dan Illustrator keduanya merupakan pilihan sempurna untuk membuat grafik BG ini dan mengekspornya untuk digunakan di web. Jika Anda tertarik dengan 3D, lihat beberapa contoh WebGL untuk melihat apa lagi yang dapat Anda lakukan. WebGL adalah pustaka/API JavaScript untuk merender grafik yang lebih canggih di browser. Anda juga dapat mencoba mendesain grafik khusus dengan transformasi CSS3 , tetapi ini jauh lebih membatasi.
Ketika berbicara tentang animasi, Anda pasti ingin membuat lembar karakter sprite dalam tahapan yang berbeda. Misalnya, lihat tutorial Street Fighter ini oleh David Walsh. Dia menciptakan karakter yang dapat dikontrol dengan gerakan yang telah ditentukan yang bernyawa saat tombol ditekan. Proyek ini cukup mendidik dan Anda dapat bermain-main dengan kode secara gratis di CodePen.
