Draw sprites

[alexriegler12]

How can you calculate when to draw sprites (eg. Trees) that have an x and y coordinate on the map and a z offset from the terrain?

[hypersurge]

Here's a general solution. Because of the ArrayBuffer methods used (necessary for performance) handling sprites is not trivial. They need to be drawn over the top of the terrain as a final step. Draw them into a second canvas, and draw that over screen.canvas per frame. That's the easy part.

Z sorting each sprite can be done in reverse, using "destination-over" globalCompositeOperation. The more challenging part is using a clipping path to cut away anything that is obscured by foreground terrain. Creating the clipping path afresh for each needed Z depth is needed (but only do this when there is a sprite that requires that Z). Fortunately this requires no further calculations because the hiddenY values were already stored for the current Z. Therefore it makes sense to do this within the main render loop, per Z, then batch the drawImage commands (sprites) for later.

Overall this isn't as optimal as the original blitting routines - but it does allow for easy alpha and animations in the sprites. Clip paths can be slow, so using a pixel mask (e.g. "destination-out") and multiple temporary canvases may be an alternative. Another performance boost available is to scale the x values for both the clipping path and the terrain voxels, less detail in the horizontal is barely noticeable in comparison to the vertical.