Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice:

We have a "Stage" object, which represents the root of our game and is a global div-wrapper. The stage can contain multiple "Scenes", which are also div-elements. We would implement a Scene for the playing task, for pause, etc. and switch between them. Each scene can therefore contain multiple "Layers", representing a canvas. These Layer contain "ObjectEntities", which represent images or other shapes like rectangles, etc. Each Objectentity has its own temporaryCanvas, to be able to draw images for one entity, whereas another contains a rectangle.

We set an activeScene in our Stage, so when the game is played, just the active scene is drawn. Calling activeScene.draw(), calls all sublayers to draw, which draw their entities (calling drawImage(entity.canvas)). But is this some kind of good practice? Having multiple canvas to draw? Each game loop every layer-context is cleared and drawn again. E.g. we just have a still Background-Layer, … wouldn't it be more useful to draw this once and not to clear it every time and redraw it? Or should we use a global canvas for example in the Stage and just use this canvas to draw? But we thought this would be to expensive...

share|improve this question
1  
Why exactly do you have multiple canvas ? If it's an optimization, why don't you just test with and without ? –  dystroy Jul 2 '13 at 8:19
1  
You should remove the "other question". And don't post it again, unless you want it to get put "On Hold" :) –  sm4 Jul 2 '13 at 10:22

2 Answers 2

This page contains an excellent list of optimizations that can be made to canvas. In the section labeled "Use multiple layered canvases for complex scenes" it describes why having multiple canvas objects is actually better in many cases because you don't have to redraw large expensive objects (background images) as frequently as smaller, fast moving ones (projectiles). Here is a tutorial to get you started. In a nutshell, simply create a number of canvases for things that require drawing differently and line them up with absolute positioning:

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

Each canvas object can be named and layered using z-index:

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

Finally, draw to the different contexts:

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

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

function draw3() {
    context3... // draw bullets
}
share|improve this answer
2  
It would be nice if you could make a small abstract from those links. Otherwise your answer might become invalid when the links stop working... –  sm4 Jul 2 '13 at 13:51
    
Thanks these links are quite good. I managed just do redraw special dirty areas, if a object moves for example. –  user1818924 Jul 4 '13 at 9:00
    
@sm4 Good point, I'll add something. –  CuddleBunny Jul 15 '13 at 13:45

Contre Jour does this, in fact. I don't know many details, but you may be able to find more technical notes from them. If you play their game, I believe each of the landmasses your character interacts with are canvases.

It seems to be a good idea to seperate your active portions of the game into canvases. For instance, if you were making an RTS, the command bar might make sense to be a seperate canvas to only redraw once in a while.

share|improve this answer
    
Telling us that a released game does this is interesting, but doesn't tell us if it's a good practice. Perhaps the developers regretted the decision? Also, some sources to evidence of their use would be nice. –  Byte56 Jul 2 '13 at 17:26

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.