[Spine] 스파인 메쉬(Mesh) 알아보기 2편 - 엣지

 

로켓 애니메이션

 

스파인에서 메쉬를 만들 경우 엣지와 버텍스의 개념을 정확히 이해하고 작업을 진행해야 합니다. 대략적으로 메쉬를 생성하고 애니메이션을 만들다 보면 원하는 느낌을 만들기 위해 많은 시간이 소요될 수 있기 때문에 메쉬 생성 시 엣지와 버텍스를 정확하게 생성하고 애니메이션 작업을 진행해야 합니다.

상단에 첨부된 로켓 애니메이션은 1장의 로켓 이미지로 만들어졌지만 메쉬의 엣지와 버텍스를 필요한 위치에 생성하여 불꽃 부분만 움직이도록 애니메이션 되었습니다. 이처럼 메쉬의 엣지와 버텍스의 개념을 정확히 이해한다면 최소한의 이미지로 스파인 작업을 할 수 있습니다.

이번 포스팅에서는 엣지를 생성하는 방법을 알아보고 엣지의 연결된 상태에 따라 메쉬가 어떻게 움직이는지  알아보도록 하겠습니다.

 

---

엣지

---

메쉬의 엣지는 버텍스(정점)와 버텍스 사이를 연결하는 선을 말합니다. 스파인에서는 삼각형 모양으로 버텍스와 엣지를 연결하여 메쉬를 만드는데, 메쉬 편집 시 버텍스를 생성하면 엣지는 자동으로 근접하는 버텍스와 연결되기 때문에 애니메이션이 필요한 부분은 엣지를 수동으로 생성하여 메쉬를 만들어야 합니다.

 

---

 

엣지 생성

 

엣지는 3가지 형태로 표현 되는데 메쉬의 외각 라인을 보여주는 하늘색 선, 메쉬 내부에 자동으로 생성되는 회색 점선, 메쉬 내부에 수동으로 생성하는 주황색 선 입니다. 아래 사진의 로캣에는 3가지 엣지가 모두 표현되어 있습니다.

엣지 생성 모습

 

---

 

엣지의 연결에 따른 이미지의 변화

 

• 로켓의 가장 아래 버텍스를 이동하여 붉은 불꽃만 움직이는 애니메이션을 만들어 보겠습니다.

 

메쉬 초기 셋팅

 

불꽃의 노란 부분이 같이 변화

• 위 사진과 같이 메쉬가 만들었을 경우 가장 아래 버텍스를 이동하면 버텍스가 연결된 엣지의 모양대로 불꽃의 노란색 부분까지 이미지가 변형됩니다.

 

• 빨간 불꽃 부분만 변형하기 위해 빨간색 불꽃 안쪽에 버텍스 3개를 추가합니다.

 

버텍스 3개 추가

 

양쪽의 불꽃이 자연스럽지 않은 상태

 

• 위 사진처럼 자동으로 생성된 엣지의 모양대로 하단 버텍스를 이동했지만 양쪽의 불꽃 부분이 자연스럽게 변형되지 않습니다.

 

• 하단의 버텍스와 새로 생성한 버텍스를 만들기 툴을 선택하여 수동으로 연결합니다. 수동으로 연결한 엣지는 주황색 선으로 표현됩니다.

 

수동 엣지 추가

 

빨간색 불꽃 부분만 자연스럽게 변형 됨

 

• 위 사진과 같이 엣지를 연결하여 빨간색 불꽃 부분만 변형되는 메쉬를 만들 수 있습니다.

 

완성된 불꽃의 움직임

 

---

 

여기까지 메쉬를 이용해 엣지를 수동으로 추가하여 빨간색 불꽃만 움직이는 애니메이션을 만들어 보았습니다. 이처럼 메쉬의 엣지 생성 방법을 이해하고 활용한다면 간결하고 실용적인 애니메이션을 만들 수 있습니다.

 

다음 포스팅인 스파인 메쉬(Mesh) 알아보기 3편에서는 메쉬의 버텍스를 알아 보도록 하겠습니다.

---