토이랜드 미니 영상 - NGUI를 이용한 모바일 2D게임 만들기










Unity 4.6.7, NGUI 2.7.0






저작자 표시 비영리 변경 금지
신고






1. 캐릭터 Prefab 만들기





Prefab이란 게임 오브젝트를 하나의 틀로 만들어 언제든지 인스턴스화 하여 사용할 수 있도록 하는 것입니다.

즉, 앞서 만든 캐릭터를 Prefab으로 만들면 언제든지 인스턴스화하여 여러개를 만들 수 있습니다.











먼저 GrayKnight 의 Prefab을 저장하기 위하여 GrayKnight 폴더에 Prefab 이라는 폴더를 만듭니다.
















그 다음 Hierarchy 창에서 앞서 만들었던 GrayKnight 게임 오브젝트를 선택한 후 Prefab 폴더로 드래그 앤 드롭 합니다.

그럼 Prefab 생성이 끝납니다.










2. 캐릭터 생성을 관리할 GameManager 만들기






캐릭터 생성을 관리할 GameManager 를 만들도록 합니다.













먼저 Script 폴더에 GameManager 라는 스크립트를 생성합니다.



















GameManager 스크립트에 위의 코드를 작성합니다.


- public GameObject _grayKnightObj;

  - GrayKnight 프리팹을 담을 게임 오브젝트 변수입니다.


- void createGrayKnight()

  - GrayKnight 캐릭터 생성을 담당할 함수입니다.


