Game HTML5 (Kanvas) - Teknik UI?

23

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!

Jason L.
sumber
Perlu diingat bahwa Canvas belum didukung di IE (diduga IE9 akan) ... sehingga menghilangkan pangsa pasar yang sangat besar untuk gim Anda. Ada tambalan javascript yang mencoba membuatnya berfungsi di IE, tetapi gagal berfungsi dengan baik (PERLAHAN sangat ... tidak layak).
1
@Adam - Lihat flashcanvas: flashcanvas.net
ehsanul
Saya menggunakan elemen dom sebagai gui, mulitple floating divs sebagai "windows" dengan satu jendela yang terdiri dari elemen kanvas (permainan sebenarnya). Dan selalu ada opsi ini: developer.mozilla.org/en-US/docs/HTML/Canvas/… :)
Kikaimaru

Jawaban:

18

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!

richtaur
sumber
Terima kasih untuk balasan Anda! Poin yang sangat bagus. Saya sebenarnya sedang membangun mesin saya sendiri sekarang. Mulai menggunakan Canvas tetapi akan mengubahnya sedikit untuk menguji hal-hal CSS3 / WebKit. Satu-satunya alasan saya membangun sendiri adalah karena permainannya terlalu 'sederhana' untuk mesin 'nyata'. Kami bahkan tidak memiliki loop permainan utama. Satu-satunya alasan bahkan ada untuk animasi, tetapi mengingat betapa jarang hal itu terjadi, kita mungkin bisa memulai / menghentikan timer sesuai kebutuhan :)
Jason L.
5

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.

G. Davids
sumber
4

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

suatu hari nanti akan membuat
sumber
Saya pikir tautan repo di halaman CAAT menunjuk ke yang lama jadi pastikan Anda menggunakan yang ini sebagai gantinya! repo: github.com/hyperandroid/CAAT
onedayitwillmake
(maaf saya hanya dapat menambahkan satu tautan per postingan saat ini) Ini adalah demo yang saya buat yang berisi template hello-world untuk CAAT - onedayitwillmake.com/CAATCirclePack
onedayitwillmake
Terima kasih untuk tautannya, saya akan def. saksikan berikut ini. Saya telah mendengar gemuruh Kanvas yang lambat tapi saya orang yang biasanya harus melihat sendiri :) Saya juga harus mencatat bahwa permainan yang saya buat SANGAT ringan pada animasinya. Jangan pernah lebih dari satu atau dua bekerja pada waktu yang sama dan dengan interval sekali setiap 5-10 detik selama satu menit setiap kali. Tidak ada yang gila. Juga, untuk memverifikasi, apakah Anda menyarankan untuk tidak menggunakan Canvas sama sekali, tetapi menggunakan objek DOM biasa dengan CSS / translate3d?
Jason L.
Sejujurnya, saya tidak bisa mengatakan skenario spesifik Anda atau tidak. Namun jika Anda ingin menargetkan mobile-safari secara khusus maka imo ya Anda ingin menggunakan CSS dengan divs. Sangat cepat dalam melakukan itu dibandingkan menggambar kembali kanvas dari pengalaman saya. Saya dapat dengan mudah membuat 45 sprite berbasis gambar bergerak pada 30FPS menggunakan 'translate3d' untuk memindahkannya ke tempatnya. Pastikan untuk menempatkan ini di CSS untuk objek yang Anda rencanakan untuk dipindahkan dengan 'transform3d', jika tidak, webkit akan menggerakkan objek-objek tersebut ke tempat yang ditentukan alih-alih menempatkan. -webkit-transition: transform3d 0s linear;
onedayitwillmake
2

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


sumber
1

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.

zzzzBov
sumber
1

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 .

Per Dicari Aronsson
sumber
0

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.

Simon Sarris
sumber