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.

Background

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.

Interview

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项目,通过制作障碍道路中四个不同的球的动画来磨练你的技能。

随着我们在未来的视频中更深入地研究动画,其他一切都将建立在这些基本原则之上。

Bilibili

YouTube

论坛

祝大家快乐制作动画!

装配新姿势教程

December 24th, 2020

在动画中使用不同的艺术创建姿势是一个很好的方法扩展角色在Spine中能做的事情范围。我们在网格绑定教程中略微介绍了这一点,并在最新的一次演示项目Helmet狗的完整转向的几个流视频中谈到过。本篇博文将总结在Spine骨架中添加和管理多个姿势的步骤。

你可以点此下载这些文件跟随学习。其中包含了所有需要的图像,以及每一步的Spine项目。

准备资产

假设你已经装备了一个角色,并且想要在动画中间添加一个新姿势。第一步是创建新姿势所需的其他资产。你可以使用Spine的PSD导出为Photoshop或其他图像编辑软件创建工作参考。这对于为动画创建新资产(如有不同视角的躯干)特别有用。PSD导出为你提供了整个中间动画姿势的所有附件的层,让你可以更轻松地绘制新附件。

一旦对新资产感到满意,就可以使用这些脚本从图像编辑软件中导出它们。下面我们假设你正在使用PhotoShop和相应的PhotoshopToSpine脚本。

通过在Photoshop项目中使用与骨架中现有插槽匹配的[插槽]标签和名称,Spine可以自动将你的新资产导入到正确的位置。对于我们的节日Spineboy,我们在Photoshop项目中创建了额外的资产,你可以在本文随附的资料下载中的2-spineboy-alt-images/文件夹中找到这些资产。

导入资产

PhotoshopToSpine脚本会生成一个JSON文件以及可以导入到现有Spine项目中的图像。

要导入新资产,请打开你要将新资产导入到的Spine项目(本示例中为1-festive-spineboy-start/文件夹中的1-festive-spineboy.spine)。下一步,选择导入数据或将JSON文件拖放到Spine窗口打开导入数据对话框(本例中是2-spineboy-alt-images文件夹中的festive-spineboy-alt-hands.json文件)。

取消勾选新建项目可将文件导入到当前骨架中,然后选择导入到现有骨架中,并选择忽略已有附件以保留已存在的网格。

点击导入后,Spine会将与现有插槽匹配的导入附件放在该插槽下。与任何现有插槽不匹配的附件将放在根骨骼下的新插槽中。

在Spine中添加新的姿势资产。

我们现在已经准备好将新资产整合到装配中,以便可以在动画中使用它们。

第一个问题是,新附件的位置可能与骨架中已有的骨骼不匹配。你可能会尝试通过为新姿势创建一组新骨骼来解决此问题。这样做也可以,但缺点是骨骼过多会造成骨架拥挤,将角色变成难以管理的章鱼,长远看会不方便导航和使用装配。

如何装配新姿势图片

有一种更好的方法来整合新部件!我们可以将姿势存储在动画中作为一种替代设置姿势。然后,还可将此动画用作一个便捷来源快速复制姿势并粘贴到新动画中。我们将用于此目的的动画称为“设置姿势动画”。

首先,在设置模式下,使新姿势的新附件可见,将其全部转换为网格,然后使用编辑网格创建网格结构。记住遵循网格裁剪提示,并尽量保持较低的顶点数!

仍处于设置模式时,将新网格绑定到在任何动画中都不移动的骨骼,例如骨骼。

完成上述步骤后,隐藏新姿势的网格,从而恢复原始设置姿势。

提示: 可以取消选中动画属性中的导出,这样该动画就不会被导出。它仍然可以在编辑器中供你使用。

现在是时候为我们的新姿势创建“设置姿势动画”了。切换到动画模式并创建将用于存储新姿势的动画。

