Spine 3.8 릴리스

August 5th, 2019

이제 여름이 시작되고 새로운 Spine도 릴리스됩니다! 위의 비디오를 보시거나 아래의 가장 중요한 새 기능 요약에 대해 읽어 보십시오. 최신 변경 사항에 대한 자세한 내용은 에디터 변경 로그런타임 변경 로그를 확인하십시오.

메쉬 추적

스킨 뼈

이제 Spine에서 이미지를 추적하여 자동으로 메쉬를 만들 수 있습니다. 실제로 이 기능을 보려면 메쉬를 편집하고 추적을 선택하십시오. 슬라이더는 사용되는 정점 수와 배치 방법을 제어합니다. 자동 추적은 정점을 수동으로 배치하는 것보다 훨씬 빠릅니다. Spine은 정점이 많지 않은 경우에도 잘 작동하는 고급 알고리즘을 사용하므로 런타임 성능에 중요합니다.

다각형 텍스처 패킹

이제 Spine에서 다각형 텍스처 패킹을 수행할 수 있습니다. 텍스처 패커 설정에서 이 기능을 선택하면 이미지를 최대한 타이트하게 팩하는 데 메쉬 어태치먼트 정점이 사용됩니다. 이렇게 하면 더 많은 이미지를 각 텍스처 아틀라스 페이지에 잘 들어 맞게 하고 내보내기 크기를 줄일 수 있습니다.

스킨 뼈 및 제약조건

스킨 뼈

다음은 이번 릴리스에서 가장 흥미로운 기능 중 하나입니다! 이제 스킨에는 스킨이 활성 상태인 경우에만 활성화된 뼈와 제약조건을 가질 수 있습니다. 항목에 스킨을 사용하면 각 항목에 자체의 뼈를 가질 수 있습니다.

새로운 트리 설정을 사용하면 트리 및 뷰포트에 비활성 뼈와 제약조건을 숨길 수 있으므로 프로젝트를 복잡하게 만들지 않고도 필요한 만큼의 스킨별 뼈를 가질 수 있습니다. 또한 비활성 스킨 뼈와 제약조건은 런타임에 계산되지 않으므로 뼈와 제약조건이 있는 스킨이 많은 경우에도 성능에 영향을 미치지 않습니다.

스킨 뼈와 제약조건은 다른 방법으로도 사용할 수 있습니다! 예를 들어, 스킨은 제약조건을 사용하여 뼈를 움직이게 할 수 있으므로 스켈레톤과 모든 애니메이션을 다른 크기의 캐릭터에 재사용할 수 있습니다.

뼈 또는 제약조건을 스킨에 드래그 앤 드롭하여 스킨에 추가합니다. 필요한 경우 Spine에서 다른 뼈와 제약조건을 스킨에 자동으로 추가합니다. 뼈 또는 제약조건을 스킨에 드래그 앤 드롭하여 스킨에 추가합니다. 필요한 경우 Spine에서 다른 뼈와 제약조건을 스킨에 자동으로 추가합니다. 트리에 스킨 아이콘을 표시하여 트리가 스킨 안에 있음을 나타냅니다.

스킨 뼈와 제약조건으로 인해 원치 않는 결과를 초래하는 경우 트리에 경고 아이콘이 표시됩니다. 예를 들어, 스킨에 없는 메쉬가 스킨에 있는 뼈에 바인딩되어 있는 경우입니다.

프로젝트 믹스 앤 매치

당사에는 사용자 맞춤 아바타에 대해 스킨 뼈와 제약 기능의 활용을 선보이는 믹스 앤 매치라는 새로운 예제 프로젝트가 있습니다.

믹스 앤 매치 예제 프로젝트는 라이선스 페이지에서 설치하는 최신 Spine 런처에 포함되어 있습니다. 또한 당사는 프로젝트 설정 방법에 대한 상세 가이드를 작성했습니다.

소프트 IK

스킨 뼈

이제 뼈를 곧게 펴면서 속도를 늦추는 "부드러움" 설정이 IK 제약조건에 있습니다. 이 기능이 없으면 대상이 범위를 벗어나면서 때때로 IK 뼈가 제자리에 고정됩니다.

폴더

폴더

이제 폴더를 사용하여 애니메이션, 스킨 및 이벤트를 그룹화할 수 있습니다. 이렇게 하면 프로젝트를 훨씬 쉽게 구성할 수 있고 항목을 찾는 데 필요한 스크롤 양이 줄어듭니다.

