Game HTML5 (Kanvas) - Teknik UI?

Saya sedang dalam proses membangun permainan JavaScript / HTML5 (menggunakan Canvas) untuk seluler (Android / iPhone / WebOS) dengan PhoneGap. Saat ini saya mencoba untuk merancang bagaimana UI dan papan permainan harus dibangun dan bagaimana mereka harus berinteraksi tetapi saya tidak yakin apa solusi terbaiknya. Inilah yang bisa saya pikirkan -

Bangun UI tepat ke kanvas menggunakan hal-hal seperti drawImage dan fillText. Bangun bagian-bagian UI di luar kanvas menggunakan objek DOM biasa dan kemudian apungkan div di atas kanvas saat elemen UI perlu tumpang tindih dengan kanvas papan permainan. Adakah teknik lain yang bisa saya gunakan untuk membangun UI game yang belum saya pikirkan? Juga, yang mana dari yang akan dianggap sebagai cara "standar" (Saya tahu game HTML5 tidak begitu populer sehingga mungkin belum ada cara "standar")? Dan akhirnya, ke arah mana ANDA akan merekomendasikan / menggunakan?

Banyak terima kasih sebelumnya!

Kedua solusi (menggambar di atas kanvas VS tradisional HTML / CSS) benar-benar valid dan akan berfungsi dengan baik. Beberapa hal yang perlu dipertimbangkan:

• Jika Anda sudah menggunakan pustaka berbasis kanvas, kode Anda mungkin lebih bersih / lebih teratur dengan terus menggunakan kanvas alih-alih memiliki metode tambahan (berbasis DOM) untuk UI.
• Jika UI Anda terlalu banyak teks (dengan dialog, dll.) Maka mungkin lebih mudah untuk diterapkan melalui HTML / CSS. Sebagai contoh, cukup sepele untuk teks mengalir dalam elemen DOM (dengan hal-hal seperti pembungkus dan jarak paragraf) dan relatif sulit untuk diterapkan di kanvas.
• Bergantung pada perpustakaan yang Anda gunakan, bisa jadi lebih mudah untuk menerapkan penanganan klik pada elemen DOM daripada di dalam kanvas Anda. Misalnya jika Anda ingin mendeteksi klik pada tombol "Ok", itu adalah tugas sepele di dunia HTML / JS. Tetapi di kanvas Anda harus mendengarkan klik pada elemen yang berbeda dan memeriksa koordinatnya untuk melihat di mana klik itu terjadi.
• Beberapa agen pengguna (terutama perangkat seluler) bisa rumit ketika menggunakan elemen DOM yang mengandung teks. Misalnya, Mobile Safari mungkin ingin memunculkan modal dengan alat untuk menyalin / menempel. Mencegah perilaku ini mungkin sulit dan mungkin akan lebih mudah di tanah kanvas.

Beberapa di antaranya bersifat subyektif; seorang pengembang yang saya tahu selalu lebih suka menggunakan kanvas karena ia baru saja menemukan DOM jelek dan bertele-tele. Karena solusi mana pun akan bekerja dengan baik, saya akan memilih satu layar sederhana di aplikasi Anda, cepat mengembangkannya secara terpisah menggunakan kedua metode dan melihat mana yang terasa lebih mudah / lebih baik.

Semoga berhasil!

Saya telah menggunakan easeljs untuk interaksi kanvas saya.

Ini cukup bagus dan memfasilitasi desain yang solid. Salah satu fitur utama yang membuat saya memilihnya adalah fasilitas untuk menyinkronkan posisi objek kanvas dan elemen dom Anda.

Ini membuatnya mudah untuk melakukan gelembung speach CSS dan elemen UI statis seperti frame hud dan hal semacam itu.

Keuntungan yang dimiliki browser ini adalah Anda mendapatkan kanvas kaya tetapi Anda bisa menggadaikan hal-hal kecil dan statis ke dom untuk menjaga kinerja tetap terkendali.

Kanvas lambat di platform seluler, setidaknya safari seluler, jadi Anda harus menggunakan pemosisian objek berbasis CSS pada objek tersebut. Khususnya menggunakan "translate3d" yang akan menghidupkan perangkat keras rendering objek.

Lihatlah perpustakaan CAAT untuk kanvas, ini cepat dan Anda dapat menggunakan "aktor" yang didukung CSS dan tidak mengubah logika permainan.

Saya belum bisa memposting tautan tetapi di sini ada beberapa tautan palsu http://labs.hyperandroid.com/animation

Harus setuju tentang kelambatan kanvas pada iPhone 4. Cukup yakin kanvas safari tidak didukung oleh GL. Game cheezy saya berjalan cepat pada iPhone 3GS dan Android tetapi pada iPhone 4 Saya pikir layar retina memiliki terlalu banyak piksel, atau jika kanvas tidak menggunakan GL, ini akan menjelaskan mengapa itu menyeret. Saya suka model pengembangan kanvas, belum mencoba opsi css translate3d. Secara khusus saya menggunakan GWT dan pembungkus kanvas gwt-g2d (optimasi / kebingungan). http://www.photonjunky.com/shootout.html

Saya sarankan menjaga kontrol Anda sebagai elemen html seperti menudan commanduntuk alasan aksesibilitas. Menggunakan sedikit CSS Anda dapat menampilkan elemen di atas kanvas , dan tidak kehilangan fungsi HTML yang sudah dibangun sebelumnya.

Saya tahu ini adalah pertanyaan lama, tetapi hari ini (Maret 2013) kami lebih tahu. Saya memutuskan untuk menjawab kalau-kalau ada orang yang tersandung di sini seperti saya. Saya harus tidak setuju dengan sebagian besar jawaban lainnya. Mereka mungkin valid untuk pengembangan browser web, tetapi tidak untuk seluler. Itu membuat perbedaan besar jalur mana yang Anda pilih (DOM atau animasi kanvas). Tampilan web Android sama sekali tidak berguna (lambat, gagap), yang membuat Phonegap tidak berguna untuk pengembangan game Android, kecuali Anda dapat menerapkan akselerasi perangkat keras, yang saat ini hanya mungkin menggunakan animasi kanvas dan kerangka kerja yang sesuai. Untuk info lebih lanjut, lihat balasan ini .

Anda bisa melakukannya sejuta cara. Namun Anda merasa paling nyaman dan teknisi Anda merasa paling percaya diri.

Jika Anda mencari inspirasi atau contoh kode, inilah salah satu cara yang saya lakukan. Saya memiliki fungsi yang berulang kali menggambar menu sampai tombol ditekan. Saat tombol ditekan, game memuat dan pendengar acara klik menu lama dihapus dan pendengar acara klik permainan baru ditambahkan. Saya juga mengakhiri loop draw lama dari menu dan memulai loop draw game baru. Berikut beberapa cuplikan terpilih untuk memberi Anda gagasan tentang bagaimana hal ini dilakukan:

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

Dengan cara ini saya dapat memisahkan gambar permainan dan acara permainan dari menggambar menu dan acara menu. Ini juga memberi saya keleluasaan untuk menggunakan elemen permainan / animasi di menu saya jika saya ingin membuatnya terlihat sangat cantik.