同一画布中的HTML5画布分层对象

Question

I've looked around for layering objects within the same canvas but haven't found a lot of information about it.

At the moment I've used the multiple canvas technique to layer things on top of each other

example: canvas Holder <--- this holds all other canvas's loading canvas menu canvas game canvas background canvas

and by adding them to the " stage = new stage (mainCanvas) " in a specific order, i get the desired layering

stage.addChild(background);
stage.addChild(game);
stage.addChild(menu);
stage.addChild(loading);

This works great, however I'm wondering whether there is a way to change the zIndex of an image added to the 'game' canvas if I had 2 images in that canvas?

I've seen this sort of thing done in the fieldrunners game, the game follows a grid like format and when you place a shooter in the square above another shooter, is gets repositioned behind it..

http://fieldrunnershtml5.appspot.com/#sd --- works in chrome

any ideas how it was done?

Thanks

Answer 1

There is no need for multiple canvases. When you work with a game in canvas 2d you usually clear and redraw the canvas ~60 times per second. What you draw last ends up on top. So in order to simulate layers you sort all game objects in an array based on their z-index then you iterate over all objects in the array, invoking their draw methods.

There is much room for optimizing such a renderer, but this is a basic and simple way to make it work.

Answer 2

A canvas is just pixels - it has no "layers".

If you want to perform parallax scrolling, that sort of thing, put multiple canvases in the same place, and use transparency to show the ones behind.

Answer 3

Your technique using multiple canvases to implement layers is totally good approach. You should also keep track on which layer needs to be cleared/redrawn - for example map should be refreshed only when scrolled or GUI/HUD really doesn't need to be redrawn 60 times per second.

There is no such thing as z-index or objects in canvas, all mechanisms depends on your own implementation. For example you can make an array of commands or objects to draw - then sort it by zIndex (or whatever you name it) and execute each element.