메쉬 어태치먼트

메쉬 어태치먼트는 이미지로 텍스처링된 다각형입니다. 다각형은 이미지 안에 정의된 다음 정점을 조작하여 이미지를 구부리거나 변형할 수 있습니다. 메쉬에는 다각형에서 이미지의 일부를 렌더링되지 않게 할 수 있는 이점도 있어, 성능을 향상시킬 수 있습니다.

가중치를 사용하여 뼈가 변형되면 메쉬를 자동으로 변형할 수 있습니다.

메쉬 정점 위치는 애니메이션에서 키를 지정할 수 있습니다.

사용 예는 메쉬 어태치먼트의 예제 프로젝트 및 팁을 참조하십시오.

설정

메쉬를 만들려면 먼저 영역 어태치먼트를 만든 다음 영역 어태치먼트의 트리 속성에서 Mesh를 선택합니다.

영역 어태치먼트는 각 모서리에 하나씩 4개의 정점이 있는 메쉬 어태치먼트로 변환됩니다. 메쉬 정점은 편집 모드를 사용하여 수정할 수 있습니다.

속성

Select, Export, Name, Color 및 Set Parent 속성은 공통 어태치먼트 속성을 참조하십시오.

이미지 경로

이미지 경로가 비어 있으면 메쉬 어태치먼트의 이름을 사용하여 이미지를 찾습니다. 이미지 경로가 설정되면 메쉬 어태치먼트의 이름 대신 이미지 경로가 사용됩니다. 자세한 내용은 이미지 파일 검색을 참조하십시오.

메쉬

선택하지 않으면 메쉬 어태치먼트가 다시 영역 어태치먼트로 변경됩니다.

와이어프레임

선택하면 메쉬가 선택되지 않은 경우에도 메쉬의 정점과 에지가 그려집니다. 이 옵션은 뼈 원점을 배치할 때 메쉬 정점을 고려하는 데 도움이 될 수 있습니다.

메쉬 편집

Edit Mesh 버튼을 클릭하면 메쉬의 정점을 수정할 수 있는 편집 모드로 들어갑니다.

고정

Freeze 버튼을 클릭하면 현재 정점 위치에 대해 회전이 0으로, 크기 조정이 1로 설정됩니다.

이 옵션은 메쉬에 실제로 회전이나 크기 조정이 없기 때문에 가능합니다. 메쉬에는 많은 정점만 있으며, 각 정점에는 위치가 있습니다. Spine에서는 다른 어태치먼트와 유사하게 조작할 수 있도록 편의상 회전 및 크기 조정 값을 제공합니다. 전체 어태치먼트에 Rotate 또는 Scale 툴을 사용하면 회전 및 크기가 조정됩니다.

메쉬에는 이동도 없습니다. 표시된 이동 값은 헐 정점의 중심입니다.

재설정

Reset 버튼은 메쉬의 정점 위치를 이동하여 UV와 일치시키므로 메쉬가 변형되지 않습니다. Deformed를 선택하지 않은 채 편집 모드에서 정의된 대로 정점은 UV와 일치합니다. 정점에 새로운 위치가 주어지기 때문에 메쉬는 변형된 경우 위치가 이동될 수 있습니다. 모든 가중치가 메쉬에서 제거되고 애니메이션의 모든 변형 키가 삭제됩니다.

편집 모드에서 정점이 추가되거나, 제거되거나, 이동될 때 편집 모드 밖의 정점은 원하는 위치에 있지 않을 수 있습니다. Reset을 사용하여 메쉬에서 변형을 제거할 수 있습니다.

편집 모드

편집 모드에서는 메쉬의 정점을 생성하고, 수정하고, 삭제할 수 있습니다.

메쉬 편집 버튼을 클릭하면 편집 모드로 들어갑니다. Edit Mesh 버튼을 다시 클릭하거나, 편집 모드 대화 상자를 닫거나, spacebar 또는 escape를 눌러 언제든지 편집 모드를 종료할 수 있습니다.

마우스 오른쪽 버튼을 클릭하면 Modify, Create 및 Delete 툴 간에 전환됩니다.

수정 툴

Modify 툴을 사용하면 기존 정점을 이동할 수 있습니다. 정점을 삭제하려면 두 번 클릭합니다.

만들기 툴

Create 툴을 사용하면 클릭하여 새 정점을 만든 다음 드래그하여 새 에지를 만들 수 있습니다. shift 키를 길게 눌러 정점에 스내핑을 비활성화합니다. 드래그하여 에지를 만들 때 shift 키를 길게 눌러 수직 또는 수평으로 스냅합니다. 정점을 삭제하려면 두 번 클릭합니다.

