Bagaimana Menambahkan Buttons ke Game HTML5 Anda untuk Akses Mobile - dummies

Perpustakaan simpleGame memiliki fitur praktis yang disebut GameButton karena menambahkan tombol ke layar perangkat mobile untuk game HTML5 Anda. Keyboard adalah salah satu cara termudah untuk mendapatkan masukan di browser standar, namun kebanyakan perangkat mobile tidak memiliki keyboard. Masalah pertama adalah mencari cara untuk mendapatkan input pengguna saat tidak ada keyboard.

Objek tombol custom GameButton dimulai dengan fitur tombol HTML standar namun kemudian menambahkan beberapa trik agar sesuai untuk game. Anda dapat mengaktifkan tombol dengan mouse biasa atau dengan kontrol sentuh, sehingga ideal untuk permainan yang dapat dimainkan pada kedua jenis perangkat. Tombol Halaman html mengilustrasikan tombol dalam tindakan:

tombol. html var btnMove; permainan var; bola var; fungsi init () {game = new Scene (); permainan. setSize (200, 200); ball = new Sprite (permainan, "redBall. png", 25, 25); bola. setSpeed ​​(0); bola. setPosition (100, 100); btnMove = GameButton baru ("Pindahkan"); btnMove. setPos (70, 150); btnMove. setSize (60, 30); permainan start ();} // akhirin fungsi init update () {game. bersih(); checkButtons (); bola update ();} // end update function checkButtons () { if (btnMove is is) ({)) { bola. setSpeed ​​(3); } lain { bola. setSpeed ​​(0); } // akhiri if } // akhiri checkButtons

Seperti biasa, elemen baru dan menarik ditunjukkan dengan huruf tebal. Inilah cara Anda menambahkan tombol permainan ke permainan:

1. Buat variabel untuk tombol.

   Seperti elemen permainan lainnya, Anda memulai dengan membuat sebuah variabel untuk merujuk ke tombolnya.

2. Bangun objek GameButton.

   Bangun objek GameButton dalam metode init (). Parameter tunggal menunjukkan caption tombol.

3. Tetapkan ukuran dan posisi tombol.

   Anda pasti ingin sedikit memikirkan bagaimana gameplay Anda akan bekerja pada perangkat mobile. Tempatkan tombol Anda di tempat yang mudah dijangkau oleh pemain tanpa terlalu banyak menghalangi pandangan. Perhatikan bahwa Anda juga ingin membuat tombol cukup besar untuk ditekan saat panasnya permainan. (Tombol pada layar jauh lebih baik untuk game berbasis tablet.)

4. Periksa status tombol saat update ().

   Sama seperti Anda biasanya memeriksa status keyboard selama fungsi update (), Anda juga dapat memanggil fungsi untuk memeriksa status tombol Anda. Tentu saja, Anda harus menulis fungsi ini.

5. Baca metode tombol isClicked ().

   Jika tombol sedang ditekan, nilai isClicked () adalah benar. Jika tombol saat ini tidak ditekan, isClicked () mengembalikan false.Gunakan metode ini untuk menentukan keadaan masing-masing tombol dan bertindak sesuai dengan itu.

6. Perlakukan tombol seperti keyboard.

   Karena menguji tombol pada akhirnya mengembalikan nilai Boolean (benar atau salah), memeriksa tombol biasanya terasa sangat mirip dengan memeriksa keyboard.

7. Pertimbangkan untuk menambahkan tombol hanya bila perlu.

   Jika Anda mau, Anda dapat merancang permainan untuk menampilkan (dan menguji) tombol hanya bila ada layar sentuh. Objek Scene memiliki variabel khusus yang disebut touchable. Variabel ini benar jika perpustakaan merasakan layar sentuh, dan salah sebaliknya. Anda dapat menggunakan variabel ini untuk menghasilkan antarmuka khusus yang disesuaikan dengan lingkungan bermain.

Biasanya, Anda akan menambahkan beberapa tombol ke antarmuka Anda, satu untuk mengganti setiap tombol yang Anda harapkan pengguna gunakan (misalnya panah dan bilah spasi). Dengan cara ini, Anda bisa membuat virtual keyboard di layar. Anda mungkin perlu menguji ukuran dan posisi setiap tombol untuk mendapatkan pengalaman gameplay yang nyaman.

Perhatikan bahwa caption dari tombol itu adalah HTML biasa, jadi jika Anda ingin membuat tombol berdasarkan gambar, Anda cukup menambahkan tag

yang sesuai sebagai caption.