CH:Windship DevDATA Center

출처 : http://jinhomang.tistory.com/entry/%EC%9C%A0%EB%8B%88%ED%8B%B0-%EC%85%B0%EC%9D%B4%EB%8D%94%EC%9D%98-%EA%B8%B0%EC%B4%88

---

안녕하세요, 유니티 셰이더의 기초 두 번째 시작하겠습니다. 

이전 글의 마지막에 소개된 셰이더 코드부터 다시 한번 살펴보겠습니다.

Shader "Solid White" { 
    SubShader { 
        Pass {  
            Color (1,1,1,1)  
        } 
    } 
}

음, 오브젝트를 흰색으로 렌더링하는 셰이더였군요(사실 틀렸습니다. 이전 글에서는 오브젝트를 빨간색으로 렌더링하는 셰이더였죠;). 이 셰이더를 유니티에서 제공하는 구(sphere)에 적용해보도록 하겠습니다:

 구(sphere)가 그냥 흰색 동그라미가 그려졌습니다. 입체감도 없고 딱히 특별한 감흥도 없으며, 이게 도대체 뭔가 싶습니다. 

 사실 우리가 원하는 건 월드에 존재하는 빛과 물체 표면과 반응하여 뭔가 그럴 듯하게 물체가 보여지는 것입니다.

 그럼 이제부터는 빛과 오브젝트 표면이 반응하여 그려지는 약간은 그럴 듯한 셰이더를 제작해봐야 겠군요. 먼저, 씬(scene) 상에는 이미 directional light 1개가 존재하고 있다고 가정하겠습니다. 

 우리가 셰이더 코드에서 해야 할 것은 딱 두 가지입니다. 

 바로 재질(material)과 라이팅(lighting)를 설정하는 것입니다.

 먼저 물체 표면의 재질(material)을 정의해 보도록 합니다. 

 재질은 다음과 같이 ShaderLab의 Material 구문을 이용하여 정의할 수 있습니다.

Material { 
      Diffuse (1,1,1,1) 
      Ambient (1,1,1,1) 
}

 음, 매우 간단합니다. 재질의 Diffuse 색상과 Ambient 색상 모두 흰색으로 지정하라는 구문입니다.

 이제 물체의 재질은 정의했으니, 이제 월드에 존재하는 빛(여기서는 directional light)과 방금 정의한 재질이 '어떻게' 반응할 지를 설정해줘야 합니다. 즉, 조명에 대하여 어떻게 연산할 지를 설정해줘야 한다는 얘기입니다.  

 결론적으로 말하면, 우리는 라이팅 연산을 위해서 '고정 기능 파이프 라인'을 이용할 것입니다. 이는 개발자가 GPU에서 이미 정해져 있는 연산(기능)을 호출하여 오브젝트 렌더링을 수행하는 것을 의미합니다. 그러니까 조명에 대한 연산은 우리가 따로 별도의 신경쓰지 않고, GPU 레벨에서 이미 만들어져 있는 연산을 가져다 쓰기만 하면 되는 것입니다. 

그렇다면 우리가 해야 하는 일이 무엇일까요? 그냥 고정 기능 파이프 라인을 통해 라이팅 연산을 하겠다고 셰이더에 명시하는 작업을 하면 됩니다. 그 외에는 다른 어떤 작업도 필요치 않습니다.

 그냥 ShaderLab의 Lighting (On|Off) 커맨드를 이용하여 라이팅를 켜주면(On) 끝입니다:

 Lighting On

이 코드 한줄만 작성하면 우리는 해당 셰이더에서 고정 기능 파이프라인의 표준 라이팅을 적용한다는 의미입니다. 

최종 정리하면 세이더 코드는:

Shader "VertexLit White" { 
    SubShader { 
        Pass { 
            Material { 
                Diffuse (1,1,1,1) 
                Ambient (1,1,1,1) 
            } 
            Lighting On 
        } 
    } 
}

위와 같이 완성할 수 있습니다. 

