본문 바로가기

Game/Unity

[Unity3D]Sprite, Animation, Animator 예제

Unity 4.3에서 지금까지 Unity의 약점이었던 2D 부분이 강화되었습니다. 아무튼, 지금까지도 Asset Store에 공개 된 라이브러리를 구입하면 2D의 개선은 가능했지만 표준으로 대응 해주는 것은 고마운 것입니다.

이번은 그 2D 기능의 기본적인 부분, Sprite 기능에 대해 설명합니다.

소재를 준비하자

이번 최종 목표는 2D 캐릭터가 보행 애니메이션을하면서 상하 좌우로 이동 하는 것으로합니다. 소재를 처음부터 만드는 것은 힘들 기 때문에 이번에는 OpenGameArt에서 공개 된 퍼블릭 도메인 이미지를 사용할 수 있습니다 1 .

위 페이지의 ADA 0.png라는 링크에서 사진을 다운로드하십시오 (실제 파일 이름은 ADA0_0.png되어 있습니다).

라이센스가 공개이므로 여기에 전재 해 둡니다. 이쪽의 이미지를 사용해도 OK입니다.

이번 사용할 이미지
이번 사용할 이미지

Sprite 설정

새 프로젝트를 만들고 방금 전의 이미지에 캡처 경우 Texture 설정합니다. Inspector에서Texture Type 을 Sprite 로 변경합니다. 새 프로젝트 작성 및 프로젝트 설정에서 지정 Default Behavior Mode가 2D의 경우에는 Import했을 때 자동으로 Sprite가 선택되기 때문에이 작업이 필요하지 않습니다.

Sprite 변경
Sprite 변경

다음 Sprite Mode 를 Multiple 로 변경합니다. Sprite Mode는 Single라면 1 매의 이미지를 그대로 사용하여 Multiple의 경우는 영역을 지정하여 여러 이미지로 사용할 수 있습니다.

Multiple로 변경
Multiple로 변경

Multiple로 전환 할 때 표시되는 Sprite Editor 라는 버튼을 누르면 다음과 같은 창이 표시됩니다. 여기에서 사용하는 이미지의 영역 지정합니다.

Sprite Editor
Sprite Editor

실제로 영역을 지정하려면 왼쪽에있는 Slice 라고 쓰여진 부분을 클릭합니다.

Slice
Slice

그러면 이러한 팝업이 표시되므로 그대로 설정 Slice 버튼 을 누릅니다.

기본값을 실행
기본값을 실행

처리가 끝나면 자동으로 이미지의 빠듯한 영역 곳에 분할됩니다.

Slice를 실행 한 후 상태
Slice를 실행 한 후 상태

미세 조정이 필요한 경우에는 개별적으로 선택하고 화면의 사이즈 나 잘라 내기 시작 위치 조정이 가능합니다.

이번에는이 후 애니메이션 시키므로 발견 쉽도록 이름을 변경 둡시다.

제일 왼쪽의 이미지를 선택하고 팝업의 Name 을 walk_backward0 로 변경합니다. 아래로 차례로 선택하여 walk_backward1 , walk_backward2 , walk_backward3 과 다른 이름으로갑니다. 오른쪽의 열로 이동처럼 연번 이름을 walk_left0 , walk_frontward0 ,walk_right0 라는 이름으로 붙여 해주시기 바랍니다.

정보를 정리하면 다음과 같이됩니다.

이름을
이름을

또한 위쪽으로 진행 상정으로 생각하고 있기 때문에이 같은 이름이 있습니다.

이름 끝나면 다시 이미지를 차례로 선택하여 Pivot 의 모든 항목을 Bottom 으로 변경하십시오.

 Pivot을 Bottom으로
Pivot을 Bottom으로

또한이 작업은 자동으로 영역 선택 된 이미지의 높이가 31 픽셀의 것과 32 픽셀의 것이 혼재하고 있기 때문에 가고 있습니다. 동일한 크기의 경우에는 기본 Center의 설정으로 문제 없습니다.

또한 Center 그대로의 것이 관리하기 쉽기 때문에 Bottom으로 변경하지 않으려는 경우에는 Y와 H 값을 조정함으로써 Center 그대로 작업을 진행할 수있게됩니다.

화면에 표시

Project 뷰의 2D 라고 쓰여져있는 부분을 클릭하면 2D 모드로 전환됩니다. 이 모드에서는 Z가 없어지는 X와 Y 좌표에 대해서만 이동 할 수있는 2D 게임 만들기에 적합한 방법으로 전환됩니다.

