Cara Membuat Game HTML5 Sederhana Dengan Enchant.js – Apakah Anda ingin tahu tentang mengembangkan game seluler lintas platform yang berfungsi di browser web?
Cara Membuat Game HTML5 Sederhana Dengan Enchant.js
wimi5 – Seperti yang mungkin Anda ketahui, Apple tidak mengizinkan Flash berjalan di perangkat iOS, dan Adobe telah mencabut steker Flash untuk seluler. Ini menjadikan HTML5 satu-satunya solusi Anda – tetapi sebenarnya cukup bagus!
Melansir raywenderlich, Masalahnya, meskipun ada banyak perpustakaan game HTML5 yang tersedia, hanya sedikit yang mendukung browser seluler. Dalam tutorial ini, Anda akan mencoba satu perpustakaan game HTML5 yang bekerja sangat baik di iPhone, Android, dan desktop – enchant.js!
Anda akan membuat permainan yang disebut Penguin Dive, di mana pemain akan mengendalikan seekor penguin yang berenang di laut, dan menghindari batu-batu es yang masuk. Semakin lama penguin tetap aman di laut, semakin tinggi skornya. Setelah batu es mengenai penguin, permainan berakhir!
Tutorial ini mengasumsikan Anda adalah pemula yang lengkap untuk enchant.js, tetapi Anda harus memiliki pengetahuan dasar tentang JavaScript dan HTML. Mengetahui cara mengatur server lokal Anda sendiri juga membantu untuk tujuan pengujian, tetapi tidak diperlukan.
Baca juga : Keadaan Saat Ini dan Masa Depan Game HTML5
Memperkenalkan enchant.js
enchant.js adalah kerangka kerja permainan HTML5+JavaScript yang cukup baru. Versi pada saat penulisan adalah 0,51, yang berbasis DOM. Versi masa depan akan pindah ke HTML5 berbasis Canvas.
Jika Anda bertanya-tanya, DOM adalah singkatan dari Document Object Model. Dalam jenis pengkodean JavaScript ini, kode mengakses elemen pada halaman melalui hierarki terstruktur. Biasanya, elemen pada halaman direpresentasikan seperti pohon, di mana setiap elemen HTML adalah cabang atau daun, dan memiliki nama atau ID yang dapat diakses secara langsung (atau melalui orang tua atau kakek-nenek).
Pendekatan berbasis Canvas akan mengandalkan tag <canvas> HTML5 baru, yang memungkinkan kode untuk menentukan kanvas (atau area gambar) dan kemudian menggambar langsung di permukaan itu, sama seperti Anda akan menggunakan fungsi menggambar CoreGraphics di Objective-C.
Setiap pendekatan memiliki pro dan kontra, tetapi tutorial ini tidak akan membahasnya, karena enchant.js akan menangani detailnya secara internal. Tapi ada baiknya mengetahui pro dan kontra menggunakan enchant.js itu sendiri!
Kelebihan Menggunakan enchant.js:
- Ini memiliki sistem grafik adegan 2D dengan API seperti Flash sederhana.
- Ini lintas platform. Game Anda akan berfungsi di browser iOS, Android, dan desktop.
Ini ringan. - Ada banyak plugin yang tersedia untuk membantu Anda membuat jenis game tertentu, seperti novel visual atau RPG.
Ini gratis dan sumber terbuka!
Kontra Menggunakan enchant.js:
- Itu tidak memiliki fitur terkait orientasi perangkat.
- Itu belum mendukung multi-touch.
- Karena kerangka asal Jepang, ada kekurangan sumber daya dalam bahasa Inggris. (Tapi tutorial ini membantu mengubah itu!)
Dukungan lintas platform inilah yang membuat enchant.js menonjol dari kerangka kerja game HTML5 lainnya. Meskipun tidak memiliki beberapa fitur, versi saat ini cukup fungsional untuk membuat game yang berfungsi lengkap.
Menyiapkan
Inilah yang Anda perlukan untuk menulis game dengan enchant.js:
- enchant.js: Unduh kerangka kerja dari halaman github mereka. Anda dapat mengkloning repositori git, atau menggunakan ikon ZIP di bagian atas halaman untuk mengunduh arsip ZIP dari sumber saat ini.
- Aset game: Unduh aset ini untuk tutorial, dan buka ritsletingnya di hard drive Anda.
- Editor Teks: Karena mengembangkan menggunakan enchant.js berarti bekerja dengan JavaScript, putuskan IDE/editor teks apa yang akan digunakan. Favorit saya adalah Sublime Text 2. Anda juga dapat menggunakan sesuatu seperti jsdo.it, yang memungkinkan Anda untuk mengembangkan di browser Anda. :]
- Server Web: Ini opsional. Namun, lebih baik untuk menguji game HTML5 Anda di server web daripada dari hard disk Anda, karena melihat halaman web di hard disk Anda secara langsung dapat menonaktifkan beberapa fitur. Ini juga memungkinkan Anda menguji game dari perangkat seluler Anda! Ada banyak cara untuk menyiapkan server web, tetapi salah satu yang termudah adalah menggunakan XAMMP.
Pilihan Anda untuk browser pengembangan adalah:
- Google Chrome: Anda dapat mengaktifkan konsol dengan mengeklik Ikon Kunci Inggris, lalu Alat, dan memilih konsol JavaScript.
- Safari: Anda harus mengaktifkan menu Pengembang terlebih dahulu. Buka Safari\Preferences dan centang Tampilkan menu Kembangkan di bilah menu di Tab Tingkat Lanjut. Anda kemudian dapat membuka konsol melalui Develop\Show Error Console.
- Firefox: Anda dapat menginstal ekstensi Firebug, atau mengaktifkan konsol melalui Extras\Error Console atau Tools\Web Developer\Error Console (tergantung versi Anda). Catatan Firebug memiliki beberapa fitur ekstra keren di luar konsol normal.
- Opera: Aktifkan melalui Menu\Page\Developer Tools\Opera Dragonfly.
Internet Explorer: Jangan gunakan ini! 😀 Kecuali Anda benar-benar tidak punya pilihan lain – lalu gertakkan gigi Anda dan tekan F12 untuk membuka alat pengembang.
Mempersiapkan Struktur Proyek Anda
enchant.js tidak menerapkan struktur direktori apa pun untuk proyek. Anda dapat menyusun folder proyek sesuka Anda. Jadi dalam tutorial ini, Anda akan menyusun sesuatu dengan cara yang masuk akal bagi saya. Mudah-mudahan, itu masuk akal bagi Anda juga. ;]
Buka direktori yang Anda inginkan untuk menjadi ruang kerja Anda dan buat folder baru bernama penguindive.
Folder res dan js akan menjadi tempat Anda menyimpan file JavaScript dan aset game Anda masing-masing. Folder lib akan menjadi tempat Anda menyimpan file/pustaka JavaScript pihak ketiga.
Anda tidak akan menggunakan semua file ini dalam tutorial ini. Namun, jangan ragu untuk menggunakannya untuk memperpanjang permainan Anda sendiri, sebagai tantangan. Ada beberapa saran tentang cara melakukan ini di akhir tutorial.
Mari kita mulai dengan sesuatu yang sederhana: menyapa dunia tempat game Anda akan berlangsung.
Luncurkan editor teks favorit Anda dan mulailah dengan membuat file index.html, yang seperti yang saya yakin Anda ketahui, akan menjadi file pertama yang dimuat saat folder game diakses melalui browser:
Simpan file (beri nama index.html) di folder penguindive.
Kode HTML cukup sederhana. Anda telah menyertakan dua file JavaScript – library enchant.js itu sendiri, dan main.js, yang akan menjadi file tempat Anda menulis kode untuk game Anda.
Selanjutnya, buat main.js dan tambahkan kode berikut ke dalamnya (seperti yang ditunjukkan file index.html, file main.js masuk ke subfolder js saat Anda menyimpannya.
Kode di atas adalah semua yang Anda butuhkan untuk membuat game enchant.js berfungsi. Mari kita bahas langkah demi langkah:
- Ekspor semua kelas perpustakaan secara global. Ini memungkinkan Anda untuk menggunakan kelas dari enchant.js tanpa harus mengetik namespace setiap saat.
- Buat fungsi yang akan dipanggil setelah dokumen HTML selesai dimuat. Anda akan menginisialisasi permainan Anda di dalam fungsi ini.
- Buat instance kelas Game, yang merupakan kelas aplikasi utama dari game enchant.js. Konstruktor untuk kelas Game mengambil dua argumen: lebar dan tinggi layar game dalam piksel.
- Pramuat gambar latar belakang untuk game. Saat Anda memiliki sumber daya yang membutuhkan banyak waktu untuk dimuat (seperti gambar besar atau soundtrack latar belakang), sebaiknya Anda memuatnya sebelum Anda benar-benar perlu menggunakannya.
- Konfigurasikan pengaturan permainan. Perhatikan garis yang mengatur kecepatan bingkai game ke 30 fps (bingkai per detik). Ini tidak berarti bahwa game akan selalu berjalan pada 30 fps. Sangat mungkin bahwa fps akan turun di platform seluler. Anggap ini sebagai fps maksimum yang akan diupayakan game untuk dicapai dengan sebaik-baiknya.
- Acara onload objek Game akan dipanggil setelah game selesai memuat semua yang ada di antrian pramuat. Ini adalah titik masuk permainan Anda.
- Seperti yang tersirat dari nama metode, ini akan memulai permainan Anda. Memulai game Anda akan memulai proses pramuat, dan memanggil metode onload setelah pramuat selesai.