실제 적용된 화면을 보면 아래와 같습니다.

        

       

 정말 단일 색상으로 물체를 그렸을 때와는 매우 느낌이 다릅니다. 무엇보다도 입체감이 느껴지는게 아주 좋군요. 월드에 있는 directional light 의 방향을 변화시켰을 때, 표면이 다르게 그려지는 걸 보니 잘 동작하는 것 같습니다.

 자, 지금까지 우리는 ShaderLab 만을 이용하여 재질을 정의하고 여기 라이팅을 적용하여 물체를 그리는 셰이더 작성을 완료했습니다. 이것을 다시 말하자면, 방금 우리는 유니티에서 셰이더를 작성하는 방법 중 하나인 Fixed Function Shader를 얼떨결에 작성하게 된 것입니다. 

 Fixed Function Shader 는 고정 기능 파이프라인을 이용하며, 지금과 같이 ShaderLab 만으로 작성이 가능한 것이 특징입니다. 그래서 아주 간단하고 작성이 쉽습니다.  이 Fixed Function Shader에 대해서는 다음 시간에 좀 더 자세히 이야기하는 시간을 가져보도록 하겠습니다.

 감사합니다.

출처 : http://jinhomang.tistory.com/entry/%EC%9C%A0%EB%8B%88%ED%8B%B0-%EC%85%B0%EC%9D%B4%EB%8D%94%EC%9D%98-%EA%B8%B0%EC%B4%88-1

---

* Animation 윈도우(타임라인)에서 회전값을 변화시킬 때, 위쪽방향 중심(0도)을 기준으로 값이 커지면 그만큼 왼쪽으로 회전하게 된다. 오른쪽으로 회전시키고 싶을 경우 - 값을 입력하는데, 값 입력 후 엔터를 치면 - 값이 아니라 왼쪽 값으로 계산해버리는 경우가 있다. 

 즉 위 그림처럼 오른쪽의 -25도로 돌리고 싶어서 -25를 입력하면 335도가 되어버려, 0도 -> -25도로 오른쪽으로 살짝 도는 것이 아니라 0도 -> 335도로 왼쪽으로 크게 돌아가 버리는 현상이다. 이건 커브를 조절해 맞추던지(더럽게 귀찮다), 값 입력시 엔터를 치지 말고 TAB 키로 완료하면 제대로 입력되는 듯.

* 타임라인의 Dope Sheet에서 지정한 키프레임의 키값은 복사가 될때가 있고 안될때가 있다. 안될때는 커브로 하거나 숫자입력으로 값을 복사해 붙여넣기를 해줘야 한다.

* 스프라이트 에디터에서 실제 이미지 하나에 모듈을 여러개 지정했을 경우(같은 그림을 각각 다른 모듈로 여러번 사용하는 경우), 나중에 수정 등을 위해 뒤쪽에 가려져 있는 모듈을 선택하기가 매우 곤란하다. Project 폴더의 텍스처에서 해당 그림을 선택해도 여전히 앞에 가려진 모듈밖에 나오지 않는다. 드럽게 짜증난다. 이걸 해결하려면 앞에 가려진 모듈을 잠시 치워놓고 작업하던지 해야 하는데, 치워놓을때 모듈이 완전히 여백(투명한 부분)에 자리잡지 않게 해야 한다. 모듈이 완전히 빈 곳으로 간 상태에서 다른 창을 보거나 열거나 다른 프로그램을 돌리거나 했을 경우, Apply 버튼을 누르지 않았다면 빈 곳에 치워놓은 모듈은 없어져 버린다. 즉 이걸 해결하려면 모듈을 완전한 여백이 아닌 다른 그림에 걸쳐놓던지 해야 한다.

* 매터리얼 생성시, 원하는 텍스처를 적용하려고 해도 Inspector 창에 Shader 부분까지만 나오고 아무리 해도 세부 파라미터 부분이 안 나오는 경우가 있다. 이때는 텍스처 파일을 끌어다가 Shader 아래의 빈 곳에 가져가면 파라미터 영역이 갑자기 생겨난다 -_-;

차후 또 발견시 업데이트 예정