2D로 전환
2D로 전환

Main Camera는 Position 을 (0, 0, -10) , Projection 을 Orthographic , Size 를 1 로 변경합니다.

Camera 변경
Camera 변경

이어 ada 0 0 텍스처를 Scene 뷰에 드래그하면 화면에 추가 할 수 있습니다. 추가 한 후 이름을 Player 로 변경하여 둡시다.

추가 후 Position 을 (0, 0, 0) 로 변경하여 Scene 뷰를 확인하면 다음과 같이 축의 중앙에 발밑이되는 위치에 표시됩니다. 이것은 Pivot 설정을 Bottom으로되어있는 것입니다. 기본 설정이다 Center 설정의 경우에는 축의 중앙이 캬쿠타의 중앙에 수 있습니다.

화면에 표시된 Sprite
화면에 표시된 Sprite

사진, 잘 보면 조금 흐리게하고 있습니다. 이것은 텍스처 보완 작업이 이루어지고 있기 때문입니다. 2D 게임 답게 점을 강조하고 싶은 경우에는 텍스처의 Filter Mode를 Point로 변경합니다.

Filter Mode를 Point로 변경
Filter Mode를 Point로 변경

Point로 전환 Apply 버튼을 누르면 이렇게 예쁜 도트 그림으로 표시됩니다.

Filter Mode를 Point로 변경
Filter Mode를 Point로 변경

애니메이션을 만든다

보행 애니메이션을하기 위해 Animation Clip을 만듭니다.

Hierarchy 뷰 Player를 선택하고 그 상태 메뉴에서 [Window] - [Animation]을 선택하고 Animation 창을 표시합니다. 또한 Animator라는 비슷한 것도 있으므로 여기와 혼동하지 않도록주의하십시오.

빨간색 테두리로 묶은 부분을 클릭하여 [Create New Clip] 를 선택합니다. 그리고walk_backward.anim 라는 Animation Clip을 저장합니다.

 Animation Clip을 새로 만들기
Animation Clip을 새로 만들기

Add Curve 버튼을 눌러 Sprite Renderer] - [Sprite] 겨우 오른쪽에있는 + 아이콘 을 클릭합니다. 이제 Sprite 애니메이션 적용됩니다.

Add Curve
Add Curve

Animation Clip 실행시 시간 경과와 함께 Sprite가 변경되도록 Sprite를 배치하고 있습니다.

우선 빨간색 테두리로 둘러싸인 부분에 15 을 입력합니다.

 Frame의 지정
Frame의 지정

그 상태에서 Inspector에서 Sprite Renderer 의 Sprite 를 walk_backward1 로 변경합니다.

 Sprite의 변경
Sprite의 변경

마찬가지로 15 프레임마다 Sprite 이름을 변경하고 마지막으로 다음과 같은 설정합니다.45 ~ 60 프레임 동안 Walk backward3가 계속 나타나고, 그 후에 Walk backward0로 돌아 오는 애니메이션하고 싶기 때문에 45 프레임과 60 프레임은 모두 walk_backward3 이 설정되어 있습니다.

frame스프라이트 이름
0walk_backward0
15walk_backward1
30walk_backward2
45walk_backward3
60walk_backward3

모든 설정이 끝나면이 같은 상태가됩니다.

최종 설정
최종 설정

Animation 뷰에있는 "재생 버튼"을 누르면 즉시 애니메이션을 확인할 수 있습니다. 버튼을 눌러 애니메이션이 제대로되어 있는지 확인하여 보시기 바랍니다.

재생 버튼
재생 버튼

애니메이션에 문제가 없음이 확인되면 녹화 버튼 을 클릭하여 편집 모드를 종료시킨 후 게임을 실행 해보세요.

여기를 클릭하여 편집 모드를 종료
여기를 클릭하여 편집 모드를 종료

Animation보기에서 재생 버튼 을 눌렀을 때처럼 캬쿠타가 애니메이션하는 것입니다.


이번에는 여기까지입니다. 여기까지 작업 한 프로젝트는 여기 에두고 있습니다. 만약 여기까지의 작업이 작동하지 않은 경우에는 기사와이 프로젝트를 비교해하면서 확인하여 보시기 바랍니다.

다음은 키 입력에 따라 이동시키는 방법을 설명합니다.

나머지 3 방향의 보행 애니메이션을 준비

마지막은 정면을 향한 상태에서의 보행 애니메이션 walk_backward (Player의 진행 방향은 위를 상정하고 있기 때문에이 같은 이름으로 구성되어 있습니다)를 만들었습니다.

