Unity3D :: Live2D 적용 및 튜토리얼 #2

먼저 본격적으로 Live2D를 사용하기에 앞서서, Live2D를 알아가도록 하자.

 

Live2D란?

 

 - Vertex Animation 을 이용한 애니메이션 라이브러리

 - 튜토리얼 안에 보면 알겠지만 .mtn 파일과 .moc, .physics 파일등 여러 파일이 하나의 애니메이션을 만들기위해 이용된다.

   이 애니메이션에 필요한 파일들은 우리가 제작을 하면 스크립트 형태로 뽑아서 나오게 된다.

 

 - Unity3D 에서 사용할 때 Pro 라이센스가 필요하지 않다.

 - 구글링해도 자료가 많이 나온다.

 

쇼케이스

 

 홈페이지 : http://www.live2d.com/en/showcase

 쇼케이스 에서는 여태까지 Live2D로 만들어진 게임이 무엇이 있는가에 대해서 볼 수 있다.

 참고하면 좋을 듯 싶다.

 

Live2D 데이터를 만들기위해 먼저 Editor를 다운받도록 하자.

 

 홈페이지 : http://sites.cybernoids.jp/cubism-editor2_e/

 

Editor와 Live2D Viewer를 다운받는다.

 

다운 받은후, 아래의 링크에서 만들면 된다.

이 블로그는 만드는 방법에 대해서는 설명하지 않는다.

 

홈페이지 : http://www.live2d.com/cubism2-0

각각의 튜토리얼을 보면서 만들도록 하고, 우리는 적용방법에 대해서 알아보도록 하자.

 

만약 만드는게 좀 까다롭다면 아래의 링크에서 오픈리소스를 사용하도록 하자.

홈페이지 : http://sites.cybernoids.jp/cubism_e/samples

 

 

설명

 

0. 먼저 SampleApp1 예제를 킨다.

 

우리는 이해를 쉽게 하기위해 SampleApp1 에서 추가하는 작업을 할 것이다.

 

 

 

바로 저 폴더를 대상으로 프로젝트를 열면 된다.

 

1. 리소스를 다운 받는다.

 

 필자는 리소스를 만들 능력이 없기때문에 오픈리소스를 사용하여 하도록 하겠다.

 먼저 오픈 리소스를 다운 받는 방법은 위의 링크를 이용한 방법으로 하도록 하겠다.

 왜냐하면 Live2D를 사용하기 위해서는 굉장히 까다로운 작업을 통해서 리소스를 배출해야하기 때문이다.

 2D 이미지를 구했다고 하더라도 일일히 잘라내는 작업이 필요하기 때문에..

 

 

 

필자는 여러가지 캐릭터중 가장 맨 위에 있는 Hatsune Miku (하추네 미쿠?) 라는 캐릭터를 선택했다.

밑에 Sample Materials 란에 있는 Hatsune Miku - Data Files for embedding 을 선택해서 다운받으면 되겠다.

 

다운받은 후 압축을 풀면 아래의 사진과 같은 파일들이 나온다.

 

 

이제 이 파일들을 다 복사한 후, 우리가 원하는 유니티 폴더 안에 넣도록 하자.

필수적으로, 유니티 폴더의 Resources 안에 넣어주어야 한다 이 점 유의 하도록 하자.

(사실 Resources 안에 넣을 필요는 없지만 Resources.Load 를 사용하기 편하게..)

 

 

 

이렇게 리소스를 넣어준다.

 

2. Live2D_Canvas를 이용해서 추가를 하자.

 

왼쪽 상단에 Live2D라는 탭이 생겼을 것이다. 거기에 있는 Create Live2D Canvas를 누르면 Hierarchy 안에 Live2D_Canvas 라는 것이 만들어 질 것이다.

 

 

 

새로 생성된 Live2D_Canvas 오브젝트를 선택하고 Inspector를 보자

 

 