* 텍스처 관련

 1. 아래의 Project 창에 보이는 Assets 폴더는 실제 하드디스크 상에 있는 프로젝트 폴더(디폴트값으로 저장했다면 New Unity Project 뭐시기 폴더)에 있는 Assets 폴더이다. 

     즉 Unity 상에서 이 Assets 폴더안의 파일을 지우거나 하면 실제 프로젝트 폴더 안에서도 지워져버린다. 주의.

 2. 새로 스프라이트를 만들기 위해 이미지 리소스(텍스처)를 만들었으면 이 Assets의 Textures 폴더 안에 넣어주기만 하면 바로 인식된다.

* 파츠 자르기

 1. 텍스처가 불러와진 상태에서 메뉴 > Window > Sprite Editor 를 선택해 스프라이트 에디터를 띄운다.

   그리고 아래의 Assets의 Textures 폴더에서 원하는 텍스처를 선택해 준다. 

(옆에 붙은 ▷ 아이콘을 클릭하면 그 텍스처에 설정된 파츠들이 보이게 되는데 현재는 자르기를 하지 않았으므로 텍스처 전체가 통짜로 나오게 된다.)

 2. 스프라이트 에디터 창에 리소스 이미지가 뜬다.

 3. Inspector 창(안 보일 경우 메뉴 > Window > Inspector 선택해서 띄운다)에서 Sprite Mode 를 Multiple 로 바꾸고 오른쪽 아래의 Apply 버튼을 누른다.

 4. 스프라이트 에디터 창의 Slice 버튼을 누르고, 나오는 메뉴 아래의 Slice 버튼을 클릭한다.

 5. 파츠들이 알아서 적당하게 잘라진다.

 6. 잘라진 모양을 확인한 뒤 오른쪽 위의 Apply 버튼을 누른다.

 7. 이제 다시 아래의 Textures에 선택된 텍스처 옆에 붙은 ▷ 아이콘을 클릭하면 이번엔 잘라진 파츠들이 보일 것이다.

 8. 만약 스프라이트가 파츠를 조합하는 2D 스켈레톤 방식이 아니라 통짜 이미지를 바꿔가며 보여주는 방식의 스프라이트라면, 위 7번 단계에서 잘라진 스프라이트들을 Shift + 클릭으로 복수 선택한 후 Scene 창으로 바로 끌어다 놓으면 한방에 *.anim 파일을 만들면서 스프라이트가 생성된다. Sprite Editor 창에서 기준점(Pivot) 설정도 해두었다면 이미지의 위치도 중심점에 맞추어서 자동 정렬되어 생성되므로 편리하다. 다만 이미지 1장으로 이뤄진 스프라이트를 만들 때는 1장만 끌어다 놓으면 *.anim 파일을 만드는 부분이 나오지 않으므로, 사용자가 직접 Animation 창에서 [Create New Clip]을 선택해 *.anim 파일을 만들어 주어야 한다. 

