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を使ったアニメーションのチュートリアルシリーズ第2弾へようこそ!今回はアニメーションの12の基本原則と、そのコンセプトをSpineでどのように応用するかをお教えします。付属のSpineプロジェクトを使って、4つの異なるボールが障害物コースを通過するアニメーションを作成し、スキルを磨いていきましょう。

今後のビデオでは、アニメーションをより深く掘り下げていきますが、全てはこれらの基本原則の上に構築されていきます。

フォーラム

楽しいアニメーションライフを!

フェイバーツール - Spineワークフローチュートリアル

January 4th, 2021

正しいワークフローを選択することで、高いクオリティのアニメーションを短時間で作成することができます。この最新のチュートリアルビデオでは、シニサがより速くてスマートな作業のためのフェイバーツールの使い方をご紹介します。

フォーラム

新規ポーズのリギングチュートリアル

December 24th, 2020

アニメーション中に差分画像でポーズを作成することは、Spineキャラクターができることの幅を広げるのにとても良い方法です。これについては メッシュバインディングチュートリアル でも紹介しましたし、いくつかの配信でも紹介していますが、最近ではこちらの犬のヘルメットを完全に一回転させる実演 もしています。今回のブログでは、Spineスケルトンに複数のポーズを追加して管理する手順をまとめてみます。

こちらからファイルをダウンロード して実践することができます。すべての必要な画像と、各ステップのSpineプロジェクトが含まれています。

アセットの準備

さて、キャラクターを既にリギングしてあって、アニメーションの途中で新規ポーズを追加したくなった場合を想像してみてください。まず最初のステップは、新規ポーズに必要な追加アセットの作成です。SpineのPSDエクスポートを利用すれば、Photoshopなどの画像編集ソフトで作業の参考にすることができます。これは特にアニメーション用の新規アセットを作成する際に、パースを変えたトルソーなどを作成する際に便利です。PSDエクスポートでは、アニメーションの途中のポーズ全体のアタッチメントファイルのレイヤーを取得できるので、より簡単に新しいアタッチメントを描くことができます。

新規アセットが完成したら、これらのスクリプトを使って画像編集ソフトから書き出すことができます。以下、Photoshopとそれに対応している PhotoshopToSpine というスクリプトを使用していると仮定します。

Photoshopプロジェクト内の [slot] タグと名前をスケルトン内の既存のスロット名と一致させることで、Spineは自動的に新しいアセットを正しい場所にインポートすることができます。今回このクリスマスSpineboyのために、Photoshopプロジェクト内に追加のアセットを作成しました。

そして名前をPhotoshopプロジェクト内のスケルトン内の既存のスロットと一致させると、Spineは自動的に新しいアセットを正しい場所にインポートしてくれます。追加したアセットは、このブログ記事に添付されている 素材ダウンロード の中のフォルダ2-spineboy-alt-images/にあるPhotoshopプロジェクトで確認できます。

アセットのインポート

PhotoshopToSpineスクリプトは、画像と一緒に既存のSpineプロジェクトにインポートできるJSONファイルを生成します。

新しいアセットをインポートするために、まずその新しいアセットをインポートしたいSpineプロジェクトを開きましょう(今回の場合は、1-festive-spineboy-start/ フォルダ 内の 1-festive-spineboy.spine のことです)。次に、 データインポート を選択するか、JSONファイルをSpineウィンドウにドラッグ&ドロップして データインポート ダイアログを開きます (今回の場合は 2-spineboy-alt-images 内の festive-spineboy-alt-hands.json です)。

そして現在のスケルトンにファイルをインポートするために、新規プロジェクト のチェックを外して、既存のスケルトンにインポート無視 を選択して既存のアタッチメントを無視して既存のメッシュを保持します。

インポートをクリックすると、Spineはインポートされたアタッチメントファイルで既存のスロットにマッチするものをそのスロットの下に配置します。既存のスロットにマッチしないアタッチメントは、rootボーンの下の新規スロットに配置されます。

Spineで新規ポーズ用アセットを追加する

これで、新しいアセットをアニメーションで使えるようにリグに組み込む準備が整いました。

さて最初の問題は、新しいアタッチメントの位置がスケルトンの既存ボーンの位置と一致しないことです。この問題を回避するために、新規ポーズのために新しいボーンのセットを作成したくなるかもしれません。それも可能ではありますが、スケルトンに多くのボーンを詰め込んでしまい、キャラクターが手に負えないタコのようになってしまい、長い目で見ると操作やリグが扱いづらくなるという欠点があります。

新規ポーズの画像をリギングするには

新しいパーツを統合するのにより良いアプローチがあります!ポーズをアニメーションの中に保存して、差分用のセットアップポーズとして機能させることができます。このアニメーションは、ポーズを手早くコピーして新しいアニメーションに貼り付けるのに便利なソースにもなります。この目的で使用されるアニメーションを「セットアップポーズアニメーション」と呼んでみましょう。

始めるには、設定モードで、新規ポーズ用の新規アタッチメントを表示し、それらをすべてメッシュにして、メッシュ編集を使ってメッシュ構造を作成します。メッシュ作成のコツを忘れずに守って、頂点数はできるだけ少なくしてくださいね!

設定モードのままで、新しいメッシュをアニメーション中に動かないボーン(root ボーンなど)にバインドします。

上記の手順が終わったら、新規ポーズ用のメッシュを非表示にして、元のセットアップポーズを復元します。

ヒント: アニメーションのプロパティで export のチェックを外すと、このアニメーションはエクスポートされなくなります。その後もこのアニメーションはエディタでは使用することが可能です。

