Ke kanvas, atau tidak ke kanvas, saat membuat game berbasis browser?

14

Latar Belakang: Saya memiliki latar belakang pengembangan yang luas, tetapi terakhir kali saya membuat kode permainan adalah beberapa tahun yang lalu. Keahlian Javascript saya sangat terbatas, dan saya bermaksud untuk memperbaikinya dengan membangun permainan sederhana - Tetris, Pac-man, atau sesuatu dengan tingkat kerumitan itu.

Pertanyaan: Tampaknya bagi saya bahwa pilihan mendasar yang perlu saya buat adalah apakah saya harus memberikan <canvas>elemen atau tidak.

Dengan kanvas, saya memiliki alat dasar untuk memberikan titik, garis, dan hal-hal yang lebih kompleks di atas itu. Agaknya ada, atau akan ada, juga berbagai kerangka kerja untuk membantu hal ini.

Tanpa kanvas, saya bisa menyimpan objek saya di pohon DOM, seperti halaman web biasa, hanya cukup kompleks, dengan banyak elemen yang tumpang tindih.

Apakah satu pendekatan lebih baik dari yang lain? Apakah mereka saling eksklusif? Bagaimana saya tahu harus memilih yang mana?

javascript html5 html-canvas Pelajaran
sumber

Jawaban:

13

Canvas dan DOM tidak saling terpisah, meskipun keduanya cukup terpisah. Salah satu pendekatan yang baik adalah membuat area permainan utama (mis. Potongan jatuh di Tetris) menggunakan Kanvas, dan melakukan semua UI (mis. Tampilan skor) dengan elemen DOM yang tumpang tindih elemen kanvas.

Yang mengatakan, pendekatan seperti itu tidak benar-benar diperlukan untuk permainan primitif seperti Tetris. Kanvas berguna untuk efek grafis yang lebih maju, tetapi jika itu tidak diperlukan maka tetap berpegang pada DOM akan memberi Anda kompatibilitas yang lebih luas; tidak semua browser mendukung HTML5 Canvas.

jhocking
sumber
3
Sejujurnya bekerja di Game HTML5 untuk tahun lalu sebagai pekerjaan harian, saya akan mengatakan bahwa browser yang tidak mendukung Canvas tidak cukup cepat untuk permainan yang layak, tapi sekali lagi, tidak ada yang lebih lambat dari WebKit di ponsel Android ... :(
Ivo Wetzel
Terima kasih :) Saya tidak terlalu peduli untuk "dukungan browser", pada saat saya sudah cukup belajar untuk masalah itu, saya berharap masalah telah terpecahkan dengan sendirinya. Ini terutama untuk bersenang-senang dan belajar.
Letharion
Saya juga melakukan itu: Game itu sendiri digambar di atas kanvas sementara GUI terdiri dari elemen DOM sebagian transparan di atas.
Philipp
@IvoWetzel Saya merasakan hal yang sama ... kami bekerja pada game di platform seluler, juga dan Android cukup banyak dimainkan ...
Vaughan Hilts
12

Tentang DOM
DOM bekerja cukup baik untuk 2D jadul, yang berarti tidak menggunakan rotasi gambar atau penskalaan. Sebenarnya ada alat untuk kedua pekerjaan ini, tetapi Anda tidak dapat mengandalkan mereka untuk bekerja dengan baik.

Untuk gim, Anda harus mengandalkan mesin tata letak peramban sesedikit mungkin, artinya gunakan position:absoluteuntuk menempatkan objek. Usahakan sejauh mungkin untuk tidak membuat dan menghancurkan objek DOM sepanjang waktu, jika Anda membutuhkan jumlah objek yang sangat bervariasi, Anda mungkin ingin kumpulan elemen DOM yang tidak aktif diatur display:none, siap untuk dihidupkan kembali saat diperlukan.

