物理形体在线编辑器 - 为精灵创建碰撞多边形

快速上手教程

第一步：加载参考图片

打开编辑器页面后，你可以通过图片加载功能将游戏中的精灵图或参考图片导入编辑器作为背景。加载图片后，你可以在画布上清楚地看到需要创建碰撞多边形的物体轮廓。使用鼠标滚轮可以缩放画布，中键拖拽可以平移视图，方便你从不同角度查看物体的各个细节部分。

第二步：放置碰撞顶点

切换到添加模式，沿着物体的轮廓依次点击放置碰撞多边形的顶点。不需要放置过多顶点，大致沿着物体的关键转折点放置即可。放置完成后切换到编辑模式，拖拽各个顶点调整它们的精确位置，使碰撞多边形尽可能贴合物体的实际轮廓。如果某个顶点位置不需要，可以切换到删除模式点击移除。

第三步：生成凸包（可选）

如果你的碰撞检测不需要精确贴合物体轮廓，可以使用凸包自动生成功能。点击凸包生成按钮，编辑器会自动计算出包裹所有已放置顶点的最小凸多边形。凸包形状通常比手动绘制的多边形更简洁，碰撞检测性能也更好。生成凸包后，你仍然可以继续编辑顶点来调整形状。

第四步：检查多边形信息

在编辑过程中，注意查看编辑器显示的多边形信息面板。面板中会显示当前多边形的顶点数量、类型（凸/凹）和面积等信息。如果类型显示为"凹多边形"，某些物理引擎可能无法正确处理，建议使用凸包功能将其转换为凸多边形，或者手动调整顶点位置。确保多边形的顶点顺序为逆时针方向，这是大多数游戏引擎的默认要求。

第五步：选择导出格式并导出

根据你使用的开发框架选择合适的导出格式。如果你使用 Phaser 游戏框架，选择"Phaser 3"格式；如果使用 Unity 引擎，选择"Unity C#"格式；如果使用 Box2D 物理引擎，选择"Box2D"格式；其他情况可以使用通用 JSON 格式。点击导出按钮后，编辑器会生成对应的格式化数据，你可以复制到剪贴板并粘贴到项目代码中。如果需要在设计工具中查看碰撞形状，可以选择 SVG Polygon 格式导出。

第六步：使用撤销重做功能

在编辑过程中，如果误操作或对修改不满意，可以使用 Ctrl+Z 快捷键撤销上一步操作，或通过工具栏按钮进行撤销。同样，Ctrl+Y 或 Ctrl+Shift+Z 可以重做被撤销的操作。编辑器支持多步撤销和重做，让你可以放心大胆地进行各种尝试和调整。