삭제 툴

Delete 툴을 사용하면 클릭하여 정점이나 에지를 삭제할 수 있습니다. ctrl(Mac의 경우 cmd) 키를 길게 누르거나 상자 선택으로 드래그하여 여러 정점을 선택할 수 있습니다.

새 정점 모드

New 버튼을 클릭하면 모든 정점을 삭제하고 새로운 정점 모드로 들어갑니다. 이 모드에서 새 정점을 만들려면 클릭하여 메쉬의 헐을 정의할 수 있습니다. 정점은 드래그하여 이동하거나 두 번 클릭하여 삭제할 수도 있습니다. 메쉬 헐을 완료하려면 첫 번째 정점을 클릭하여 헐을 닫거나 New 버튼을 다시 클릭하여 새 정점 모드를 종료합니다.

새 정점 모드를 사용하면 메쉬 헐을 빠르게 정의할 수 있습니다. 또는 Create 툴을 사용하여 정점과 에지를 만든 다음 Delete 툴을 사용하여 원치 않는 정점이나 에지를 제거할 수 있습니다.

정점 초기화

Reset 버튼을 클릭하면 모든 정점이 제거되고 각 모서리에 하나씩 4개의 정점으로 바뀝니다. 모든 가중치가 제거되고 애니메이션의 모든 변형 키가 삭제됩니다. Reset 버튼은 처음부터 다시 시작하는 데 유용합니다.

생성

Generate 버튼을 클릭하면 변형에 가장 유용한 위치의 메쉬에 새 정점이 추가됩니다. 모든 가중치가 제거되고 애니메이션의 모든 변형 키가 삭제됩니다.

Generate를 여러 번 클릭하여 점점 더 많은 정점을 추가할 수 있습니다. 기존 정점은 이동하지 않으므로 Generate를 사용하여 이미지의 중요한 얼굴 부위에 정점을 수동으로 추가한 후 메쉬를 자동으로 채울 수 있습니다.

Reset를 클릭한 후와같이 메쉬의 4개 모서리 모두에 정점이 있는 경우, Generate를 클릭하면 행과 열로 정렬된 정점이 있는 그리드가 생성됩니다. Generate를 여러 번 클릭하면 점점 더 조밀한 정점 그리드가 생성됩니다.

트레이스

Trace 버튼을 클릭하면 메쉬 헐이 자동으로 만들어집니다. 모든 가중치가 제거되고 애니메이션의 모든 변형 키가 삭제됩니다.

메쉬 헐이 만들어지는 방식에 영향을 미치도록 다음과 같은 다양한 설정을 구성할 수 있습니다.

• Detail 사용되는 정점 수를 조절합니다.
• Concavity 우선순위를 조절하여 오목한 영역에 정점을 배치합니다.
• Refinement 최적의 솔루션을 찾는 데 소요되는 시간과 노력을 조절합니다.
• Alpha threshold 알파 값이 임계값보다 낮은 픽셀은 무시됩니다.
• Padding 이미지와 헐 사이에 공간을 추가합니다.

Refresh는 동일한 설정을 사용하여 헐 만들기를 반복합니다. 헐은 매번 조금씩 다르게 만들어지므로, 헐을 몇 번 만든 후 사용자가 필요로 하는 것과 가장 잘 맞는 헐을 선택하는 것이 유용할 수 있습니다.

삼각형

선택하면 정점 사이에 파선이 그려져 메쉬가 삼각분할되는 방식을 보여줍니다. 삼각분할은 메쉬가 변형되는 방식을 결정합니다. 삼각형을 보면 에지가 필요한 위치를 결정하는 데 도움이 됩니다.

흐리게

선택하면 메쉬 이미지가 흐려져 정점, 에지 및 삼각형을 보다 쉽게 볼 수 있습니다.

분리

선택하면 다른 어태치먼트는 그려지지 않아 메쉬를 보다 쉽게 볼 수 있습니다.

변형됨

선택하면 메쉬가 편집 모드 밖에서 보이는 것처럼 표시됩니다. 정점이 이동되면 편집 모드 밖의 정점 위치와 텍스처 좌표가 모두 변경됩니다. 정점 위치는 이미지 테두리로 제한되며 경계에 가까워지면 회색 선이 나타납니다.