DOM vs kanvas
Dengan pangsa pasar kanvas menyusut IE8 menjadi pilihan yang lebih dan lebih menarik, untuk sebagian besar permainan itu mungkin pilihan yang baik. Tetapi untuk beberapa pekerjaan, DOM adalah alat yang lebih mudah digunakan, Anda dapat menggunakan beberapa aliran dokumen jika diperlukan, Anda dapat menangkap klik langsung oleh objek yang diberikan, mudah untuk mengintegrasikan bilah gulir.

Sulit untuk menutupi perbedaan kinerja, itu tergantung pada pekerjaan dan akan sangat bervariasi dari browser ke browser.

aaaaaaaaaaaa
sumber
2
Saya tidak berpikir untuk menyebutkan position:absolute, itu poin yang bagus.
jhocking
Bukankah kanvas GPU dipercepat pada tingkat di mana DOM tidak?
Thomas
1
@ Thomas Satu-satunya tempat di mana Anda dapat yakin bahwa ada akselerasi GPU adalah webGL. (Secara teknis itu bisa diterapkan tanpa, tetapi itu tidak mungkin terjadi). Implementasi kanvas 2D pertama adalah benar-benar CPU, beberapa fungsi di beberapa browser telah dipindahkan ke GPU, tidak dalam semua kasus dengan peningkatan kinerja yang signifikan. Sedangkan untuk akselerasi DOM GPU, mereka sedang mengusahakannya, dan saya tidak melihat alasan tertentu bahwa itu tidak boleh terjadi. Bagaimanapun, yang paling penting bukanlah bagaimana browser melakukannya, tetapi jika kinerjanya cukup baik untuk kebutuhan Anda, GPU tidak selalu berarti lebih cepat.
aaaaaaaaaaaa
Apa yang Anda maksud dengan GPU tidak selalu lebih cepat? Pada PC ini mungkin benar, tetapi pada platform seluler, saya lebih suka GPU melakukan rendering lebih banyak sehingga CPU memiliki lebih banyak 'siklus' untuk dihabiskan dalam mengeksekusi logika game seperti AI dll. Dengan cara ini permainan bisa lebih kompleks .
Thomas
1
@ Thomas Tergantung pada platform, pekerjaan, dan banyak hal lainnya. 2D jadul utamanya adalah operasi memori, menyimpan sumber daya dalam memori utama dan menggunakan CPU untuk operasi itu akan bekerja dengan cukup baik, juga pada ponsel, tetapi mencoba untuk melakukan operasi pada data yang terletak di memori prosesor lain adalah pembunuh kinerja, jadi jika Anda mencampur operasi yang tidak dapat dilakukan oleh GPU dengan operasi GPU Anda akhirnya akan mengirim buffer bolak-balik tergantung pada operasi atau meminta salah satu prosesor menulis ke memori prosesor lainnya.
aaaaaaaaaaaa
6

Sepenuhnya tergantung pada jenis permainan, meskipun kanvas cocok untuk "sebagian besar" dari mereka.

Manajemen DOM menjadi sangat buruk pada titik tertentu, semakin banyak elemen yang Anda dapatkan semakin lambat, semakin banyak elemen yang Anda gunakan untuk bergerak dengan sangat lambat.

Mengelola pesanan pemuatan aset dengan elemen IMG adalah ... non-trival (kesalahan intersepsi pada protokol yang sengaja dipatahkan pada tag gambar: D).

Meskipun, untuk game dengan sebagian besar citra statis dan jumlah efek rendah, saya tetap menggunakan DOM. Yang lainnya, kanvas adalah pilihan pertama (Poin dan mengklik barang, meskipun hitmaps adalah cerita yang berbeda).

Kanvas sangat cepat akhir-akhir ini (bahkan pada iPhone), hampir tidak ada alasan untuk tidak menggunakannya.

