Spine Spotlight: Juliano Castro

April 1st, 2021

We really enjoy working with all talented animators in the Spine community, each with their own workflows and tips. We recently had the chance to interview Juliano Castro, an amazing animator who is very active in the Spine community! You may have seen his gorgeous animated scenes on Twitter or his Twitch lessons and streams.

In the interview below we get a peek into how Juliano uses Spine in professional environments.


Juliano graduated in Graphic Design but his passion for drawing and art started when he was a child. He began animating in 2000 after taking a traditional animation course to create a pencil test. Since then he's worked with both 2D and 3D techniques while running his own animation studio in Brazil for almost a decade, doing freelance gigs all around the world.


What is your experience with Spine?

I landed a freelance project from a company in Canada to animate some cycles for a Transformers game while I was still living in Brazil. It was a very small project but I got the opportunity to use my first Spine Essential License. It was an isolated experience and I didn't use Spine again until I had the opportunity to start shifting my career towards gamedev, years later. I started a deeper experience with Spine around 3 years ago when I left Brazil to join a gaming company based in Malta. Over there, Spine was the main tool to create animated assets for their games and I went full speed in that direction.

I use Spine for my daily production at the studio and I also do a lot of personal projects with it as well. At the studio, most of the work is for game assets (characters and props). For personal projects I like to take illustrations from artists I admire and bring them to life. I use this to expand my knowledge of Spine and combine it with other tools like After Effects and Adobe Animate.

Does your approach change depending on what you work on?

Yes, it changes a lot. For games, especially for mobile, optimization leads the way because of the limitations of each game engine. For video workflows I can work with cameras at post production and higher resolution source images, unlimited meshes and bones, and the advantages of direct vertex animation for polishing details.

Could you describe your process?

Usually I receive the asset to be animated with basic cutting, as a layered Photoshop file. Then I use a process of planning and refinement of the cutting and organize the layers, groups and naming to help my process after, when each part is exported and the Spine project is created.

Next is rigging. Depending on the complexity of what needs to be animated, the hierarchy can grow to become very confusing, so, again, naming and structure are very important factors to make the character or scene more intuitive and the workflow easier.

Animation comes after rigging and sometimes I like to start animating before all the meshes are done, because seeing the part in place can give you a better idea of what you will need for the mesh, or even if you need to turn an attachment into a mesh. I like to see the start of the animation as a back and forth process. After achieving the rigging refinement I need and I have the basic animation half done, then I change to a more polished animation flow. I like to use the concept of layered animation, even though it is not really layered in Spine, but I use the concept of building up passes on top of another. I start with basic poses, then I create the inbetweens and refine the timing, keeping an eye on the body mechanics. From there, with a solid base done, I will work on the fine details, polish the arcs, overlap and follow through, and I leave the final pass for facial animation and very specific stuff, when needed.

What are your favorite tools, or runtimes, to use with Spine?

Definitely my favorite Spine sidekick is After Effects. It adds a lot with VFX, particles, and composition tools.

If you have tried different animation tools, would you say working in Spine differs? In what way?

Along my career I have tried a lot of tools. Spine made me transition for good from animating characters in After Effects because Spine is unbelievably fast to get results and high quality character animation out of it. Something I am always pointing out to people that approach me to know more about Spine is the bone/mesh/weight concepts that are very close to 3D tools. When I got started, I dove in with these concepts in mind and that made the transition from 3D to 2D very smooth.

What setup or animation was most challenging?

For games, I believe that dealing with multiple skins and having characters that dramatically change their accessories or clothing is always challenging. Outside of games, realism with human characters is very hard. Creating believable movement and expressions is very challenging because as humans we can detect very subtle variations.

How much time does it take you to work on a project in Spine, and how is this time divided?

It varies a lot depending on the project. For games it can be a long schedule due the long list of cycles needed and the reviews/feedback from the art director. If it is a personal project, done with illustrations from other artists, I like to keep it within a week. I like to divide the process by days: 1 day for cutting and preparing assets, 1 day for rigging, and 1 or 2 days for animation. Lastly, 1 extra day for render passes and composition in After Effects for final exports and posting on social media.

What's your favorite Spine feature?