키 입력에 따라 상하 좌우의 각각의 방향으로 도보 애니메이션을 준비 할 필요가 있기 때문에 이전과 마찬가지로 다음 규칙 3 개의 Animation Clip을 작성하십시오.

Animation Clip 이름 : walk_frontward

frame스프라이트 이름
0walk_frontward0
15walk_frontward1
30walk_frontward2
45walk_frontward3
60walk_frontward3

Animation Clip 이름 : walk_left

frame스프라이트 이름
0walk_left0
15walk_left1
30walk_left2
45walk_left3
60walk_left3

이 Walk Left의 Animation Clip은 애니메이션을 재생 해 보면 Walk left2이 표시되는 타이밍에 위화감을 느낍니다.

제대로 보면 이미지 만 위치가 1 픽셀 만 어긋나있는 것 같습니다. 것으로 이미지의 위치를 조정합니다. Sprint의 ada 0 0 을 선택한 후 Inspector에서 Sprite Editor를 선택하여 Sprite Editor를 표시하십시오.

다음 위치에있는 walk_left3 을 선택하고 X 의 값을 59 에서 58 로 변경하십시오. 이제 깨끗한 애니메이션이 될 것입니다.

 Sprite Editor에서 위치를 조정
Sprite Editor에서 위치를 조정

오른쪽의 애니메이션에 대해서는 조정이 필요 없기 때문에 다른 Animation Clip과 마찬가지로 작성하는 것만으로 괜찮습니다.

Animation Clip 이름 : walk_right

frame스프라이트 이름
0walk_right0
15walk_right1
30walk_right2
45walk_right3
60walk_right3

정지 상태의 애니메이션을 준비

Mecanim 애니메이션 전환을 할 경우 정지 상태도 애니메이션 (Animation Clip)을 준비해야합니다. 따라서 정지 한 상태의 Animation Clip도 4 방향 분 준비합니다.

우선 아래쪽에 정지하고있는 상태의 애니메이션을 만듭니다. wait_backward 라는 Animation Clip을 새로 만들고 보행 애니메이션 때와 마찬가지로 Sprite를 추가합니다.

그러면 기본적으로 두 개의 Sprite가 배치되어 있습니다 만 이번은 정지 상태이므로 1 개의 Sprite 밖에 필요하지 않습니다. 뒤에있는 분은 삭제하세요. 뒤에있는 Sprite를 선택한 후 Delete 키를 누르면 삭제할 수 있습니다.

뒤에있는 Sprite를 제거
뒤에있는 Sprite를 제거

남아있는 분의 Sprite는 앞을 향하고 중지 된 애니메이션하고 싶기 때문에walk_backward0 을 선택하여 둡시다. 기본적으로 walk_backward0가 선택되어 있으므로 이번에는 그대로 OK입니다.

마찬가지로 wait_frontward , wait_left , wait_right 라는 Animation Clip을 만들고 Sprite에walk_frontward0 , walk_left0 , walk_right0 을 설정하십시오.

보행 애니메이션의 설정

Mecanim 설정하기 위해 Project 뷰 의 Player 를 두 번 클릭하여 Animator 뷰를 표시합니다.

뷰에있는 Any State]라고 쓰여져있는 것 이외를 모두 삭제합니다. 삭제는 선택한 상태에서 Ctrl (Mac에서는 command) + Delete 할 수 있습니다.

삭제가 끝나면 아무것도없는 곳에서 마우스 오른쪽 단추로 클릭하고 Create State] - [From New Blend Tree]를 선택하고 Blend Tree를 만듭니다.

 Blend Tree 만들기
Blend Tree 만들기

여기에서는 보행 애니메이션을 관리하기 때문에 이름을 Walk 로 변경해야합니다.

 Blend Tree의 이름을 walk 변경
Blend Tree의 이름을 walk 변경

마찬가지로 또 Bend Tree를 만들고 이곳은 Wait 라는 이름으로 변경해야합니다. 이 Bend Tree는 이동 할 수 없습니다 (대기 상태) 때 애니메이션을 관리합니다.

 walk와 wait을 만든 상태
walk와 wait을 만든 상태

우선 Walk으로부터 만들어 넣고갑니다. Walk를 더블 클릭하여 화면을 전환하십시오.

애니메이션을 전환 계기가 될 매개 변수를 추가합니다. 여기에서 추가 한 매개 변수에 프로그램에서 값을 설정하여 애니메이션을 전환합니다. Parameters 라고 쓰여져있는 지역의 + 를 클릭합니다.

