2D 스프라이트 만들기

[자유사랑]

출처 :  http://dolphin.ivyro.net/file/mobile/unity/tutorial23.html

2D Sprite Animation

유니티 4.3 버전부터 2D 기능이 추가 되었다.
이전에는 카메라를 직교 카메라로 만들어서 2D 기능을 사용하던지, 아니면 2DToolkit 플러그인을 사용해서 만들었다.

< 2D 모드로 프로젝트 생성 >

유니티 시작할 때 프로젝트 위자드의 "Create New Project" 탭에서 아래를 보면 Setup default for에서 2D로 프로젝트를 생성한다.

이미 프로젝트를 생성했다면 Project Settings에서 바꿀수 있다.

메뉴 / Edit / Project Settings / Editor로 Editor Settings을 실행한다.
"Default Behavior Mode"의 Mode를 2D로 바꾼다.

리소스와 내용을 가져와서 번역한것이다.
http://blog.cshool.jp/2013/12/5133.html

< 스프라이트 설정 >

스프라이트 이미지를 Asset 폴더에 복사한다.

스프라이트 이미지를 한꺼번에 모두 선택후, Inspector창에서 옵션을 설정한다.

Texture Type : 2D 애니이므로 Sprite로 설정
Sprite Mode : 한 장에 하나의 이미지므로 Single로 설정
Packing Tag : 팩킹 이름이 같으면 하나의 이미지로 팩킹 된다.
Pixels To Units : 유니티의 기본단위는 1m이다. 100을 입력하면 100픽셀이 1m가 된다.
Pivot : 이미지의 중심점
Filter Mode : 텍스쳐가 3D에 의해 Transform 되었을 때, 어떻게 필터 되는지 설정
 

< Sprite Packer로 텍스쳐 확인 >

Packing Tag가 bird로 설정 되어 있다.

메뉴 / Window / Sprite Packer로 확인 할 수 있다.
Sprite Packer 대화 상자에 "Sprite packing is disabled. Enable it in Project editorSettings." 메시지가 있으면  Sprite Packer Mode를 활성화 시켜야 볼수 있다.

활성화는 메뉴 / Edit / Project Settings / Editor로 Editor Settings에서 Sprite Packer Mode를 "Always Enabled"로 수정하면 된다.

< Sprite 배치 >

메뉴 / GameObject / Sprite로  스프라이트 오브젝트를 생성한다.
오브젝트 이름은 Player로 정한다.
임의의 스프라이트 이미지 하나를 스프라이트 렌더러의 Sprite로 드래그한다.
Scene 창에서 배치된 Sprite Object를 볼수 있게 된다.

 

< 스프라이트에 애니션이션 기능 추가 >

Player 오브젝트 클릭
메뉴 / Component / Miscellaneous / Animator로 Animator 컴포넌트 생성
Apply Root Motio은 해제 한다.
애니메이션의 움직임이 게임오브젝트의 좌표 이동에 영향을 끼칠때 적용한다.

< 빈 Animation 데이터 생성 >

Animator 컴포넌트 추가 후,
메뉴 / Window / Animation을 선택하여 Animation 창을 띄운다.

빈 애니메이션 데이터를 생성하자.
Add Curve 버튼위에 상, 하 화살표 버튼을 클릭, 다시 "Create New Clip" 버튼을 클릭한다.

"Create New Animation" 창이 뜬다.
입력은 Player@fly.anim으로 한다. @는 알아보기 쉽도록 하기 위해 넣은 것이다.
프로젝트 창에 애니메이션 데이터가 생성된다.

< 애니메이션 데이터 편집 >

1) Hierarchy에서 Plyaer 게임오브젝트 선택

2) "Create New Clip" 컨트롤에 Player@fly가 선택 되었는지 확인

3) "Add Curve"클릭 "Sprite Renderer" 드랍다운 버튼 클릭 Sprite "+" 클릭

Project 뷰에서 fly 스프라이트를 타임라인으로 드래그 해서 배치한다.

플레이 버튼을 눌러 미리보기로 확인한다.

걷기 애니메이션도 "Create New Clip"으로 Player@walk.anim라는 이름으로 추가한다.

< 애니메이션 전환 >

스파리이트 애니메이션 전환도 Mecanim을 이용해서 애니메이션 전환을 한다.
애니메이션 전환을 하기 전에 Player의 Inspector View에서 Animator 컴포넌트의 Controller가 Player로 설정이 안되었다면 Project 뷰에서 Player를 드래그 해서 설정한다.

메뉴 / Window / Animator를 클릭하여 Animator 뷰를 띄운다.

1) Animator View를 클릭하면 Player@fly, Player@walk가 추가 되어 있을것이다.
우클릭하여 "Make Transition"으로 애니메이션 노드를 연결한다.

2) bool 타입의 Grounded 파라메터를 추가한다.
공중에 있으면 날기 애니메이션, 땅에 있으면 걷기 애니메이션을 하기 위해서이다.

3) 트랜지션에 Grounded 속성 부여
fly에서 walk 트랜지션 : Grounded가 true일때
 

walk에서 fly 트랜지션 : Grounded가 false일때
 

