Canvas (Kinetic.JS): multiple layers vs single layer approach
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?
Answer
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:
- Apply certain transformations to a whole layer.
- 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.
- Isolate anything that happens in a layer from happening in other layers.
- Disable/enable whole layers.
- 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!