我在游戏开发中用 AI（Chat GPT + Antigravity）解决了一个主要痛点

Source: Dev.to

背景

我当时尝试使用 Android 0.6（那是很久以前的事）来制作游戏，却遇到了一个重大痛点：我需要一种方式来显示可以滚动的大城镇图片，并在上面定义简单的矩形“可点击区域”（热点）。当鼠标悬停在某个区域时，我希望该对象被高亮显示——理想情况下只高亮对象本身，但如果整个区域被点亮也可以接受。

目标

• 显示比屏幕更大的可滚动图像。
• 在图像上定义矩形热点。
• 在鼠标悬停时高亮对象（或整个区域）。
• 为每个热点获取像素级精确坐标。

初步尝试

我最初尝试通过在 macOS Preview 中加载图像并使用其矩形选取工具来获取 (x, y) 坐标。遗憾的是，Preview 并不提供相对于图像的坐标，因此这种方法失败了。

我考虑使用 GIMP（正如旧的 Stack Overflow 帖子所建议的），但我想要一个轻量级的解决方案，能够使用我已有的工具。

使用 ChatGPT

我向 ChatGPT 寻求解决方案。它引入了 热点 的概念，并一步步指导我在 Phaser 3 中实现它们，强调需要使用透明 PNG 来实现像素级检测。

用 Antigravity 构建简易工具

为了快速创建一个用于定义热点的编辑器，我再次求助 ChatGPT，要求它提供一个可以喂给 Antigravity 的提示。几分钟后，Antigravity 生成了一个单文件的 HTML/CSS/JavaScript 工具，能够让我：

• 加载图像。
• 在图像上绘制矩形框（热点）。
• 移动或删除框。

该工具缺少一些细节（例如目前不支持调整框的大小），但已经足以满足我的即时需求。

结果

使用生成的工具，我生成了一个包含游戏中每个城市热点数据的 JSON 文件。最终实现的功能包括：

• 在大城镇图像上滚动查看。
• 悬停时高亮热点（效果可以自行微调）。
• 通过 JSON 数据轻松添加、删除或修改热点。

下面是一段短短 12 秒的演示视频，展示了游戏中悬停效果。该效果较为微妙，但可以根据需要进行调整。