또한 이름을 특별하게 만들기 위해 폴더에 긴 접두사를 사용할 필요가 없습니다. 예를 들어 한 폴더에는 하나의 스킨이 있을 수 있으며, 다른 폴더에는 같은 이름의 다른 스킨이 있을 수 있습니다. 프로젝트를 내보낼 때 폴더 이름을 사용하여 눈/파란색옷/파란색 등과 같은 각 개체의 고유한 이름을 만듭니다.

눈금자

눈금자

이제 Spine에는 정렬과 매쉬 만들기를 도와주는 눈금자가 있습니다. 눈금자 아이콘을 클릭하여 기능을 활성화하십시오. 곧 있을 릴리스에는 가이드와 기타 개선 사항을 눈금자에 추가할 것입니다.

향상된 PSD 내보내기

이제 스켈레톤의 포즈를 각 어태치먼트의 레이어와 함께 Photoshop PSD로 내보낼 수 있습니다. 이 기능은 애니메이션 중간 부분에 다양한 원근감이나 모션 블러와 같은 새 버전의 어태치먼트를 그릴 때 유용합니다.

시작 화면

시작 화면

Spine을 실행하면 이제 새로운 시작 화면이 표시됩니다! 즐겨찾기 및 최근 프로젝트에 빠르게 액세스하거나 Spine과 함께 제공되는 예제 프로젝트를 둘러볼 수 있습니다. 각 예제 프로젝트에 대한 리깅 방법을 설명하는 워크스루를 만들었습니다.

팁 섹션에서는 Spine을 시작할 때마다 새로운 팁을 제공해드리므로 새로운 리깅 요령을 배우고 스킬을 향상시킬 수 있습니다. 팁을 클릭하여 팁 웹 페이지로 이동하면 모든 팁을 한 번에 볼 수 있으며 동료 Spine 사용자와 링크를 공유할 수 있습니다.

뉴스 섹션은 일반 Spine 뉴스를 게시하는 곳이며 변경 로그에는 Spine의 개발에 대한 최신 정보가 표시됩니다.

Spine 창의 상단에 있는 작은 메일 아이콘을 통해 새로운 변경 로그 또는 뉴스 기사가 있는 경우 사용자에게 알려드리므로 Spine 세계에서 일어나고 있는 최신 정보를 파악할 수 있습니다.

새 트리 설정

많은 Spine 워크플로에는 사용자가 트리와 뷰포트에서 확인할 다양한 요구 사항이 있습니다. 당면한 작업에 보다 쉽게 집중할 수 있도록 몇 가지 새로운 설정을 추가했습니다.

모든 스킨 어태치먼트 표시

모든 스킨 어태치먼트 표시 설정에서는 각 스킨 플레이스홀더 밑에 어태치먼트가 있는 모든 스킨을 표시합니다. 이렇게 하면 스킨의 개요를 잘 파악할 수 있으며 어태치먼트를 다른 스킨에 옮기는 등의 작업을 훨씬 쉽게 수행할 수 있습니다.

OS X용 레티나 지원

이제 OS X의 Spine을 사용하면 레티나 디스플레이의 픽셀 밀도를 더 잘 활용할 수 있습니다. 뷰포트의 글꼴 및 이미지 렌더링이 이제 고해상도로 수행됩니다. 인터페이스 크기 조정 설정에서는 나머지 사용자 인터페이스의 크기 조정 방법을 제어합니다. 200%가 기본값이며 레티나 디스플레이에 권장됩니다. 100%는 더 선명한 그래픽을 제공하지만 고해상도 화면에서는 너무 작을 수 있습니다. 100% 또는 200% 이외의 값에는 스케일링 아티팩트가 표시되며 권장되지 않습니다.

사소한 개선 사항

평소와 마찬가지로 트리 뷰의 선택 내역 등 여러 가지 사소한 개선 사항을 추가했습니다. 이제 페이지 아래로를 눌러 이전 선택으로 돌아가고 페이지 위로를 눌러 선택 내역으로 이동할 수 있습니다. 이렇게 하면 트리에서 스크롤할 필요 없이 선택한 항목 사이를 앞뒤로 쉽게 이동할 수 있습니다.

변형된 정점 강조 표시

이제 Spine에는 다른 색으로 변형된 정점이 표시되므로 어떤 정점이 움직였는지 쉽게 알 수 있습니다. 컨트롤을 누르고 정점을 두 번 클릭하여 변형되거나 변형되지 않은 모든 정점을 선택합니다. 또한 애니메이션 모드에서는 이제 선택한 정점만 재설정할 수 있습니다.