선택하지 않으면 전체 메쉬 이미지가 변형되지 않고 표시됩니다. 메쉬가 그려질 때 정점에 사용될 이미지의 위치에 정점이 표시됩니다. 정점은 "텍스처 좌표" 또는 UV로 알려져 있습니다. 정점이 이동되면 텍스처 좌표가 변경되지만 편집 모드 밖의 정점 위치는 변경되지 않습니다.

이 옵션이 바람직하지 않은 경우 편집 모드 밖에서 재설정을 사용하여 정점 위치를 텍스처 좌표와 일치시킵니다.

에지

정점 외에도 메쉬에는 정점 사이의 연결인 "에지"도 있습니다. Spine에서는 청록색으로 표시된 메쉬 헐 주변의 에지를 자동으로 처리합니다. 헐 안에서, 삼각형을 선택하면 Spine에서는 편집 모드 안에 회색 파선으로 표시된 모든 정점을 에지와 자동으로 연결합니다.

정점 사이의 에지는 정점이 이동될 때 메쉬가 변형되는 방법을 결정합니다. 편집 모드의 만들기 툴을 사용하여 주황색으로 표시된 에지를 수동으로 만들 수 있습니다.

정점과 에지를 이미지의 얼굴 부위에 있는 메쉬 안에 추가하여 얼굴이 변형되는 방법을 조절할 수 있습니다. 자동으로 계산된 에지(회색)는 수동 에지(주황색)와 절대 교차하지 않으므로, 에지를 수동으로 지정하면 정점이 연결되는 방식을 완벽하게 조절할 수 있습니다.

에지 예제

이 예제에서는 정점과 에지를 추가하여 메쉬 변형을 조절하는 방법을 보여줍니다. 우리는 spineboy의 머리 헐을 만들었으며 이제 코를 늘리려고 합니다.

정점이 이동되면 정점을 포함하는 삼각형만 변형됩니다. 이렇게 하면 코 밑부분이 아니라 코 끝부분이 늘어나며 볼도 약간 늘어납니다. 새 정점을 추가하면 다른 삼각형이 생기고 메쉬는 다르게 변형됩니다.

위에서는 새 정점이 코 밑부분에 추가되어 다른 삼각형이 만들어졌습니다. 이제 우리가 이동하고 있는 정점은 두 개의 삼각형에 속합니다. 정점이 이동되면 두 삼각형이 모두 변형됩니다. 이렇게 하면 코 전체가 늘어나지만 볼도 많이 늘어납니다. 볼이 변형되는 것을 막기 위해서는 또 다른 정점이 필요합니다.

위에서는 코 아래에 새 정점이 추가되었습니다. 이제 코 전체가 두 개의 삼각형 안에 들어 있지만 정점을 이동하면 그중 하나만 변형됩니다. 이 문제를 해결하려면 편집 모드에서 만들기 툴을 선택한 다음 정점 사이를 드래그하여 에지를 만들어야 합니다.

새 에지(주황색)로 인해 코 삼각형이 다르게 연결되고 이제 머리의 나머지 부분에 영향을 주지 않고 코가 변형될 수 있습니다.

에지 루프 선택

shift를 누른 상태에서 메쉬 에지를 선택하면 에지 루프 선택이 수행됩니다. 이렇게 하면 에지와 인접한 모든 에지가 한 줄로 선택됩니다. shift 키를 누른 상태에서 ctrl(Mac의 경우 cmd) 키를 눌러 현재 선택에 추가할 수도 있습니다.

정점 배치

메쉬 정점을 배치할 위치를 선택할 때 고려해야 할 많은 요소가 있습니다. 아래 정보 외에도, 메쉬에 대한 일련의 블로그 게시물에서는 메쉬를 디자인하는 데 필요한 많은 유용한 팁을 제공해드립니다.

• 정점 배치
• 메쉬의 분류
• 메쉬 가중치 워크플로

헐 크기

메쉬 헐은 최대한 빈 공간을 없애야 합니다. 예를 들어, 나무 이미지는 나무의 몸통 양쪽에 많은 빈 공간이 있을 수 있습니다. 나무를 변형할 필요가 없더라도 메쉬를 사용하여 픽셀을 제외하면 유용할 수 있습니다.

헐 외부의 픽셀은 전혀 그려지지 않으며 필 레이트에 불리하게 작용하지 않습니다. 이렇게 하면 필 레이트가 제한된 게임, 특히 빈 공간이 많은 큰 이미지의 경우 성능이 향상될 수 있습니다.

다각형을 사용하여 텍스처를 패킹할 때 메쉬 텍스처 아틀라스 영역을 매우 촘촘하게 패킹하여 단일 텍스처 아틀라스 페이지에 더 많은 이미지를 맞출 수 있습니다. 다각형을 사용하여 패킹하지 않는 경우에도 화이트스페이스 제거를 사용하면 메쉬 헐 외부의 모든 픽셀을 제거할 수 있습니다.

