【Flutter&Flame游戏 - 拾叁】碰撞检测 | CollisionCallbacks

最新推荐文章于 2024-05-24 09:58:47 发布

张风捷特烈

最新推荐文章于 2024-05-24 09:58:47 发布

阅读量273

点赞数

文章标签： flutter 游戏 android ios

本文链接：https://blog.csdn.net/qq_30447263/article/details/128618959

版权

theme: cyanosis

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 14 天，点击查看活动详情

前言

这是一套张风捷特烈出品的 Flutter&Flame 系列教程，发布于掘金社区。如果你在其他平台看到本文，可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正，一切以掘金文章版本为准。本系列源码于【toly_game】，如果本系列对你有所帮助，希望点赞支持，本系列文章一览：

第一季完结，谢谢支持 ~

1. 碰撞检测场景搭建

前面我们 矩形域 和 中心点 的包含关系校验是否碰撞，这样会有很大的误差。Flame 中提供了 CollisionCallbacks ，对碰撞检测进行了封装，支持两个形状间的配置检测。本文我们就来认识一下该如何使用这个 mixin 。

为了更好地说明碰撞，这里先用图形进行简单示意，本文将在这个场景的基础上进行测试。如下所示，定义一个 Cilrcle 构件和 Line 构件，其中 Line 的位置可以随着触点的拖动而更新：代码详见【13/01】

如下 TolyGame 中有 Line 和 Circle 两个角色，混入 PanDetector 。覆写 onPanUpdate 方法，在触点更新时，增加 line 的位移。另外目前 Circle 和 Line 两个构件都只是覆写 render 方法，进行绘制而已，没什么要点，代码就不贴了，详见源码。

```dart class TolyGame extends FlameGame with PanDetector{ late Line line; late Circle circle;

@override Future onLoad()async{ circle = Circle(radius: 40, position: size/2); line = Line(lineWidth: 80,position: size/2-Vector2(140,0)); add(circle); add(line); }

@override void onPanUpdate(DragUpdateInfo info) { line.position+=info.delta.global; } } ```

2. 如何让构件支持碰撞检测

如下所示，直线代表 矩形域 ，圆形代表 圆形域 ，当两个区域发成重叠时，则发生碰撞。代码详见【13/02】

首先说明一点：顶层的 TolyGame 需要混入 HasCollisionDetection 才可以支持碰撞检测。

dart class TolyGame extends FlameGame with HasCollisionDetection,PanDetector{

另外，想让某个 Compoment 支持碰撞检测，需要三个步骤：

1. 混入 CollisionCallbacks ：

dart class Circle extends PositionComponent with CollisionCallbacks{

1. 添加检测区域 Hitbox : 这个区域就是代表着当前构建件的命中区域。

```dart late ShapeHitbox hitbox;

@override Future onLoad() async { hitbox = CircleHitbox(); add(hitbox); } ```

3.覆写碰撞检测回调方法：CollisionCallbacks 中有三个碰撞回调的方法，可以监听到碰撞开始、碰撞结束、发生碰撞三个事件。

如下，在 Circle 构件中，覆写 onCollisionStart 方法，当开始发送碰撞时，将圆的颜色置为 blue；碰撞结束时，将圆的颜色置为 white 。

dart @override void onCollisionStart( Set<Vector2> intersectionPoints, PositionComponent other, ) { super.onCollisionStart(intersectionPoints, other); _paint.color = Colors.blue; } @override void onCollisionEnd(PositionComponent other) { super.onCollisionEnd(other); _paint.color = Colors.white; }

3.碰撞形状

其实这样看来，碰撞检测最重要的还是碰撞区域的确定。在 Flame 的 collisions/hitboxes 中只提供了一些常用的形状，比如 圆形 、多边形 、矩形 、屏幕 。感觉还是挺有局限性的，如果能加上 Path 自定义形状就好了。

其中我们在之前已经见识过了 RectangleHitbox ，提供将它的 debugMode 置为 true ，就可以看到边界信息。其实本质上就是为该构件确定一个碰撞检测的区域：

下面我们通过一个案例来测试一下 多边形 和 屏幕边界 的碰撞检测：【13/03】

如下定义一个菱形的 PolygonHitbox ，主要就是根据顶点，确定多边形。这样当一个 CollisionCallbacks 的角色和其碰撞，就可以接收到 onCollisionXXX 的回调。

```dart ---->[Polygon]---- late ShapeHitbox hitbox;

@override Future onLoad() async { hitbox = PolygonHitbox([ Vector2(size.x, size.y/2), Vector2(size.x/2, size.y), Vector2(0, size.y/2), Vector2(size.x/2, 0), ]); add(hitbox); } ```

最后看一下 ScreenHitbox ，它本质上非常简单，就是在最外层添加一个 RectangleHitbox 而已。

总得来说，通过 CollisionCallbacks 实现碰撞的检测，本质就是定义碰撞物的区域。然后根据碰撞的回调处理逻辑而已，其实 CollisionCallbacks 也是比较有局限性的。但相比于之前的 矩形域 和 中心点 的包含关系，可以说上升了一个维度，支持了 域 和 域 之间的碰撞。
本文介绍了一下 Flame 中通过 CollisionCallbacks 实现碰撞检测的方式，下一篇我们将基于这种方式来对前面的案例进行优化。那本文就到这里，明天见 ~

@张风捷特烈 2022.06.07 未允禁转
我的公众号: 编程之王
我的掘金主页 : 张风捷特烈
我的 B站主页 : 张风捷特烈
我的 github 主页 : toly1994328

张风捷特烈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【Flutter&Flame游戏 - 拾叁】碰撞检测 | CollisionCallbacks

theme: cyanosis持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 14 天，点击查看活动详情前言这是一套张风捷特烈出品的 Flutter&Flame 系列教程，发布于掘金社区。如果你在其他平台看到本文，可以根据对于链接移步到掘金中查看。因为文章可能会更新、修正，一切以掘金文章版本为准。本系列源码于【toly_game】，如果本...
复制链接

扫一扫