HALFTONE HEROES 개발기 2: 휴대폰, 협동, 영웅 4명, 목업 같던 UI와 이야기 장면

1편에서는 포즈 한 장에서 시작해 보스전까지, 전투 화면이 바뀐 과정을 적었어요. 이 2편은 한 판이 돌아간 뒤에 붙인 것들이에요. 휴대폰 조작, 온라인 협동, 영웅 4명과 성장, UI를 통째로 다시 그린 일, 이야기 장면 순서예요. 모두 1편과 같은 날 하루 안에 이어서 작업했어요.

휴대폰에서도 되게

첫 한 판이 돈 직후 휴대폰으로도 해 보고 싶었어요. 무대가 1280×720 고정이라 화면 크기 맞추기는 이미 되어 있었고, 터치 입력만 새로 필요했어요.

왼쪽 아래 조이스틱, 오른쪽에 공격, 강공격, 점프, 대시 버튼을 두었어요. 스킬 버튼은 아이콘, 쿨타임, 잠금을 직접 보여 줘서 터치 모드에서는 화면 아래 스킬 줄을 숨겨요. 전체화면 버튼은 가로 방향 잠금도 같이 걸고, 폰을 세로로 돌리면 회전 안내가 덮이면서 게임이 자동으로 멈춰요.

메뉴는 세로로 들고 봐도 되게 했어요. 세로 화면에서는 왼쪽 메뉴 레일이 아래쪽 탭 막대로 내려가요.

여기서 걸린 함정이 셋 있었어요. 일시정지 화면 이름이 짝이 안 맞아 메뉴가 안 떴고, 회전 안내가 다른 화면 아래에 깔렸고, 물약 버튼을 넣은 뒤로는 스킬 버튼 옆 빈 곳이 탭을 먹었어요. 셋 다 고친 뒤 가로 폰 화면을 흉내 낸 자동 검사 14개로 계속 확인하고 있어요.

온라인 협동: 호스트가 다 계산해요

다음은 여럿이 같이 하는 모드였어요. 몇 가지 방식 중에 인터넷으로 2~4명이 같이 하는 협동을 골랐어요.

방을 만든 사람의 브라우저가 파티 전체의 전투를 계산하고, 참가자는 조작만 보내요. 참가자는 초당 30번 입력을 보내고, 호스트는 초당 20번 전투원 위치, 포즈, 체력, 투사체를 보내요. 연결은 브라우저끼리 바로 잇는 WebRTC이고, 방 코드는 5자예요.

제일 고민한 건 스파크, 의성어, 효과음을 참가자 화면에 어떻게 보내느냐였어요. 그 호출이 영웅, 적, 스테이지 코드 곳곳에 흩어져 있었거든요. 하나하나 고치지 않고, 호스트의 이펙트와 소리 객체를 감싸서 호출될 때마다 이름과 인자를 기록하게 했어요.

world.fx = recording(world.fx, "fx", sink, { skip: ["update", "afterimage", "clear"] });
world.audio = recording(world.audio, "au", sink, { only: ["play", "playMusic", "duck", "stopMusic"] });

기록은 다음 스냅샷에 실려 가고, 참가자 화면은 같은 이름의 함수를 같은 인자로 다시 불러요. 그래서 새 이펙트를 만들 때 인자를 숫자와 문자열로만 두면 협동에서 따로 할 일이 없어요.

위 두 장은 창 두 개를 띄워서 한쪽에서 방을 만들고 다른 쪽에서 참가해 찍었어요. 한 번은 참가자의 공격이 안 나간 적이 있었는데, 출격할 때 이전 입력을 정리하는 코드가 방금 등록한 입력 처리까지 지우고 있었어요. 순서를 바꿔서 고쳤고, 방 만들기부터 참가자 화면의 대사 상자까지 18개 항목을 자동 검사로 돌려요.

영웅 4명

캐릭터와 공격 스타일도 더 다양했으면 해서 영웅을 하나에서 넷으로 늘렸어요.

