具有半透明点击切片的HTML / JS / CSS等距网格 [英] HTML/JS/CSS Isometric Grid with semi-transparent click-through tiles

问题描述

我正在尝试创建一个使用侧面等轴测视图和透明贴图的网络应用/游戏。我可以使用一个PHP公式（仅将每个div（每个tile）设置为position：absolute并设置顶部参数和左侧参数）来显示它们（但不是很好）。问题是如何捕捉瓦片上的点击，并让透明位的瓦片点击到瓦片下方的瓦片。

我的问题的一个例子是在 http://stuff.adammw.homeip.net/other/fv/farmville_2.html a>

解决方案

对于tile元素本身，您将无法做到这一点，因为它们始终是矩形。您必须监视包含所有切片的父元素内的鼠标位置，并手动计算出哪些像素对应哪些切片。

对于位置等距映射这将是容易的，但这将把点位置作为在地面上的位置;它不会允许您使用图像的遮罩数据来命中测试对象，如在地面前渲染的树。 （你是否想这样做？目前有些树木完全遮住了它们下方的地面砖。）

如果您确实需要对图像蒙版进行测试，您可以：

a。编写脚本以从图像中提取遮罩数据，并将其作为编码二进制位掩码包含在JavaScript源代码中。我已经为JavaScript游戏中的碰撞检测完成了这个工作，但它并没有太多乐趣，因为它可能占用大量空间，并且在更新图形时必须重新导出数据。

b。使用< canvas> 和 getImageData 提取用于测试的图像数据。考虑到你已经失去了IE用户，你可能会考虑使用画布进行渲染。

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

解决方案

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.

这篇关于具有半透明点击切片的HTML / JS / CSS等距网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！