본문 바로가기

블로그 / 아트

30초 트레일러와 프레스킷, 포털 커버를 게임 에셋만으로 만든 과정

Salmonholic의 30초 트레일러 컷리스트, 프레스킷 구성, CrazyGames·itch 커버 세 번의 개편을 기록했다. 생성형 이미지 없이 실제 녹화와 스프라이트만 썼다.

Salmonholic ·· 6분 읽기

Salmonholic 포털 커버 네 가지 버전을 2×2로 모은 비교 이미지

게임을 포털에 올리려면 게임 말고도 챙길 게 많다. 포털마다 커버 이미지 크기가 다르고, 프리뷰 영상과 스크린샷, 영문 소개문도 따로 요구한다. 혼자 만드는 입장에서 이건 게임 만드는 시간과 그대로 겹친다. Salmonholic은 이 작업을 두 가지 원칙으로 했다. 생성형 그림은 쓰지 않는다. 그리고 모든 영상과 이미지는 스크립트로 다시 만들 수 있어야 한다.

30초 트레일러 컷리스트

트레일러는 9월 24일 0.11.0 기준으로 만들었다. 연어를 은빛 청록색으로 다시 칠하고 무기 효과도 바꾼 직후라서, 그 전에 만든 예비 영상을 모두 버리고 새로 녹화했다. 녹화에는 Godot의 무비 라이터 기능을 썼다. 게임을 640×360, 60fps로 실제 GPU에서 돌려 프레임을 그대로 파일로 떨군다. 봇이 주인공을 조종하는 --bot=hero 모드에 시드 7을 주고 녹화했는데, 이 판은 44.8초에 끝났다.

편집은 이 녹화에서 구간만 골라 이어 붙였다. 프레임을 빨리 돌리거나 캐릭터를 옮기지 않았다.

완성본 원본 구간 보여 주는 것
0–1.5초 제목 카드 고양이·연어·초밥과 로고
1.5–6.5초 본편 5–10초 이동과 자동 공격
6.5–11.5초 본편 21–26초 연어 떼와 초밥 수집
11.5–16.5초 카드 녹화 2–7초 레벨업 카드 선택
16.5–21.5초 본편 29–34초 다른 고양이와 교전
21.5–27.5초 본편 35–41초 원 수축과 후반 전투
27.5–30초 종료 카드 브랜드, 무료 브라우저 플레이

한국어판과 영어판은 같은 컷을 쓰고 자막만 다르다. 자막은 PIL로 PNG를 그린 다음 ffmpeg overlay로 얹었다.

여기서 하나 조심한 게 있다. 이 시드에서는 마지막 원이 닫히기 전에 고양이끼리의 싸움으로 승부가 난다. 그래서 파일명이 final-circle인 스틸도 실제로는 본편 39초의 후반 교전 장면이다. 제작 기록에도 “마지막 원이 펼쳐지는 장면이라고 광고하지 않는다”고 적어 두었다. 봇 경기는 사람 경기보다 일정이 빠르다는 것도 같이 적었다. 트레일러에 실제 게임에서 볼 수 없는 장면을 넣으면 나중에 신뢰를 잃는다고 봤다.

세로 영상은 따로 만들었다. 포털용은 1080×1920, 15초짜리 한 편이고, 쇼츠용은 한국어 6편과 영어 4편, 모두 10편이다(2f1e4f1). 쇼츠는 원본 화면에서 180×320 영역을 잘라 정확히 6배로 NEAREST 확대했다. 픽셀아트는 보간 확대를 하면 뭉개지기 때문이다.

프레스킷에 넣은 것

프레스킷은 기자나 포털 담당자가 한 폴더에서 필요한 자료를 다 가져갈 수 있게 만든 묶음이다. 0.11.0 기준으로 들어간 것은 이렇다.

  • 1280×720 실제 게임 캡처 4장: 레벨업, 중반 전투, 후반 교전, 초반
  • 스킨 4종 × 10색을 아틀라스에서 합성한 카탈로그 1장. 게임 UI 캡처가 아니라고 명시했다.
  • 워드마크 SVG와 PNG. 타이틀 화면과 같은 5×7 글리프라서 외부 폰트가 필요 없다.
  • 30초 트레일러 한국어·영어판, 15초 세로판
  • 한 줄 소개와 게임 정보 표

프레스킷에 들어간 0.11.0 중반 전투 캡처 프레스킷의 중반 전투 캡처. 640×360 녹화를 정수 2배로 NEAREST 확대했고, 컷을 고른 것 말고는 손대지 않았다.

