Objects to draw that are radiant?

How to draw objects that have a smaller Y axis first?

• In my game there is a large 2D map of various objects. http://www.youtube.com/watch?v=em7xglMuWII. As you see, upon creation objects of the same type (trees for example) are placed correctly, but objects of another type (enemies) are placed on top of the no matter the position. Now, how can I arrange that everything is drawn according to it's position? Another example (the dog should be drawn before the tree, and not on top of it):

• Answer:

  Assuming that you have an array containing every object that needs to be drawn. On each game loop you would loop through this array and call each object's corresponding draw() method to place it on the canvas. If you are doing it this way then you can use a sorting function on the array that will sort the array based on the object's Y axis value. So when the next game loop occurs the objects will naturally be drawn in the order that you need. var gameObjects = [{y:0}, {y:1}, {y:20}, {y:-4}, {y:2}]; gameObjects.sort(function(a,b) { return a.y - b.y; }); console.log(gameObjects); //gives: [{y:-4}, {y:0}, {y:1}, {y:2}, {y:20}] var l = gameObjects.length, c = 0; while(c < l) { gameObjects[c].draw(); c++: }; This way objects with small Y values will be drawn first and the last object drawn will have the largest Y value.