- GameObject _object = Instantiate (_grayKnightObj, Vector3.zero, Quaternion.identity) as GameObject;

  - Instantiate 를 이용하여 게임 오브젝트 인스턴스를 만듭니다.

    (관련 포스팅 : http://khm979.tistory.com/entry/Instantiate-게임-씬-안에-오브젝트를-생성하기)


- _object.transform.parent = GameObject.Find ("GrayKnight").transform;

  - 생성한 인스턴스의 관리를 효율적으로 하기 위하여 부모 게임 오브젝트를 GrayKnight 로 설정합니다.

  - Find 를 이용하여 게임 씬에 존재하는 게임 오브젝트의 정보를 가져올 수 있습니다.


- _object.transform.localPosition = new Vector3 (-365.0f, -254.0f, 0.0f);

  - 생성한 인스턴스의 좌표를 설정합니다.


- _object.transform.localScale = new Vector3 (1.0f, 1.0f, 1.0f);

  - 생성한 인스턴스의 크기를 설정합니다.















Hierarchy 에 빈 게임 오브젝트를 생성한 후 이름을 GameManager로 변경합니다.

그 후 GameManager 게임 오브젝트에 앞서 생성한 GameManager 스크립트를 추가합니다.















그리고 GameManager 의 Inspector 창에서 Gray Knight 란에 GrayKnight Prefab 을 드래그 앤 드롭으로 추가합니다.














3. 캐릭터 생성 UI 버튼 만들기







마지막으로 캐릭터를 생성할 버튼을 만들어보겠습니다.














먼저 빈 게임 오브젝트를 생성한 후 이름을 UI 로 수정합니다.













다음으로 메뉴에서 NGUI - Open the Widget Wizard 를 선택하여 Widget Tool을 실행합니다.















GrayKnight 를 생성하는데 사용할 이미지를 선택한 후 Add To 를 누릅니다.














추가한 이미지의 이름을 Btn_GrayKnight 로 수정한 후 Inspector 창에서 하단의 Add Component 를 누릅니다.

그리고 Box Collider 와 Button Message 를 추가합니다.

Box Collider 는 마우스로 해당 게임 오브젝트를 클릭했는지 여부를 판단하기 위해서입니다.

Button Message 는 마우스로 해당 게임 오브젝트를 클릭했을 때 실행할 함수를 설정하기 위해서입니다.

















추가한 UIButton Message 컴포넌트에서 Target 에는 GameManager 게임 오브젝트를 드래그 앤 드롭으로 추가합니다.

그리고 Function Name 은 실행 할 함수명입니다.

GameManager 스크립트에서 createGrayKnight 라는 캐릭터 생성 함수를 만들었기때문에

createGrayKnight 를 입력합니다.











아래는 버튼 클릭 시 캐릭터가 생성되는 영상입니다.






저작자 표시 비영리 변경 금지
신고






1. 애니메이션 클립의 애니메이터 상태 설정하기





Assets - Animation 의 GrayKnight 애니메이터 컨트롤러를 실행합니다.








그럼 지금까지 만든 애니메이션 클립이 나타납니다.

0_idle 애니메이션 클립이 기본 실행 애니메이션이기때문에 주황색으로 나타나 있습니다.

걷기, 공격, 죽음 애니메이션 모두 기본 애니메이션인 idle 애니메이션에서 전환됩니다.

0_idle 애니메이션 클립을 선택 후 마우스 오른쪽 버튼 - Make Transition 을 클릭하여 걷기, 공격, 죽음 애니메이션으로의 트랜지션을 만듭니다.

그럼 두 애니메이션 클립을 이어주는 트랜지션 화살표가 생깁니다.

걷기, 공격 애니메이션 둘 다 실행 후 다시 기본 애니메이션으로 돌아와야하므로 마찬가지로 0_idle 로 향하는 트랜지션을 만듭니다.








그 다음으로 각 애니메이션의 트랜지션이 시작하는 조건을 만들기 위해서 파라메터를 추가합니다.

아래 그림처럼 왼쪽 하단의 Parameters 의 옆에 있는 + 버튼을 누른 후 Int 형으로 선택합니다.

그 후 playerState 라고 입력합니다.








0_idle 애니메이션 클립을 선택한 후 인스팩터 탭을 보면 idle 애니메이션에서 각 애니메이션 트랜지션으로 넘어가는 조건을 만들 수 있습니다.

idle 에서 walk 애니메이션으로 넘어가는 트랜지션 조건은 아래 그림처럼 playerState 가 1 일 때 넘어가도록 조건을 설정합니다.








idle 애니메이션에서 attack 애니메이션으로 넘어가는 트랜지션 조건은 playerState 가 2일 때로 설정합니다.








idle 애니메이션에서 dead 애니메이션으로 넘어가는 트랜지션 조건은 playerState 가 3일 때로 설정합니다.








그 다음으로 walk 에서 idle 로 넘어가는 조건을 설정합니다.

마찬가지로 walk 애니메이션 클립을 선택한 후 인스펙터 탭에서 트랜지션을 선택합니다.

조건은 playerState 가 0일 때입니다.








attack 애니메이션에서 idle 애니메이션으로 넘어가는 트랜지션 조건입니다.

이건 공격 애니메이션이 실행되다 끝나면 자동으로 idle 로 넘어가도록 합니다.

Exit Time 조건으로 0.90으로 하면 애니메이션 실행이 90%까지 실행되면 idle 애니메이션으로 넘어가게 됩니다.

Exit Time은 0.0 ~ 1.0까지의 범위를 가지고 있습니다.








2. PlayerController 스크립트 수정하기





애니메이션을 실행하기 위해서는 스크립트에서 파라메터를 조작하여야 합니다.

앞서 만들었던 PlayerController 스크립트를 실행합니다.

저는 각 애니메이션 상태를 관리하기 위해서 public으로 enum 형의 idle, walk, attack, dead 네 개의 항목을 만들었습니다.

idle = 0 으로 설정하면 밑으로는 순서대로 walk = 1, attack = 2, dead = 3 으로 설정되게 됩니다.

이걸로 앞서 애니메이션 클립 트랜지션 조건으로 설정하였던 playerState 파라메터 값을 수정할 겁니다.


그 다음 애니메이터에 접근하기 위해서 public으로 Animator 형의 _anim 변수를 추가합니다.

그리고 캐릭터의 상태 값을 저장하기 위해서 public으로 playerState형의 _state 변수를 추가합니다.

그리고 값을 playerState.walk 로 초기화합니다.


마지막으로 Update 함수에 애니메이션을 실행하기 위한 코드를 추가합니다.

_anim.GetInteger(파라메터 명) 함수를 통해 현재 파라메터의 값을 가져올 수 있습니다.

_anim.SetInteger(파라메터 명, 값) 함수를 통해 해당 파라메터의 값을 설정할 수 있습니다.

즉 아래 코드는 playerState 파라메터의 값을 walk 값으로 설정하는 내용입니다.

그럼 walk 애니메이션은 playerState 파라메터 값이 1일 때 실행되도록 트랜지션을 설정하였기때문에 walk 애니메이션이 실행되게 됩니다.

그리고 playerState 파라메터는 int 형을 설정하였기때문에 _state 를 int형으로 캐스팅해주어야 합니다.










스크립트를 저장한 후 유니티로 돌아와서 캐릭터 오브젝트를 선택하여 인스팩터 탭의 Player Controller 스크립트 컴포넌트 쪽을 보면 Anim 항목이 추가되어 있는 것을 확인할 수 있습니다.

Anim 항목에 Hierarchy 탭의 캐릭터 오브젝트를 드래그 앤 드롭으로 추가합니다.

State 항목 역시 추가되어 있으며 idle, walk, attack, dead 모두 선택할 수 있습니다.










아래는 캐릭터가 이동 시 걷기 애니메이션이 출력되는 영상입니다.




저작자 표시 비영리 변경 금지
신고






1. 캐릭터 이동 스크립트 만들기





앞으로 만들 스크립트들을 관리하기 위해서 Assets - Script 폴더를 만듭니다.










2. C# 스크립트 만들기






대표적으로 사용하는 스크립트는 자바스크립트와 C#입니다.

Script 폴더에서 마우스 오른쪽 버튼 - Create - C#Script 를 눌러서 C#용 스크립트를 만듭니다.

저는 스크립트명을 PlayerController 라고 했습니다.








생성한 C# 스크립트를 더블클릭하여 실행하면 유니티에서 제공하는 기본 스크립트 편집기인 MonoDevelop 프로그램이 실행됩니다.

설정을 통해 익숙한 Visual Studio 로 실행도 가능합니다.

캐릭터의 이동 속도를 제어하기 위해서 public으로 float형 _speed 변수를 추가합니다.

public으로 선언하면 인스펙터 탭 및 다른 C# 스크립트에서 접근할 수 있습니다.


그리고 스크립트를 생성하면 기본적으로 Start 함수와 Update 함수가 생성되어 있습니다.

Start 함수는 해당 오브젝트가 실행될 때 제일 처음 한번만 실행되는 함수입니다.

Update 함수는 해당 오브젝트가 실행되는동안 계속 실행되는 함수입니다.


캐릭터를 계속 이동시킬 것이므로 Update 함수에 캐릭터 이동을 위한 코드를 작성합니다.

transform.Translate(Vector3) 는 해당 코드가 적용된 오브젝트의 transform 컴포너트 값을 이동시키는 함수입니다.

그러므로 transform.Translate (_speed * Time.delta, 0.0f, 0.0f) 는 캐릭터 오브젝트를 x축으로 _speed * Time.deltaTime 만큼 이동시키라는 의미입니다.

여기서 Time.deltaTime 은 Time 함수의 명령어로서 Update 함수가 호출될 때마다 응답시간을 나타냅니다.

Update 함수의 응답 시간은 기기마다 다르기 때문에 _speed 에 Time.deltaTime 을 곱해서 기기마다 같은 속도로 이동할 수 있게 합니다.







스크립트를 저장한 후 Hierarchy 탭에서 캐릭터 오브젝트를 선택한 후 생성한 PlayerController 스크립트를 드래그 앤 드롭으로 추가합니다.

그 후 인스팩터 탭을 보면 public 으로 지정한 Speed 항목이 추가되어 있습니다.

이곳에 원하는 속도를 입력하면 됩니다.







아래 영상은 캐릭터가 이동하는 모습입니다.





저작자 표시 비영리 변경 금지
신고






1. 캐릭터 애니메이션 클립 만들기




앞서 만들었던 Player 오브젝트를 선택한 후에 메뉴 - Window - Animation 을 선택합니다.







그럼 Animation 창이 나타납니다.

아래 이미지처럼 Add Curve 위 빈 곳을 마우스로 클릭하면 Create New Clip 메뉴가 뜹니다.







그 후 Assets - Character - GrayKnight - Animation 폴더를 생성한 후 기본 상태 애니메이션을 만들 것이기 때문에 0_idle.anim 로 저장합니다.






그 다음 Add Curve 를 선택한 후 움직이고 싶은 부위의 Pivot 오브젝트를 선택한 후 Transform - Position 혹은 Rotation 옆의 + 버튼을 눌러줍니다.

Position 은 말 그대로 캐릭터의 위치를 변경하는 애니메이션이 필요할 경우 사용합니다.

일반적으로 다리를 움직이거나 팔을 움직이거나 하는 애니메이션은 Rotation 을 이용합니다.

관절을 중심으로 회전하기 때문이죠.






Sample 은 애니메이션의 총 길이입니다.

기본적으로 60, 즉 1초로 설정되어 있습니다.

바로 위의 숫자 칸은 현재 설정하는 애니메이션의 시간 위치입니다.

그리고 각 시간 위치에 원하는 동작을 설정해주면 됩니다.







같은 방법으로 다른 필요한 애니메이션도 만들어줍니다.

저는 idle(기본 애니메이션), walk(걷기), attack(공격), dead(죽음) 총 4개의 애니메이션을 만들었습니다.

그리고 공격 애니메이션과 죽음 애니메이션은 반복되는 애니메이션이 아니기 때문에 애니메이션 클립 파일을 선택한 후

인스펙터탭에서 Loop Time 체크를 해제하여줍니다.







아래는 생성한 애니메이션들입니다.



1. idle 애니메이션






2. walk 애니메이션






3. attack 애니메이션






4. dead 애니메이션



저작자 표시 비영리 변경 금지
신고






1. 캐릭터 리소스를 아틀라스로 만들기




앞서 배경만들기에서 했던 것처럼 캐릭터 리소스도 아틀라스로 만듭니다.

효율적으로 관리하기 위해서 Assets 폴더 내에 Character - GrayKnight 폴더를 만들고 캐릭터 이미지를 추가하였습니다.

그 후 Atlas Maker 로 아틀라스를 만들어줍니다.







이번에도 마찬가지로 아틀라스 2D 이미지를 선택한 후 인스펙터 탭에서 최적화를 위한 설정을 해줍니다.






그 다음으로 캐릭터 오브젝트를 관리하기 위한 패널을 생성합니다.

메뉴의 NGUI - Create a Panel 를 선택하여 새로운 패널 오브젝트르 생성합니다.






생성한 패널 오브젝트명을 PlayerObj 로 변경합니다.






그 후 배경 이미지를 만들었던 것처럼 Widget Wizard 를 이용하여 캐릭터 이미지들을 생성합니다.

그리고 이미지들을 잘 조립(?)하고 이미지 순서에 맞춰서 Depth 값을 설정합니다.

Depth 값이 클수록 다른 이미지보다 앞에 보입니다.







아래 이미지는 캐릭터 부위들을 잘 맞춰서 표현한 캐릭터 완전체(!)입니다.






2. 빈 게임 오브젝트로 피봇 오브젝트 만들기




앞서 생성한 캐릭터 이미지의 각 부위들의 중심점은 각 이미지의 중심입니다.

그래서 애니메이션을 제작하기는 불가능합니다.

그렇기때문에 빈 게임 오브젝트를 활용해서 각 관절에서 구심점 역할을 하는 피봇 포인트를 만들어보겠습니다.

먼저 유니티에서 Pivot 으로 설정합니다.






그 후 Hirarchy 탭에서 PlayerObj를 선택한 후 마우스 오른쪽 버튼 - Create Empty 를 선택하여 빈 오브젝트를 생성합니다.







그 다음 생성한 빈 게임 오브젝트의 위치를 원하는 접점의 구심점 역할을 하는 곳으로 위치시킵니다.

아래 그림은 왼쪽 다리가 몸과 접하여 움직이는 부분에 게임 오브젝트를 위치시킨 모습입니다.






올바르게 위치시켰다면 해당 게임 오브젝트명을 0_Leg_Left_Pivot 으로 변경하고

0_Leg_Left 이미지 오브젝트를 0_Leg_Left_Pivot 하위 오브젝트로 드래그하여 넣어줍니다.







그 후 0_Leg_Left_Pivot 오브젝트를 선택한 후 W 키를 눌러 회전시키면 다리가 몸과 접한 부분에서 회전하는 것을 확인할 수 있습니다.







다른 부위들도 마찬가지로 빈 게임 오브젝트를 생성하여 Pivot 오브젝트로 만들어줍니다.



저작자 표시 비영리 변경 금지
신고






1. Scene 관리를 위한 폴더 생성 및 Scene 저장



Scene 을 저장하고 관리하기 위한 Scene 폴더를 생성합니다.

Assets 오른쪽 버튼 - Create - Folder 를 눌러서 새로운 폴더를 생성하고 폴더명을 Scene 으로 합니다.







그 다음으로 File - Save Scene 또는 Ctrl + S 를 눌러서 Scene 폴더에 현재 Scene 을 저장합니다.

저는 1_PlayScene 이라는 이름으로 저장했습니다.





그럼 아래 그림처럼 유니티 내에서도 Scene 이 저장된 것을 확인할 수 있습니다.







2. NGUI UI 오브젝트 생성



NGUI 를 사용하려면 NGUI UI 오브젝트를 생성하여야 합니다.

NGUI UI 에 카메라도 포함되어 있기 때문에 기본적으로 유니티에서 제공하는 Main Camera 는 필요없으므로 삭제합니다.






그리고 메뉴 - NGUI - Open the UI Wizard 를 선택합니다.






그럼 UI Tool 창이 뜹니다.

하단의 Create Your UI 를 클릭합니다.






Hierarchy 탭에 UI Root(2D) 오브젝트가 생성된 것을 확인할 수 있습니다.

UI Root(2D) 오브젝트는 화면을 보여주는 Camera 오브젝트, 정렬을 담당하는 Anchor 오브젝트, NGUI에서 사용되는 Widget 오브젝트들이 배치되는 Panel 오브젝트로 구성되어 있습니다.







3. 2D 이미지 리소스 추가하기



PlayScene에서 사용할 2D 이미지 리소스를 관리하기 위해서 Assets 폴더에 Resource - PlayScene 이라는 폴더를 만듭니다.

그리고 마우스 오른쪽 버튼 - Import New Assets 를 클릭합니다.






그리고 PlayScene 에서 사용할 2D 이미지들을 Import 합니다.

이렇게 직접 Import 해도 되고 드래그 앤 드롭으로 Import 하는 것도 가능합니다.






그럼 아래 그림처럼 PlayScene 폴더 내에 2D 이미지 리소스들이 추가된 것을 확인할 수 있습니다.






4. 2D 이미지를 NGUI용 아틀라스로 만들기



NGUI에서는 게임에 사용되는 2D 이미지들을 하나의 커다란 이미지로 합쳐서 아틀라스로 관리합니다.

메뉴 - NGUI - Open the Atlas Maker 를 클릭합니다.





그럼 아래 그림처럼 Atlas Maker 창이 뜹니다.

Create 버튼 옆에 생성할 아틀라스의 이름을 입력합니다.

그리고 아까 추가했던 2D 이미지들을 선택합니다.

그럼 Atlas Maker 창 아래 Sprites 부분에 리소스들이 추가되는 것을 볼 수 있습니다.

다 추가하였으면 Create 버튼을 클릭합니다.






그럼 아래 그림처럼 메테리얼 파일과 프리팹 파일, 2D 이미지 파일로 총 3개의 파일이 생성됩니다.





다음으로 아틀라스로 생성된 2D 이미지 파일을 선택하여 최적화 작업을 진행합니다.

안드로이드는 에뮬레이터상에서 지원하는 이미지 최대 크기가 4096 x 4096 이라 별 문제 없이 실행되지만

iOS의 경우 기기마다 지원하는 텍스쳐 최대 크기가 다릅니다.

그리고 이미지 크기가 너무 클 경우에는 용량도 커지기 때문에 메모리가 부족할 수도 있습니다.

그렇기때문에 플랫폼별로 이미지 데이터를 효율적으로 압축하여야 합니다.

 





앞에서 생성한 아틀라스 2D 이미지를 선택한 후 인스펙터창에서 아래 이미지처럼 설정합니다.

Texture Type 를 Advanced 로 선택합니다.

그 후 아래에 생기는 Generate Mip Maps 옵션 체크를 해제합니다.

이 기능은 2D 이미지를 다양한 크기로 미리 데이터를 만들어 놓고 로딩을 빠르게 해주는 기능인데

화질이 저하되고 용량이 증가되므로 모바일 환경에서는 맞지 않습니다.

그 다음 아래 이미지에는 잘못되었는데 Default 탭 옆에 안드로이드 탭을 선택한 후

Override for Android 를 체크하고

Max Size 2048, Format RGBA 32 bit 를 선택한 후 Apply 를 클릭하여 완료합니다.






5. 창 크기를 게임 해상도에 맞추기




모바일 게임을 제작할 때에는 개발 환경으로 설정한 해상도에 맞춰서 작업하는것이 매우 중요합니다.

아래 그림처럼 Game 탭의 상단을 클릭한 후 유니티에서 제공하는 해상도 중에서 맞는 것을 선택하시면 됩니다.

저는 배경 이미지 사이즈가 640 x 360 이라 따로 해상도를 만들었습니다.






그 후에 NGUI 개발 환경도 설정한 해상도에 맞추어야 합니다.

Hierachy 탭에서 UI Root (2D) 를 선택한 후 인스펙터 탭의 UIRoot (Script) 컴포넌트로 갑니다.

Scaling Style 을 FixedSize 로 선택하고 Manual Height 를 설정한 해상도 Height 로 선택합니다.

저는 360 으로 선택했습니다.

1280 x 800 해상도라면 800 을 입력하면 됩니다.

그럼 UI Root (2D) 오브젝트 하위에 있는 오브젝트의 크기가 자동으로 변경되어 다양한 해상도에 대응하게 됩니다.






6. Widget Wizard 를 이용하여 배경 만들기



NGUI 의 Widget Wizard 를 이용하여 배경을 만들어 보겠습니다.

메뉴 - NGUI - Open the Widget Wizard 를 선택합니다.






그럼 아래 그림과 같이 Widget Tool 창이 뜹니다.

Atlas 를 선택한 후 앞서 생성하였던 아틀라스를 선택합니다.

그 후 Template 를 Sprite로 선택하고 Sprite 에서 배경으로 사용할 이미지를 선택합니다.

마지막으로 Add To 버튼을 선택합니다.






아래 그림처럼 배경 이미지가 생성된 것을 확인할 수 있습니다.






그 다음으로 추가된 배경 이미지의 오브젝트 이름을 PlayBg 로 변경합니다.





Panel 오브젝트명도 BGObj로 변경합니다.



저작자 표시 비영리 변경 금지
신고






1. 프로젝트 만들기


Unity 실행 후 File - New Project 를 선택합니다.

그리고 Project Location 에 경로를 지정한 후에 Create 를 눌러 새로운 프로젝트를 생성합니다.







2. Build Settings


처음 프로젝트를 생성하면 기본적으로 PC 개발 환경으로 설정되어 있습니다.

안드로이드 게임을 만들 것이기 때문에 안드로이드 개발 환경으로 변경해야합니다.

File - Build Settings 를 클릭합니다.








그럼 아래 그림처럼 Build Settings 창이 뜹니다.

Android 를 선택한 후에 Switch Platform 을 클릭하면 안드로이드 개발 환경으로 변경됩니다.

iOS 로 개발하기 위해서는 Mac PC가 필요합니다.





3. NGUI Import 하기


NGUI 는 유료 패키지인데 2.7.0 버전은 무료로 제공되고 있습니다.

NGUI 2.7.0 이 없으시다면 아래 링크를 클릭하여 다운받으시기 바랍니다.


NGUI 2.7.0 다운로드



메뉴의 Assets - Import Package - Custom Package... 를 선택합니다.






다운로드 받은 NGUI 2.7.0 패키지를 선택한 후에 열기를 누릅니다.






그럼 아래처럼 Importing pakage 창이 뜹니다.

기본적으로 모든 파일이 선택되어 있습니다.

혹시 선택되어 있지 않다면 All 버튼을 클릭한 후에 Import 버튼을 클릭합니다.






Import 가 끝나고나면 아래 그림처럼 Project - Assets 에 NGUI 가 추가되어 있습니다.





Unity 를 재실행하면 메뉴에도 NGUI 메뉴가 추가되어 있습니다.







저작자 표시 비영리 변경 금지
신고