RPG 보물상자·인벤토리·ESC 메뉴 시스템 구현 — ChatGPT로 게임 아이템 이미지, 충돌 버그 수정까지 (AI RPG 8편)

오늘은 고전 RPG 게임의 백미라고 할 수 있는 보물상자 아이템 획득 이벤트와 메뉴 시스템을 구현해 보겠습니다. 상자를 열고 아이템을 얻는 그 순간, 그리고 ESC를 누르면 펼쳐지는 메뉴 화면. 이게 있어야 비로소 RPG 같아지죠.

이번에 구현한 것들

구체적으로는 다섯 가지를 만들었습니다.

1. 보물상자 시스템 — 맵에 배치하면 열고 닫히는 상자, 아이템 획득
2. 충돌 시스템 고도화 — 물·절벽·일반 장애물 분리, 상자 통과 방지
3. 인벤토리 시스템 — 획득한 아이템이 실제 소지품으로 저장
4. 메뉴 UI — ESC로 여는 4탭 메뉴(상태·아이템·장비·시스템)
5. 아이템 아이콘 — AI로 생성한 이미지를 개별 파일로 분리

RPG 보물상자 시스템 만들기

보물상자는 맵 JSON에 위치와 아이템만 지정하면 자동으로 배치되게 했습니다.

• Enter 키로 상호작용하면 획득 대화가 뜹니다.
• 한 번 열면 열린 상태가 영구 저장됩니다. 게임을 다시 시작해도 열린 상태가 유지돼요.
• 금화는 인벤토리가 아니라 소지금으로 처리합니다.

배치는 이렇게 했습니다. 맵 3에 약초, 맵 4에 물약과 금화 100G, 맵 5에 고대 두루마리.

ChatGPT로 게임 이미지 만들기 — Gemini API는 실패

보물상자를 그리려면 이미지가 필요합니다. 예전처럼 Gemini API로 그려 봤는데 잘 안 되더군요.

• “보물상자”를 요청하면 항상 쿼터뷰(3D)로 생성
• top-down, no isometric을 명시해도 무시
• 레퍼런스 이미지를 줘도 동일
• 학습 데이터의 편향을 극복하지 못하는 느낌

그래서 이번에는 요즘 다시 핫해진 ChatGPT 이미지 생성을 써 봤습니다. 원하는 스타일의 탑뷰 보물상자가 바로 나왔어요.

보물상자 여는 효과음 — 지난 편의 AI 효과음 도구 재활용

상자를 열 때 들리는 효과음도 필요하죠. 지난 7편에서 만든 AI 효과음 생성 도구를 켜고 적절한 프롬프트를 넣어서 만들었습니다. 도구를 한 번 만들어 두니 이런 데서 바로 써먹네요.

보물상자를 통과하는 충돌 버그

이제 게임 속에서 보물상자를 열어 봤습니다. 상자는 잘 열리고, 다시 들어가 봐도 열린 상태가 유지됩니다.

그런데… 이게 무슨 일인가요? 캐릭터가 보물상자를 그냥 통과해 버리는 버그가 있었습니다. 상자를 장애물로 등록하지 않았던 거죠. 그래서 보물상자를 충돌 처리 조건에 추가했습니다. 이참에 충돌 처리 전체를 손봤어요.

• 3종 충돌 분리: 일반 장애물(바위·나무·건물), 물 영역(다른 충돌 크기 적용), 낭떠러지 상단은 별도 처리
• 안전한 교체: 맵 전환 중 충돌 데이터를 교체할 때, 교체가 끝날 때까지 이동 자동 차단. 맵 경계 밖은 항상 충돌
• 상자 충돌 추가: 보물상자도 이동을 막는 장애물로 처리. 플레이어·NPC·상자를 AABB 충돌로 통합

다시 확인해 보니 버그가 사라졌습니다.

아이템 아이콘 — 스프라이트 시트에서 개별 아이콘 분리

이제 아이템 이미지도 만들 차례입니다. 이번에는 한 장에 그려서 나눠 쓰기로 했어요. ChatGPT에 약초·물약·금화·고대 두루마리 네 가지를 한 장에 그려 달라고 했는데, 결과물이 만족스러웠습니다.

그런데 한 장짜리 스프라이트 시트를 게임에서 쓰려니 문제가 생겼습니다.

• CSS로 잘라서 쓰려 했는데 이미지 전체가 표시됨
• 이미지가 정사각형(1254×1254)이라 비율 계산 오류
• 배경이 흰색(불투명)이라 자동 감지도 실패

결국 Python 스크립트로 개별 파일을 분리했습니다. 흰 배경을 투명으로 바꾼 뒤 콘텐츠 영역을 감지하고, 각 아이콘을 정사각형으로 맞춰 여백을 추가해서 herb.png, potion.png, gold_coin.png, ancient_scroll.png로 저장했어요.