提示: 如果肢体的新姿势处于透视状态,则可以平移骨骼以使它们更近或更远。可以沿父轴移动子骨骼以使此过程更加精确。尽量匹配骨骼的旋转。

显示新姿势所需的所有网格。由于所有网格都绑定到根,因此作为这些附件的真正父对象的骨骼可以自由移动,而不会影响附件。将骨骼与网格的新位置匹配。

一旦你对此动画中的骨骼位置感到满意,请将每个网格绑定到应该影响它的相应骨骼,并取消绑定根骨骼。

要测试权重,最好创建一个用于测试的新动画。你可以使用设置姿势动画测试它们,然后撤消,但会很容易忘记和意外破坏姿势。复制设置姿势动画并调整权重。一旦对结果满意,这个姿势就可以使用了!

使用新姿势

提示:

  • 按空格键清除你的选择。这将使所有的摄影表行都可见,只需从第一行选择关键帧即可轻松复制和粘贴。
  • 偏移显示附件的关键帧,使其位于动画中间以减少更改的影响。
  • 将图像放在分开的插槽中,如果想要用稍有不同的图像创建更平滑过渡的错觉,可淡入新插槽。

完成所有设置后,使用姿势非常简单:只需将设置姿势动画中的所有关键帧复制到新动画即可。

添加新姿势要使用的新骨骼

在向姿势添加新部分时,你可能会意识到实际需要一两个新骨骼才能更好地控制。当姿势与设置姿势非常不同时,如何才能做到这一点呢?

首先,按照上一节中介绍的步骤将现有骨骼与设置姿势动画中的新网格进行匹配。接下来,将设置姿势动画中的网格绑定到将成为新骨骼父对象的骨骼,将权重设置为100%。

现在切换到设置模式并使新网格可见。它们的位置可能看起来很奇怪,但与将成为新骨骼的父级骨骼相应对齐。使用网格作为参考来创建新骨骼。完成此操作后,可以在设置模式下再次隐藏网格。

切换到动画模式,并在设置姿势动画中将网格绑定到新创建的骨骼。如上所述,在测试动画中设置它们的权重。

修改替代姿势的网格

如果网格结构可以改进并需要更改该怎么办?这在Spine 4.0及更高版本中很容易操作:只需在动画模式下使用编辑网格按钮即可。

在早期版本的Spine中也可以,但有点困难,因为编辑网格只能在设置模式下使用。网格是在动画中的为姿势绑定的,在设置模式下它可能会扭曲,使得在那里编辑网格变得困难或不可能。这是可以做到的,但需要减轻网格的权重。你可以记下最重要的权重百分比或保持较低的顶点数,以更容易重新创建权重。

首先,将所有网格顶点100%加权到骨骼(或另一个不移动的骨骼)。如果没有解除根部与网格的绑定,则只需将权重设置为100%,否则,请确保在设置姿势动画中绑定根部,以便在绑定时存储网格的正确状态。

返回到设置模式并激活网格,现在网格在设置模式下显示为未变形状态,然后单击编辑网格。网格修改完成后,切换到动画模式,激活设置姿势动画,然后按更新绑定以存储正确的骨骼位置。

现在可以编辑权重以使网格再次受到正确骨骼的影响。

视频

如果你是一个视觉学习者,我们也有提供相关视频教程!Erika在Twitch上以流视频方式讲解了这些技巧。可在这里观看完整流视频或摘要版本:

总结

这是一个需要掌握的强大技巧,它可以为你的角色开启丰富的表现力。要让它工作,重要的一点是要细心并注意你绑定骨骼的位置,以及设置姿势动画要像在设置模式下一样仔细处理。由于这是一种高级技巧,在尝试记住所有步骤时很容易迷失,所以希望本篇博文能对你有所帮助。

你试过这个工作流程了吗?告诉我们你创造了什么!我们喜欢看到你的作品,记得在社交媒体上用#madewithspine来标记它们!

如果你对这些技术有任何想法,或者遇到了问题需要求助,可访问Spine论坛交流探讨。

Older