I have a favorite combo. Definitely meshes combined with constraints is a big combo, you can do a lot with them, even with simple setups.

Any funny story to tell us while developing in Spine?

It is funny now, but quite a nightmare at the time. During my first experiences with Spine, I was new on the team and new with Spine and gamedev, so I asked one of the animators about scaling a character before animating it. The person just said “go with what they sent in the file”. The character came in a high resolution PSD, so I followed the advice and weeks later when the exports hit the dev team, I got a message to resize the assets to “the correct size”. I just replied with a fake “no problem, my friend!”. From there, I only remember the overtime and rebuilding meshes like there is no tomorrow. (Note from the Spine team: if you ever encounter this problem, you can easily resize your project!)

Do you have tips for new Spine users?

Always: study animation, guys. Mastering the tool doesn't mean mastering animation. Stick with the fundamentals, build on them constantly, and be persistent.

Any tips for seasoned Spine users?

Yes! Share your knowledge, help young animators reach their potential, keep doing great animation and inspiring them. We learn and we grow when we teach.

What or who inspires you to create?

I have a long list of 2D artists that inspire me and it grows daily. Most of my Spine work is devoted to them, by animating their illustrations, but artists who deeply inspire me are usually the ones that go out of their daily jobs to explore and stretch their creativity. I see that in animators who are also sculptors, or painters that are musicians, illustrators that could be chefs -- you get my point. Artists that don't limit their art to one circle but are committed to a search that fuels and grows their creative sparks. Also, I try to watch/read/listen to movies/books/audiobooks that can add to my work on a level beyond animation, to bring more substance to the mix. I like to research about movie directing, storytelling, the classic Disney/Miyazaki of course, but some live action as well.

Creativity comes from a fueled up brain, so I try to keep my “brain food” diverse and constant.

Do you have any favorite artist/game/game studio that uses Spine? What do you like about them?

I have some, more artists than studios. I like how creative they are with the tool. To name some of them: Jorge Bompart and Arman Harutyunyan.

Where can people find you or see your work?

My portfolio hub is Artstation, but you can also find my work on instagram and Vimeo.

Anything else you'd like to tell us about? We'd love to hear about it!

I am committed this year to starting projects for teaching and sharing animation, creating useful and more specific Spine content to help the community, and to present the tool for new people interested in gamedev and animation. One of coolest things that happened last year was an invitation to start teaching skeletal animation and motion comics in some online schools and platforms. One of them in Brazil, called Patio Digital, invited me as a mentor for their animation program.

Recently I started streaming daily on my Twitch channel, showing some processes with Spine, talking about animation fundamentals, design for animation and, soon, doing short reviews on animation that people send and want some feedback.

I have more ambitious plans like creating a short movie with Spine, as well and other projects that will demand more of my time and budget. If anyone is interested, they can follow me on my Instagram, Twitter, and Twitch where I do my announcements and post more recent work.

The year will be busy for sure and I hope we all can benefit from what is coming. Thanks to the Spine team for this opportunity to talk a bit more about me and my work. I wish you all the best and look forward to making this community stronger together.

Thank you for your time, Juliano!

12원칙 - Spine #2로 애니메이팅

March 18th, 2021

Spine 튜토리얼 시리즈의 두 번째 애니메이팅 영상에 오신 것을 환영합니다! 12가지의 기본 애니메이션 원칙과 이러한 개념을 Spine에 적용하는 방법을 알려드리겠습니다. 제공된 Spine 프로젝트를 따라 하고 사용하여 장애물 코스에서 4개의 다른 공을 애니메이팅하여 기법을 연마하세요.

당사는 향후 영상에서 애니메이팅에 대해 보다 심도 있게 다룰 예정이므로 다른 모든 것이 이러한 기본 원칙 위에 구축될 것입니다.


즐거운 애니메이팅이 되세요!

즐겨찾기 도구 - Spine 워크플로 튜토리얼

January 4th, 2021

적절한 워크플로를 선택하시면 매우 짧은 시간 내에 고품질 애니메이션을 만들 수 있습니다. 최근 튜토리얼 영상에서 시니사가 Spine의 즐겨찾기 도구를 사용하여 더 빠르고 스마트하게 작업하는 방법을 보여드립니다.


