튜토리얼 목록
게임 · 어려움

플랫포머 타일셋과 패럴랙스 배경 만들기

실제로 게임 엔진에 넣을 수 있는 재료. 타일 시트 한 장 + 멀리·중간·가까이 배경 세 겹
🧾 준비물 없음⚡ 약 330크레딧4단계by 픽셀곰

🎮 게임 만들기 재료 — 게임 하나를 통째로 만들진 못해도, 게임에 들어가는 재료(타이틀 화면·타일셋·아이콘·보스·BGM·박스아트)는 하나씩 만들 수 있어요. 이 기획의 튜토리얼들은 저마다 재료 한 가지씩을 맡아요. 글자는 전부 비워 두고 편집기나 게임 엔진에서 얹는 게 공통 규칙이에요.

2D 플랫포머는 타일로 만들어요. 땅·벽·모서리 조각을 격자에 그려 두고 엔진에서 이어 붙이죠. 배경은 멀리·중간·가까이 세 겹을 다른 속도로 움직여 깊이를 내고요(패럴랙스). 이 튜토리얼은 '버섯 숲' 스테이지의 타일 시트 한 장과 배경 세 겹을 만들어요.

AI가 만든 타일은 완벽한 격자가 아니라서 엔진에 넣기 전에 한 번 다듬어야 해요. 그래도 처음부터 그리는 것보다 열 배 빨라요.

1
타일 시트 — 땅·벽·모서리·소품

화질 high, 비율 1:1로 생성하세요. 타일은 또렷해야 해서 이번만 high예요.

타일 시트 프롬프트의 핵심

  • 마젠타 배경 — 게임 그래픽의 오래된 관례예요. 마젠타는 게임에 안 쓰는 색이라 엔진에서 투명으로 빼기 쉬워요.
  • "가장자리가 맞물림" — 땅 타일 9종(3×3)은 이어 붙이는 세트예요. 이 말이 없으면 예쁘지만 못 쓰는 타일이 돼요.
  • "같은 광원, 같은 팔레트" — 타일마다 그림자 방향이 다르면 이어 붙였을 때 울퉁불퉁해 보여요.
이 단계 따라 하기 ⚡ 약 110
프롬프트·설정 보기
모델 · GPT Image 2.5 Sunburst
2D 플랫포머 '버섯 숲' 스테이지의 타일셋 시트. 16비트 2D 플랫포머 게임용 픽셀 아트. 또렷한 정사각 픽셀, 안티에일리어싱 없음, 제한된 팔레트, 타일 경계가 또렷하게.
연한 자홍색(마젠타) 단색 배경 위에 같은 크기의 정사각 타일들을 격자로 가지런히 배열한다. 타일 사이는 배경색 1칸씩 띄운다.
윗줄: 풀이 덮인 흙 땅 타일 9종(왼쪽 모서리·가운데·오른쪽 모서리 × 위·중간·아래 — 서로 이어 붙일 수 있게 가장자리가 맞물림).
둘째 줄: 1칸짜리 떠 있는 발판, 2칸 발판, 나무 상자, 이끼 낀 돌, 가시 덤불.
셋째 줄: 작은 버섯 3종(빨강·파랑·노랑), 반딧불 램프, 나무 표지판(글자 없는 빈 판), 금화.
모든 타일은 같은 광원(왼쪽 위)과 같은 팔레트. 글자·숫자·로고는 그리지 않기(간판·화면·상자에도 읽히는 글자 없이).
품질high
비율1:1
2
패럴랙스 배경 — 멀리·중간·가까이

1단계 타일셋을 편집할 이미지로 붙이고 16:9로 생성하세요.

  • 멀수록 흐리고 색이 적게 — ①은 두세 색, ③은 디테일 가득. 공기 원근법을 픽셀로 하는 거예요. 엔진에서 ①은 느리게, ③은 빠르게 스크롤하면 깊이가 생겨요.
  • "좌우 끝이 이어져 반복" — 배경은 끝없이 스크롤돼야 해요. 완벽히 이어지진 않으니 편집기에서 양 끝을 조금 잘라 맞추세요.
  • 타일셋을 레퍼런스로 — 팔레트가 같아야 배경과 타일이 한 게임처럼 보여요.