매개 변수를 추가
매개 변수를 추가

+를 클릭하면 추가하는 파라미터의 형태의 선택입니다. 이번에는 float 를 선택합니다. 그러면 다음과 같이 항목이 추가됩니다.

매개 변수를 추가
매개 변수를 추가

매개 변수 이름은 New Float 에서 DirectionX 로 변경합니다.

마찬가지로 float 형으로 DirectionY 라는 매개 변수를 추가합니다. 이 두 매개 변수 캐릭터의 이동 방향이나 정지시의 방향을 나타냅니다.

화면의 오른쪽을 DirectionX = 1, 왼쪽을 DirectionX = -1, 위쪽을 DirectionY = 1, 아래를 DirectionY = -1로 표현합니다. 이 경우 형태는 float 대신 int 좋다고 생각하지만 지금부터 설명하는 부분에서 float 형의 파라 메이 타 만 사용할 수있는 기능이 있기 때문에 여기에서는 float로 만들고 있습니다.

마지막으로 하나 더, 현재 이동 중이거나 중지 여부를 나타내는 Walking 는 파라 메이 타를 bool 형식으로 만듭니다.

모든 매개 변수를 추가 한 상태
모든 매개 변수를 추가 한 상태

다음 Brend Tree를 선택하고 Inspector에서 작업을 수행합니다. Blend Type 을 2D Simple Directional 로 변경합니다. 2D Simple Directional을 사용하면 두 파라 메이 타를 2 축 값으로 한 2 차원 평면에 애니메이션을 배치 할 수에서 k입니다. 그러면 파라 메이 타 값에 맞추어 애니메이션을 전환 할 수 있습니다.

이번 경우에는 DirectionX에서 좌우 DirectionY로 상하 4 방향의 위치에 애니메이션을 배치하고갑니다. 우선 Parameters 를 DirectionX 과 DirectionY 로 설정합니다.

모든 매개 변수를 추가 한 상태
모든 매개 변수를 추가 한 상태

이어 2 차원 좌표에 애니메이션을 할당 작업을 진행합니다. Motion 라고 쓰여져있는 영역의 오른쪽 아래에있는 + 를 클릭하고 Add Motion Field 를 선택하여 추가합니다. 이를 4 회 반복하여 4 개의 필드를 추가합니다. 두 번째로 표시가 바뀝니다 만 신경 쓰지 않고 추가가주세요.

 Add Motion Field를 선택
Add Motion Field를 선택

필드의 추가를 완료하면 이와입니다. 기본적으로 입력되는 값이 다를 수 있습니다 만 거기 변경하기 때문에 걱정하지 마십시오.

4 개의 필드를 추가 한 상태
4 개의 필드를 추가 한 상태

추가 된 4 개의 필드에 다음 Animation Clip 값을 설정합니다. Motion 부분에는 Animation Clip을 설정합니다. walk_ ~는 wait_ ~와 실수하기 쉽기 때문에주의하여 선택하십시오.

MotionPos XPos Y
walk_right10
walk_left-10
walk_frontward01
walk_backward0-1

설정하면 Inspector의 표시는 다음과 같다,

 Inspector
Inspector

Animator 뷰의 표시는 이와 같이 띠 있습니다. walk_ ~라고 wait_ ~를 잘못 아닌가 확실히 확인해 둡시다.

 Animator보기
Animator보기

Base Layer를 클릭하고 Base Layer로 돌아갑니다.

 Base Layer를 클릭
Base Layer를 클릭

그리고 이번에는 또 다른 Brend Tree, Wait 를 두 번 클릭하여 편집을 시작합니다.

정지 상태의 애니메이션 설정

Walk의 Brend Tree와 마찬가지로 Blend Type 을 2D Simple Directional 로 변경Parameters 를 DirectionX 과 DirectionY 로 설정합니다. + 를 클릭하고 Add Motion Field 를 4 회 실시합니다.

추가 된 4 개의 필드는 다음 Animation Clip 값을 설정합니다.

MotionPos XPos Y
wait_right10
wait_left-10
wait_frontward01
wait_backward0-1

이제 Wait 설정이 완료됩니다. 또한 Base Layer로 이동하여 Walk와 Wait를 연결합니다.

Walk와 Wait 연결

Walk에 마우스 오른쪽 클릭하고 Make Trnsition를 선택합니다.

 Make Transition
Make Transition

