HALFTONE HEROES 개발기 1: 포즈 한 장에서 보스전까지, 전투 화면이 바뀐 과정

던전앤파이터처럼 옆으로 진행하면서 적을 두들기는 벨트스크롤 액션 RPG를 만들었어요. 미국 슈퍼히어로 코믹스 그림체에 POW! 같은 의성어가 튀는 게임이고, 브라우저에서 돌아가요. 처음 이름은 첫 영웅 이름을 딴 CHACE였고, 지금은 HALFTONE HEROES예요.

화면은 PixiJS 8, 메뉴는 HTML로 그리고, 캐릭터와 배경 그림은 전부 이미지 생성 API로 만들었어요. 코드는 Claude Code가 썼고 저는 방향을 정하고 화면을 보면서 고칠 곳을 짚었어요. 새벽 1시쯤 시작해서 그날 하루 동안 이어서 작업했어요.

이 1편은 전투 화면이 지금 모습이 되기까지를, 2편은 휴대폰, 온라인 협동, 영웅 4명, UI 개편, 이야기 장면을 다뤄요.

첫 실험: 그림 한 장에서 포즈만 바꾸기

액션 게임은 캐릭터가 펀치도 하고 맞기도 해야 해요. 그런데 이미지 생성은 뽑을 때마다 얼굴과 옷 무늬가 조금씩 달라서, 펀치 그림과 피격 그림을 따로 뽑으면 다른 사람이 돼요.

그래서 기본 자세 한 장을 먼저 만들고, 그 그림을 참고 이미지로 넣어 "포즈만 바꿔 줘"라고 편집하는 방식을 시험했어요.

세 장을 나란히 놓고 보니 얼굴, 옷, 몸 크기, 발 위치가 거의 그대로였어요. 기본 그림 한 장에 58초, 편집 한 장에 100초 안팎이 걸렸어요. 이 결과를 보고 모든 캐릭터를 이 방식으로 만들기로 했어요.

포즈 시트: 영웅과 적을 한 장에

방식이 정해지고 나서는 그림 목록 파일 하나에 캐릭터마다 기본 그림과 포즈 설명을 적고, 명령 한 번으로 위에서부터 차례로 뽑았어요. 이미 만든 그림은 건너뛰어서 중간에 끊겨도 이어서 돌릴 수 있어요.

흰 배경을 지우고 캐릭터만 잘라 낼 때 "원래 캔버스의 어디에 있었는지"를 같이 저장해 둬요. 펀치 그림은 팔이 뻗어 폭이 넓고 점프 그림은 키가 작지만, 같은 캔버스 기준 좌표를 쓰니까 게임에서 포즈를 바꿔 끼워도 발이 같은 선에 서요. 지금 목록은 254장이에요. 캐릭터 기본 그림 16장, 포즈 144장, 아이콘 57장, 배경 11장, 이야기 컷 26장이에요.

첫 전투 화면: 배경에 MARVEL이 박혔어요

시작하고 두 시간쯤 지난 새벽 3시 무렵, 타이틀에서 아지트를 거쳐 스테이지에 들어가 싸우는 한 판이 처음 돌았어요. 켜 보자마자 문제가 보였어요.

빨간 동그라미 친 포스터 두 장에 MARVEL이 그대로 적혀 있어요.

그림체 문구에 "Marvel comic book art style"을 넣었더니, 이미지 모델이 그 단어를 배경 포스터에 글자로 그려 넣은 거예요. 캐릭터 그림에는 안 생겼는데 배경에는 포스터와 간판이 많아서 거기에 박혔어요. 그림체 문구를 이렇게 바꾸고 배경 9장을 다시 뽑았어요.

const BG_STYLE = "American superhero comic book art style, bold black ink outlines, ...";
// + "absolutely no text, no letters, no words, no logos, no posters with writing"

브랜드 글자는 사라졌어요. 다만 맨 위 지금 화면에서도 보이듯 EPOAD PANS 같은 뜻 없는 가짜 네온 글자는 남아 있어요. 이미지 프롬프트에 출판사 이름을 넣지 않는다는 규칙은 프로젝트 설명 파일에 적어 뒀어요.

첫판 화면에서 하나 더 보이는 건 캐릭터끼리 한 자리에 겹쳐 선 모습이에요. 벨트스크롤은 옆으로 가는 게임이지만 화면 위아래로도 걸어요. 그래서 모든 캐릭터에 바닥 위 위치와 높이를 따로 두고, 화면 아래쪽에 선 캐릭터가 앞에 그려지게 했어요. 점프하면 그림자는 바닥에 남고 몸만 올라가요.

타격감과 움직임 다듬기

맞는 순간의 처리는 모두 한 함수에 모았어요. 별 모양 스파크, 강타와 치명타의 충격 링, 의성어, 화면 흔들림, 때린 쪽과 맞은 쪽이 잠깐 멈추는 히트스톱이 한 번에 나가요. 가벼운 타격마다 의성어가 뜨면 화면이 글자로 덮여서 약공격은 18% 확률로만 띄워요.

기능이 다 들어간 뒤에 캐릭터와 적의 움직임이 딱딱 끊긴다는 게 눈에 걸렸어요. 처음엔 포즈 그림을 바로 갈아 끼우는 방식이었거든요. 그래서 달리기 중간 프레임, 공격 전 예비동작, 착지, 대시, 쓰러짐 포즈를 69장 더 뽑고, 포즈가 바뀔 때 이전 그림을 0.03~0.07초 동안 겹쳐 흐리게 사라지게 했어요. 피격만은 겹침 없이 바로 바꿔요. 맞는 순간은 끊겨야 세게 보여서예요.

