我正在为像素网格上的精灵设置动画.我有几个选择,每个选项都有利弊.我有相当多的javascript经验(六年),但没有这种东西.问题是我不知道每个选项会有多贵.
精灵需要渲染得非常快,并且足够便宜,在运行碰撞检测时至少有五个同时运行.
理想情况下,我想在包装器中使用元素网格,从多维数组中为每个元素渲染颜色和alpha通道.
这里的主要专业是我可以运行逐像素碰撞检测并点击精灵的透明部分.使用任何基于图像的精灵,即使我点击透明像素,onClick事件也会触发(我必须做很多工作才能通过透明像素传递点击次数,而且可能非常昂贵).
下一个选项是使用css sprites. css-tricks.com/css-sprites/
这很容易,但如前所述,onClicks不会透过透明像素.我可能会强迫它,但同样,它可能很昂贵,并花费大量时间来表达.
另一种选择是GIF动画,但它们很大,在颜色部门有限,并且很难控制动画.我宁愿不去那里.
然后是html5画布元素,我不太了解它,如果可能的话,我想远离它.我不知道我的代码如何与canvas元素相关,我怀疑它会在长期内做我想做的事情.
那么性能最佳？第一个(也是最优选的)是否可行？或者我错过了什么？
解决方法:
使用今天的浏览器,您可以在桌面计算机上使用定位的像素子元素构建精灵(只要它们不是太复杂或太大),为了安全起见,我将自己限制在大约10个活动精灵中.随着移动设备可能会变得有点慢和笨重,但考虑到你似乎正在设计一个需要精确“onclicks”的游戏,我怀疑这将是一个问题.
您最灵活的选择是使用HTML5 Canvas,因为您已经解决了,但它将涉及更多的JavaScript编码.但是这个系统允许你为你的精灵应用一些效果,并允许你使用getImageData(它允许你读取任何像素偏移的精确像素颜色)使用像素完美检测.
如果你想避免使用全屏画布系统(这可能很棘手)的技术问题和挑战,你实际上可以创建尽可能多的较小的Canvas元素并将它们作为你的精灵移动(具有HTML元素的简易性).然后,您所要做的就是设计绘制动画帧的代码,并使用上述方法(以及单击处理程序和一些代码来计算用户点击相对位置的代码)来判断鼠标是否已命中精灵.到你的画布元素位置).显然,最好以通用方式执行此操作,以便您的代码可以应用于所有精灵:)
要在画布上绘制图像,您可以使用您在问题中提到的spritesheet,并使用支持切片模式的相当灵活的drawImage()方法.这只需要绑定到setInterval或requestAnimationFrame样式的游戏循环.
> https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images
> http://www.playmycode.com/blog/2011/08/building-a-game-mainloop-in-javascript/
更新 – 为那些希望非常优秀的人
如果您希望采用更优化的路线 – 再次涉及更多 – 您可以执行以下操作.如果你有许多精灵只有少数(20或30)帧动画,那么这种方法会有所帮助：
>通过普通DIV为您的精灵提供动力,并使用背景图像精灵表来移动背景位置.这是最佳的,除了将静态图像作为精灵,因为浏览器可以完成所有工作.
>对于每个精灵类型,在一个隐藏的画布元素上绘制您的spritesheet,该元素足以包含整个spritesheet.
>当用户点击其中一个DIV精灵时,将背景位置作为坐标,将其反转,然后您应该知道像素数据所在的canvas元素(通过精灵的类型查找)的位置.
>如果用户点击了精灵,请使用隐藏画布上的getPixelData方法计算出来.
>上面的意思是你只使用了一个canvas元素 – 每个sprite类型,浏览器会为你处理所有的图形,你可以通过onclick获得像素完美的碰撞.
希望以上有道理吗？