April 4th, 2025
Spine v4.3 베타가 시작되었음을 기쁜 마음으로 알려드립니다!
이전 Spine 릴리스에서는 물리 엔진과 다양한 새로운 기능을 선보여 애니메이션에 큰 변화를 가져왔습니다. 4.3에서는 주요 새로운 기능 추가와 함께 자주 사용되는 Spine 기능들을 더욱 강력하게 만들고, 늘 그렇듯 작업 편의성 개선도 곳곳에 더했습니다.
아래는 베타에 이미 반영된 변경 사항 중 일부이며, 전체 내용은 변경 로그에서 확인할 수 있습니다. 앞으로 더 많은 기능이 추가될 예정이니 기대해주세요!
이제 변형(transform) 속성을 다른 속성과 매핑할 수 있습니다. 예를 들어, 어떤 뼈를 회전하거나 이동(translate)할 때 다른 뼈들이 이동, 스케일, 혹은 시어(shear)하도록 설정할 수 있습니다.
또한 제한된(constrained) 뼈가 특정 범위를 넘어서지 않도록 값을 "클램프(clamp)"할 수 있습니다. 소스 뼈와 제한된 뼈 각각에 대해 월드(world) 또는 로컬(local)을 따로 선택할 수도 있습니다.
이전처럼 작동하던 Transform constraints 역시 더 나아진 형태로 그대로 가능합니다. 예를 들어, 예전처럼 회전을 회전에 매핑하되, 속도를 다르게 주거나 클램프를 사용할 수 있습니다.
이 모든 것은 스켈레톤이 자동으로 움직일 수 있는 다양한 가능성을 열어줍니다! 아래 예시에서는 X축 이동(translate X)이 X축 스케일(scale X)과 연결되어 있습니다:
클램프를 사용해 스케일이 -1보다 작아지거나 1보다 커지지 않도록 설정했습니다. X축 이동 범위를 매우 작게 잡아 스케일이 -1 혹은 1 중 하나가 되게 했습니다. 그 결과 소스 뼈가 0을 지날 때마다 제한된 뼈가 뒤집히는(flip) 효과가 납니다:
이전에는 그래프에서 키를 위아래로 옮기거나 새 키를 설정할 때, Spine이 베지어(Bezier) 커브 핸들을 그대로 유지했습니다. 하지만 4.3부터는 핸들을 자동으로 스마트하게 조정하여, 커브 형태를 가능한 한 그대로 유지합니다. 따라서 키를 조정한 뒤 핸들을 다시 만지작거릴 일이 훨씬 줄어듭니다. 한 유저는 애니메이션 작업 속도가 무려 200% 빨라졌다고 합니다!
PSD를 불러올 때, 기존에 PSD로 생성된 이미지를 Spine이 모두 삭제하도록 설정할 수 있는 옵션이 추가되었습니다. 이를 통해 이름이 바뀐 이미지가孤立되는 것을 방지하여 이미지 폴더를 깔끔하게 유지할 수 있습니다.
Spine은 기본적으로 100%와 200% UI 스케일을 지원합니다. 이는 1080p나 4K 모니터에서는 잘 작동하지만, 1440p 같은 해상도에서는 너무 작거나 크게 보일 수 있습니다. 그동안 125%나 150%와 같은 UI 스케일 값을 설정하면 다소 흐릿하게 표시되었는데, 이제는 Spine의 텍스트 렌더링이 모든 UI 스케일에서 선명하게 보이도록 개선되었습니다. 덕분에 모니터 크기와 시야에 맞춰 UI 크기를 자유롭게 설정할 수 있습니다.
텍스처 패커에는 항상 Fast 설정이 존재했지만, 그동안은 매핑을 덜 촘촘히 하는 대신 처리 속도를 높이기 위해 사용되었습니다. 이제는 이 Fast 설정이 이전보다 훨씬 더 빨라졌습니다. 상황에 따라 최대 8배나 빠를 수 있습니다! 그뿐만 아니라 이전보다 훨씬 더 촘촘하게 패킹하며, 경우에 따라 Fast를 사용하지 않은 것만큼이나 효율적입니다. 게임 개발 중에 반복되는 텍스처 패킹에 소요되는 시간을 크게 줄일 수 있으니, 한 번 시도해볼 가치가 있습니다.
크게 보이지 않는 변경이지만, 이제 폴더에 색상을 설정하여 폴더를 조직적으로 관리하고 빠르게 구분할 수 있습니다.
뼈를 분할할 때 선택할 수 있는 옵션이 늘었고, 뷰포트에서 옵션을 조정하는 즉시 그 결과를 미리 볼 수 있습니다.
한 번 사용해보시고 Spine 포럼을 통해 의견을 들려주세요. 피드백은 언제든 환영합니다!
혹시 번역이 명확하지 않거나 더 자세한 설명이 필요한 부분이 있다면 말씀해주세요.
March 6th, 2025
만약 Spine을 사용해 2D 골격 애니메이션을 처음 시작했다면, 가장 자주 묻게 되는 질문 중 하나가 “에셋을 어떻게 준비해야 할까?”일 것입니다. 아래에 적힌 팁들은 애니메이션 프로세스에서 최대의 효과를 내도록 도움을 줄 수 있는 기본 가이드입니다.
에셋을 제작할 때는 다른 에셋에 가려지는 부분이라도 반드시 그려두는 것이 중요합니다. 예를 들어, 머리 뒤쪽으로 가려지는 머리카락을 그릴 때, 눈에 보이는 부분만 그리지 말고 머리 전체를 모두 표현해 두세요. 이렇게 해두면 머리카락이 회전하거나 움직일 때 가려져 있던 부분도 자연스럽게 드러나며, 움직임의 범위가 훨씬 넓어집니다.
팔이나 다리 등 관절이 접히는 부위를 자연스럽게 움직이려면, 관절 부위를 둥글게 그려주는 것이 핵심입니다. 관절이 서로 겹치는 부위를 가능한 한 원형에 가깝게 그려두면, 회전할 때 매끄러운 동작을 얻을 수 있습니다.
특히 어디서 어떻게 겹쳐야 할지 헷갈린다면, 부품의 끝 부분을 둥글게 처리해 보는 것이 안전한 선택입니다. 어깨나 팔꿈치처럼 회전해야 하는 부위는 겹치는 영역을 둥글게 그려두면 매끄러운 전환과 자연스러운 움직임을 만들 수 있습니다.
꺾이거나 휘어야 하는 에셋은 되도록 일자로 뻗은 형태에서 시작하는 것이 좋습니다. 일자로 그려진 이미지는 양쪽으로 자유롭게 휘게 만들 수 있어 더 큰 유연성을 제공합니다. 이미 어느 정도 구부러진 이미지를 반대 방향으로 다시 휘게 만드는 것은 어려울 때가 많습니다. 항상 곡선이 있어야 하는 머리카락처럼 완전히 펴기 힘든 대상이라면, 바람에 날리지 않은 가장 편안한 상태를 기준으로 그려두세요.
또한 이미지를 대각선으로 그리는 것은 가급적 피하는 편이 좋습니다. 대각선으로 그려진 이미지는 폴리곤 패킹을 사용하지 않는 이상, 수직·수평 방향의 동일한 이미지보다 더 많은 아틀라스 공간을 차지할 수 있기 때문입니다. 또한 generate 버튼을 눌러 생성되는 메시 격자는 균일한 형태이므로, 이미지가 대각선으로 배치되어 있으면 작업 효율이 떨어집니다.
Spine으로 애니메이션을 제작할 때 핵심은 각 부위를 독립적으로 움직일 수 있게 하는 것입니다. 이를 위해서는 움직이고 싶은 모든 부위를 각각 별도의 레이어로 분리해 그려두어야 합니다. 어느 정도까지 나눌지는 프로젝트의 요구 사항이나 연출 방식에 따라 다르지만, 충분히 나누어두지 않으면 각 부위를 따로 움직이는 데 어려움이 생기거나 표현 범위가 제한될 수 있습니다.
앞에서 보이는 부분과 뒤에서 보이는 부분을 하나의 레이어에 합쳐 그리지 않도록 주의하세요. 예를 들어 캐릭터의 망토가 몸 앞뒤로 움직여야 한다면, 망토의 앞쪽 부분과 뒤쪽 부분을 각각 따로 그려두는 것이 좋습니다. 중간 지점에서 이어져야 할 경우, 양쪽 모두에 같은 지점을 그려두고 Spine에서 동일한 웨이트를 적용해 이미지를 하나로 이어주세요. weld를 사용하면 완벽하게 연결할 수 있습니다!
윤곽선을 포함하는 아트 스타일일 경우, 팔이나 다리 등의 중간 부분 위아래로 윤곽선을 모두 넣어두면 좋습니다. 이렇게 해두면 부위가 회전하더라도 윤곽선이 자연스럽게 이어지면서 각 파트가 잘 구분됩니다. 아래 GIF 예시를 보면, 전완과 손 모두 이 기법을 사용해 상완과 자연스럽게 겹치고, 손이 회전할 때도 부자연스럽지 않게 부착되어 보이도록 합니다.
이제 Spine은 PSD 파일을 직접 가져올 수 있게 되었습니다. 예전 PhotoshopToSpine 스크립트보다 훨씬 빠르고, PSD 파일을 쓸 수 있는 어떤 이미지 에디터라도 활용 가능합니다. PSD 안의 레이어와 그룹에 태그를 추가해 두면 Spine 밖에서부터 에셋 관리가 쉬워지고, 선호하는 툴에서 Spine으로 바로 연결되는 작업 파이프라인을 구축할 수 있습니다. 레이어와 그룹 이름에 태그를 달아두기만 하면, PSD 불러오기 시 Spine이 자동으로 처리해 줍니다.
단, 문서 색상 모드는 CMYK가 아니라 반드시 RGB여야 하며, 그렇지 않을 경우 내보낸 후 색상이 칙칙해지는 등의 문제가 생길 수 있습니다. 그리고 origin을 추가해 두면, 새로운 에셋을 추가할 때 훨씬 편리해집니다!
Spine은 캐릭터를 효과적으로 구성하고 애니메이션화하는 방법을 이해할 수 있도록 다양한 자료를 제공합니다. Examples 페이지에서는 완성된 캐릭터 예시들을 다운로드할 수 있고, Twitch 스트림 파일에서는 생생한 데모와 추가적인 팁을 확인할 수 있습니다. 전문 애니메이터들이 에셋을 어떻게 구성하는지 직접 확인할 수 있으니 꼭 참고해 보세요. 스트림은 길이가 긴 편이니, 필요한 정보는 필터나 챕터를 활용해 찾으면 편리합니다.
이 팁들을 참고하면 Spine에서 더욱 완성도 높은 2D 애니메이션을 만들 수 있을 것입니다. 이 글에 대해 더 이야기 나누고 싶다면 Spine 포럼에 들러 주세요. 멋진 애니메이팅 되세요!
March 4th, 2025
This summer we released spine-haxe with support for Starling. Today we're happy to announce that it now also supports HaxeFlixel!
Our new integration allows you to render Spine animations using HaxeFlixel and OpenFL. Haxe, in combination with OpenFL, empowers you to create applications for a wide range of targets, including HTML5 applications and native apps for both desktop and mobile platforms.
Try out our new HaxeFlixel integration by moving Celeste in the demo below:
To get started, check out the spine-haxe documentation and the examples in our GitHub repository. We also invite you to join the discussion about this release on the Spine forum.
February 13th, 2025
Let's explore App animations in Spine with Erika in a new season of Twitch streams!
To watch live, follow the Esoteric Software Twitch channel to be notified of the start of a stream. Also and check the stream schedule.
If you can't make it for the stream, don't worry! We'll be uploading the recordings on our Twitch streams archive page.
Let us know your comments and opinions on the Spine forum.