Ivo Wetzel
sumber
Mengenai kecepatan, berdasarkan pada presentasi video dari Aves Engine , ketika Anda memiliki ribuan elemen, DOM sebenarnya lebih cepat ditangani, daripada kanvas. Apakah Anda tidak setuju? Apakah ini sudah berubah? Saya berharap saya bisa menemukan video itu lagi ...
Letharion
1
: DI pekerjaan Zynga, dengan pria yang membuat Aves. Banyak hal telah berubah pada tahun lalu, percayalah :)
Ivo Wetzel
-1, Saya telah mencoba memiliki ~ 100.000 elemen dom untuk aplikasi non-game, yang hampir tidak berhasil. Tetapi beberapa ribu elemen tidak bermasalah. Ini tidak seperti kanvas yang akan cepat jika Anda menggambar ribuan gambar untuk itu di setiap pembaruan.
aaaaaaaaaaaa
@eBusiness Lalu lanjutkan dan perkenalkan pemesanan Z kompleks dan transformasi 3D. Semoga berhasil dengan itu :)
Ivo Wetzel
4
@IvoWetzel Jika Anda ingin melakukan 3D, kanvas adalah pilihan. Tapi bukan itu jawaban Anda, jadi apa maksud Anda?
aaaaaaaaaaaa
2

Jika Anda membuat game HTML5, kanvasnya jauh lebih baik. Inilah alasannya:

  1. Kecepatan - Pikirkan kanvas sebagai gambar. Anda menggambar ke gambar, dan kemudian melupakan apa yang Anda gambar. Itu secara dramatis meningkatkan kinerja, dibandingkan dengan DOM atau SVG. Apa yang dilakukan aplikasi DOM dan SVG adalah mereka melacak setiap objek yang Anda tempatkan di layar. Itu berarti jika Anda memiliki level besar dengan banyak objek di layar, terutama di luar layar atau disembunyikan, semua itu digambar dan dicatat.
  2. Menggambar fitur - Sementara elemen DOM memiliki transformasi CSS3 yang kuat, itu tidak seberapa dibandingkan dengan fitur kanvas. Kanvas dapat menggambar objek apa pun, memiliki dukungan gradien yang kuat, plugin untuk menampilkan objek dalam 3D, filter, dll.
  3. Dukungan - Saat menggunakan DOM, saat Anda ingin menggunakan fitur eksperimental seperti transformasi atau animasi, Anda harus menggunakan awalan -moz-, -webkit-, -o-, dan -ms- di CSS. Di kanvas, Anda tidak perlu khawatir tentang itu. Hanya menggambar dengan satu fungsi, dan Anda selesai. Keuntungan lain yang terkait dengan dukungan kanvas adalah bagaimana aplikasi Anda ditampilkan. Sebagai pengembang situs web, kurangnya standarisasi DOM antara browser membuat saya gila. Latar belakang, gradien, transformasi, dll. Menampilkan berbeda antara browser, meskipun spesifikasi W3C rinci. Di kanvas, saya hanya menemukan satu hal yang mungkin berbeda - latar belakang. Saat menampilkan latar belakang ubin, beberapa browser akan mengambil "tile-x" sebagai pusat ubin di 0px pada sumbu x, dan yang lain menganggapnya hanya sebagai ubin ubin ke bawah.
  4. Perpustakaan dan dokumentasi - Ada BANYAK perpustakaan hebat tentang dokumentasi untuk membuat game dengan kanvas. Beberapa perpustakaan: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, Toolkit InfoViz, Frame-Engine, KUE, Raphaeljs, Tweenjs, dll. Saya bisa mendaftar lebih banyak, tetapi tidak ada gunanya.

Sisi bawah - Animasi - Meskipun ada banyak perpustakaan hebat untuk animasi, saya suka animasi CSS3. Sangat mudah untuk dibuat, dimanipulasi, dan dipicu. Ada berbagai peretasan untuk membuat animasi CSS3 berfungsi dengan objek dengan kanvas, tetapi saya curiga kebanyakan orang memilih untuk tidak menggunakan metode itu.

Semoga berhasil dengan gim Anda, dan saya berharap dapat melihat apa yang Anda hasilkan!

Zoyt
sumber
2

