Canvas (Kinetic.JS): multiple layers vs single layer approach

Question

Can anyone explain why (indeed, if) it's best to abstract the major parts of a canvas game to different layers when using something like Kinetic?

It of course feels like you should, and so far I have been: one layer for the background, one for the player's character, and others.

Then I ran into a situation where I needed a shape of one layer to sit behind a shape on another layer - but moving the entire layer behind the other layer was not an option, so I reluctantly re-coded so the entire game sits on one layer.

To my surprise, though, I can still do everything I need. I can still animate or handle events on individual shapes or groups.

So in short: what advantage does explicit layering bring? What pitfalls might I face with the one-layer approach?

Aborn

Answer 1

Actually, layers usually give a huge advantage. However, sometimes they are not necessary. Just to give an idea - compare PhotoShop (layers) and MS Paint (no layers). If this gives you the idea then that's it!

If not: layers is an organizational concept. It lets you to deal with data in pieces. They allow:

1. Apply certain transformations to a whole layer.
2. Automatically categorize your objects on a per-layer basis, so that you can get all objects of a layer and work with them pretty easily.
3. Isolate anything that happens in a layer from happening in other layers.
4. Disable/enable whole layers.
5. Much-much more!

As you see, layers, generally, allow such abstractions as encapsulation and, to some extent, polymorphism to be enforced on content organization level. Pitfall that one-layer approach brings is just that - too tight coupling - a beast from the world of permanent chaos that encapsulation and polymorphism fight for the eternity. Nuff said!

Clancy

Thanks for the response. However, all of the points you list are also true of groups that can sit on a single layer, so I'm still not really sure why I should be splitting my game into layers, or if indeed I should be. – Aborn

@Utkanos Hmm, yes, I thought your question is more fundamental but it seems to be closely specific for Kinetic.JS. That is, I believe, a little bit explained in the "How it works" section here: github.com/ericdrowell/KineticJS/wiki - each layer seems to have it's own event bus. And I think that you can also ask here: html5canvastutorials.com/kineticjs/… – Clancy

Thanks - I'll check out the links. +1 – Aborn

Answer 2

If your game contains a lot of different stuff, it might take time to draw everything. Too much in the same layer reduces performance. Although too many layers does so aswell.

Check out: http://www.html5canvastutorials.com/labs/html5-canvas-kineticjs-drag-and-drop-stress-test-with-1000-shapes/

Averill

Thanks for the response - however my game won't have anything like the performance strain of this example. – Aborn

The drag/drop stress test no longer works, I would say it might just be for my platform (Chrome Win8), however, when you click "Open in new window" below the iframe, you can see that it takes you to a "Does not exist" page. – Nicolette

There's a bug for the last version of Chrome. For me i noticed that my click-areas does not work anymore (their 1x1px instead of like 50x50). I found this: github.com/ericdrowell/KineticJS/issues/368 Replace context.fill(context) with context.fill() in the kinetic.js-file to fix the problem for version 4.0.1 and later. – Averill

Answer 3

In organizational terms, noncom's answer was spot on. However, as he has noted his answer is more in regards to canvas animations in general, and you are quite correct in pointing out that KineticJS provides it's own tools to offer those same organizational benefits.

So, with organisation irrelevant, all we have is performance. With that said, the main difference is that each 'layer' corresponds to a distinct canvas tag.

The simple answer then, is that having multiple layers allows you to selectively redraw only one canvas tag at a time. Think about it, if you have objects moving on top of a background, do you want to be clearing and redrawing the background every time those objects move?

If you're not using layers, that's what is happening. What you want is a background that only ever gets drawn again when the background changes, that means a layer for the background.

Whether this is actually worthwhile depends highly upon your application, but that's the idea. The point of layers (outside of organisation) is to isolate the required drawing processes to things that actually need to be drawn. With complex animations this can be incredibly important to maintaining decent performance.

Here's a jsperf for reference: http://jsperf.com/layered-canvases/3

Eurythmic