자동으로 Mesh가 생성되며 Mesh Collider 까지 생성이 된다.

Mesh Collider가 생성이 되면서 이 Mesh Collider는 클릭 이벤트 등의 역할을 담당하게 되며, Audio Source는 사운드 관련한 도움을 주게 된다. (터치를 하면 응답을 한다던지)

 

우리가 주요로 봐야 할 스크립트는 가운데 있는 LApp Model Proxy이다.

내부에 보면 Path와 Scene No가 존재하는데, 우리가 예제를 돌려보면 알겠지만 왼쪽 하단의 옵션을 누르게 되면 캐릭터가 바뀌며 총 4개가 존재한다. Hierarchy의 Live2D_Canvas 오브젝트들을 보면 알겠지만 각각 오브젝트들이 전부 LApp Model Proxy가 존재하며 Scene No가 순서대로 존재한다는 것을 알게 될 것이다.

 

그러므로 우리는 다음번째로 할 것이기 때문에 Scene No를 4로 지정하도록 하자. ( 0부터 시작하기 때문에 )

제일 중요한 것은 Path인데, 이 path는 우리가 불러올 오브젝트의 Model 정보를 가져오는 소스코드이다.

한번 스크립트를 보도록 하자.

 

/** * * You can modify and use this source freely * only for the development of application related Live2D. * * (c) Live2D Inc. All rights reserved. */ using UnityEngine; using System; using System.Collections; using System.Collections.Generic; using System.IO; using System.Text ; using System.Runtime.InteropServices; using live2d; using live2d.framework; [ExecuteInEditMode] public class LAppModelProxy : MonoBehaviour { public String path=""; public int sceneNo = 0; private LAppModel model; private bool isVisible = false ; void Awake() { if (path == "") return; model = new LAppModel(this); LAppLive2DManager.Instance.AddModel(this); var filename = FileManager.getFilename(path); var dir = FileManager.getDirName(path); Debug.Log("Load " + dir +" filename:"+ filename); model.LoadFromStreamingAssets(dir, filename); } void OnRenderObject() { if(!isVisible) return; if(model==null)return; if(model.GetLive2DModelUnity().getRenderMode() == Live2D.L2D_RENDER_DRAW_MESH_NOW) { model.Update(); model.Draw(); } if (LAppDefine.DEBUG_DRAW_HIT_AREA) { // デバッグ用当たり判定の描画 model.DrawHitArea(); } } void Update() { if(!isVisible) return; if (model == null) return; if (model.GetLive2DModelUnity().getRenderMode() == Live2D.L2D_RENDER_DRAW_MESH) { model.Update(); model.Draw(); } } public LAppModel GetModel() { return model; } public void SetVisible(bool isVisible) { this.isVisible = isVisible; } public bool GetVisible() { return isVisible; } public void ResetAudioSource() { Component[] components = gameObject.GetComponents<AudioSource>(); for (int i = 0; i < components.Length; i++) { Destroy(components[i]); } } }

 

이 소스가 보일텐데 먼저 Awake를 보도록 하자.

 

void Awake() { if (path == "") return; model = new LAppModel(this); LAppLive2DManager.Instance.AddModel(this); var filename = FileManager.getFilename(path); var dir = FileManager.getDirName(path); Debug.Log("Load " + dir +" filename:"+ filename); model.LoadFromStreamingAssets(dir, filename); }

 

Awake는 Unity에서 가장 처음으로 들어오는 함수이며, 스크립트가 활성화 되었을때 들어온다.

여기 소스를 보게되면, model.LoadFromStreamingAssets 라는 함수로 모델 데이터를 경로에서 불러온다.

 

즉 우리는 path 에다가 model.json 파일을 가져오면 된다.

에디터에서는 json이라는 확장자가 안보이므로 .model 파일의 경로를 가져오고 뒤에 .json을 붙여주면 된다.

 

3. 실행

 

 

 

실행하면 위와 같은 결과가 나오게 된다.