Jika Anda mempertimbangkan untuk menargetkan browser seluler, khususnya Android, dan game tersebut mengandung grafik bergerak, hindari animasi DOM. Browser stok di Android tidak berguna, meskipun itu adalah webkit. Lihat utas masalah Android ini sebelum Anda mulai: "Render mengerikan CSS3 dan animasi Javascript di Browser dan WebView" .

Kanvas itu sendiri mungkin tidak lebih cepat, tetapi ada kerangka kerja untuk meminta akselerasi perangkat keras untuk animasi kanvas, misalnya CocoonJS . Ada tautan ke video di situs, yang menunjukkan keuntungan kinerja yang dapat Anda capai dengan menggunakan kerangka kerja (tapi saya tidak diizinkan memposting lebih dari dua tautan, karena alasan tertentu).

Per Dicari Aronsson
sumber
2

Jawaban sederhana: WebGL dengan fallback kanvas.

Jawaban bernuansa: Jika game Anda memiliki banyak teks, overlay layer teks HTML. Pixi.js adalah kerangka tampilan yang diperkeras dengan beberapa tambahan berguna yang berfungsi dengan baik untuk ini.

d13
sumber
1

Ingat DOM singkatan dari model objek dokumen . Anda ingin menggunakannya untuk membuat game hanya dalam situasi yang sangat jarang dan lebih suka kanvas dalam banyak kasus.

Bahkan jika gim Anda memiliki persyaratan grafis yang kecil, melakukannya di DOM akan memiliki kinerja yang buruk; apapun yang lebih dari Tetris mungkin akan berjalan buruk.

Saya punya contoh dunia nyata: Ketika saya membuat implementasi Conway's Game of Life, saya mulai dengan tabel 500x500, mengubah warna latar sel. Dalam versi ini, Glider tidak berjalan pada lebih dari 30 fps, pola yang lebih besar menghasilkan hampir tidak lebih dari 1. Dalam versi kanvas saya dari permainan ini, sekarang mungkin untuk menjalankan patters yang jauh lebih besar (populasi 1000 dan lebih) dengan lancar di ~ 30 fps.

Juga, ini juga harus menjadi kasus untuk SVG (Scalable Vector Graphics), walaupun saya tidak pernah mencobanya dalam praktik.

Sunting : Saya harus mengakui bahwa contoh saya tidak terlalu baik (karena tables = bad). Tetapi poin utamanya masih benar: manipulasi DOM adalah untuk dokumen. Peramban harus mencari CSS dan mengalokasikan lebih banyak memori saat Anda mengerjakan elemen. Tidak masuk akal untuk lebih cepat dari kanvas.

salinan
sumber
Sejak kapan DOM memiliki kinerja yang buruk. Hanya saja tidak dipercepat perangkat keras, itulah satu-satunya perbedaan. Dan tabel 500x500 dalam warna latar belakang pada sel bukanlah implementasi DOM yang efisien
Raynos
1
@ Raynos Saya perhatikan bahwa ini bukan implementasi DOM yang efisien. Tidak ada jika Anda ingin memanipulasi piksel.
salin
1
-1, tabel besar adalah pembunuh kinerja. Canvas jelas merupakan alat yang lebih baik jika Anda ingin memanipulasi piksel individu, meskipun pengaturannya terhadap implementasi DOM yang buruk benar-benar membuat contoh Anda tidak berguna. Dari pinggul, tembakan terbaik saya pada implementasi DOM yang akan menjadi 50000 5x1 divs dengan 32 gambar latar belakang yang berbeda ditukar sesuai kebutuhan.
aaaaaaaaaaaa
@ eBusiness ya, orang-orang sudah memberi tahu saya. Sayang sekali saya tidak memikirkannya sendiri saat itu: - /
salin
@ Raynos, DOM tidak pernah cepat. Bahkan, salah satu alasan utama kanvas adalah karena DOM lambat. Terkait: stackoverflow.com/q/6817093/632951
Pacerier