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

Today I wake up thinking I will implement a feature that I really wanted but couldn't (this is way back when I was trying to build a game using Android 0.6 - yes, that's long time ago)

Here is what I wanted:

• there is a picture of town (preferably can scroll to accommodate bigger picture than screen)
• I can somehow map "clickable regions" (I'm not being that fancy here - just want simple rects) and when I hover, I want to highlight the object (I can live with entire clickable region light up but if I can, I want to show object being lit up, as opposed to entire region show up)

So I started to chat with Chat GPT - it explained to me that it is called "Hotspots" and also walk me through how I can implement this with Phaser 3. It is important to get "pixel perfect" co-ordinate and image (of which remove background to the object that I want to hover, with transparent PNG)

After understanding how it works, I said fine, let me get to work. First I chat with Gemini & Nano Banana to craft few pictures - this was (relatively) easy part. Next, I load up these images in Preview app (I'm using Mac) thinking I should be able to get (x,y) co-ordinate of my mouse and using rectangular selection (which shows width and height), I can do this however it turns out I can't seem to get (x,y) co-ordinate (relative to the loaded picture) that easily.

I paused for a second ... I look up alternative - some old Stack Overflow post says we can do this using Gimp but I want something lightweight and prefer to stick with the tool I have.

So what I end up doing? Go back to Chat GPT, shared my desire to build super simple tool to do this and ~3 min later it spit out the fairly long prompt for me to give to Antigravity. It claim Antigravity can probably one shot this prompt - and here is the best part - it is instruct to build this in single file! (HTML/CSS/JavaScript all in one file)

After ~7 min later, Antigravity ask me to review and wola - it's done. Here is the screenshot of the tool it generated from one super long prompt. Sure, it's not real product quality, sure it's missing bunch of features (like I can't seem to resize the box for now - but I can delete or move so good enough for my purpose)

End result - I got what I needed - quick way to implement "hotspots" over image file that I can scroll - something I couldn't do before so I'm super excited to what this journey to build game with AI will take me to!

Here is a 12-second screencast showing how this works within my game - hover effect might not be that noticeable but that can be easily tweak (also these data are all behind JSON - so I can easily add/remove/modify hotspots data per city data)