프레스킷 표에는 확인되지 않은 출시일, 이용자 수, 등급을 적지 않았다. 캡처인지 합성인지도 파일마다 표기했다. 원래 전체 크기는 25MB 미만이 목표였는데, 쇼츠 영상이 들어가면서 웹 배포 폴더가 무거워졌다. 그래서 쇼츠는 마케팅 폴더로 옮기고 배포 폴더에서는 뺐다.

커버를 세 번 바꿨다

CrazyGames는 커버를 1920×1080, 800×1200, 800×800 세 가지 크기로 요구하고, 제목 말고 다른 문구는 넣지 못하게 한다. itch는 630×500이다. Salmonholic 커버는 지금까지 세 번 크게 바뀌었다.

첫 번째는 9월 25일 0.14.1(ff74f13)에서 새 로고와 함께 만든 키 아트다. 어두운 바닥 위에 닌자·기본·셰프 고양이 셋을 세웠다. 그런데 같은 날 0.14.3(42a82e0)에서 문제가 드러났다. 고양이 스프라이트 셀이 128px로 바뀌었는데 커버 스크립트는 여전히 64px 셀로 읽고 있어서, 고양이의 4분의 1만 잘라 쓰고 있었다. 매니페스트에서 셀 크기를 읽게 고치고 HD 고양이로 다시 만들었다.

두 번째는 9월 26일 RK1(f9f27b9)이다. A는 큰 흰 고양이 한 마리와 연어 떼, B는 원 안의 고양이 10마리, C는 파스텔 배경의 스킨 세 마리였다. 셋을 비교할 때 가장 신경 쓴 건 작은 크기에서 어떻게 보이느냐였다. 포털 목록에서 커버는 손톱만 하게 보인다. 그래서 커버마다 200×112와 160×90 축소본을 같이 만들었다. 160×90에서 B는 개별 얼굴이 너무 작아졌고, A는 얼굴과 전투 상황이 가장 바로 읽혔다. 그래서 A를 CrazyGames와 itch에 올렸다.

세 번째는 9월 27일 0.21.0과 함께 만든 RK2(0fcc702)다. 그사이 고양이가 16종으로 늘고 장신구가 생겨서, 커버도 그걸 보여 주도록 다시 짰다. A는 다섯 마리 전열, B는 사무라이와 해적의 대각선 대결, C는 16종 전부를 보여 주는 캐릭터 벽이다.

RK1과 RK2 커버의 160×90 축소본을 3배로 확대한 비교 위 줄은 RK1 A·B·C, 아래 줄은 RK2 A·B·C. 포털 목록에서 실제로 보이는 160×90 크기를 3배로 키웠다. C의 16종은 이 크기에서 하나하나 구분되지 않는다.

RK2 보고서는 작은 크기에서 두 얼굴과 무기 충돌이 가장 잘 보이는 B를 첫 후보로 권했다. 최종으로는 A 커버와 15초 프리뷰를 CrazyGames에 올렸고, itch에는 커버와 새 태그라인을 올렸다. 어느 쪽이 클릭률이 더 좋은지는 아직 재지 않았다. 비교는 포털에서 실제로 돌려 봐야 알 수 있다.

스크립트로 만들면 좋은 점

커버는 전부 build_covers.py 하나로 만든다. 게임의 128px 셀에서 첫 프레임을 꺼내 투명 여백을 잘라 내고, 정수 배율 NEAREST로 키워 단색 도형 배경 위에 얹는다. 고양이, 장신구, 연어, 로고는 모두 실제 게임 에셋이다. RK2에서는 장신구를 프레임별 좌표와 앞뒤 순서까지 게임과 똑같이 합성했다. 스크립트가 원본 아틀라스의 해시를 기록해 두기 때문에, 캐릭터가 바뀌면 스크립트만 다시 돌리면 된다.

0.14.3의 64px 버그를 금방 고칠 수 있었던 것도 이 방식 덕분이었다. 손으로 만든 이미지였다면 커버 네 장을 다시 그려야 했을 것이다.

포털마다 따로 맞춘 SDK와 빌드 이야기는 웹 게임 포털 일곱 곳에 맞추기에 정리했다. 커버에 나오는 고양이들이 실제로 싸우는 모습은 Salmonholic 게임 페이지에서 볼 수 있다.

#트레일러#프레스킷#게임 커버#픽셀아트#마케팅

함께 읽으면 좋은 글

전체 글 →