Aseprite로 AI 도트 그림 수정하기

 

Aseprite

• 위 사이트에서 Aseprite 구매
• 도트 그림 제작 뿐만 아니라, 스프라이트 분할 기능까지 제공해주는 좋은 툴

1. 챗GPT로 그린 전후좌우 png 파일을 오픈
2. Sprite > Sprite Size로 사이즈를 확인 (예시는 1024px)
3. 그럼 512px 기준으로 나누면 4분할이 된다는 뜻. 
4. View > Grid > Grid Settings에서 width 512 height 512 쓰고 확인
5. 그럼 아래와 같이 그리드 분할이 됨

 

1. 이제 레이어를 나눠서 각 레이어에 한 면씩 들어가게 할 차례

 

1. 하단의 레이어 메뉴에서 New > New Layer로 총 4장의 레이어를 준비
2. View > Grid > Snap to Grid 누르기 (그리드 자동 선택 기능을 활성화하는 것)

 

1. 전후좌우가 다 있는 기본 레이어의 1프레임 영역에 있는 동그라미를 누르고

 

1. 키보드 M을 누른 뒤 후면 그리드 영역을 드래그 (대충 드래그 해도 Snap to Grid 기능 때문에 자동 선택됨)
2. Ctrl+X로 오려내기

1. 두 번째 레이어의 동그라미를 선택한 다음 Ctrl+V를 하면 해당 레이어로 후면 이미지가 들어감
2. 마찬가지로 다음 레이어에는 좌측면, 다음 레이어에는 우측면 이미지를 붙여넣어
3. 각 레이어 1개 당 1방향의 이미지가 들어가도록 하기
4. 주의할 점은, 기본 레이어에 원래 모든 방향의 이미지가 있었기 때문에 Ctrl+X를 하기 전에 기본 레이어 동그라미를 매번 눌러줘야 한다는 것
5. 각 레이어 옆 동그라미가 채워졌다면 성공

1. 이번에는 레이어 메뉴에서 마우스 우클릭 > New Frame으로 프레임을 3개 추가해 총 4프레임이 되도록 하기
2. 1프레임은 기본 자세 (Idle), 2프레임은 왼발 내밀어 걷기, 3프레임은 오른발 내밀어 걷기, 4프레임은 몸 들썩이기를 그릴 예정
3. 다시 View > Grid > Snap to Grid를 끄기 (그림 그릴 때 그리드 기준으로 그려지는 것을 방지)

1. 우선 2프레임에 있는 기본 레이어 (정면) 동그라미를 선택하기
2. 우측의 도구 툴 중에서 지우개 툴을 클릭

1. 정면의 발 한쪽을 지우개로 쓱쓱 지워주기

1. 다음으로는 레이어1의 3번째 프레임 동그라미를 클릭

1. 반대쪽 발 한쪽도 지우개로 쓱쓱 지워주기
2. 그러면 2프레임과 3프레임을 번갈아가며 보면 마치 발을 한쪽씩 내밀어 걷고 있는 듯한 모습을 보여줄 것임

1. 좌측면, 우측면은 발을 지우는 것만으로는 해결이 안 되고, 기존 발을 앞으로 내민 다음 다음 발이 뒤에 살짝 보이게끔 그려야 함
2. 우측 도구 툴에서 펜슬 툴을 선택해, 기존 발을 지우고 오른발을 내민 그림, 왼발을 내민 그림을 그리기

1. 마지막 4번째 프레임은 기본 프레임에서 몸을 살짝 위로 든 듯한 모습을 그려주기 (기본 프레임과 번갈아 보여주면 숨을 쉬는 듯한 모습을 보여주게 될 것임)

1. 쉽게 하는 방법은 M을 눌러 캐릭터 영역을 네모낳게 선택한 다음 키보드 방향키 (화살표 ↑)를 눌러 몇 픽셀 위로 올리는 것임
2. 그리고 원래 발 끝이 있던 자리까지 펜슬 툴을 이용해 다리를 확장해서 그리면 됨
3. 4면 다 그렸다면 File > Export > Export Sprite Sheet를 클릭

1. Sprite를 눌러 Visible layers와 All Frames가 선택되어있는지 확인하고 Export
2. File > Save를 해서 저장

1. 그러면 이렇게 모든 면의 기본/숨쉬기/왼발/오른발 총 16장의 리소스가 한 이미지를 통해 뽑혀 나오게 될 것임
2. 한 이미지 안에 모든 방향의 모든 자세를 다 담는 이유는, 그렇게 해야 게임 제작 시 로딩 부하를 줄일 수 있기 때문
3. 이제 위 애셋을 유니티 프로젝트의 에셋 폴더에 넣어주면 됨