헐 에지

메쉬 헐을 사용하여 투명하지 않은 픽셀을 잘라내는 경우, 결과로 만들어지는 에지에 앨리어싱이 발생합니다. 즉, 에지를 따라 픽셀이 표시되거나 표시되지 않습니다. 에지가 매끈하지 않고 들쭉날쭉합니다. 이 경우 매끈한 에지를 얻으려면 메쉬를 렌더링할 때 멀티샘플 앤티 앨리어싱(MSAA)을 사용할 수 있습니다. 설정 대화 상자의 Spine 편집기와 내보내기 대화 상자의 이미지 또는 비디오 내보내기에 멀티샘플 앤티 앨리어싱을 활성화할 수 있습니다. 런타임 시 매끈한 에지를 얻으려면 게임 툴킷에 MSAA를 구성해야 합니다.

이미지 경계의 에지에 있는 투명하지 않은 픽셀은 픽셀이 잘리지 않더라도 앨리어싱이 발생할 수 있습니다. 이 문제는 Spine 편집기에서 발생하는데, 이는 개별 이미지를 로드하고 이미지 에지와 대조적으로 픽셀에는 매끈하게 필터링할 픽셀 옆에 투명 픽셀이 없기 때문에 발생합니다. 런타임 시 텍스처 아틀라스에서 로드할 때 일반적으로 이미지 주위에 최소 1픽셀의 투명 공간이 있으므로 이 앨리어싱이 발생하지 않습니다.

구멍

메쉬는 오목할 수 있지만 구멍이 있을 수는 없습니다. 구멍이 필요한 경우 일반적으로 메쉬 이미지에 투명 픽셀을 사용하는 것으로 충분합니다. 예를 들어, 머리 메쉬의 이미지는 눈구멍에 투명 픽셀을 사용할 수 있습니다.

필요한 구멍이 크면 많은 수의 투명 픽셀을 그리는 것이 바람직하지 않을 수 있으며, 이는 필 레이트에 부정적인 영향을 미칠 수 있습니다. 또한 빈 공간이 많은 큰 이미지는 텍스처 아틀라스에서 많은 공간을 차지할 수 있습니다. 이 경우 구멍 주위에 이미지의 절반마다 하나씩 두 개의 메쉬를 사용할 수 있습니다.

정점 개수

일반적으로 CPU 사용량을 줄이기 위해 메시의 정점 수를 최소로 유지해야 합니다. 각 정점의 위치는 프레임마다 CPU에서 계산되어야 합니다. 이것은 빠른 작업이지만, 각각 많은 정점이 있는 많은 메쉬와 함께 많은 스켈레톤이 동시에 화면에 표시되면 계산해야 하는 위치가 수천 개까지 추가될 수 있습니다.

가중치를 사용할 때 정점에 영향을 미치는 각 뼈에는 추가 정점 변형이 추가됩니다. 예를 들어, 100개의 정점이 있는 메쉬에는 100개의 정점 변형이 필요합니다. 모든 정점에 영향을 미치는 2개의 뼈가 같은 메쉬에 있는 경우, 200개의 정점 변형이 필요합니다. 메쉬를 많은 뼈에 바인딩하고 스무딩을 사용하여 가중치를 분산하면 필요한 정점 변형의 수가 크게 증가할 수 있습니다. 정리를 사용하여 불필요한 가중치를 제거하고 정점에 영향을 미칠 수 있는 뼈의 수를 제한합니다.

변형

정점이 배치되는 위치와 에지로 정점이 연결되는 방식에 따라 메쉬가 변형되는 방식이 결정됩니다. 대부분 또는 모든 변형은 가중치를 사용하여 이루어져야 합니다. 변형 키 사용을 피하거나 최소한으로 유지해야 합니다.

변형 툴

메쉬 정점은 변형 툴을 사용하여 편집 모드 밖으로 이동할 수 있습니다. 전체 메쉬는 다른 어태치먼트와 마찬가지로 회전하고, 이동하고, 크기를 조정할 수 있습니다.

개별 정점은 드래그하여 변형 툴로 이동할 수 있으며, 이에 따라 이미지가 변형됩니다. ctrl(Mac의 경우 cmd) 키를 길게 누른 다음 클릭하거나 상자 선택으로 드래그하여 여러 정점을 선택할 수 있습니다. 선택한 정점은 spacebar 또는 escape를 누르거나 빈 공간을 클릭하여 선택을 취소할 수 있습니다.