영역 어태치먼트에 대한 모션 벡터

이전에는 고스팅에 메쉬 어태치먼트에 대한 모션 벡터만 표시되었지만 이제는 영역 어태치먼트에 대한 모션 벡터도 표시됩니다.

여러 개의 스킨 플레이스홀더

이제 여러 개의 어태치먼트를 선택하고 이러한 어태치먼트에 대한 스킨 플레이스홀더를 한 번에 생성할 수 있습니다. 이렇게 하면 새로운 스킨을 만들고 채우는 속도가 크게 빨라집니다.

런타임 개선 사항

3.7 릴리스 이후 당사는 버그 수정 및 새로운 기능 등 200개 이상의 문제를 해결했습니다. 문제점을 알려주시고 런타임에 대한 변경을 제안해 주신 모든 분들께 감사드립니다! 변경 사항에 대한 자세한 내용을 보시려면 Spine 런타임 변경 로그3.8 브랜치에 대한 커밋 로그를 참조하시기 바랍니다.

이번 릴리스에는 모든 런타임에 대한 몇 가지 새로운 변경 사항이 있습니다.

  • .json.skel의 파일 형식은 모두 새로운 기능을 지원하고 파일 크기를 줄이기 위해 많은 부분이 변경되었습니다. 3.8 런타임을 사용하려면 Spine 에디터 버전 3.8.20 이상을 사용하여 파일을 내보내야 합니다!
  • 의사를 더 잘 전달하기 위해 Slot#getAttachmentVertices()Slot#getDeform()으로 이름을 변경했습니다.
  • Skin#addAttachment()Skin#setAttachment()로 이름을 변경했습니다.
  • VertexAttachment#applyDeform()을 제거하고 VertexAttachment#deformAttachment로 대체했습니다. 타임라인이 적용되는 슬롯에 현재 설정된 어태치먼트에 DeformTimeline을 적용해야 할지 여부를 결정하는 데 이 필드에 설정된 어태치먼트가 사용됩니다.
  • inheritDeform 속성을 MeshAttachment에서 제거했습니다.

모든 런타임에서는 다각형 텍스처 패킹, 스킨 뼈 및 제약조건, 소프트 IK를 비롯한 새로운 모든 에디터 기능을 지원합니다!

.json.skel 파일의 크기 축소

Spine의 내보내기 형식은 이미 공간 효율성이 상당히 높지만, Spine의 사용 공간을 훨씬 더 줄이기 위해 노력을 기울였습니다!

JSON 형식 파서는 더 많은 기본값, 즉 .json 파일에 명시적으로 작성될 필요가 없는 값을 가정합니다. 이렇게 하면 특히 많은 프레임이 포함된 타임라인이 많은 경우 파일 크기가 줄어듭니다.

문자열을 한 번만 저장하고 가능한 경우 파일 전체에서 문자열을 공유하도록 바이너리 형식이 수정되었습니다(예: 어태치먼트 이름). 따라서 많은 키 프레임이 있는 어태치먼트 타임라인을 사용하면 파일 크기가 크게 줄어듭니다. 이러한 개선으로 3.5MB .skel 파일을 640KB로 줄였습니다!

spine-ts 및 spine-as3용 바이너리 형식 로더

대부분의 런타임은 JSON과 바이너리 형식을 오랫동안 지원해왔습니다. 하지만 웹 및 ActionScript 런타임은 JSON 형식만 처리할 수 있었습니다. 지금까지!

바이너리 형식 파싱을 spine-tsspine-as3에 추가했습니다. 파서를 사용하는 것은 JSON 파서를 사용하는 것만큼 쉽습니다. 바이너리 파일 로딩 예제를 spine-tsspine-as3에 추가했습니다.

개선된 스킨 API

대부분의 Spine 사용자는 대개 사용자 지정 아바타를 만들기 위해 믹싱 및 매칭을 위한 에셋을 만듭니다. 새로운 스킨 뼈와 제약 기능이 아바타를 그 어느 때보다 더 강력하게 만들어 줍니다. 따라서 런타임에서 사용자 지정 스킨을 아주 쉽게 만들 수 있도록 스킨 API를 개선했습니다.

믹스 앤 매치 예제의 스킨은 셔츠, 바지 또는 눈과 같은 단일 아이템을 나타내며 하나 이상의 어태치먼트로 구성됩니다. 사용자가 캐릭터에 적용해야 하는 아이템을 선택한 경우 이러한 아이템 스킨을 단일 스킨으로 결합하기만 하면 됩니다.