• 체이스: 에너지 건틀릿 주먹, 띄우기, 맞으면 반격하는 카운터 자세, 돌진 연타 궁극기.
• 베라: 넓게 여러 번 베는 4단 공격, 무적 돌진 베기, 관통 검기, 회전 베기.
• 렉스: 권총 연사와 발차기, 산탄, 포물선 유탄, 8초 설치 터렛, 누르고 있다 쏘는 헤드샷.
• 솔: 파이어볼, 4명까지 튀는 번개, 순간이동, 빙결, 마나 실드, 메테오.

새 영웅 셋의 그림과 아이콘으로 65장을 더 생성했어요. 렉스는 처음에 쏠 때마다 몸이 뒤로 밀렸는데, 총 쏠 때 밀리는 게 어색해서 반동을 빼고 제자리에서 쏘게 바꿨어요.

성장: 스킬 포인트와 특성

처음 성장은 스탯 포인트를 나누고, 레벨이 되면 저절로 생기는 스킬의 레벨을 올리는 게 전부였어요. 스탯만이 아니라 특성으로 키우고, 패시브와 액티브를 나누고, 액티브는 찍어야 쓰게 하자고 해서 바꿨어요.

레벨업마다 스킬 포인트가 2씩 생기고, 액티브 스킬은 포인트 1을 써서 배워야 쓸 수 있어요. 패시브 특성은 4단계이고, 윗단계는 레벨 조건과 아랫단계에 쓴 포인트를 둘 다 채워야 열려요. 60레벨까지 얻는 포인트는 118인데 스킬을 다 올리려면 126, 특성을 다 올리려면 63이 들어가요. 뭘 먼저 올릴지가 빌드가 되게 일부러 모자라게 잡았어요.

장비는 무기, 방어구, 신발, 반지, 목걸이 5부위에 등급 4단계, 부가 옵션 17종, 전설 장비 일부에 붙는 고유 효과 8종이에요.

장비를 누르면 지금 낀 것과 나란히 놓고, 오르는 수치는 초록 ▲, 내려가는 수치는 빨간 ▼로 보여 줘요. 상점과 가방의 장비 카드에도 같은 ▲, ▼ 표시가 붙어요.

UI 다시 그리기: 목업 같던 화면

기능은 계속 늘었는데 화면이 게임 같지 않았어요. "상용 게임이 아니라 목업 수준 같은데 이유를 모르겠으니 파악해 달라"고 부탁했어요.

느낌으로 고치지 않고 먼저 재는 도구를 만들었어요. 아지트 탭 8개와 창들을 데스크톱과 가로 폰 크기로 찍어서, 같은 줄 카드의 버튼 높이 차이, 한 화면에 쓰인 글자 크기 종류, 글꼴에 없어 네모로 깨지는 기호를 세요. 결과는 버튼 높이 차이 최대 40px, 글자 크기 최대 13가지, 동전 이모지 깨짐, 스킬 탭 설명 글 1,345자, 네 겹까지 겹친 테두리였어요. 위 화면에서 빨간 동그라미 친 네모가 깨진 동전이에요. 제가 짐작한 카드 끝 마감은 원인 중 하나였고, 웹 문서처럼 카드를 쌓은 구조 자체가 문제였어요.

상점 화면 시안을 하나 먼저 만들어 보고 괜찮아서 나머지 화면에 차례로 적용했어요.

재료를 몇 개로 줄였어요. 모서리를 깎은 어두운 패널, 사탕 모양 버튼, 희귀도 색 그림 상자, 칩과 탭 정도이고 글자 크기는 6단계만 써요. 목록을 고르면 오른쪽 상세 패널에서 확인하고 큰 버튼 하나로 실행하는 구조예요. 설명 문단은 물음표 도움말로 옮겼고, 동전은 이모지 대신 생성한 그림을 써요.

다시 잰 결과는 버튼 어긋남 8곳에서 0곳, 두 줄로 넘어간 제목 5개에서 0개, 깨진 기호 1개에서 0개, 화면당 글자 크기 최대 13종에서 4~7종이에요.

이야기 장면과 얼굴 고정

체이스는 대충 붙인 가제목이었어요. 제목과 줄거리, 프롤로그, 엔딩을 같이 설계했고, 제목 후보는 웹에서 검색해 같은 이름의 게임이 있는 것을 뺐더니 HALFTONE HEROES가 남았어요. 적 이름 몇 개가 기존 작품 캐릭터와 겹친다는 것도 이때 알게 되어 화면에 보이는 이름을 바꿨어요. 불도저는 철거왕, 닥터 톡신은 닥터 허스트가 됐어요.

