8방향 스프라이트 캐릭터 걷기 애니메이션 구현
검증 환경
- 윈도우
-
- 윈도우 11
- 유니티 에디터
-
- 2020.3.25에프1
- 입력 시스템 패키지
-
- 1.2.0
이 팁의 전제 조건
다음 설정은 이러한 팁을 설명하기 위한 전제 조건으로 미리 구성되어 있습니다.
참조 사이트
4방향 걷기 애니메이션 정보
이전 팁에서 4방향 걷기 애니메이션을 수행하는 방법을 보여주었습니다. 이 기사에서는 8 방향에 대해 설명하지만 대부분의 단계는 4 방향 걷기 애니메이션과 동일하므로 여기에서는 차이점 만 설명합니다.
걷기 그래픽 준비
지난번에는 4 방향의 그래픽을 준비했습니다 만, 이번에는 다음과 같이 8 방향의 그래픽을 준비합니다. 「좌측 하단」, 「우측 하단」, 「좌측 상단」, 「우측 상」이 추가되었습니다.
방향의 순서는 4 방향에 비해 8 방향이 명확하게 결정되지 않은 것 같습니다. 그러나 다음과 같은 형식이 비교적 일반적이므로 이번에는 이 배열을 진행합니다.
| 아래의 | 왼쪽 아래 |
| 왼쪽 | 오른쪽 아래 |
| 오른쪽 | 왼쪽 위 |
| 맨 위로 | 오른쪽 위 |
프로젝트 만들기 및 이미지 준비
이번에는 키보드의 커서 키로 캐릭터를 배치하고 이동할 수있는 것을 만들어 봅니다. 8 방향이므로 대각선으로 움직이면 그래픽이 대각선 방향으로 표시됩니다.
첫 번째 단계는 새 2D 프로젝트를 만드는 것입니다. 프로젝트를 위해 준비한 캐릭터 이미지를 추가합니다.
추가한 이미지를 선택하고 검사기 설정을 구성합니다. 이 설정은 4방향과 동일합니다.
스프라이트 에디터에서 이미지를 분할합니다. 이미지 수는 증가하지만 작업은 동일합니다.
프로젝트의 이미지가 다음과 같이 표시되어도 OK입니다.
애니메이션 데이터 생성
여기서 하는 일은 4방향 걷기 애니메이션과 동일합니다. 결국 8 방향으로 애니메이션을 만들 수 있으면 OK입니다. 이미지의 숫자는 네 방향의 시간과 동기화되지 않습니다.
| 애니메이션 파일 이름 | 설정 이미지 |
|---|---|
| 이와마루다운 | Iwamaru_0, Iwamaru_1, Iwamaru_2, Iwamaru_1 |
| 이와마루왼쪽 | Iwamaru_6, Iwamaru_7, Iwamaru_8, Iwamaru_7 |
| 이와마루오른쪽 | Iwamaru_12, Iwamaru_13, Iwamaru_14, Iwamaru_13 |
| 이와마루Up | Iwamaru_18, Iwamaru_19, Iwamaru_20, Iwamaru_19 |
| 이와마루레프트다운 | Iwamaru_3, Iwamaru_4, Iwamaru_5, Iwamaru_4 |
| 이와마루라이트다운 | Iwamaru_9, Iwamaru_10, Iwamaru_11, Iwamaru_10 |
| 이와마루레프트업 | Iwamaru_15, Iwamaru_16, Iwamaru_17, Iwamaru_16 |
| 이와마루라이트업 | Iwamaru_21, Iwamaru_22, Iwamaru_23, Iwamaru_22 |
각 방향이 올바르게 애니메이션되는지 확인합니다.
애니메이션 전환 설정
설정은 중간까지 4 방향으로있을 때와 같기 때문에 생략합니다.
블렌드 트리를 구성했으면 8개의 모션을 만들어야 합니다.
프로젝트에 추가된 .anim을 Motion의 8개 항목으로 설정하겠습니다.
각 애니메이션의 방향을 숫자로 지정합니다.
| 방향 | X | Y |
|---|---|---|
| 아래의 | 0 | -1 |
| 맨 위로 | 0 | 1 |
| 왼쪽 | -1 | 0 |
| 오른쪽 | 1 | 0 |
| 왼쪽 아래 | -1 | -1 |
| 오른쪽 아래 | 1 | -1 |
| 왼쪽 위 | -1 | 1 |
| 오른쪽 위 | 1 | 1 |
이것으로 애니메이션 설정이 완료되었습니다.
움직임 제어
이동은 키보드의 키를 눌러 수행되므로 스크립트를 만들어 제어할 수 있습니다. 이 스크립트의 내용은 4 방향으로 작성된 것과 완전히 동일하므로 참고로 해 주세요. 스크립트 이름은 "CharacterMove"여야 합니다.
스크립트를 만들었으면 문자 개체에 첨부합니다.
실행
이것으로 전체 프로세스가 완료됩니다. 게임을 실행하고 키보드의 커서 키를 눌러 이동해 보세요. 캐릭터가 누른 방향으로 움직이고 그래픽의 방향이 사용자가 향하는 방향으로 바뀌는 동안 걷기 애니메이션이 움직이면 완료된 것입니다. 이번에는 8 방향에 대응하고 있으므로, 대각선으로 이동할 때 그래픽도 대각선으로 적용되고 있는지 확인해 주세요.