그러자 화살표가 포함 된 라인이 표시되기 때문에 Wait 위에 마우스 커서를 이동하고 왼쪽 클릭하여 확인합니다. 이제 Walk에서 Wait로의 전환이 설정되었습니다.

 Walk에서 Wait로의 전환을 설정
Walk에서 Wait로의 전환을 설정

이어 전환 조건을 설정합니다. 이제 추가 한 화살표를 선택한 후 Inspector의 Conditions값을 다음과 같이 변경합니다. 보행 중 플래그가 false 인 경우 Wait로 전환하는 설정입니다.

 Conditions 설정
Conditions 설정

이번에는 반대로 Wait에서 Walk의 전환을 설정합니다. Wait를 오른쪽 클릭하고 Make Trnsition을 선택 Walk에 위에서 왼쪽 클릭합니다.

 Wait에서 Walk의 전환을 설정
Wait에서 Walk의 전환을 설정

Wait에서 Walk에 뻗어있는 화살표를 선택하고 Inspector의 Conditions 값을 다음 용으로 변경합니다. 보행 중 플래그 Walking가 true 때에 Walk로 전환하는 설정입니다.

 Conditions 설정
Conditions 설정

Mecanim 작업이 완료됩니다. 이어 Mecanim에서 설정 한 매개 변수에 대해 프로그램에서 값을 할당하는 작업을 만듭니다.

키 입력에 따라 애니메이션을 할

PlayerControl 라는 C # 파일을 만들고 다음의 내용을 기술 해주십시오. 이것을 Player로 드래그하면 키보드의 방향키 입력에 대응하고 Player가 이동합니다.

  1. using UnityEngine ;
  2. using System . Collections ;
  3. public class PlayerControl : MonoBehaviour {
  4. protected Animator animator ;
  5. Private float directionX = 0 ;
  6. Private float directionY = 0 ;
  7. Private bool walking = false ;
  8. void Start () {
  9. animator = GetComponent < Animator > ();
  10. }
  11. void Update () {
  12. if ( animator )
  13. {
  14. float h = Input . GetAxisRaw ( "Horizontal" );
  15. float v = Input . GetAxisRaw ( "Vertical" );
  16. walking = true ;
  17. if ( h > 0 ) {
  18. directionX = 1 ;
  19. directionY = 0 ;
  20. } else IF ( h < 0 ) {
  21. directionX = - 1 ;
  22. directionY = 0 ;
  23. } else IF ( v > 0 ) {
  24. directionX = 0 ;
  25. directionY = 1 ;
  26. } else IF ( v < 0 ) {
  27. directionX = 0 ;
  28. directionY = - 1 ;
  29. } else {
  30. walking = false ;
  31. }
  32. if ( walking ) {
  33. transform . Translate ( new Vector3 ( directionX , directionY , 0 ) * Time . deltaTime * 0.5f );
  34. }
  35. animator . SetFloat ( "DirectionX" , directionX );
  36. animator . SetFloat ( "DirectionY" , directionY );
  37. animator . SetBool ( "Walking" , walking );
  38. }
  39. }
  40. }

이상에서 완성입니다. 완성 된 프로젝트를 여기 에두고 있습니다. 만약 여기까지의 작업이 작동하지 않은 경우에는 기사와이 프로젝트를 비교해하면서 확인하여 보시기 바랍니다.

Tips

이번에는 생략했지만 예를 들어 Walk backward0과 Walk backward2 등은 동일한 이미지이므로 Walk backward2의 이미지는 포함하지 않고, Walk backward0 만 사용하도록하면 텍스처의 용량을 줄일 수 있습니다.

또한 이번에는 오른쪽과 왼쪽은 다른 Sprite를 사용했지만 왼쪽은 오른쪽 Sprite의 transform.localScale.x 값을 -1로 대체 할 수 있습니다. 이 방법으로 왼쪽의 Sprite 이미지를 통째로 줄일 수 있습니다. 그러나이 방법은 "머리 오른쪽에 리본을 붙이고있다」등 오른쪽과 왼쪽에서 디자인이 다른 캐릭터의 경우에는 사용할 수 없으므로주의하시기 바랍니다.

덧붙여 이번은 텍스처의 포맷을 기본 Compressed 그대로 사용하고 있습니다. 필요에 따라 16bit 또는 True Color로 변경하여 사용하시기 바랍니다.

출처 : http://mobiletou.ch/2013/11/unity4-3-%E3%81%A7%E8%BF%BD%E5%8A%A0%E3%81%95%E3%82%8C%E3%81%9F-sprite-%E6%A9%9F%E8%83%BD%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-%E3%81%9D%E3%81%AE1