Phaser를 사용한 아바타 생성 - Part1
Phaser를 사용해서 어떻게 아바타를 생성 했는지에 대한 경험을 공유한 글입니다.
Step 1. 아바타 게임 에셋
사용한 게임 에셋 사이트 - itch.io 이 사이트는 주로 게임 에셋들을 모아 놓은 사이트들인데 아바타에 적합한 에셋이 있어서 이 사이트를 통해 에셋을 구매했다.
본 프로젝트에 사용한 에셋은 Cozy People - $3.99이다. 결제를 한 번하면 업데이트된 디자인들을 계속 다운받아 사용할 수 있어서 구매했다.
구매한 에셋 살펴보기
구매한 에셋을 다운 받아서 zip 파일을 풀면 아래의 스크린샷과 같이 아바타에 필요한 다양한 피부색, 의상, 헤어, 악세사리, 심지어 아바타가 눕거나 점프 등 다양한 동작들 까지도 제공해준다.
다운 받은 에셋의 일부인 아바타가 걸을 때의 이미지 파일을 열어보았다. 걸어가는 방향별 발동작까지 디테일하게 구성 되어있다.
Step 2. 하나의 이미지 파일 조각내기
이렇게 많은 동작과 필요한 에셋들을 제공해주지만 Phaser에 그대로 사용할 수는 없었다. 🥲 구매한 에셋을 Phaser에 사용하기 위해서는 이미지 가공이 필요했다.
먼저, 프로젝트에서 구현 하고자하는 기능을 설명하자면,
“유저가 맵(서버)에 들어왔을 때, 아바타의 피부색과 의상은 랜덤으로 생성되어야 한다.”
“유저는 랜덤으로 생성된 아바타를 키보드의 특정 키를 사용해 특정 동작을 할 수 있어야 한다. 특정 동작은 점프나 걷기, 방향 전환을 의미한다.”
이 두 가지의 기능을 구현하기 위해서는 아바타의 피부색과 걸음 방향, 동작들의 분리 해서 재조합 하는 식으로 처리해야한다.
다행히도 이 에셋을 제공해 주신분이 피부색별로 나누어 업로드 해주셨기 때문에 따로 피부색으로 파일은 분리하는 작업을 하지 않았다.
하지만 아바타의 걷는 동작과 방향전환을 위해 이미지 분리작업을 해야했다. 약간의 이해를 돕고자 아래의 이미지를 만들어 첨부해 보았다.
원래 제공된 파일이 하나의 이미지 파일인데, 여기서 해야할 작업은 아바타의 앞면, 뒷면, 오른쪽, 왼쪽 네 가지의 방향을 먼저 분리하고, 각 방향에 8개의 동작을 다시 쪼개는 작업을 해야한다. 그래서 총 32개의 이미지로 분리 해야한다.
Free Texture Packer사이트 소개
이미지 분리를 위해 Free Texture Packer 사용했다. 이 사이트는 게임이나 웹 사이트 개발 시 여러 이미지를 하나의 스프라이트 시트로 합치거나 분리해주는 작업을 도와주는 사이트라 이 프로젝트에서 매우 유용하게 사용했다.
이미지 분리 작업 절차
-
Free Texture Packer에 접속해서 ‘WEB APP’을 클릭한다.
- 이미지 파일을 조각내기 위해 오른쪽 상단 ‘Split sheet’를 클릭한다.
-
조각 내고 싶은 이미지 파일을 불러온다. 이미지가 업로드 되면 이미지 위에 파란색 선과 배경이 추가된다.
-
오른쪽에 width와 height를 조절하면 이미지 위에 파란색 선과 배경이 넓이와 높이에 따라 조절 되기 때문에 조각 내고 싶은 사이즈에 맞춰서 크기를 넓히거나 좁히면 된다.
-
적당한 크기가 나왔으면 하단에 ‘Split’ 버튼을 클릭한다.
- ‘Split’을 클릭하면 zip파일이 다운로드 될 것이고, zip을 풀어보면 아래와 같이 조각낸 이미지들이 있을 것이다.
Step 3.이미지 파일 이름 규칙 정하기
여기서 이미지 이름을 정하는 것이 매우 중요하다. 이 이미지의 이름을 사용해서 추후 아바타 랜덤 생성과 방향전환, 동작을 설정하기 때문이다.
피부색은 총 8개의 색상이 존재
방향은 총 4개의 방향이 존재 - 앞면, 뒷면, 오른쪽, 왼쪽
각 방향에는 8개의 조각이 존재
이렇게 피부색, 방향, 동작에 따른 조각수를 조합해서 이미지 네이밍을 해야 Phaser에서 애니메이션을 추가할 수 있고 아바타를 랜덤으로 생성할 수 있다.
여러 방면으로 네이밍을 생각하다가 아래와 같은 규칙을 정해서 사용했다.
피부색-동작-방향-조각수 – e.g.) skin1-walk-down-1, skin1-walk-up-2
이 규칙을 적용해서 이미지 파일들을 모두 rename하고, Phaser에 사용했다.
Mac에서는 규칙 있게 네이밍 할 수 있는 기능이 있어서 규칙만 정해진다면 빨리 Rename을 할 수 있다.
이 다음 절차도 있기 때문에 Part2에서 계속해서 공유 해보겠습니다!