HTML/JS/CSS Isometric Grid with semi-transparent c

Question

I'm trying to create a web app/game that uses a side-on 'isometric' view and transparent tiles. I can display them ok (but not great) using a PHP formula that just sets each div (each tile) as position:absolute and set the top and left parameters. The problem is how do I catch clicks on a tile and let tiles with transparent bits click-through to the tile below it.

An example of my problem is at http://stuff.adammw.homeip.net/other/fv/farmville_2.html

Answer 1

You need to use css3 transforms, or the matrix transform in IE.

The syntax looks something like this:

-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);

A couple of good examples:

http://www.fofronline.com/experiments/cube/index.html

http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Answer 2

Since this is a tile based game, maybe you should just determine which tile the user is interacting with by using a simple formula. Use some javascript to determine the coordinates of a click or other action. then do some arithmetic to figure out what tile to act on. Does that make sense?

Otherwise, I agree with bobince. You're approach probably won't work easily.

Answer 3

You won't be able to do this with the tile elements themselves, as they are always rectangular. You'll have to monitor the mouse position within a parent element containing all the tiles and manually work out which pixels correspond to which tiles.

For an isometric mapping of position to tile this would be easy, but that would be taking the point position as a place ‘on the ground’; it wouldn't allow you to use the image's mask data to hit-test objects like the trees that render in front of the ground. (Do you want to do that anyway? Currently some trees totally obscure the ground tile below them.)

If you really need to hit test against image masks, you can:

a. write a script to extract the mask data from the image and include it in the JavaScript source as encoded binary bitmasks. I've done this for collision detection in JavaScript games, but it's not much fun as it can take a lot of space and you have to re-export the data when you update the graphics.

b. extract the image data for testing using a <canvas> and getImageData. At which point you might consider using a canvas for rendering too, given that you'll have already lost IE users.