Tag Info

New answers tagged


You don't need to change the parser, just the renderer. The tiles will be at the 'same' place, except the projection is different. The good news is that the good context 2d can do isometric just by setting the right isometric transform. Once you set it, just draw in a regular way (including drawImage), and all will be drawn in the isometric way !!! magic ...


Its 4 am and I am going to bed. But I figure that this might help you. I found an old script where I did some Isometric stuff. var x_map = x_map_base + (x * (tile_w / 2)) + ((y * tile_w / 2)); var y_map = y_map_base + (x * (tile_h / 2)) - ((y * tile_h / 2)); var x_obj = x_obj_base + (x * (tile_w / 2)) + ((y * tile_w / 2)); var y_obj = y_obj_base + (x * ...


You can leave your divs as rectangles, and simply make the corners of the image transparent. You will have to a little math when detecting clicks properly, but it will be easier in the long run. I have created a modified version of your tile with transparency: And have made a rudimentary tiling system with this image in CSS: ...


When laying out your tiles you can use their xy-coordinates to determine what z-index to give them. Just add together the x and y values then add one to produce the z value. Examples: (0, 0) = 0 + 0 + 1 = 1 (0, 1) = 0 + 1 + 1 = 2 (3, 3) = 3 + 3 + 1 = 7


The simplest solution I think would be to make another array the same size as the one you are using to display things with, perhaps call it the "depth array". You can by-hand fill in the z values into this array, or have some code to do it. This way you can use index for the on screen array as a lookup for z values into the "depth array".

Top 50 recent answers are included