브라우저 생존 게임을 AI 에이전트와 스프라이트 툴로 직접 만드시오
TuBrief 편집팀
2026년 8월 8일
0
게임/e스포츠원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
커뮤니티의 다른 글
댓글 (0)
Log in to leave a comment
아직 작성된 글이 없습니다
원본 영상을 바탕으로 AI의 도움을 받아 작성했습니다. 원본 영상이 기준입니다.
Log in to leave a comment
아직 작성된 글이 없습니다
외주에 돈을 쓸 이유가 없다. 캐릭터 애니메이션 외주는 최소 10시간이 걸리고 비용도 500달러를 넘는다. AI 이미지 생성기로 텍스처 아틀라스를 한 번에 뽑아내면 비용을 아낄 수 있다. 16-bit SNES style pixel art 프롬프트를 입력해 단색 배경의 스프라이트 시트를 생성한 뒤, CLI 도구로 투명화 처리를 실행한다.
터미널을 열고 rembg i -m u2net raw_spritesheet.png transparent_spritesheet.png 명령어를 입력해 U2Net 모델로 배경을 지운다. 이어서 magick transparent_spritesheet.png -fuzz 15% -transparent white cleaned_spritesheet.png 명령어로 잔여 백색 픽셀을 정제한다. 마지막으로 magick cleaned_spritesheet.png -crop 32x32 +repage tiles/frame_%02d.png 명령어를 입력해 32x32 픽셀 단위 타일 세트로 분할한다. 1시간이면 프레임 단위 스프라이트 시트가 완성된다.
모바일과 데스크톱 화면 비율이 깨지면 게임을 할 수 없다. 디스플레이 환경에 상관없이 동일한 시야각을 유지하려면 엔진 내부 논리 해상도를 960x540 크기로 고정해야 한다. CSS에서 flexbox와 object-fit: contain 속성을 적용하면 모바일과 데스크톱 화면 비율 왜곡을 막을 수 있다. ResizeObserver API를 도입해 렌더링 깨짐 현상을 원천 차단한다.
마우스 위치를 가상 좌표로 변환하려면 getBoundingClientRect 메서드로 수학적 보정을 거쳐야 한다. 이벤트 리스너 함수 내부에서 캔버스의 실제 경계 좌표를 구한 뒤, 클라이언트 마우스 좌표에서 캔버스 좌상단 오프셋을 뺀다. 이어서 버퍼 해상도 너비를 캔버스 화면 너비로 나눈 스케일링 비율을 곱해 최종 가상 좌표를 계산한다. 이 수식을 적용하면 화면 스케일링 환경에서도 클릭 위치 오차가 생기지 않는다.
단일 터미널에서 Claude Code나 Aider 같은 AI CLI 에이전트를 동시 구동하면 맥락이 끊기고 코드가 충돌한다. 터미널 창을 수직과 수평으로 나누어 메인 게임 로직 에이전트, UI 파이프라인 에이전트, 빌드 테스트 모니터링 세션을 각각 독립된 공간에 상주시킨다. Git Worktree와 프롬프트 파일 분리 구조를 결합하면 에이전트 간 역할 충돌을 막을 수 있다.
독립된 작업 디렉터리를 구축하는 절차는 간단하다. 터미널에서 git worktree add ../agent-engine-worktree -b feature/game-engine 명령어를 입력해 게임 엔진 전용 워크트리를 생성한다. 이어서 git worktree add ../agent-ui-worktree -b feature/canvas-ui 명령어를 실행해 UI 전용 디렉터리를 분리한다. 우측 하단 테스트 패인에서 npm run test -- --watch 명령어를 상시 구동해 실시간 로그를 모니터링하고, 변경 내역을 수동 검증한 후 메인 브랜치로 통합한다. 파일 락 충돌이 완전히 사라진다.
투명 여백이 포함된 64x64 픽셀의 시각 스프라이트 전체를 충돌 범위로 잡으면 캐릭터가 닿지도 않았는데 피격 판정이 난다. 시각적 스프라이트 영역과 실제 물리 엔진이 인식하는 히트박스 영역을 엄격히 분리해 피격체 중심점에 정렬된 축 부합 바운딩 박스를 정의해야 한다. 화면에 수백 마리의 적이 동시에 등장할 때 공간 해싱 알고리즘을 적용하면 시간 복잡도를 대폭 줄일 수 있다.
논리 화면을 60x60 픽셀 단위 격자 셀로 나누는 SpatialHashGrid 클래스를 초기화하고 각 엔티티의 AABB 영역을 삽입한다. 플레이어 클래스 내부에 1000밀리초의 무적 시간 지속 시간을 설정하는 takeDamage 메서드를 구현해 매 프레임 즉사 판정을 방지한다. 개체가 적과 겹쳤을 때 무적 상태 변수를 확인하고 조건에 따라 피해를 적용하면 500개 이상의 동시 연산 환경에서도 안정적인 프레임이 유지된다.