* 스프라이트 생성

 1. Hierarchy 창에서 Create 버튼을 클릭하고 Sprite 를 선택한다. 

     아래에 New Sprite 라는 이름의 새 스프라이트가 만들어질 것이다. 이 이름을 클릭하고 F2를 누르면 이름을 변경할 수 있다.

 2. 아까 자른 파츠 중 원하는 파츠를 드래그해 Scene 창에 갖다놓는다. 그러면 파츠가 삽입될 것이다.

 2. 들어간 파츠를 Hierarchy 창에서 클릭해주면 Inspector 창에 Sprite Renderer 항목이 나타나는데, 여기에서 Color 옆의 색깔 창을 클릭해주면 색상 관련 설정창이 뜬다. 아래의 RGBA 값 중 A값은 알파값으로 투명도를 나타낸다. 파츠의 투명도를 조절해야 할 경우는 여기에서 조정해 주면 된다. 참고로 Hierarchy 창에서 원하는 파츠들을 여러개 복수 선택한 뒤 같은 방식으로 한번에 투명도를 일괄 조정할 수도 있다. 다만 이것은 포토샵의 레이어 그룹처럼 모아진 종속관계를 그대로 유지하면서 투명도가 조절되는 것이 아니고 그냥 각각의 투명도를 한번에 조절해주는 것 뿐이므로, 서로 겹쳐진 파츠들은 투명해지면서 가려졌던 윤곽이 드러나 보이게 된다. 주의.

 3. 파츠의 기준점(Anchor Point)는 Sprite Editor 창에서 원하는 파츠를 선택한 뒤, 오른쪽 아래의 서브윈도우에 있는 Pivot을 눌러 설정한다. 

    중앙으로 맞추고 싶으면 Center인 채로 두면 되고, 다르게 설정하고 싶을 경우 Custom을 선택해 직접 파츠 내에서 원하는 위치에 설정한다. 설정한 뒤에는 오른쪽 위의 Apply 버튼을 누르는 것을 잊지 말것!

 4. 파츠는 Hierarchy 창에 그냥 마구잡이로 들어가게 되므로, 들어간 뒤에는 아까 만든 새 스프라이트에 끌어서 집어넣어 준다. 

    파츠는 다른 파츠의 아래에 들어갈 수 있는데 이것은 종속관계(일종의 본)을 설정하게 된다. 이렇게 다른 파츠 아래에 들어가는 것을 제외하고는 여기에서의 상하 위치는 실제 스프라이트의 앞뒤 가려짐 순서와 관계가 없다. 

    앞뒤 가려짐 순서는 원하는 파츠를 선택한 뒤 Inspector 창에서 Sprite Renderer > Order in Layer 에 숫자값을 입력해서 설정한다.

 5. Scene 창에 놓인 파츠를 드래그해 조합하고 앞뒤 순서를 맞추면서 스프라이트를 만들어나간다.

* 애니메이션

 1. 애니메이션 윈도우를 띄운다(메뉴 > Window > Animation. Animator가 아님에 주의!)

 2. Hierarchy 창에서 원하는 스프라이트를 선택한다. 어떤 스프라이트의 어떤 파츠를 선택하느냐에 따라 만들어지는 애니메이션이 적용되는 부분이 다르므로 잘 선택하고 만들어야 한다.

 3. 먼저 Project 창에서 Animations 폴더에 스프라이트를 저장할 폴더를 만들고 지정한다. 이 폴더를 제대로 지정해두지 않으면 애니메이션 동작이 제대로 저장되지 않거나 하므로 반드시 폴더를 잘 지정해둘 것.

 4. 녹화버튼과 재생버튼 아래의 빈 부분을 클릭하면 Create New Clip 이라는 것이 나온다. 

    이것을 선택하면 하나의 큰 동작(대기상태, 걷기, 달리기, 공격 등등)을 만들 수 있다. 

 5. 동작을 만들면 빈 부분에 만든 동작의 이름이 나와서 해당 동작을 편집중이라는 것을 알려주며, 위에서 지정한 폴더 안에 동작 파일(*.anim)이 저장된다. 아래의 Add Curve 버튼을 누른다.

 6. 누르면 Transform, Sprite Renderer, Animator 등의 3가지 조정항목과, 아까 생성한 스프라이트의 파츠 중 종속관계가 가장 위인 파츠들의 목록이 보인다. 여기서 움직이고 싶은 파츠를 선택해, 왼쪽의 ▶ 아이콘을 누르면 하부 메뉴가 펼쳐진다. 

 예를 들어 팔과 손에 쥔 무기 파츠가 있다고 할 때, 팔을 움직이면 무기도 움직이는 것은 당연하므로 무기 파츠는 팔 파츠의 자식 파츠로 설정되는 것이 보통이다. 이때 팔을 움직이고 싶다면, 팔 파츠의 하부 메뉴에서 Transform의 Position 옆에 있는 + 아이콘을 눌러준다. 팔 파츠의 위치를 움직이는 타임라인이 생성된다.

 7. 추가된 타임라인을 선택한 뒤 타임라인 바의 시간이 표시되는 영역에서 원하는 적당한 길이의 위치에 클릭을 해 주면 빨간 세로선이 생긴다. 이 상태에서 왼쪽 위의 녹화 버튼이 붉게 표시되는 걸 볼 수 있는데 이것은 해당 타임라인이 편집 중이라는 의미이다. 세로선이 생긴 상태에서 ◇+ 아이콘을 클릭하면 세로선이 위치한 자리에 키프레임이 추가된다. 

 8. 키프레임을 선택한 상태에서, Scene 창의 파츠를 원하는대로 수정해준다(위치변경, 회전, 크기변경 등등등). 

 9. 녹화버튼을 눌러서 편집을 마치고, 옆의 재생(▶) 버튼을 누르면 파츠가 부드럽게 움직일 것이다.

 10. 파츠의 변형중 회전은 0~360도의 각도값을 이용해 움직이게 되는데, 타임라인의 키프레임 모드(Dope Sheet)에서는 버그가 있어 - 값을 인식하지 못한다. 

    이것은 일단 키프레임을 설정해 움직임을 만든 뒤, Animation 창의 아래쪽에 있는 Curves 버튼을 눌러 보간 패턴을 - 값으로 계산해 적용시켜주면 된다. 0도에서 오른쪽으로 5도 더 돌아가므로 -5 정도로 낮추어 준다. 이 때도 옆의 수치값을 보면 수직방향(0도 = 360도)에서 오른쪽으로 5도 회전시키는 값이 360도에서 5도 빠진 355도로 적용되어버리고 있다. 회전의 보간에는 주의하자. 더 간단한 해결방법은 수치값을 입력한 뒤 엔터를 치지 말고 tab 키를 눌러 입력을 종료하는 것. 

  11. Hierarchy 창에 만들어진 스프라이트의 트리에서 원하는 부분을 선택하면, 보통은 Scene 창에 해당 부분의 핸들이 나와서 편리하게 보면서 조작과 변형을 할 수 있다. 그런데 가끔 해당 부분을 선택했는데도 Scene 창에 핸들이나 조절바가 전혀 안나올 때가 있다. 이 때는 선택이 된 상태에서 Inspector 창을 확인하자. 아마 Animator가 추가되어 있을 텐데, 이 Animator를 제거해주면 정상적으로 핸들이 나오고 조절이 가능해진다.

