diff options
Diffstat (limited to 'files/zh-cn/games/techniques/2d_collision_detection/index.html')
| -rw-r--r-- | files/zh-cn/games/techniques/2d_collision_detection/index.html | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/files/zh-cn/games/techniques/2d_collision_detection/index.html b/files/zh-cn/games/techniques/2d_collision_detection/index.html new file mode 100644 index 0000000000..dcc688643f --- /dev/null +++ b/files/zh-cn/games/techniques/2d_collision_detection/index.html @@ -0,0 +1,82 @@ +--- +title: 2D collision detection +slug: Games/Techniques/2D_collision_detection +translation_of: Games/Techniques/2D_collision_detection +--- +<div>{{GamesSidebar}}</div><div>{{IncludeSubnav("/en-US/docs/Games")}}</div> + +<div class="summary"> +<p>检测2D游戏中的碰撞算法，依赖于可碰撞物体的形状（例如：矩形与矩形，矩形与圆形，圆形与圆形）。通常情况下，你使用的的简单通用形状，会被称为“hitbox”的实体所覆盖，尽管发生的碰撞并不是像素完美契合的，它看起来也足够好，而且可跨多个实体执行碰撞。本文提供了一系列较为通用的2D游戏中碰撞侦测技术。</p> +</div> + +<h2 id="Axis-Aligned_Bounding_Box">Axis-Aligned Bounding Box</h2> + +<p>碰撞侦测其中一种简单的形式是，在两个轴对齐的矩形之间碰撞 — 这意味着没有旋转。这个算法是确定两个矩形任意４边之间不再有间隔，存在间隔代表没有发生碰撞。</p> + +<pre class="brush: js">var rect1 = {x: 5, y: 5, width: 50, height: 50} +var rect2 = {x: 20, y: 10, width: 10, height: 10} + +if (rect1.x < rect2.x + rect2.width && + rect1.x + rect1.width > rect2.x && + rect1.y < rect2.y + rect2.height && + rect1.height + rect1.y > rect2.y) { + // collision detected! +} + +// filling in the values => + +if (5 < 30 && + 55 > 20 && + 5 < 20 && + 55 > 10) { + // collision detected! +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see a <a href="http://jsfiddle.net/knam8/">live example of Axis-Aligned Bounding Box collision detection</a> on jsFiddle, to illustrate how this code would work in practice. <a href="https://jsfiddle.net/jlr7245/217jrozd/3/">Here is another example without Canvas or external libraries</a>.</p> +</div> + +<h2 id="圆形碰撞">圆形碰撞</h2> + +<p>碰撞测试的另一种形状是两个圆形间的碰撞，该算法是通过获取两个圆心点，并确定圆心距离小于两个圆形的半径和实现的。</p> + +<pre class="brush: js">var circle1 = {radius: 20, x: 5, y: 5}; +var circle2 = {radius: 12, x: 10, y: 5}; + +var dx = circle1.x - circle2.x; +var dy = circle1.y - circle2.y; +var distance = Math.sqrt(dx * dx + dy * dy); + +if (distance < circle1.radius + circle2.radius) { + // collision detected! +}</pre> + +<div class="note"> +<p><strong>Note</strong>: You can see a <a href="http://jsfiddle.net/gQ3hD/2/">live example of Circle collision detection</a> on jsFiddle, to illustrate how this code would work in practice.</p> +</div> + +<h2 id="Separating_Axis_Theorem">Separating Axis Theorem</h2> + +<p>This is a collision algorithm that can detect a collision between any two *convex* polygons. It's more complicated to implement than the above methods but is more powerful. The complexity of an algorithm like this means we will need to consider performance optimization, covered in the next section.</p> + +<p>Implementing SAT is out of scope for this page so see the recommended tutorials below:</p> + +<ol> + <li><a href="http://www.sevenson.com.au/actionscript/sat/">Separating Axis Theorem (SAT) explanation</a></li> + <li><a href="http://www.metanetsoftware.com/technique/tutorialA.html">Collision detection and response</a></li> + <li><a href="http://gamedevelopment.tutsplus.com/tutorials/collision-detection-using-the-separating-axis-theorem--gamedev-169">Collision detection Using the Separating Axis Theorem</a></li> + <li><a href="http://www.codezealot.org/archives/55">SAT (Separating Axis Theorem)</a></li> + <li><a href="http://rocketmandevelopment.com/blog/separation-of-axis-theorem-for-collision-detection/">Separation of Axis Theorem (SAT) for Collision Detection</a></li> +</ol> + +<h2 id="Collision_Performance">Collision Performance</h2> + +<p>While some of these algorithms for collision detection are simple enough to calculate, it can be a waste of cycles to test *every* entity with every other entity. Usually games will split collision into two phases, broad and narrow.</p> + +<h3 id="Broad_Phase">Broad Phase</h3> + +<p>Broad phase should give you a list of entities that *could* be colliding. This can be implemented with a spacial data structure that will give you a rough idea of where the entity exists and what exist around it. Some examples of spacial data structures are Quad Trees, R-Trees or a Spacial Hashmap.</p> + +<h3 id="Narrow_Phase">Narrow Phase</h3> + +<p>When you have a small list of entities to check you will want to use a narrow phase algorithm (like the ones listed above) to provide a certain answer as to whether there is a collision or not.</p> |