diff --git a/docs/06 In Practice/2D-Game/05 Collisions/02 Collision detection.md b/docs/06 In Practice/2D-Game/05 Collisions/02 Collision detection.md index 5813e79..da55475 100644 --- a/docs/06 In Practice/2D-Game/05 Collisions/02 Collision detection.md +++ b/docs/06 In Practice/2D-Game/05 Collisions/02 Collision detection.md @@ -1,7 +1,175 @@ # 碰撞检测 -**暂无翻译** +| 原文 | [Collision detection](https://learnopengl.com/#!In-Practice/2D-Game/Collisions/Collision-detection) | +| ---- | ---------------------------------------- | +| 作者 | JoeydeVries | +| 翻译 | [aillieo](https://github.com/aillieo) | +| 校对 | 暂无 | -这篇教程暂时还没有进行翻译，您可以先阅读[原文](https://learnopengl.com/#!In-Practice/2D-Game/Collisions/Collision-resolution)，或经常来刷新看看是否有更新的进展。当然，我们更欢迎您在[GitHub上](https://github.com/LearnOpenGL-CN/LearnOpenGL-CN)认领翻译这篇文章，帮助我们完善这个教程系列。 +当试图判断两个物体之间是否有碰撞发生时，我们通常不使用物体本身的数据，因为这些物体常常会很复杂，这将导致碰撞检测变得很复杂。正因这一点，使用**重叠**在物体上的更简单的外形（通常有较简单明确的数学定义）来进行碰撞检测成为常用的方法。我们基于这些简单的外形来检测碰撞，这样代码会变得更简单且节省了很多性能。这些碰撞外形例如圆、球体、长方形和立方体等，与拥有上百个三角形的网格相比简单了很多。 - \ No newline at end of file +虽然它们确实提供了更简单更高效的碰撞检测算法，但这些简单的碰撞外形拥有一个共同的缺点，这些外形通常无法完全包裹物体。产生的影响就是当检测到碰撞时，实际的物体并没有真正的碰撞。必须记住的是这些外形仅仅是真实外形的近似。 + + +## AABB - AABB 碰撞 + +AABB代表的是与坐标轴对齐的边界框(bounding box)，边界框是指与场景基础坐标轴（2D中的是x和y轴）对齐的长方形的碰撞外形。与坐标轴对齐意味着这个长方形没有经过旋转并且它的边线和场景中基础坐标轴平行（例如，左右边线和y轴平行）。这些边界框总是和场景的坐标轴平行，这使得所有的计算都变得更简单。下边是我们用一个AABB包裹一个球对象（物体）： + +![](../../../img/06/Breakout/05/02/collisions_ball_aabb.png) + +Breakout中几乎所有的物体都是基于长方形的物体，因此很理所应当地使用与坐标系对齐的边界框来进行碰撞检测。这就是我们接下来要做的。 + +有多种方式来定义与坐标轴对齐的边界框。其中一种定义AABB的方式是获取左上角点和右下角点的位置。我们定义的GameObject类已经包含了一个左上角点位置（它的Position vector）并且我们可以通过把左上角点的矢量加上它的尺寸（Position + Size）很容易地计算出右下角点。每个GameObject都包含一个AABB我们可以高效地使用它们碰撞。 + +那么我们如何判断碰撞呢？当两个碰撞外形进入对方的区域时就会发生碰撞，例如定义了第一个物体的碰撞外形以某种形式进入了第二个物体的碰撞外形。对于AABB来说很容易判断，因为它们是与坐标轴对齐的：对于每个轴我们要检测两个物体的边界在此轴向是否有重叠。因此我们只是简单地检查两个物体的水平边界是否重合以及垂直边界是否重合。如果水平边界**和**垂直边界都有重叠那么我们就检测到一次碰撞。 + +![](../../../img/06/Breakout/05/02/collisions_overlap.png) + +将这一概念转化为代码也是很直白的。我们对两个轴都检测是否重叠，如果都重叠就返回碰撞： + + +```c++ +GLboolean CheckCollision(GameObject &one, GameObject &two) // AABB - AABB collision +{ + // x轴方向碰撞？ + bool collisionX = one.Position.x + one.Size.x >= two.Position.x && + two.Position.x + two.Size.x >= one.Position.x; + // y轴方向碰撞？ + bool collisionY = one.Position.y + one.Size.y >= two.Position.y && + two.Position.y + two.Size.y >= one.Position.y; + // 只有两个轴向都有碰撞时才碰撞 + return collisionX && collisionY; +} +``` + +我们检查第一个物体的最右侧是否大于第二个物体的最左侧**并且**第二个物体的最右侧是否大于第一个物体的最左侧；垂直的轴向与此相似。如果您无法顺利地将这一过程可视化，可以尝试在纸上画边界线/长方形来自行判断。 + +为更好地组织碰撞的代码，我们在Game类中加入一个额外的函数： + + +```c++ +class Game +{ + public: + [...] + void DoCollisions(); +}; +``` + +我们可以使用DoCollisions来检查球与关卡中的砖块是否发生碰撞。如果检测到碰撞，就将砖块的Destroyed属性设为true，此举会停止关卡中对此砖块的渲染。 + +```c++ +void Game::DoCollisions() +{ + for (GameObject &box : this->Levels[this->Level].Bricks) + { + if (!box.Destroyed) + { + if (CheckCollision(*Ball, box)) + { + if (!box.IsSolid) + box.Destroyed = GL_TRUE; + } + } + } +} +``` + +接下来我们需要更新Game的Update函数： + + +```c++ +void Game::Update(GLfloat dt) +{ + // 更新对象 + Ball->Move(dt, this->Width); + // 检测碰撞 + this->DoCollisions(); +} +``` + +此时如果我们运行代码，球会与每个砖块进行碰撞检测，如果砖块不是实心的，则表示砖块被销毁。如果运行游戏以下是你会看到的： + + + +虽然碰撞检测确实生效，但并不是非常准确，因为球会在不直接接触到大多数砖块时与它们发生碰撞。我们来实现另一种碰撞检测技术。 + +## AABB - 圆碰撞检测 + +由于球是一个圆形的物体，AABB或许不是球的最佳碰撞外形。碰撞的代码中将球视为长方形框，因此常常会出现球碰撞了砖块但此时球精灵还没有接触到砖块。 + +![](../../../img/06/Breakout/05/02/collisions_ball_aabb_touch.png) + +使用圆形碰撞外形而不是AABB来代表球会更合乎常理。因此我们在球对象中包含了Radius变量，为了定义圆形碰撞外形，我们需要的是一个位置矢量和一个半径。 + +![](../../../img/06/Breakout/05/02/collisions_circle.png) + + +这意味着我们不得不修改检测算法，因为当前的算法只适用于两个AABB的碰撞。检测圆和AABB碰撞的算法会稍稍复杂，关键点如下：我们会找到AABB上距离圆最近的一个点，如果圆到这一点的距离小于它的半径，那么就产生了碰撞。 + +难点在于获取AABB上的最近点\(\bar{P}\)。下图展示了对于任意的AABB和圆我们如何计算该点： + +![](../../../img/06/Breakout/05/02/collisions_aabb_circle.png) + + +首先我们要获取球心\(\bar{C}\)与AABB中心\(\bar{B}\)的矢量差\(\bar{D}\)。接下来用AABB的半边长(half-extents)\(w\)和\(\bar{h}\)来限制(clamp)矢量\(\bar{D}\)。长方形的半边长是指长方形的中心到它的边的距离；简单的说就是它的尺寸除以2。这一过程返回的是一个总是位于AABB的边上的位置矢量（除非圆心在AABB内部）。 + + +!!! Important + + 限制运算把一个值**限制**在给定范围内，并返回限制后的值。通常可以表示为： + + ``` + float clamp(float value, float min, float max) { + return std::max(min, std::min(max, value)); + } + ``` + + 例如，值42.0f被限制到6.0f和3.0f之间会得到6.0f；而4.20f会被限制为4.20f。 + 限制一个2D的矢量表示将其x和y分量都限制在给定的范围内。 + + + +这个限制后矢量\(\bar{P}\)就是AABB上距离圆最近的点。接下来我们需要做的就是计算一个新的差矢量\(\bar{D'}\)，它是圆心\(\bar{C}\)和\(\bar{P}\)的差矢量。 + +![](../../../img/06/Breakout/05/02/collisions_aabb_circle_radius_compare.png) + + +既然我们已经有了矢量\(\bar{D'}\)，我们就可以比较它的长度和圆的半径以判断是否发生了碰撞。 + + +这一过程通过下边的代码来表示： + +```c++ +GLboolean CheckCollision(BallObject &one, GameObject &two) // AABB - Circle collision +{ + // 获取圆的中心 + glm::vec2 center(one.Position + one.Radius); + // 计算AABB的信息（中心、半边长） + glm::vec2 aabb_half_extents(two.Size.x / 2, two.Size.y / 2); + glm::vec2 aabb_center( + two.Position.x + aabb_half_extents.x, + two.Position.y + aabb_half_extents.y + ); + // 获取两个中心的差矢量 + glm::vec2 difference = center - aabb_center; + glm::vec2 clamped = glm::clamp(difference, -aabb_half_extents, aabb_half_extents); + // AABB_center加上clamped这样就得到了边界框上距离圆最近的点closest + glm::vec2 closest = aabb_center + clamped; + // 获得圆心center和最近点closest的矢量并判断是否 length <= radius + difference = closest - center; + return glm::length(difference) < one.Radius; +} +``` + + +我们创建了CheckCollision的一个重载函数用于专门处理一个BallObject和一个GameObject的情况。因为我们并没有在对象中保存碰撞外形的信息，因此我们必须为其计算：首先计算球心，然后是AABB的半边长及中心。 + +使用这些碰撞外形的参数，我们计算出difference\(\bar{D}\)然后得到限制后的值clamped，并与AABB中心相加得到closest\(\bar{P}\)。然后计算出center和closest的矢量差\(\bar{D'}\)并返回两个外形是否碰撞。 + +之前我们调用CheckCollision时将球对象作为其第一个参数，因此现在CheckCollision的重载变量会自动生效，我们无需修改任何代码。现在的结果会比之前的碰撞检测算法更准确。 + + + + +看起来生效了，但仍缺少一些东西。我们准确地检测了所有碰撞，但碰撞并没有对球产生任何反作用。我们需要在碰撞时产生一些**反作用**，例如当碰撞发生时，更新球的位置和/或速度。这将是[下一个](./03 Collision resolution.md)教程的主题。 \ No newline at end of file diff --git a/docs/06 In Practice/2D-Game/05 Collisions/03 Collision resolution.md b/docs/06 In Practice/2D-Game/05 Collisions/03 Collision resolution.md index eb51c36..86f7c64 100644 --- a/docs/06 In Practice/2D-Game/05 Collisions/03 Collision resolution.md +++ b/docs/06 In Practice/2D-Game/05 Collisions/03 Collision resolution.md @@ -1,7 +1,266 @@ # 碰撞处理 -**暂无翻译** +| 原文 | [Collision resolution](https://learnopengl.com/#!In-Practice/2D-Game/Collisions/Collision-resolution) | +| ---- | ---------------------------------------- | +| 作者 | JoeydeVries | +| 翻译 | [aillieo](https://github.com/aillieo) | +| 校对 | 暂无 | -这篇教程暂时还没有进行翻译，您可以先阅读[原文](https://learnopengl.com/#!In-Practice/2D-Game/Collisions/Collision-resolution)，或经常来刷新看看是否有更新的进展。当然，我们更欢迎您在[GitHub上](https://github.com/LearnOpenGL-CN/LearnOpenGL-CN)认领翻译这篇文章，帮助我们完善这个教程系列。 +上个教程的最后，我们得到了一种有效的碰撞检测方案。但是球对检测到的碰撞不会有反作用；它仅仅是径直穿过所有的砖块。我们希望球会从撞击到的砖块**反弹**。此教程将讨论如何使用AABB-圆碰撞方案实现这项称为碰撞处理 (collision resolution)的功能。 + +当碰撞发生时，我们希望出现两个现象：重新定位球，以免它进入另一个物体，其次是改变球的速度方向，使它看起来像是物体的反弹。 + + +### 碰撞重定位 + +为了把球对象定位到碰撞的AABB的外部，我们必须明确球侵入碰撞框的距离。为此我们要回顾上一节教程中的示意图： + +![](../../../img/06/Breakout/05/03/collisions_aabb_circle_resolution.png) + + +此时球少量进入了AABB，所以检测到了碰撞。我们现在希望将球从移出AABB的外形使其仅仅碰触到AABB，像是没有碰撞一样。为了确定需要将球从AABB中移出多少距离，我们需要找回矢量\(\bar{R}\)，它代表的是侵入AABB的程度。为得到\(\bar{R}\)我们用球的半径减去\(\bar{V}\)。矢量\(\bar{V}\)是最近点\(\bar{P}\)和球心\(\bar{C}\)的差矢量。 + + +有了\(\bar{R}\)之后我们将球的位置偏移\(\bar{R}\)就将球直接放置在与AABB紧邻的位置；此时球已经被重定位到合适的位置。 + + +### 碰撞方向 + + +下一步我们需要确定碰撞之后如何更新球的速度。对于Breakout我们使用以下规则来改变球的速度： + + +1. 如果球撞击AABB的右侧或左侧，它的水平速度（x）将会反转。 + +2. 如果球撞击AABB的上侧或下侧，它的垂直速度（y）将会反转。 + + +但是如何判断球撞击AABB的方向呢？解决这一问题有很多种方法，其中之一是对于每个砖块使用4个AABB而不是1个AABB，并把它们放置到砖块的每个边上。使用这种方法我们可以确定被碰撞的是哪个AABB和哪个边。但是有一种使用点乘(dot product)的更简单的方法。 + +您或许还记得[变换](../../../01 Getting started/07 Transformations.md)教程中点乘可以得到两个正交化的矢量的夹角。如果我们定义指向北、南、西和东的四个矢量，然后计算它们和给定矢量的夹角会怎么样？由这四个方向矢量和给定的矢量点乘积的结果中的最高值（点乘积的最大值为`1.0f`，代表`0`度角）即是矢量的方向。 + + +这一过程如下代码所示： + + +```c++ +Direction VectorDirection(glm::vec2 target) +{ + glm::vec2 compass[] = { + glm::vec2(0.0f, 1.0f), // 上 + glm::vec2(1.0f, 0.0f), // 右 + glm::vec2(0.0f, -1.0f), // 下 + glm::vec2(-1.0f, 0.0f) // 左 + }; + GLfloat max = 0.0f; + GLuint best_match = -1; + for (GLuint i = 0; i < 4; i++) + { + GLfloat dot_product = glm::dot(glm::normalize(target), compass[i]); + if (dot_product > max) + { + max = dot_product; + best_match = i; + } + } + return (Direction)best_match; +} +``` + + +此函数比较了target矢量和compass数组中各方向矢量。compass数组中与target角度最接近的矢量，即是返回给函数调用者的Direction。这里的Direction是一个Game类的头文件中定义的枚举类型： + +```c++ +enum Direction { + UP, + RIGHT, + DOWN, + LEFT +}; +``` + + +既然我们已经知道了如何获得\(\bar{R}\)以及如何判断球撞击AABB的方向，我们开始编写碰撞处理的代码。 + + +### AABB - 圆碰撞检测 + + +为了计算碰撞处理所需的数值我们要从碰撞的函数中获取更多的信息而不只只是一个true或false，因此我们要返回一个包含更多信息的tuple，这些信息即是碰撞发生时的方向及差矢量（\(\bar{R}\)）。你可以在头文件中找到tuple。 + + +为了更好组织代码，我们把碰撞相关的数据使用typedef定义为Collision： + +```c++ +typedef std::tuple Collision; +``` + +接下来我们还需要修改CheckCollision函数的代码，使其不仅仅返回true或false而是还包含方向和差矢量： + +```c++ +Collision CheckCollision(BallObject &one, GameObject &two) // AABB - AABB 碰撞 +{ + [...] + if (glm::length(difference) <= one.Radius) + return std::make_tuple(GL_TRUE, VectorDirection(difference), difference); + else + return std::make_tuple(GL_FALSE, UP, glm::vec2(0, 0)); +} +``` + +Game类的DoCollision函数现在不仅仅只检测是否出现了碰撞，而且在碰撞发生时会有适当的动作。此函数现在会计算碰撞侵入的程度（如本教程一开始计时的示意图中所示）并且基于碰撞方向使球的位置矢量与其相加或相减。 + + +```c++ +void Game::DoCollisions() +{ + for (GameObject &box : this->Levels[this->Level].Bricks) + { + if (!box.Destroyed) + { + Collision collision = CheckCollision(*Ball, box); + if (std::get<0>(collision)) // 如果collision 是 true + { + // 如果砖块不是实心就销毁砖块 + if (!box.IsSolid) + box.Destroyed = GL_TRUE; + // 碰撞处理 + Direction dir = std::get<1>(collision); + glm::vec2 diff_vector = std::get<2>(collision); + if (dir == LEFT || dir == RIGHT) // 水平方向碰撞 + { + Ball->Velocity.x = -Ball->Velocity.x; // 反转水平速度 + // 重定位 + GLfloat penetration = Ball->Radius - std::abs(diff_vector.x); + if (dir == LEFT) + Ball->Position.x += penetration; // 将球右移 + else + Ball->Position.x -= penetration; // 将球左移 + } + else // 垂直方向碰撞 + { + Ball->Velocity.y = -Ball->Velocity.y; // 反转垂直速度 + // 重定位 + GLfloat penetration = Ball->Radius - std::abs(diff_vector.y); + if (dir == UP) + Ball->Position.y -= penetration; // 将球上移 + else + Ball->Position.y += penetration; // 将球下移 + } + } + } + } +} +``` + +不要被函数的复杂度给吓到，因为它仅仅是我们目前为止的概念的直接转化。首先我们会检测碰撞如果发生了碰撞且砖块不是实心的那么就销毁砖块。然后我们从tuple中获取到了碰撞的方向dir以及表示\(\bar{V}\)的差矢量diff_vector，最终完成碰撞处理。 + + +我们首先检查碰撞方向是水平还是垂直，并据此反转速度。如果是水平方向，我们从diff_vector的x分量计算侵入量RR并根据碰撞方向用球的位置矢量加上或减去它。垂直方向的碰撞也是如此，但是我们要操作各矢量的y分量。 + + +现在运行你的应用程序，应该会向你展示一套奏效的碰撞方案，但可能会很难真正看到它的效果，因为一旦球碰撞到了一个砖块就会弹向底部并永远丢失。我们可以通过处理玩家挡板的碰撞来修复这一问题。 + +## 玩家 - 球碰撞 + + +球和玩家之间的碰撞与我们之前讨论的碰撞稍有不同，因为这里应当基于撞击挡板的点与（挡板）中心的距离来改变球的水平速度。撞击点距离挡板的中心点越远，则水平方向的速度就会越大。 + + +```c++ +void Game::DoCollisions() +{ + [...] + Collision result = CheckCollision(*Ball, *Player); + if (!Ball->Stuck && std::get<0>(result)) + { + // 检查碰到了挡板的哪个位置，并根据碰到哪个位置来改变速度 + GLfloat centerBoard = Player->Position.x + Player->Size.x / 2; + GLfloat distance = (Ball->Position.x + Ball->Radius) - centerBoard; + GLfloat percentage = distance / (Player->Size.x / 2); + // 依据结果移动 + GLfloat strength = 2.0f; + glm::vec2 oldVelocity = Ball->Velocity; + Ball->Velocity.x = INITIAL_BALL_VELOCITY.x * percentage * strength; + Ball->Velocity.y = -Ball->Velocity.y; + Ball->Velocity = glm::normalize(Ball->Velocity) * glm::length(oldVelocity); + } +} + +``` + +在我们完成了球和各砖块的碰撞检测之后，我们来检测球和玩家挡板是否发生碰撞。如果有碰撞（并且球不是被固定在挡板上）我们要计算球的中心与挡板中心的距离和挡板的半边长的百分比。之后球的水平速度会依据它撞击挡板的点到挡板中心的距离来更新。除了更新水平速度之外我们还需要反转它的y方向速度。 + +注意旧的速度被存储为oldVelocity。之所以要存储旧的速度是因为我们只更新球的速度矢量中水平方向的速度并保持它的y速度不变。这将意味着矢量的长度会持续变化，其产生的影响是如果球撞击到挡板的边缘则会比撞击到挡板中心有更大(也因此更强)的速度矢量。为此新的速度矢量会正交化然后乘以旧速度矢量的长度。这样一来，球的力量和速度将总是一一致的，无论它撞击到挡板的哪个地方。 + + +### 粘板 + + +无论你有没有注意到，但当运行代码时，球和玩家挡板的碰撞处理仍旧有一个大问题。以下的视频清楚地展示了将会出现的现象： + + + + +这种问题称为粘板问题(sticky paddle issue)，出现的原因是玩家挡板以较高的速度移向球，导致球的中心进入玩家挡板。由于我们没有考虑球的中心在AABB内部的情况，游戏会持续试图对所有的碰撞做出响应，当球最终脱离时，已经对`y`向速度翻转了多次，以至于无法确定球在脱离后是向上还是向下运动。 + + +我们可以引入一个小的特殊处理来很容易地修复这种行为，这个处理之所以成为可能是基于我们可以假设碰撞总是发生在挡板顶部的事实。我们总是简单地返回正的y速度而不是反转y速度，这样当它被卡住时也可以立即脱离。 + + +```c++ + //Ball->Velocity.y = -Ball->Velocity.y; +Ball->Velocity.y = -1 * abs(Ball->Velocity.y); +``` + +如果你足够仔细就会觉得这一影响仍然是可以被注意到的，但是我个人将此方法当作一种可接受的折衷处理。 + + +### 底部边界 + +与经典的Breakout内容相比唯一缺少的就是失败条件了，失败会重置关卡和玩家。在Game类的Update函数中，我们要检查球是否接触到了底部边界，如果接触到就重置游戏。 + + +```c++ +void Game::Update(GLfloat dt) +{ + [...] + if (Ball->Position.y >= this->Height) // 球是否接触底部边界？ + { + this->ResetLevel(); + this->ResetPlayer(); + } +} +``` + + +ResetLevel和ResetPlayer函数直接重新加载关卡并重置对象的各变量值为原始的值。现在游戏看起来应该是这样的： + + + +就是这样了，我们创建完成了一个有相似机制的经典Breakout游戏的复制版。这里你可以找到Game类的源代码：[header](https://learnopengl.com/code_viewer.php?code=in-practice/breakout/game_collisions.h)，[code](https://learnopengl.com/code_viewer.php?code=in-practice/breakout/game_collisions)。 + +## 一些注意事项 + +在视频游戏的发展过程中，碰撞检测是一个困难的话题甚至可能是最大的挑战。大多数的碰撞检测和处理方案是和物理引擎合并在一起的，正如多数现代的游戏中看到的那样。我们在Breakout游戏中使用的碰撞方案是一个非常简单的方案并且是专门给这类游戏所专用的。 + + +需要强调的是这类碰撞检测和处理方式是不完美的。它只能计算每帧内可能发生的碰撞并且只能计算在该时间步时物体所在的各位置；这意味着如果一个物体拥有一个很大的速度以致于在一帧内穿过了另一个物体，它将看起来像是从来没有与另一个物体碰撞过。因此如果出现掉帧或出现了足够高的速度，这一碰撞检测方案将无法应对。 + + +（我们使用的碰撞方案）仍然会出现这几个问题： + +- 如果球运动得足够快，它可能在一帧内完整地穿过一个物体，而不会检测到碰撞。 + + +- 如果球在一帧内同时撞击了一个以上的物体，它将会检测到两次碰撞并两次反转速度；这样不改变它的原始速度。 + + +- 撞击到砖块的角时会在错误的方向反转速度，这是因为它在一帧内穿过的距离会引发VectorDirection返回水平方向还是垂直方向的差别。 + + +但是，本教程目的在于教会读者们图形学和游戏开发的基础知识。因此，这里的碰撞方案可以服务于此目的；它更容易理解且在正常的场景中可以较好地运作。需要记住的是存在有更好的（更复杂）碰撞方案，在几乎所有的场景中都可以很好地运作（包括可移动的物体）如分离轴定理(separating axis theorem)。 + + +值得庆幸的是，有大量实用并且常常很高效的物理引擎（使用时间步无关的碰撞方案）可供您在游戏中使用。如果您希望在这一系统中有更深入的探索或需要更高级的物理系统又不理解其中的数学机理，[Box2D](http://box2d.org/about/)是一个实现了物理系统和碰撞检测的可以用在您的应用程序中的完美的2D物理库。 - \ No newline at end of file diff --git a/docs/img/06/Breakout/05/02/collisions.mp4 b/docs/img/06/Breakout/05/02/collisions.mp4 new file mode 100644 index 0000000..f8af93b Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions.mp4 differ diff --git a/docs/img/06/Breakout/05/02/collisions_aabb_circle.png b/docs/img/06/Breakout/05/02/collisions_aabb_circle.png new file mode 100644 index 0000000..b57284b Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_aabb_circle.png differ diff --git a/docs/img/06/Breakout/05/02/collisions_aabb_circle_radius_compare.png b/docs/img/06/Breakout/05/02/collisions_aabb_circle_radius_compare.png new file mode 100644 index 0000000..51291b8 Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_aabb_circle_radius_compare.png differ diff --git a/docs/img/06/Breakout/05/02/collisions_ball_aabb.png b/docs/img/06/Breakout/05/02/collisions_ball_aabb.png new file mode 100644 index 0000000..74d53dd Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_ball_aabb.png differ diff --git a/docs/img/06/Breakout/05/02/collisions_ball_aabb_touch.png b/docs/img/06/Breakout/05/02/collisions_ball_aabb_touch.png new file mode 100644 index 0000000..602dc68 Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_ball_aabb_touch.png differ diff --git a/docs/img/06/Breakout/05/02/collisions_circle.mp4 b/docs/img/06/Breakout/05/02/collisions_circle.mp4 new file mode 100644 index 0000000..e7ae7ad Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_circle.mp4 differ diff --git a/docs/img/06/Breakout/05/02/collisions_circle.png b/docs/img/06/Breakout/05/02/collisions_circle.png new file mode 100644 index 0000000..8977ef2 Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_circle.png differ diff --git a/docs/img/06/Breakout/05/02/collisions_overlap.png b/docs/img/06/Breakout/05/02/collisions_overlap.png new file mode 100644 index 0000000..67043f6 Binary files /dev/null and b/docs/img/06/Breakout/05/02/collisions_overlap.png differ diff --git a/docs/img/06/Breakout/05/03/collisions_aabb_circle_resolution.png b/docs/img/06/Breakout/05/03/collisions_aabb_circle_resolution.png new file mode 100644 index 0000000..dca19e7 Binary files /dev/null and b/docs/img/06/Breakout/05/03/collisions_aabb_circle_resolution.png differ diff --git a/docs/img/06/Breakout/05/03/collisions_complete.mp4 b/docs/img/06/Breakout/05/03/collisions_complete.mp4 new file mode 100644 index 0000000..3ab6caa Binary files /dev/null and b/docs/img/06/Breakout/05/03/collisions_complete.mp4 differ diff --git a/docs/img/06/Breakout/05/03/collisions_sticky_paddle.mp4 b/docs/img/06/Breakout/05/03/collisions_sticky_paddle.mp4 new file mode 100644 index 0000000..44b5548 Binary files /dev/null and b/docs/img/06/Breakout/05/03/collisions_sticky_paddle.mp4 differ