Friday, February 18, 2011

Isometric thoughts

Next I'd like to accomplish a small test where the grid of isometric tiles is shown and mousing over a tile causes it to highlight.



I'd like to create a kind of component that would be easy to continue from in future tests. For language I'll be going with Javascript, as for me it has the fastest cycle between writing some code and seeing if it works or not. It should be totally trivial to include an isometric field of tiles in a project, otherwise I wouldn't use it. To get an isometric hello world, I should be able to copy some piece of code, similar to copying AdSense ad codes and it should just work with reasonable defaults.

The code to copy should be something like <script src="http://www.example.com/iso/1/iso.js"></script>. Putting this on the page with nothing else would magically create an isometric field right there. That would also be convenient for demonstrating things here.



What kind of parameters would an isometric field need? At least some sort of description of how big each tile is. The ratio of the size is always 2:1 in my perspective, so just giving the width of the diamond should suffice. Then it should know where the graphics for the tiles are. Maybe this could be given implicitly by having the name of the graphics file be part of the name of a tile, like "car_4" would mean the fourth tile in the file "car.png". There might be big differences in the size of tiles though, so unsure how to know where they are in the file.

Size of the playing field and initial position of the window to the playing field are important too. Maybe assume 8x8 like a chess board and have the initial window be such that it would show that board reasonably.

Since there is "screen space" and "tile space", there will be two coordinate systems.



Screen space is the usual. Basis is x=(1, 0), y=(0, 1). In tile space it will be u=(width_of_tile/2, height_of_tile/2), v=(-width_of_tile/2, height_of_tile/2). To know which tile the mouse is over will involve first translating the mouse position from the current scroll position so that it's in the world position, then a change of basis from screen space to tile space.

StackOverflow had a pretty nice QA about this too