Apakah menggunakan beberapa objek kanvas merupakan praktik yang baik?

Kami sedang mengembangkan permainan lompat dan lari dengan HTML5 dan JavaScript dan harus membuat kerangka kerja permainan sendiri untuk ini. Di sini kami memiliki beberapa kesulitan dan ingin meminta saran kepada Anda:

Kami memiliki objek "Panggung", yang mewakili akar permainan kami dan merupakan pembungkus div global. Panggung dapat berisi beberapa "Adegan", yang juga merupakan elemen div. Kami akan menerapkan Scene untuk tugas bermain, untuk jeda, dll dan beralih di antara mereka. Oleh karena itu setiap adegan dapat mengandung beberapa "Layers", mewakili kanvas. Lapisan ini berisi "ObjectEntities", yang mewakili gambar atau bentuk lain seperti persegi panjang, dll. Setiap Objectentity memilikiCanvas sementara sendiri, untuk dapat menggambar gambar untuk satu entitas, sedangkan yang lain berisi persegi panjang.

Kami menetapkan ActiveScene di Stage kami, jadi ketika game dimainkan, hanya adegan aktif yang diambil. Memanggil activeScene.draw(), memanggil semua sublayer untuk menggambar, yang menarik entitas mereka (panggilan drawImage(entity.canvas)). Tetapi apakah ini semacam praktik yang baik? Memiliki beberapa kanvas untuk menggambar? Setiap loop game, setiap konteks layer dihapus dan ditarik lagi. Misalnya kita masih memiliki Background-Layer, ... bukankah akan lebih berguna untuk menggambar ini sekali dan tidak menghapusnya setiap kali dan menggambarnya kembali? Atau haruskah kita menggunakan kanvas global misalnya di Panggung dan cukup menggunakan kanvas ini untuk menggambar? Tapi kami pikir ini akan mahal ...

Halaman ini berisi daftar optimisasi luar biasa yang dapat dibuat untuk kanvas. Pada bagian yang berlabel "Gunakan beberapa kanvas berlapis untuk adegan kompleks" ini menjelaskan mengapa memiliki beberapa objek kanvas sebenarnya lebih baik dalam banyak kasus karena Anda tidak perlu menggambar ulang objek mahal besar (gambar latar belakang) sesering yang lebih kecil, yang bergerak cepat ( proyektil). Berikut adalah tutorial untuk memulai. Singkatnya, cukup buat sejumlah kanvas untuk hal-hal yang membutuhkan gambar berbeda dan sejajarkan dengan posisi absolut:

position:absolute;
left:0px;
top:0px;

Setiap objek kanvas dapat diberi nama dan berlapis menggunakan z-index:

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />

Akhirnya, gambarlah ke konteks yang berbeda:

function draw1() {
    context1... // draw background
}

function draw2() {
    context2... // draw character
}

function draw3() {
    context3... // draw bullets
}

Sebenarnya, Contre Jour melakukan ini. Saya tidak tahu banyak detail, tetapi Anda mungkin dapat menemukan lebih banyak catatan teknis dari mereka. Jika Anda memainkan permainan mereka, saya yakin setiap daratan yang berinteraksi dengan karakter Anda adalah kanvas.

Tampaknya menjadi ide yang bagus untuk memisahkan bagian aktif Anda dari permainan menjadi kanvas. Misalnya, jika Anda membuat RTS, bilah perintah mungkin masuk akal untuk menjadi kanvas terpisah untuk hanya menggambar ulang sesekali.