それでは、新規ポーズの「セットアップポーズアニメーション」を作成しましょう。アニメ化モードに切り替えて、新規ポーズを保存するためのアニメーションを作成します。

ヒント: その新規ポーズが腕や足などのパースがかかったポーズの場合、ボーンを移動させてそれらを近づけたり遠ざけたりすることができます。この手順をより正確にするために、親軸に沿って子ボーンを移動させることができます。できるだけボーンの回転を一致させるようにしてください。

新規ポーズで必要なすべてのメッシュを表示してください。すべてのメッシュはrootにバインドされているので、これらのアタッチメントの実際に親となるボーンは、まだアタッチメントに影響を与えることなく自由に動かすことができます。ボーンをメッシュの新しい位置に合わせてください。

このアニメーションのボーンの位置に満足したら、各メッシュに影響を与えるべきそれぞれのボーンにバインドして、rootボーンのバインドを解除します。

ウェイトをテストするには、テスト用に新しいアニメーションを作成するのが一番です。セットアップポーズアニメーションを使ってテストしてから元に戻すこともできますが、つい忘れてしまってポーズを台無しにしてしまうことがあります。セットアップポーズアニメーションを複製して、ウェイトを調整しましょう。結果に満足したら、ポーズを利用する準備は完了です!

新規ポーズを利用する

ヒント:

  • スペースバーを押すと選択が解除されます。これでドープシートの全ての行が表示されるので、最初の行からキーフレームを選択してワンクリックでコピー&ペーストするのが簡単になります。
  • アタッチメントを表示するキーを、アニメーションの途中に来るようにオフセットして、変化の荒さを軽減してください。
  • 差分画像でよりスムーズに移行するように見せたい場合は、画像を別のスロットに入れたままにしておき、新しいスロットをフェードインさせてください。

すべての設定が終わったら、ポーズはとっても簡単に扱えるようになります。セットアップポーズアニメーションから新しいアニメーションにすべてのキーをコピーするだけです。

新規ポーズで使用する新しいボーンの追加

ポーズに新しいパーツを追加していくと、より良いコントロールのために新しいボーンが必要だと気づくかもしれません。ポーズがセットアップポーズと大きく異なる場合、どのようにすればよいのでしょうか?

まず、最後のセクションで説明した手順に従って、セットアップポーズアニメーションの新しいメッシュに既存のボーンを合わせます。次に、セットアップポーズアニメーションのメッシュを、新しいボーンの親となるボーンにバインドし、ウェイトを100%に設定します。

次に設定モードに切り替えて、新しいメッシュを表示します。新しいメッシュの位置が変に見えるかもしれませんが、新しいボーンの親となるボーンに適切に合っています。このメッシュを参照して、新しいボーンを作成します。これが完了したら、設定モードで再びメッシュを非表示にして大丈夫です。

アニメ化モードに切り替え、セットアップポーズアニメーションでメッシュを新しく作成したボーンにバインドします。そして先にやったように、テストアニメーションでウェイトを設定します。

別のポーズでメッシュを修正する

もしメッシュ構造を改良して変更する必要がある場合はどうすれば良いでしょうか?Spineバージョン4.0以降では簡単にできます。アニメ化モードで メッシュ編集 ボタンを使うだけです。

以前のバージョンのSpineでも可能ですが、 メッシュ編集 が設定モードでしか使えないので、少し難しいです。そのメッシュはアニメ―ションのポーズにバインドされているので、設定モードではメッシュが歪んでいる可能性が高く、そこでメッシュの編集を行うのは難しいか、不可能です。また、編集自体は可能ですが、メッシュのウェイト設定を破棄する必要があります。最も重要なウェイトの割合をメモしておくか、頂点の数を少なくすれば、ウェイトを再現しやすくすることができます

まず、すべてのメッシュの頂点を root ボーン(または動かない別のボーン)にウェイト100%にします。もしそのメッシュからrootをバインド解除していなかった場合はただウェイトを100%にしてください。そうでない場合はセットアップポーズアニメーションでrootをバインドしている間にそれをバインドするようにしてください。

設定モードに戻って、メッシュをアクティブにしてください。これで設定モードでは歪んでいない状態で表示されてると思いますので、メッシュ編集をクリックしてください。メッシュの修正が完了したら、アニメ化モードに切り替えて、セットアップポーズアニメーションを有効にして バインディングをアップデート を押して、正しいボーンポジションを保存します。

これで、メッシュがもう一度正しいボーンの影響を受けるようにウェイトを編集できるようになりました。

ビデオ

もしあなたがもっと視覚的に学びたいと思ってるなら、私たちはあなたをカバーできます!Erikaはこれらのテクニックを Twitchでストリーミングしています。 配信の完全版 または以下のダイジェスト版をチェックしてみてください:

結論

このテクニックをマスターすることで、キャラクターの表現力の幅がぐっと広がります。このテクニックを使いこなすためには、ボーンをバインドする位置に注意し、設定モードと同じようにセットアップポーズアニメーションを丁寧に扱うことが重要です。これは高度なテクニックなので、すべての手順を覚えようとすると迷子になりがちなので、このブログ記事があなたの役に立つことを願っています。

このワークフローを試してみましたか?ぜひ私たちにあなたが作ったものを見せてください!私たちはみなさんの作品を見るのが大好きなので、ソーシャルメディアでは #madewithspine のタグを忘れずに付けてください!

ぜひSpineフォーラム に立ち寄って、これらのテクニックについてあなたの意見を共有したり、もし詰まってしまった点があれば私たちに質問してください。

Older