CODEWITHSUNDEEP
javascripthtml2d-games
Yury
Yury

Reputation: 57

a lot of html5 canvas

I am working on html5 game based on canvas 2d. I have a problem with a lot of redraws(to make 30fps). I need to redraw a lot of objects. Due to animation of units (like walls which lie above the units). I want to improve the perfomance of this and make alot of canvases for each object(about 200 canvases). Is it good solution? Or redraw 30 times per second alot of object on 1 canvas. Here is example:(base language russian) http://wpgame.cloudapp.net/Home/Game

enter image description here

Here are 2 units. First one above boxes second one below boxes. i use 1 canvas. To draw animation of units i need clear rectange area(and it influence to boxes) and i have to redraw boxes. I dont want to redraw boxes. and i think the solution is : make 2 canvases for and several canvases for boxes. And make redraw only on units canvases. But It can be slow.

Upvotes: 0

Views: 145

Answers (1)

Stanimirovv
Stanimirovv

Reputation: 3172

It is a very bad idea to have a lot of canvases. You should have 1 canvas, but redraw only the things you need to redraw. Common practise in javascript canvas based games (2d) is to have two arrays: 1 STATIC which will contain the level - walls, paths, ect, which will be drawn in the level initialization and another array - DYNAMIC which contains the things which move, like the player, enemies and so on.

This basically means that suddenly you don't need to redraw everything - just the things which move. This will improve the performance of your game significantly.

I suggest having a look at this: http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/

Upvotes: 1

Related Questions