p5.collide2D向量版API指南用createVector写出更优雅的碰撞代码【免费下载链接】p5.collide2DA collision detection library for 2D geometry in p5.js项目地址: https://gitcode.com/gh_mirrors/p5/p5.collide2Dp5.collide2D 是一款面向 p5.js 的轻量级 2D 碰撞检测库它的向量版 API 让你直接用createVector()创建的p5.Vector对象作为位置参数让 2D 游戏的碰撞代码更简洁、更不易出错。本指南面向新手用最短的篇幅讲清楚向量版 API 的使用方法、常用函数清单和实用技巧。 p5.collide2D 是什么覆盖 18 类 2D 碰撞检测点、圆、椭圆、矩形、线段、弧、三角形、多边形之间的组合所有碰撞函数都返回true/false拿到结果即可直接驱动游戏逻辑自带collideDebug()调试模式可在屏幕上直观画出碰撞点零外部依赖库体积极小基于 CC BY-NC-SA 4.0 许可证✅ 为什么值得换用向量版碰撞 API传统坐标式调用时像矩形对矩形检测需要一口气传入 8 个参数x, y, width, height, x2, y2, width2, height2。对象一旦动起来参数很容易写错顺序。向量版 API 把位置和尺寸各自打包成一个p5.Vector参数直接砍半const rectA createVector(200, 200); // 矩形A左上角 const sizeA createVector(100, 150); // 矩形A宽高 const rectB createVector(mouseX, mouseY); const sizeB createVector(50, 75); const hit collideRectRectVector(rectA, sizeA, rectB, sizeB);好处很直接参数更少再也不用数第几个参数是 x2 还是 y2天然契合 p5.js 向量系统物体的pos、vel本来就是向量位移计算add、sub、mult可以直接复用面向对象的写法更顺把位置存进对象属性检测时原样传入即可 快速上手向量版三步搞定获取库文件git clone https://gitcode.com/gh_mirrors/p5/p5.collide2D在 HTML 中引入先加载 p5.js 核心库再加载p5.collide2d.js引入方式详见 README.md 中的说明编写检测代码用createVector()创建向量调用带Vector后缀的碰撞函数⚡ 向量版 API 使用规则函数名加 Vector 后缀整个向量版 API 只需记住一句话在函数名后面加上Vector原来填 x/y 的位置改传p5.Vector对象。坐标版向量版collidePointCircle(x, y, cx, cy, d)collidePointCircleVector(p, c, d)collideLineLine(x1, y1, x2, y2, x3, y3, x4, y4)collideLineLineVector(p1, p2, p3, p4)注意直径、宽高、buffer缓冲距离这类标量参数仍是普通数字。内部实现只是把向量的.x/.y拆开调用原函数例如 p5.collide2d.js 中的collidePointPointVector因此行为与原 API 完全一致不影响项目中已有的旧代码。 常用向量版碰撞函数速查表函数名检测内容collidePointPointVector点 vs 点支持 buffer 缓冲collidePointCircleVector点 vs 圆collidePointEllipseVector点 vs 椭圆collidePointRectVector点 vs 矩形collidePointLineVector点 vs 线段collidePointArcVector点 vs 弧collidePointTriangleVector点 vs 三角形collideCircleCircleVector圆 vs 圆collideRectRectVector矩形 vs 矩形collideRectCircleVector矩形 vs 圆collideLineLineVector线 vs 线可返回交点坐标collideLineCircleVector线 vs 圆collideLineRectVector线 vs 矩形collidePointPolyVector点 vs 多边形collideCirclePolyVector圆 vs 多边形collideRectPolyVector矩形 vs 多边形collideLinePolyVector线 vs 多边形collidePolyPolyVector多边形 vs 多边形每个函数在 README.md 的文档中都附有向量用法的注释示例可直接对照学习。 三个典型碰撞检测场景场景一鼠标子弹击中敌人圆 vs 圆const bullet createVector(mouseX, mouseY); const enemy createVector(320, 180); if (collideCircleCircleVector(bullet, 20, enemy, 40)) { // 命中在这里播放命中特效 }场景二按钮点击判定点 vs 矩形const mouse createVector(mouseX, mouseY); if (collidePointRectVector(mouse, buttonPos, buttonSize)) { // 点击了按钮 }场景三两个多边形物体是否重叠多边形 vs 多边形多边形用p5.Vector数组表示顶点检测时直接传入两个数组hit collidePolyPolyVector(polyA, polyB, true);true表示启用完全包含检测详见下文技巧部分。 用 collideDebug 可视化碰撞点写游戏逻辑时最难调试的就是到底哪里撞上了。在setup()中开启调试模式function setup() { collideDebug(true); }collideLineLine、collideLineCircle、collidePolyPoly等函数检测到碰撞时会在碰撞点位置画一个小椭圆定位问题一目了然。 实用技巧与常见问题 FAQ点对线段检测太敏感collidePointLineVector默认 buffer 为 0.1传入更大的值如 0.5可以扩大命中范围。检测形状 vs 三角形怎么办库没有专门的函数把三角形定义为 3 个顶点的向量数组再使用对应的多边形函数即可圆/矩形/线/多边形均可。完全在内部算碰撞吗collideCirclePolyVector与collideRectPolyVector默认不检测形状完全在多边形内部的情况为了省去二次遍历边缘的性能开销末尾传true即可开启。坐标系前提矩形相关函数默认rectMode(CORNER)前两参数是左上角圆和椭圆默认ellipseMode(CENTER)前两参数是中心。性能有差别吗向量版只是对原函数的薄封装参考 p5.collide2d.js 中collidePolyPolyVector的实现几乎没有性能损耗同一个项目里两种风格可以自由混用。 项目文件资料p5.collide2d.js完整库源码18 个向量版函数全部在这里README.md官方文档每个函数均带坐标版与向量版的对照示例package.json库版本与构建脚本信息 写在最后p5.collide2D 的向量版 API 一句话总结函数名加Vector位置参数改用createVector()。它覆盖了点、圆、矩形、线段、弧、三角形、多边形等全部 2D 几何碰撞场景是 p5.js 游戏开发中免费、轻量、零依赖的碰撞检测利器。建议从点 vs 圆或圆 vs 圆场景入手配合collideDebug()调试很快就能搭起自己的第一个碰撞系统 【免费下载链接】p5.collide2DA collision detection library for 2D geometry in p5.js项目地址: https://gitcode.com/gh_mirrors/p5/p5.collide2D创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考