English 中文(简体)
超文本5
原标题:HTML5 Canvas Collision Detection "globalCompositeOperation" performance

上午

在过去几个月里,我一直与“超文本5”Canvas普朗西文保持同步,并且做了大量的工作。

I ve gradually created a number of small games purely for teaching myself the do s and don ts of game development. I am at a point where I am able to carry out basic collision detection, i.e. collisions between circles and platforms (fairly simple for most out there but it felt like quite an achievement when you first get it working, and even better when you understand what is actually going on). I know pixel collision detection is not for every game purely because in many scenarios you can achieve good enough results using the methods discussed above and this method is obviously quite expensive on resources.

But I just had a brainwave (It is more than likely somebody else has thought of this and I am way down the field but I ve googled it and found nothing)....so here goes....

有可能使用/收获“全球竞争行动”的“全球交易”特征。 我最初的想法是将其方法定在“xor”上,然后检查在运河上的所有雕像,以提高透明度,如果发现一个星子,就必须发生碰撞。 权利? 显然,在这一点上,你需要做的是,哪些物体被该钢材所占领,如何作出反应,但你必须做其他技术。

说的是,Sevas已经在现场进行这种碰撞探测,以便在形状重叠时进行探测? 是否有可能继续这样做?

任何想法?

加里安

问题回答

if you are using a Xor mode fullscreen ,the second step is to getImageData of the screen, which is a high cost step, and next step is to find out which objects were involved in the collision.
No need to benchmark : it will be too slow.

I d suggest rather you use the classical bounding box test, then a test on the inner BBOxes of objects, and only after you d go for pixels, locally.
By inner bounding box, i mean a rectangle for which you re sure to be completely inside your object, the reddish part in this example :

“enterography

So use this mixed strategy :
- do a test on the bounding boxes of your objects.
- if there s a collision in between 2 BBoxes, perform an inner bounding box test : we are sure there s a collision if the sprite s inner bboxes overlaps.
- then you keep the pixel-perfect test only for the really problematic cases, and you need only to draw both sprites on a temporary canvas that has the size of the bigger sprite. You ll be able to perform a much much faster getImageData. At this step, you know which objects are involved in the collision.

“entergraph

Notice that you can draw the sprites with a scale, on a smaller canvas, to get faster getImageData at the cost of a lower resolution.
Be sure to disable smoothing, and i think that already a 8X8 canvas should be enough (it depends on average sprite speed in fact. If your sprites are slow, increase the resolution).
That way the data is 8 X 8 X 4 = 256 bytes big and you can keep a good frame-rate.

Rq also that, when deciding how you compute the inner BBox, you can allow a given number of empty pixels to get into that inner BBox, trading accuracy for speed.





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签