AI (Chat GPT + Antigravity)로 게임 개발 중 주요 고충을 해결했습니다

Source: Dev.to

배경

나는 오래 전 Android 0.6을 사용해 게임을 만들려고 했는데, 큰 마을 사진을 스크롤할 수 있게 표시하고 간단한 사각형 “클릭 가능한 영역”(핫스팟)을 정의해야 하는 큰 문제에 부딪혔다. 마우스가 영역 위에 올라가면 객체가 강조 표시되길 원했는데—가능하면 객체만, 전체 영역이 밝아지는 것도 괜찮았다.

목표

• 화면보다 큰 이미지를 스크롤 가능하게 표시한다.
• 이미지에 사각형 핫스팟을 정의한다.
• 마우스 오버 시 객체(또는 전체 영역)를 강조 표시한다.
• 각 핫스팟에 대해 픽셀 단위의 정확한 좌표를 얻는다.

초기 시도

먼저 macOS Preview에서 이미지를 열고 사각형 선택 도구를 사용해 (x, y) 좌표를 얻어보려 했다. 안타깝게도 Preview는 이미지에 대한 상대 좌표를 제공하지 않아 이 방법은 실패했다.

예전 Stack Overflow 글에서 제안된 대로 GIMP를 사용할 수도 있겠다고 생각했지만, 이미 가지고 있는 도구들만으로 가볍게 해결하고 싶었다.

ChatGPT 활용

ChatGPT에 해결책을 물어보니 핫스팟 개념을 소개하고 Phaser 3을 이용한 구현 방법을 단계별로 안내해 주었다. 픽셀 단위 감지를 위해 투명 PNG가 필요하다는 점을 강조했다.

Antigravity로 간단한 도구 만들기

핫스팟을 정의할 빠른 에디터를 만들기 위해 다시 ChatGPT에 요청했고, Antigravity에 넣을 프롬프트를 받아냈다. 몇 분 안에 Antigravity가 단일 파일 HTML/CSS/JavaScript 도구를 생성했으며, 이 도구를 통해 다음을 할 수 있다:

• 이미지를 로드한다.
• 이미지 위에 사각형 박스(핫스팟)를 그린다.
• 박스를 이동하거나 삭제한다.

도구는 아직 다소 미완성(예: 박스 크기 조절 미지원)하지만 당장의 필요를 충족시켰다.

결과

생성된 도구를 사용해 게임에 있는 각 도시의 핫스팟 데이터를 담은 JSON 파일을 만들었다. 최종 구현은 다음을 가능하게 한다:

• 큰 마을 이미지를 스크롤한다.
• 마우스 오버 시 핫스팟을 강조 표시한다(효과는 조정 가능).
• JSON 데이터를 통해 핫스팟을 쉽게 추가, 삭제, 수정한다.

아래는 게임 내에서 호버 효과를 보여주는 짧은 스크린캐스트(12 초)이다. 효과는 미묘하지만 필요에 따라 조정할 수 있다.