* 스프라이트의 동작관계설정 및 Prefab 저장

 1. Scene 창 옆에 있는 Animator 탭을 클릭하면 각 동작들 간의 관계설정이 가능하다. 

 2. 완전히 스프라이트를 저장하기 위해서는 몇 가지 귀찮은 작업이 필요한데 가장 중요한 것은 Prefab을 저장하는 것이다. Project 창의 Assets에 있는 Prefabs 폴더에 우클릭 후 Create > Prefab을 설정하면 아무것도 들어있지 않은 새 Prefab 파일이 만들어진다. Hierarchy 창에 만들어진 스프라이트의 최상위 폴더(해당 스프라이트)를 드래그해 방금 만든 빈 Prefab 파일 안에 넣으면 스프라이트가 제대로 보존된다.

* 만든 스프라이트를 저장할 때

 1. 메인 메뉴에 있는 Save Scene 이나 Save Project 는 캐릭터 스프라이트만을 별도로 저장하지는 않는다. 캐릭터 스프라이트만을 별도로 저장하고 싶다면 메뉴 > Assets > Export Package 를 선택해서 스프라이트만을 따로 저장해야 한다.

 2. Project 창에서 Animations 폴더에 스프라이트를 저장할 폴더를 만들고 지정한다. 

* 만들어진 스프라이트를 재생하고 확인해볼 때

 1. 메뉴 > Assets > Import Package > Custom Package 로 원하는 스프라이트를 불러온다

 2. 아래의 Assets 에서 Prefabs에 등록된 스프라이트를 메인 윈도우의 Scene으로 끌어다 놓는다. 스프라이트가 보이게 된다

 3. 메뉴 > Window > Animation 을 선택해 애니메이션 타임라인창을 띄운다

 4. 타임라인창의 왼쪽 위 플레이(▶) 버튼을 클릭하면 애니메이션이 재생된다. 한번 더 클릭하면 멈춘다.