움직임 검수는 이런 프레임 시트로 했어요. 적을 기절시켜 세워 두고 정해진 키를 친 뒤 60~70ms마다 찍은 프레임을 영웅 주변만 잘라 붙여요. 이 시트로 보고 몇몇 적의 걷기 두 프레임이 거의 같은 것, 솔의 착지 포즈에서 지팡이가 발 아래로 내려간 것, 변이 거인의 쓰러짐 그림에 흰 바닥판이 남은 것을 찾아서 다시 뽑았어요.

버그도 둘 만났어요. 영웅이 가만히 서 있는데 착지 포즈에 갇힌 적이 있었고, 원인은 느린 프레임에서 바닥에 선 몸이 매 프레임 "착지"로 판정된 것이었어요. 또 편집한 포즈 중 일부는 인물이 캔버스 위쪽에 그려져 발이 떠 보였어요. 베라의 달리기 한 프레임은 기본 자세보다 발이 108px 위에 있었어요. 24px 넘게 뜬 포즈는 그만큼 끌어내리게 고쳤어요.

콤보 트리: 연타에서 분기로

처음 콤보는 공격 버튼을 누르면 주먹 3단이 반복되는 식이었어요. 진삼국무쌍처럼 누르는 순서에 따라 갈라지는 콤보가 있으면 좋겠다고 해서 구조를 바꿨어요. 약공격(Z)은 최대 6번까지 이어지고, 도중 아무 때나 강공격(X)을 누르면 그때까지 넣은 약공격 횟수에 맞는 마무리가 나가요.

체이스는 X 하나면 밀쳐 내고, Z X는 띄우기, Z 세 번에 X는 360도 회전 타격, Z 다섯 번에 X는 돌진 후 400% 일격이에요. 표에서 동그라미 친 게 그 마무리예요. 영웅 넷이 각자 이런 표를 하나씩 가지고 있어요.

트리를 바꾸고 나니 빠르게 연타할 때 콤보가 중간에 끊겼어요. 캔슬이 가능해지기 전에 누른 입력을 그 자리에서 읽고 버리고 있었어요. 입력은 실제로 쓸 수 있을 때만 꺼내 쓰게 바꾸고, 누른 입력을 기억하는 시간을 160ms에서 260ms로 늘렸더니 5연타가 끊기지 않고 이어졌어요.

보스전: 예고하고, 멈추고, 쓰러뜨리기

보스는 막마다 한 명씩 셋이에요. 체력 66%와 33%에서 페이즈가 넘어가고, 넘어갈수록 공격 간격이 짧아져요. 모든 광역 공격은 떨어질 자리를 바닥에 먼저 그려 줘요.

적이 공격하기 직전에는 몸이 붉게 물들어요. 철거왕의 땅 내려찍기는 이렇게 붉은 원으로 범위를 보여 주고, 돌진은 한 줄짜리 레인을 먼저 그려요. 벽에 부딪히면 잠깐 슈퍼아머가 풀려서 그때가 때릴 기회예요.

보스가 처음 나올 때는 WARNING 배너 뒤에 대사가 나오고, 대사가 끝날 때까지 싸움이 멈춰요. 이 동안은 영웅 입력, 적 AI가 멈추고 공격도 아무것도 맞히지 않아요. 맞는 처리를 한 함수에 모아 둔 덕에 이 부분은 한 줄로 막을 수 있었어요.

3막 보스 오버로드는 레인을 가로지르는 레이저, 미사일, 발 구르기를 써요. 레이저는 먼저 바닥에 보라색 띠를 깔고, 잠시 뒤 그 띠 전체가 밝게 번쩍이며 맞아요.

보스를 쓰러뜨리면 화면이 노랗게 번쩍이고 느린 화면이 1.3초 동안 걸리면서 K.O! 글자가 떠요.

화면으로 본 지금의 전투

지금 모습을 다시 켜서 찍으면서 눈에 띈 것들을 적어 볼게요.

좋았던 점이에요.

• 포즈 편집 방식이 제 몫을 해요. 공격, 피격, 달리기 포즈가 바뀌어도 얼굴과 옷이 같아서 한 캐릭터로 보여요.
• 예고가 분명해요. 적의 붉은 틴트와 머리 위 느낌표, 보스의 원과 레인이 캡처 한 장만 봐도 어디가 위험한지 알려 줘요.
• 콤보 숫자, 의성어, 충격 링이 코믹스 느낌을 잘 살려요. 같은 기술이라도 치명타는 CRIT! 글자와 큰 링으로 달라 보여요.

아쉬운 점도 있어요.

• 효과가 겹치면 캐릭터가 가려져요. 맨 위 1-1 화면에서 빨간 동그라미 친 곳처럼 스파크, 의성어, 피해 숫자가 한 자리에 몰리면 누가 누구를 치는지 잘 안 보여요.
• 3막 레이저가 터지는 순간에는 바닥 전체가 연보라로 덮여서 캐릭터 윤곽이 흐려져요.
• 배경에 가짜 네온 글자가 아직 남아 있어요.
• 수치는 자동 플레이 봇으로만 맞췄어요. 사람이 처음부터 끝까지 해 본 적은 아직 없어서, 손맛이 실제로 어떤지는 제가 말할 수 없어요.

지금 상태와 남은 것

전투 쪽은 영웅 4명, 영웅마다 약공격 6단과 강공격 마무리 6종, 스킬 6개, 3막 9스테이지, 잡몹 9종, 보스 3명이 들어가 있어요. 공개는 하지 않았어요.

남은 것은 사람이 직접 해 보는 밸런스 확인, 효과가 겹칠 때 캐릭터가 묻히는 문제, 배경의 가짜 글자예요. 휴대폰 조작, 온라인 협동, 영웅 4명과 성장, 목업 같던 UI를 다시 그린 과정, 이야기 장면의 얼굴 고정은 2편에 이어서 적었어요.