새 포즈 리깅 튜토리얼

December 24th, 2020

애니메이션 중에 다른 아트로 포즈를 만드는 것은 Spine에서 캐릭터가 움직일 수 있는 동작의 범위를 확장하는 좋은 방법입니다. 메쉬 바인딩 튜토리얼에서 이에 대해 잠깐 살펴보았으며, 여러 스트리밍에서 이에 대해 이야기했습니다. 최근 블로그에서는 개 헬멧의 완전한 회전을 시연했습니다. 이 블로그 게시물에는 Spine 스켈레톤의 여러 포즈를 추가하고 다루는 단계가 요약되어 있습니다.

다음에서 따라 할 파일을 다운로드할 수 있습니다. 필요한 모든 이미지와 각 단계에 대한 Spine 프로젝트가 포함되어 있습니다.

에셋 준비

여러분은 이미 캐릭터를 리깅하셨고 애니메이션 중간에 새 포즈를 추가하시려고 한다고 가정해 보겠습니다. 첫 번째 단계는 새 포즈에 필요한 추가 에셋을 만드는 것입니다. Spine의 PSD 내보내기를 사용하여 Photoshop 또는 기타 이미지 편집 소프트웨어의 작업에 대한 참조를 만들 수 있습니다. 이 단계는 다른 원근감을 가진 몸통과 같은 애니메이션에 대한 새 에셋을 만드는 데 특히 유용합니다. PSD 내보내기는 애니메이션 중반 전체 포즈의 모든 어태치먼트에 대한 레이어를 제공하므로 새 어태치먼트를 더 쉽게 그릴 수 있습니다.

새 에셋이 마음에 드시면 이 스크립트를 사용하여 이미지 편집 소프트웨어에서 내보낼 수 있습니다. 아래에서는 여러분이 Photoshop 및 해당 PhotoshopToSpine 스크립트를 사용하고 있다고 가정합니다.

스켈레톤의 기존 슬롯과 일치하는 Photoshop 프로젝트의 [slot] 태그와 이름을 사용하면 Spine이 올바른 위치에 새 에셋을 자동으로 가져올 수 있습니다. 크리스마스 Spineboy의 경우 Photoshop 프로젝트의 추가 에셋을 만들었으며, 이 블로그 게시물에 있는 재료 다운로드2-spineboy-alt-images/ 폴더에서 찾을 수 있습니다.

에셋 가져오기

PhotoshopToSpine 스크립트는 기존 Spine 프로젝트로 가져올 수 있는 이미지와 함께 JSON 파일을 생성합니다.

새 에셋을 가져오려면 새 에셋을 가져오려는 Spine 프로젝트를 엽니다(우리의 경우에는 1-festive-spineboy-start/ 폴더 내 1-festive-spineboy.spine이 있습니다). 다음으로, 데이터 가져오기를 선택하거나 JSON 파일을 Spine 창에 끌어다 놓고 Import Data 대화 상자를 엽니다(우리의 경우에는 2-spineboy-alt-images 폴더 내 festive-spineboy-alt-hands.json 파일이 있습니다).

New project를 선택 취소하여 파일을 현재 스켈레톤으로 가져온 다음 Import into an existing skeleton와 기존 어태치먼트 Ignore를 선택하여 이미 있는 메쉬를 유지합니다.

Import를 클릭하면 Spine은 기존 슬롯과 일치하는 가져온 어태치먼트를 해당 슬롯 아래에 배치합니다. 기존 슬롯과 일치하지 않는 어태치먼트는 루트 뼈 아래의 새 슬롯에 배치됩니다.

Spine에서 새 포즈 에셋 추가

이제 새 에셋을 리그에 통합할 준비가 되었으므로 애니메이션에 사용할 수 있습니다.

첫 번째 문제는 새로운 어태치먼트의 위치가 이미 스켈레톤에 있는 뼈와 일치하지 않을 가능성이 있다는 것입니다. 새 포즈에 대한 새 뼈 세트를 만들어 이 문제를 해결하고 싶을 수 있습니다. 이렇게 하면 잘 될 수 있지만 스켈레톤을 많은 뼈로 가득 채우고, 캐릭터를 다루기 힘든 문어로 바꾸고, 장기적으로 리그를 검색하고 사용하는 것을 더 어렵게 만드는 단점이 있습니다.

