New answers tagged isometric
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".
The best explanation I have found of Orthographic/Cartesian to Isometric conversion is from this article. BLOCK_SIZE = [64, 32] def orth_to_iso(x, y): ''' Converts cartesian to isometric cordinates ''' try: xx = (x - y) * (BLOCK_SIZE/2) yx = (x + y) * (BLOCK_SIZE/4) except Exception: xx = -1 yx = -1 ...
Top 50 recent answers are included