이야기 화면은 네모난 컷 그림 옆에 자막 상자와 말풍선을 붙이는 방식이에요. 첫 새 게임의 프롤로그, 2막과 3막 앞의 컷, 엔딩, 크레딧, 영웅별 에필로그가 있어요.

이야기 컷 26장을 처음엔 글로만 설명해서 생성했더니 컷마다 인물 얼굴이 전투 그림과 달랐어요. 그래서 전투 포즈 때와 같은 방법을 썼어요. 사람이 나오는 컷 16장은 전투용 기본 그림이나 따로 만든 캐릭터 시트를 참고 이미지로 넣고 다시 그렸어요.

참고 그림 여러 장을 한 시트에 붙여 넣으면 시트 속 자세가 거의 그대로 남는 버릇이 있었어요. 서 있는 동생 시트를 넣었더니 병원 컷에 같은 동생이 두 명 그려진 적도 있어서, 장면에 필요한 자세는 시트 단계에서 미리 만들어 뒀어요.

대사 상자와 크레딧에 쓰는 보스와 이야기 전용 인물의 얼굴은 캐릭터 시트에서 머리 위치를 찾아 잘라 냈어요. 연출 칸은 아직 "HALFTONE HEROES 팀"이라는 임시 이름이에요. 노란 동그라미 친 둘이 이름을 바꾼 인물이에요.

써 보니: 좋은 점과 아쉬운 점

이번 캡처는 휴대폰 두 크기, 데스크톱, 협동 두 브라우저로 새로 찍었어요. 그러면서 본 것들이에요.

좋은 점이에요.

• UI가 한 벌로 맞춰졌어요. 출격, 상점, 장비, 특성 화면이 같은 패널과 버튼을 써서 한 게임으로 보여요.
• 장비 비교가 한눈에 들어와요. 초록 ▲와 빨간 ▼만 봐도 바꿀지 말지 정할 수 있어요.
• 세로 폰에서도 아지트 메뉴가 깨지지 않고 아래 탭 막대로 바뀌어요.
• 협동은 공개 시그널링 서버로 방 만들기, 참가, 같이 싸우기까지 이번에도 그대로 됐어요.
• 이야기 컷의 인물이 전투 그림과 같은 얼굴이라 컷이 바뀌어도 같은 사람으로 읽혀요.

아쉬운 점이에요.

• 가로 폰에서는 조이스틱과 버튼이 화면 아래 절반을 차지해요. 영웅이 왼쪽 아래에 서면 조이스틱 원과 겹쳐 보여요. 위 가로 폰 화면에서 동그라미 친 곳이에요.
• 데스크톱 넓은 창에서는 아지트 목록 아래쪽이 비어 보여요.
• 밸런스는 자동 플레이 봇으로만 맞췄어요. 장비를 낀 봇 기준으로 1-1은 1레벨로 88초에 A랭크, 1-3 보스는 7레벨로 25~40초, 3-3 보스는 26레벨로 90~125초(물약 필요)예요. 장비와 스탯 없이 들어간 봇은 1-3 보스를 못 잡아요. 사람이 해 보면 이 숫자가 달라질 수 있어요.

지금 상태와 남은 것

지금 들어가 있는 것은 영웅 4명과 스킬 24개, 3막 9스테이지와 보스 3명, 장비 5부위와 강화, 스킬 습득과 4단계 특성, 상점, 프롤로그부터 엔딩과 크레딧까지의 이야기, 휴대폰 터치 조작, 2~4인 온라인 협동이에요. 생성 그림은 254장, 효과음 30개, 배경음악 5곡이고, 자동 검사는 81개(기본 49, 휴대폰 14, 협동 18)예요.

남은 것도 분명해요.

• 사람이 처음부터 끝까지 해 본 적이 아직 없어요.
• 공개는 하지 않았어요. 공개 전에 제목과 이름의 상표 검색을 따로 해야 해요.
• 배경 그림은 막마다 3장을 돌려 써서 같은 막의 스테이지들이 비슷해 보여요.
• 크레딧의 연출 칸 이름이 아직 임시예요.

전투 화면이 만들어진 과정은 1편에 있어요.