Cara Mendesain Game Seluler Dengan HTML5 – RINGKASAN CEPAT INGIN membuat game seluler lintas platform dengan HTML5? Tidak perlu mencoba-coba Java atau Objective-C? Lewati toko aplikasi? Kedengarannya seperti kemenangan instan! Beberapa pengembang game sedang mendorong amplop game HTML5 seluler saat ini.
Cara Mendesain Game Seluler Dengan HTML5
wimi5 – Lihat orang-orang seperti Nutmeg dan Lunch Bug untuk beberapa contoh cemerlang. Hal yang hebat tentang judul-judul ini adalah bahwa mereka bekerja sama baiknya di seluler dan desktop menggunakan kode yang sama. Bisakah HTML5 akhirnya memenuhi cawan suci “tulis sekali, jalankan di mana saja”?
Baca Juga : Membangun Game HTML5 Pertama Anda
Sekarang, sebagai pengembang Web, Anda terbiasa berurusan dengan kebiasaan browser tertentu dan merendahkan dengan anggun dan berurusan dengan platform yang terfragmentasi. Jadi, beberapa tantangan teknis tidak akan membuat Anda kecewa, bukan? Terlebih lagi, semua masalah kinerja dan audio ini bersifat sementara. Lanskap browser seluler berubah begitu cepat sehingga kekhawatiran ini akan segera menjadi kenangan yang jauh. Dalam tutorial ini, kami akan membuat game yang relatif sederhana yang akan membawa Anda melalui dasar-dasar dan menjauhkan Anda dari jebakan. Hasilnya akan terlihat seperti ini:
1. Setting Panggung
Cukup sudah latar belakang ceritanya. Jalankan editor teks favorit Anda, tuangkan minuman kopi yang kuat, dan biarkan tangan kita kotor. Seperti disebutkan, ada sejumlah besar ukuran resolusi dan kepadatan piksel di seluruh perangkat. Ini berarti kita harus menskalakan kanvas kita agar sesuai dengan viewport. Ini bisa terjadi dengan harga kehilangan kualitas, tetapi satu trik cerdas adalah membuat kanvas kecil dan kemudian ditingkatkan, yang memberikan peningkatan kinerja.
2. Kanvas Kosong
Sekarang kita telah menskalakan kanvas kita dengan pas ke viewport, mari tambahkan kemampuan untuk menggambar beberapa bentuk. Catatan: Dalam tutorial ini, kita akan tetap menggunakan bentuk geometris dasar. iOS 5 dan Chrome beta untuk Android dapat menangani banyak sprite gambar pada kecepatan bingkai tinggi. Coba itu di Android 3.2 atau lebih rendah dan kecepatan bingkai akan turun secara eksponensial.
Untungnya, tidak ada banyak overhead saat menggambar lingkaran, jadi kami dapat memiliki banyak gelembung dalam permainan kami tanpa menghambat kinerja pada perangkat yang lebih lama. Di bawah ini, kami telah menambahkan Drawobjek dasar yang memungkinkan kami untuk menghapus layar, menggambar persegi panjang dan lingkaran, dan menambahkan beberapa teks. Belum ada yang mengejutkan. Mozilla Developers Network memiliki sumber daya yang sangat baik seperti biasa, penuh dengan contoh untuk menggambar ke kanvas.
3. Sentuhan Ajaib
Sama seperti kami mengadakan clickacara, browser seluler menyediakan metode untuk menangkap acara sentuh. Bagian yang menarik dari kode di bawah ini adalah touchstart, touchmovedan touchendevent. Dengan clickacara standar, kita bisa mendapatkan koordinat dari e.pageXdan e.pageY. Acara sentuh sedikit berbeda. Mereka berisi touchesarray, setiap elemen yang berisi koordinat sentuh dan data lainnya. Kami hanya ingin sentuhan pertama, dan kami mengaksesnya seperti ini: e.touches[0].
4. Dalam Lingkaran
Kita bisa, tentu saja, menggunakan setInterval, tetapi ada mainan baru yang mengilap di kota bernama requestAnimationFrame. Ini menjanjikan animasi yang lebih halus dan lebih hemat baterai. Berita buruknya adalah tidak didukung secara konsisten di seluruh browser. Tapi Paul Irish datang untuk menyelamatkan dengan shim yang berguna .
5. Spritely Akan Melakukannya
Pertama, kami menambahkan array entitas untuk melacak semua entitas. Array ini akan menyimpan referensi ke semua sentuhan, gelembung, partikel, dan hal dinamis lainnya yang ingin kita tambahkan ke game. Kelas Touchmenetapkan sejumlah properti saat dimulai. Koordinat x dan y dilewatkan sebagai argumen, dan kami mengatur radius this.rmenjadi 5 piksel. Kami juga mengatur opacity awal menjadi 1 dan kecepatan memudarnya sentuhan menjadi 0,05. Ada juga removeflag yang memberi tahu game loop utama apakah akan menghapus ini dari array entitas. Yang terpenting, kelas memiliki dua metode utama: updatedan render. Kami akan memanggil ini dari bagian yang sesuai dari loop permainan kami. Kami kemudian dapat menelurkan instance baru Touchdalam game loop, dan kemudian memindahkannya melalui metode pembaruan.