새 포즈 이미지를 리깅하는 방법

새로운 부분을 통합하는 더 나은 접근 방식이 있습니다! 대체 설정 포즈 역할을 할 포즈를 애니메이션 내에 저장할 수 있습니다. 그때 이 애니메이션은 포즈를 빠르게 복사하여 새 애니메이션에 붙여 넣는 편리한 소스로도 사용할 수 있습니다. 이를 위해 사용되는 애니메이션을 "설정 포즈 애니메이션"이라고 하겠습니다.

시작하려면 설정 모드에서 새 포즈에 대한 새 어태치먼트를 표시하고, 새 어태치먼트를 모두 메쉬로 바꾼 다음 Edit Mesh를 사용하여 메쉬 구조를 만듭니다. 메쉬 만들기 팁를 따라 하여 정점 수를 적게 유지하십시오!

아직 설정 모드에 있지만 어떤 애니메이션에서도 움직이지 않는 root 뼈와 같은 뼈에 새 메쉬를 바인딩합니다.

위의 단계를 완료한 후 새 포즈의 메쉬를 숨겨 원래 설정 포즈를 복원합니다.

팁: 애니메이션 속성에서 export를 선택 취소하여 이 애니메이션을 내보내지 않도록 할 수 있습니다. 이 기능은 편집기에서 계속 사용할 수 있습니다.

이제 새 포즈에 대한 "설정 포즈 애니메이션"을 만들 차례입니다. 애니메이트 모드로 전환하고 새 포즈를 저장하는 데 사용할 애니메이션을 만듭니다.

팁: 팔의 새 포즈가 원근법에 맞으면 뼈를 이동하여 더 가깝게 또는 더 멀리 가져올 수 있습니다. 부모 축을 따라 자식 뼈를 옮겨서 이 절차를 보다 정확하게 수행할 수 있습니다. 뼈의 회전을 최대한 일치시키십시오.

새 포즈에 필요한 모든 메쉬를 표시합니다. 모든 메쉬가 루트에 바인딩되어 있기 때문에, 이러한 어태치먼트의 실제 부모인 뼈는 어태치먼트에 영향을 주지 않고 자유롭게 움직일 수 있습니다. 뼈를 메쉬의 새 위치에 맞춥니다.

이 애니메이션의 뼈 위치에 만족하면 메쉬에 영향을 미치는 각각의 뼈에 각각의 메쉬를 바인딩하고 루트 뼈의 바인딩을 해제합니다.

가중치를 테스트하려면 테스트할 새 애니메이션을 만드는 것이 가장 좋습니다. 설정 포즈 애니메이션을 사용하여 가중치를 테스트한 다음 실행 취소할 수 있지만, 잊어버리고 실수로 포즈를 망치기 쉽습니다. 설정 포즈 애니메이션을 복제하고 가중치를 조정합니다. 결과에 만족하면 포즈를 사용할 수 있습니다!

새 포즈 사용


  • 스페이스바를 눌러 선택을 취소합니다. 이렇게 하면 모든 도프 시트 행이 표시되므로 첫 번째 행에서 키 프레임을 선택하여 한 번의 클릭으로 복사 및 붙여넣기가 더 쉬워집니다.
  • 어태치먼트를 표시하는 키를 오프셋하여 애니메이션 중간에 있도록 하면 쉽게 변경할 수 있습니다.
  • 이미지를 별도의 슬롯에 보관하고 조금 더 다른 이미지로 더 부드러운 전환 효과를 만들려고 하는 경우에는 새 슬롯을 페이드인하십시오.

모든 것을 설정한 후에 포즈를 사용하는 것은 매우 쉽습니다. 설정 포즈 애니메이션의 모든 키를 새 애니메이션으로 복사하면 됩니다.

새 포즈에 사용할 새 뼈 추가

포즈에 새 부분을 추가할 때 더 나은 제어를 위해 실제로 새 뼈가 한두 개 필요하다는 것을 알 수 있습니다. 포즈가 설정 포즈와 매우 다른 경우 이 작업을 어떻게 수행할 수 있습니까?