회전 또는 크기 조정에 사용되는 원점은 변경할 수 있습니다. 원이 나타날 때까지 Rotate 또는 Scale 툴의 중앙에 있는 작은 십자선 위로 마우스를 올린 다음 원점을 원하는 위치로 드래그합니다. 원점은 정점에 자동으로 스냅됩니다.

설정 모드에서 정점을 이동하면 설정 포즈의 변형이 변경됩니다. 애니메이팅 모드에서 정점을 이동하여 변형 키를 설정합니다. 일반적으로 변형 키는 사용을 피하고 대신 가중치를 사용해야 합니다.

회전 및 크기 조정은 정점을 이동하는 데만 사용됩니다. 사용된 회전 및 크기 조정의 양은 변형 키에 저장되지 않습니다. 정점 위치만 저장되고 변형 키 사이의 보간은 항상 정점을 직선으로 이동시킵니다.

이미지 크기 조정

메쉬에서 사용하는 이미지 파일이 Spine 밖에서 더 크게 만들어지면, 텍스처 좌표의 크기를 조정하여 이미지 내용을 같은 크기로 유지할 것인지 Spine에 메시지가 표시됩니다.

이 옵션은 이미지의 에지에 공백이 추가된 경우에 유용합니다. 이런 경우 Yes라고 대답하여 이미지의 크기를 기준으로 이미지 내용이 동일한 크기로 유지되도록 텍스처 좌표를 조정합니다. 이후 이미지의 모든 면에 공백이 고르게 추가되지 않은 경우 편집 모드에서 텍스처 좌표를 수동으로 조정해야 할 수 있습니다. ctrl(Mac의 경우 cmd) 키를 길게 눌러 모든 정점을 선택한 다음 상자 선택으로 드래그합니다. 그런 다음 수정 툴을 사용하여 정점을 올바른 위치로 이동합니다.

이미지의 내용이 더 커야 해서 이미지를 더 크게 만든 경우 텍스처 좌표를 이전 크기로 유지하는 것이 바람직하지 않을 수 있습니다. 이 경우 No라고 대답해도 메쉬가 수정되지 않습니다. 텍스처 좌표는 정규화되어 저장되기 때문에 이미지 크기가 변경되면 스케일 업 또는 다운됩니다.

연결된 메쉬

연결된 메쉬는 다른 이미지로 메쉬를 재사용해야 하는 경우가 일반적입니다. 예를 들어, 깃발에 대한 메쉬를 애니메이팅하였고 이제 동일한 메쉬와 애니메이션으로 다양한 깃발 이미지를 사용하려고 합니다.

메쉬와 매쉬의 변형 키를 복제하면 두 개의 별도 메쉬와 키 세트가 생성되어 메쉬 또는 키를 여러 번 변경해야 하기 때문에 이상적이지 않습니다.

연결된 메쉬에서는 이 문제에 대한 더 나은 솔루션을 제공해드립니다. 연결된 메쉬를 생성하려면 메쉬의 트리 속성에서 New... Linked Mesh를 클릭합니다. 연결된 메쉬에서는 정점, 에지, 텍스처 좌표 및 가중치와 같은 소스 메쉬와 메쉬 구조를 공유합니다. 소스 메쉬의 이러한 변경 사항은 연결된 모든 메쉬에도 영향을 미칩니다.

정점을 변경하면 다른 메쉬에 영향을 미친다는 것을 나타내기 위해 정점 둘레에 원이 있는 정점이 표시됩니다.

연결된 메쉬에 다른 이미지를 사용하려면 기존과 같이 이름을 바꾸거나 이미지 경로를 설정합니다.

Inherit Deform을 선택하면 소스 메쉬의 변형 키는 연결된 메쉬에도 영향을 미칩니다. Inherit Deform을 선택하지 않으면 연결된 메쉬의 변형 키는 소스 메쉬와 별도로 기존과 같이 설정할 수 있습니다.

연결된 메쉬는 항상 소스 메쉬와 동일한 슬롯 아래에 있어야 합니다. 소스 메쉬 또는 연결된 메쉬를 다른 슬롯으로 이동하면 다른 모든 메쉬도 이동됩니다.

연결된 메쉬는 소스 메쉬와 동일한 슬롯 아래에 있는 한 다른 스킨의 스킨 플레이스홀더 아래에 있을 수 있습니다.

동영상

다음: 경계 상자 어태치먼트 이전: 영역 어태치먼트