ChatGPT 이미지 품질이 좋아진 이유?

결과물이 꽤 좋아서, 이번에 업그레이드됐다는 “덕테이프” 모델 덕분인지 ChatGPT에 물어봤습니다. 대답은 이랬어요. 특정 모델 때문이라고 단정하기보다는, 관련 인프라도 함께 발전해서 품질 상승을 체감하는 것이라고요. 다만 API로 이미지를 만들 때는 체감 효과가 덜할 수 있다고 합니다. 이건 나중에 한 번 직접 확인해 보겠습니다.

ESC 메뉴 시스템 — 상태·아이템·장비·시스템 4탭

이제 메뉴 시스템입니다. ESC 키를 누르면 메뉴가 나타나고, 탭은 네 개입니다.

탭	내용
상태	HP·MP·EXP 바 표시. 파티원 추가에 대비한 구조
아이템	소지 아이템 목록 + 수량. 약초·물약 등 직접 사용 가능. 금화는 소지금으로 별도 표시
장비	투구·갑옷·무기·방어구·기타 슬롯 표시. 장비 시스템은 추후 구현
시스템	음악·효과음 볼륨 조절, 저장·불러오기·타이틀 복귀. 설정은 자동 저장

첫 번째 상태 탭에는 체력 등의 상태가 표시됩니다. 아이템 탭과 장비 탭은 아직 비어 있었고요.

시스템 탭에서는 지금 나오고 있는 배경음악 볼륨을 줄였다가 다시 되돌려 봤습니다. 지난 편에 넣은 사운드 시스템과 바로 연결되는 부분이에요. 메뉴에는 현재 보유 중인 금화도 표시되고, 마우스로도 메뉴를 조작할 수 있습니다.

마지막으로 보물상자에서 약초를 얻은 뒤 메뉴의 아이템 탭을 열어 보니, 약초가 잘 들어가 있는 걸 확인했습니다. 보물상자 → 인벤토리 → 메뉴까지 한 줄로 이어졌어요.

정리 — RPG 보물상자·인벤토리·메뉴 구현에서 배운 것

• 보물상자: 맵 JSON에 위치·아이템만 지정하면 자동 배치. 열린 상태는 영구 저장.
• 게임 이미지 생성: 탑뷰 보물상자는 Gemini API가 계속 쿼터뷰로 그려서 실패, ChatGPT 이미지 생성은 성공.
• 충돌 버그: 새 오브젝트를 넣으면 충돌 조건에도 넣어야 한다. 이참에 3종 충돌 분리 + AABB 통합.
• 스프라이트 시트: AI가 한 장에 그린 아이콘은 CSS로 자르기보다 Python으로 분리하는 게 확실하다.
• ESC 메뉴: 상태·아이템·장비·시스템 4탭. 볼륨 조절은 지난 편 사운드 시스템과 연결.

시리즈 흐름

• 1편: SDXL Turbo로 맵, SAM v3로 지형 마스크. 캐릭터는 실패
• 2편: Gemini(Nano Banana Pro)로 캐릭터 일관성 해결. API 비용 문제
• 3편: 로컬 OpenPose + Canny 파이프라인, 뒷모습만 Gemini 하이브리드
• 4편: LoRA 학습 + SAM3 데이터 증강 + 리터치 자동화. GPU 병목
• 5편: Excalibur.js로 맵 이동 구현 + 시청자 추천 PixelLab 발견
• 6편: Gemini API로 실내맵, Tilewise로 필드맵 타일과 오토타일 경계 처리
• 7편: AI 음원 툴 직접 제작, ACE-Step 배경음악 + AudioGen 효과음을 게임에 적용
• 8편(이번): 보물상자·인벤토리·ESC 메뉴 시스템, ChatGPT로 아이템 이미지 생성

다음에 만들 것들

아직 할 일이 많이 남았습니다.

• 전투 시스템 — 랜덤 인카운터 또는 맵 배치 적과의 턴제 전투
• 장비 시스템 — 장비 착용과 스탯 적용, 메뉴 장비 탭 완성
• 상점 시스템 — NPC 상점에서 골드로 아이템 구매·판매
• 파티 시스템 — 동료 캐릭터 합류, 상태 탭 다중 파티원 표시
• 퀘스트 — 고대 두루마리 등 이벤트 아이템을 활용한 스토리
• 세이브 슬롯 — 다중 세이브 슬롯으로 저장·불러오기 완성

어떤 걸 먼저 보고 싶으신가요? 댓글로 남겨 주시면 그것부터 처리해 보겠습니다.

다음 영상에서 만나요.