Skin mixAndMatchSkin = new Skin("custom-girl");
mixAndMatchSkin.addSkin(skeletonData.findSkin("skin-base"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("nose/short"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyelids/semiclosed"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("eyes/violet"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("hair/short-red"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("accessories/hat-red-yellow"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("legs/pants-jeans"));
mixAndMatchSkin.addSkin(skeletonData.findSkin("clothes/hoodie-blue-and-scarf"));
skeleton.setSkin(mixAndMatchSkin);

다 됐습니다! 위의 라이브 코드 에디터에서 이 코드를 사용해 볼 수 있습니다.

Skin#addSkin(Skin other) 메서드는 기타 스킨의 뼈, 제약조건 및 어태치먼트를 이동시켜서 이 스킨에 추가합니다. 캐릭터가 구성되어야 하는 모든 아이템 스킨에 대해 이 작업을 수행하면 스켈레톤에 설정할 수 있는 단일 스킨이 생성됩니다.

Skin#addSkin(Skin other) 메서드 이외에 Skin#copySkin(Skin other) 메서드도 추가했습니다. 이 메서드는 원본 어태치먼트 데이터에 영향을 주지 않고 텍스처 좌표와 같은 속성을 수정할 수 있는 모든 어태치먼트의 전체 복사본을 만듭니다.

전체 복사본을 쉽게 만들 수 있도록 모든 어태치먼트 유형에 copy() 메서드도 추가했으며, 이 메서드는 어태치먼트의 전체 복사본을 만듭니다. 이 메커니즘을 사용하여 개별 어태치먼트를 선택적으로 전체 복사를 할 수 있습니다. 메쉬 어태치먼트의 경우 MeshAttachment#newLinkedMesh() 메서드를 대신에 사용할 수 있습니다. 이 메서드는 원래 메쉬 또는 상위의 원래 메쉬에 연결된 링크 메쉬를 만듭니다.

마지막으로 스킨의 모든 어태치먼트를 쉽게 반복할 수 있는 Skin#getAttachments() 메서드를 추가했습니다.

이러한 API 추가 기능은 모든 Spine 런타임에서 사용할 수 있습니다! 여러분이 사용해 보실 수 있도록 모든 런타임 예제 프로젝트에 믹스 앤 매치 예제를 추가했습니다.

엔진별 개선 사항

물론 당사는 런타임에 대한 엔진별 영역을 개선하기 위해 항상 열심히 노력하고 있습니다!

언리얼 엔진의 경우 상당수의 삶의 질 향상을 추가했습니다. 이제 Spine 스켈레톤을 언리얼 엔진 UI에 통합할 수도 있습니다.

spine-unity의 주목할 만한 새로운 기능 중 하나는 Unity의 SpriteMaskRectMask2D 지원입니다. 또한 당사는 대청소를 실시하고, 새로운 스킨 API를 위해 확장 API를 일부 제거하였습니다.

MonoGame/XNA의 경우 예제 프로젝트를 더 쉽게 따라 할 수 있도록 다시 작성했습니다.

이제 Spine 웹 플레이어는 .skel 파일도 표시할 수 있습니다. SpinePlayerConfig#jsonUrl 필드 대신 SpinePlayerConfig#skelUrl를 설정하십시오!

Löve2D에서 RGBA 색상을 처리하는 방식을 최근에 변경했습니다. Löve2D 0.11부터는 색 구성 요소가 0-1 범위에 있어야 하며, 이전에는 0-255 범위가 사용되었습니다. spine-love2d 런타임은 두 가지 범위의 유형을 투명하게 처리합니다. 앞에서와 마찬가지로 Spine 개체에 지정된 색상은 0-1 범위를 사용합니다.

엔진별 변경 사항에 대한 전체 개요는 런타임 변경 로그를 참조하십시오!

다음

곧 있을 3.9 릴리스에는 앞서 말씀드린 바와 같이 비밀 프로젝트에 초점이 맞춰질 예정입니다. 당사는 다음 릴리스에 대한 많은 내용을 여러분에게 빨리 알려드리고 싶습니다!

문제점을 알려주시고, 베타 버전을 테스트하시고, 최신 기능을 추가하는 데 도움이 되도록 제안해 주신 커뮤니티의 모든 분들께 감사드립니다. 여러분의 의견은 매우 귀중합니다!

애니메이션을 즐기세요! Spine 팀

Spine 포럼에서 이 게시물에 대해 토론하십시오.