I solved one of my major pain point during my game development with AI (Chat GPT + Antigravity)

Source: Dev.to

Background

I was trying to build a game using Android 0.6 (a long time ago) and hit a major pain point: I needed a way to display a large town picture that could be scrolled and to define simple rectangular “clickable regions” (hotspots). When the mouse hovered over a region, I wanted the object to be highlighted—ideally just the object, but lighting up the whole region would be acceptable.

Goal

• Display a scrollable image larger than the screen.
• Define rectangular hotspots on the image.
• Highlight the object (or the whole region) on mouse hover.
• Obtain pixel‑perfect coordinates for each hotspot.

Initial Attempts

I first tried to get the (x, y) coordinates by loading the images in macOS Preview and using its rectangular selection tool. Unfortunately, Preview does not provide the coordinates relative to the image, so this approach failed.

I considered using GIMP (as suggested by an old Stack Overflow post) but wanted a lightweight solution that worked with the tools I already had.

Using ChatGPT

I asked ChatGPT for a solution. It introduced the concept of hotspots and walked me through implementing them with Phaser 3, emphasizing the need for transparent PNGs to achieve pixel‑perfect detection.

Building a Simple Tool with Antigravity

To create a quick editor for defining hotspots, I turned back to ChatGPT and asked for a prompt that could be fed to Antigravity. Within minutes, Antigravity generated a single‑file HTML/CSS/JavaScript tool that lets me:

• Load an image.
• Draw rectangular boxes (hotspots) on it.
• Move or delete boxes.

The tool lacks some polish (e.g., resizing boxes isn’t supported yet), but it was sufficient for my immediate needs.

Result

Using the generated tool, I produced a JSON file containing hotspot data for each city in my game. The final implementation allows:

• Scrolling over a large town image.
• Hovering to highlight hotspots (the effect can be tweaked).
• Easy addition, removal, or modification of hotspots via the JSON data.

Below is a short screencast (12 seconds) demonstrating the hover effect within the game. The effect is subtle but can be adjusted as needed.