실행 버튼을 눌러 Grounded Parameters 체크박스를 클릭해서 애니메이션이 걷기로 전환되는지 확인한다.

< Physics2D 설정 >

리지드 바디 추가 : 메뉴 / Component / Physics 2D / Rigidbody 2D
충돌 박스 추가 : 메뉴 / Component / Physics 2D / Circle Collider 2D

Ridgidbody 2D 컴포넌트에서 "Fixed Angle"을 체크한다.
그렇지 않으면 이동할 때, 회전하면서 굴러가게 된다.

Interpolate는 물리 프레임 사이의 보간이다.
자세한 설명은 여기 http://www.unitystudy.net/bbs/board.php?bo_table=tip&wr_id=2

< 지형 설정 >

실행하면 지형이 없기 때문에 캐릭터가 아래로 계속 떨어진다.

Cube 게임오브젝트로 바닥과 벽을 만든다.
이름은 floor, wall1, wall2로 한다.

메뉴 / Component / Physics 2D / Box Collider 2D를 추가한다.
2D 캐릭터와 충돌은 2D끼리 해야 충돌이 잘 된다.

바닥과 벽으로 범위를 벗어나지 않도록 한다.

< 스크립트로 애니메이션 전환>

공주에 있을 때 fly 애니메이션, 땅위에 있을 때 walk 애니메이션으로 전환하는 스크립트를 추가 한다.

public  LayerMask groundLayer;

bool  grounded = Physics2D.Linecast (

    transform.position + transform.up * 1,

    transform.position - transform.up * 0.1f, groundLayer

    );

바닥과 충돌하는 체크는 2D ray 함수인 Physics2D.Linecast( )로 체크한다.
3번째 인자인 레이어를 생략하면 모든 충돌 데이터를 검사한다.

인자를 다음과 같이 넣는 방법도 있다.
1 << LayerMask.NameToLayer("ground")

캐릭터의 충돌 메쉬도 충돌 체크 하고 있어서 바닥체크가 정상적으로 되지 않는다.
바닥과 벽만 Ray를 체크 하도록 레이어를 설정한다.

"Add Layer..."로 gound 레이어를 추가하여 바닥과 벽의 레이어를 설정한다.

floor, wall1, wall2 게임오브젝트에 ground 레이어로 설정
Player 스크립트에서 groundLayer를 "ground"로 설정한다.

게임 시작 버튼을 누르면 지형위에 떨어질때 걷기 애니메이션으로 변환된다.

< non-Physics 이동 >

ChangeSpriteDirection( ) 함수는 나중에 설명하겠다.
좌, 우 방향에 따라 텍스쳐를 좌우로 뒤집는다.

void MoveNonPhysics()

{

    float speed = 7.0f;

    float h = Input.GetAxis("Horizontal");

    transform.Translate( Vector3.right * h * speed * Time.deltaTime);

    float v = Input.GetAxis("Vertical");

    transform.Translate( Vector3.up * v * speed * Time.deltaTime);

    ChangeSpriteDirection(h);

}

< Physics 이동 >

rigidbody2D.AddForce( )메소드로 이동 한다.
제한 속도 이상이면 제한 속도로 설정한다.

Mathf.Sign(float f) : 값이 양이거나 0일때 1로 변환되며, f가 음의 값일때 -1로 변환된다

private float walkForce = 30f;

private float flyForce = 50f;

private float maxWalkSpeed = 30.0f;

private float maxFlySpeed = 5.0f;

void MovePhysics()

{

    float h = Input.GetAxis( "Horizontal" );

    float v = Input.GetAxis( "Vertical" );

    if(rigidbody2D.velocity.x < maxWalkSpeed)

    {

        rigidbody2D.AddForce (Vector2.right * h * walkForce);

    }

    if( v > 0 && rigidbody2D.velocity.y < maxFlySpeed )

    {

        rigidbody2D.AddForce( Vector2.up * v * flyForce );

    }

    if( Mathf.Abs( rigidbody2D.velocity.x) > maxWalkSpeed )

    {

        rigidbody2D.velocity = new  Vector2(

            Mathf.Sign(rigidbody2D.velocity.x) *maxWalkSpeed, rigidbody2D.velocity.y

            );

    }

    ChangeSpriteDirection(h);

}

< 좌, 우 방향으로 텍스쳐 바꾸기 >

텍스쳐 이미지가 바라보고 있는 방향은 오른쪽이다.
 h는 좌, 우 입력값이다.

facingRight가 false이고 h > 0
facingRight가 true이고 h true 0 이면 텍스쳐의 좌, 우가 바뀐다.
스케일이 음수이면 좌우가 바뀐다.

private bool facingRight = true;

void ChangeSpriteDirection(float h)

{

    if((h> 0 && facingRight == false) || (h <0 && facingRight))

    {

        facingRight = (h > 0);

        transform.localScale = new  Vector3 ((facingRight? 1 : -1), 1, 1);

    }

}

Tip : 유니티에서 2D 이미지를 미러링 할려면 스케일 값을 음수로 준다.
수평 미러링은 (-1, 1, 1), 수직 미러링은 (1, -1, 1) 값을 준다.

소스 - Player.cs

프로젝트 - 2DSpriteTest.zip