먼저 마지막 섹션에 기술된 절차에 따라 설정 포즈 애니메이션에서 기존 뼈를 새 메쉬와 일치시킵니다. 다음으로 설정 포즈 애니메이션에서 메쉬를 새 뼈의 부모가 될 뼈에 바인딩하여 가중치를 100%로 설정합니다.

이제 설정 모드로 전환하고 새 메쉬를 표시합니다. 메쉬가 이상하게 배치된 것처럼 보일 수 있지만 새 뼈의 부모가 될 뼈와 적절하게 정렬되어 있습니다. 메쉬를 참조로 사용하여 새 뼈를 만듭니다. 이 작업이 완료되면 설정 모드에서 메쉬를 다시 숨길 수 있습니다.

애니메이트 모드로 전환하고 설정 포즈 애니메이션에서 메쉬를 새로 만든 뼈에 바인딩합니다. 위에서 설명한 대로 테스트 애니메이션에서 메쉬의 가중치를 설정하여 계속 진행합니다.

대체 포즈에서 메쉬 수정

메쉬 구조를 개선할 수 있고 변경해야 할 경우 어떻게 해야 합니까? Spine 버전 4.0 이상에서는 이 작업이 쉽습니다. 애니메이트 모드에서 Edit Mesh 버튼을 사용하면 됩니다.

이전 버전의 Spine에서는 가능하지만 Edit Mesh는 설정 모드에서만 사용할 수 있기 때문에 조금 더 어렵습니다. 메쉬는 애니메이션에서 포즈에 바인딩되었으며, 설정 모드에서는 왜곡될 가능성이 있어 메쉬 편집이 어렵거나 불가능합니다. 메쉬를 편집할 수는 있지만 메쉬의 가중치를 줄여야 합니다. 가장 중요한 가중치 백분율을 기록하거나 정점 수를 적게 유지하여 가중치를 더 쉽게 다시 만들 수 있도록 합니다..

먼저 모든 메쉬 정점의 100%를 root 뼈(또는 움직이지 않는 다른 뼈)에 가중치를 부여합니다. 메쉬에서 루트를 바인딩 해제하지 않은 경우 가중치를 100%로 설정하면 됩니다. 그렇지 않으면 설정 포즈 애니메이션에서 루트를 바인딩하여 루트가 바인딩될 때 메쉬의 올바른 상태가 저장되도록 합니다.

설정 모드로 돌아가서 메쉬를 활성화하고, 설정 모드에서 메쉬를 왜곡되지 않은 상태로 표시한 다음 Edit Mesh을 클릭합니다. 메쉬 수정이 완료되면 애니메이트 모드로 전환하고 설정 포즈 애니메이션을 활성화한 다음 바인딩 업데이트을 눌러 올바른 뼈 위치를 저장합니다.

이제 가중치를 편집하여 메쉬가 올바른 뼈의 영향을 다시 받도록 할 수 있습니다.


시각형 학습자이신 경우 저희가 도와드리겠습니다! Erika는 Twitch에서 이러한 기법을 스트리밍했습니다. 다음에서 전체 스트리밍 또는 다이제스트 버전을 확인하십시오.


이 튜토리얼은 새 포즈 리깅을 마스터할 수 있는 매우 효과적인 기법으로 캐릭터에 맞게 다양한 표현력을 나타낼 수 있습니다. 이 기법이 효과가 있으려면 뼈를 어디에 바인딩하고 있는지, 설정 포즈 애니메이션이 설정 모드에서처럼 조심스럽게 다루어지는지에 대해 세심한 주의를 기울이는 것이 중요합니다. 이 튜토리얼은 고급 기법이기 때문에 모든 단계를 기억하기가 어려우므로 이 블로그 게시물이 여러분에게 많은 도움이 되시길 바랍니다.

이 워크플로를 사용해 보셨나요? 어떤 것을 만드셨는지 알려주십시오! 여러분의 작품을 보고 싶습니다. 소셜 미디어에서 #madewithspine을 사용하여 작품에 태그를 붙여 주십시오!

Spine 포럼을 방문하셔서 이러한 기법에 대한 여러분의 생각을 말씀해 주시거나 문제가 발생하면 언제든지 질문하십시오.