이 단계 따라 하기 ⚡ 약 110
프롬프트·설정 보기
모델 · GPT Image 2.5 Sunburst
첨부한 이미지의 캐릭터·그림체·색을 그대로 유지합니다. 첨부한 타일셋과 같은 팔레트·같은 픽셀 크기로.

2D 플랫포머 '버섯 숲' 스테이지의 패럴랙스 배경 세 겹을 위에서 아래로 쌓아 한 장에 보여 준다. 각 겹은 가로로 긴 띠이고, 좌우 끝이 이어져 반복(타일링)되게 그린다.
① 맨 위 띠(멀리): 안개 낀 푸른 산 실루엣과 옅은 하늘, 디테일 거의 없이 두세 가지 색.
② 가운데 띠(중간): 거대한 버섯 나무들의 실루엣, 어두운 청록색, 약간의 디테일.
③ 맨 아래 띠(가까이): 풀·고사리·작은 버섯·나무 줄기가 또렷한 전경, 가장 어둡고 디테일이 많음.
세 띠는 같은 높이, 띠 사이는 마젠타 1줄로 나눈다. 글자·숫자·로고는 그리지 않기(간판·화면·상자에도 읽히는 글자 없이).
품질medium
비율16:9
3
스테이지 목업 — 다 합치면 이런 화면

타일셋과 배경을 둘 다 레퍼런스로 넣고 생성하세요. 엔진에 넣기 전에 "이 재료로 화면이 되나"를 미리 보는 단계예요.

  • 목업이 어색하면 재료가 어색한 거예요 — 보통 타일의 광원이나 배경의 팔레트가 문제. 그 단계로 돌아가 고치세요.
  • 이 목업 자체를 쇼츠 썸네일이나 기획서 그림으로 써도 돼요.
이 단계 따라 하기 ⚡ 약 110
프롬프트·설정 보기
모델 · GPT Image 2.5 Sunburst
첨부한 이미지의 캐릭터·그림체·색을 그대로 유지합니다. 첫 번째 첨부는 타일셋, 두 번째 첨부는 패럴랙스 배경입니다. 그 타일과 배경만 써서 실제 게임 화면을 조립한 것처럼 그린다.

2D 플랫포머 '버섯 숲' 스테이지의 플레이 화면 목업. 16비트 2D 플랫포머 게임용 픽셀 아트. 또렷한 정사각 픽셀, 안티에일리어싱 없음, 제한된 팔레트, 타일 경계가 또렷하게.
뒤에서 앞으로 배경 ①②③이 겹쳐 있고, 그 위에 타일셋의 땅 타일을 이어 붙인 지형(왼쪽 낮은 땅, 가운데 구덩이, 오른쪽 높은 언덕), 떠 있는 발판 셋, 나무 상자 둘, 가시 덤불, 금화 몇 개, 빨간 버섯 하나.
작은 주인공 캐릭터(초록 망토의 꼬마 모험가, 타일 2칸 높이)가 왼쪽 땅 위에 서 있다.
화면 왼쪽 위에 체력 하트 세 개만 두고 그 밖의 UI는 없음. 글자·숫자·로고는 그리지 않기(간판·화면·상자에도 읽히는 글자 없이).
품질medium
비율16:9
4
엔진에 넣기 전에
  • 격자 맞추기 — 타일 시트를 픽셀 편집기(Aseprite 등)에서 열어 타일 크기(16 또는 32px)의 격자에 하나씩 스냅하세요. AI 타일은 보통 1~3픽셀씩 어긋나 있어요.
  • 마젠타를 투명으로 — 대부분의 픽셀 편집기에 '색을 투명으로' 기능이 있어요.
  • 타일이 격자에 안 맞게 나와요 — "타일 사이는 배경색 1칸씩 띄운다"가 빠졌는지 보세요. 간격이 없으면 타일끼리 붙어서 잘라 내기 어려워요.
댓글
다음에 따라 해볼 튜토리얼
전체 보기 →