アーク - Spineを使ったアニメーション #6

May 17th, 2022

アーク(弧)を整えることは、アニメーションの品質を向上させる最も簡単な方法です。「Spineを使ったアニメーション」シリーズの最新ビデオで一緒に学びましょう!付属のSpineプロジェクトを使って、ビデオ中のエクササイズを行い、一緒にアニメーションのスキルを磨いていきましょう!

動画で使用している画像とSpineプロジェクトは以下にあります: https://esotericsoftware.com/files/projects/arcs-project.zip

フォーラム

TelegramやDiscordで使える自作ステッカーを作る方法

April 4th, 2022

ステッカーはメッセンジャーアプリで感情を表現したり、ふざけたりするのに便利ですよね。今回は、Spineを使ってTelegramやDiscordで使える自作ステッカー(絵文字)を作る方法をご紹介します!

プロジェクト

今回のブログのために、特別なSpineboyをご用意しました。"Chibi Spineboy"です! 実際のプロジェクトファイルはこちらからダウンロードできます。このプロジェクトを利用すれば、簡単にオリジナルのステッカーを作成したり、自分用のスケルトンやアニメーションを作成したりすることができます。

TelegramやDiscordのようなプラットフォームでは、ステッカーを自作するにあたりいくつかの条件があります。一般的に、アニメーションステッカーは短いループアニメーションであることが望ましいです。今回提供しているサンプルプロジェクトは、オリジナルのSpineboyのプロジェクトに比べて体のパーツが少なくシンプルなスケルトンですが、たくさんの目、口、エモートシンボルのバリエーションが用意されています。ちなみに、代わりのスキンとしてSpineチームのメンバーのスキンも入っています。このリグはHelmetの配信で紹介した最初の2つのリグとよく似ています。

Chibi Spinboyのアニメーションは、シンプルなワークフローで制作しました。まず、キャラクターを絵文字としてポーズさせます。次に、短いループの動きを追加します。こうすることで、新しいアニメーションの追加が非常に速くなり、ステッカーが求めるミニマルな要件に沿ったプロジェクトにすることができます。

もちろん、もっと複雑なアニメーションでもOKです!ただ、動作が長くなればなるほど、書き出すファイルの最終的なサイズが重くなってしまうかもしれないことに注意してください。

Chibi Spineboyの全ての制作過程については、こちらのTwitch配信でご覧いただけます。

Telegram向けのエクスポート

では、Telegramの動画ステッカー要件を確認して、これをSpineでどのように満たせば良いかを確認してみましょう。

  • 動画は必ずVP9コーデックでエンコードされたWEBM形式であること。 Spine 4.1以降では、新たにWEBMエクスポートを選択するだけで互換性のあるファイルが作成されるので、コーデックを気にする必要はありません!
  • ステッカーの一辺は512ピクセルちょうど、もう一辺は512ピクセル以下のサイズであること。 Spineでは、Scaleの代わりにFitを選択し、Fitの隣に表示される欄の両方に512を入力することで設定することができます。
  • 動画の長さは3秒以内。 これは、タイムラインが30FPS(デフォルト)に設定されている場合、90フレームに相当します。
  • フレームレートは最大30FPSまで。 30FPSで書き出すと、最も滑らかな仕上がりになります。ファイルサイズが大きくなりすぎる場合は、FPSを少し下げても構いませんが、その必要があるケースはあまり無いでしょう。
  • 動画は最適なユーザー体験のために、ループさせること。 最初のフレームと最後のフレームが一致するようにすれば問題ありません。
  • 動画サイズは256KB以下にすること。 上の必要サイズを満たすWEBMファイルは、通常、この制限を超えることはありません。もし超えてしまった場合は、エクスポートの際に画質設定を調整することができます。
  • 動画にはオーディオストリームがないこと。 オーディオのオプションを"None"にしておけば問題ありません。

これらの要件をすべてエクスポート設定に適用すると、次のようになります:

telegram export settings

この例では、Output type(出力タイプ)を"File per animation(1アニメーションごとのファイル)"にして、アニメーションごとに別々のファイルを作成しています。この設定により、一度で全てのアニメーションをエクスポートすることができます。アンチエイリアスを少し加え、背景を透明にすることを推奨しますが、これは必須ではありません。

これらの設定を行うのが手間な場合は、エクスポート設定ファイルを利用することができます。単純にこのエクスポート設定をダウンロードしたらSpine上で読み込むだけでOKです。

ここまで来たら、出力フォルダを設定してエクスポートをクリックするだけです!エクスポート後、1つのアニメーションにつき1つのWEBMファイルが作成され、それらを使ってTelegramステッカーセットを作成することができます。

Telegramステッカーセットの作成

Telegramは自作ステッカーセットの作成はTelegramのデスクトップアプリから行うことを推奨しています。

まず、ボット @Stickers とチャットを開始し、チャット内で /newvideo というコマンドを入力します。

stickers bot info

ボットがセットの名前を付けるように尋ねてくるので、好きな名前を返信してください。

stickers bot start of chat

次に、実際に各ステッカーを加えてみましょう!これは、ステッカーごとに1回ずつ行う必要があります。

PC内に保存したステッカー用のWEBMファイルを探し、ボットに送ります。ドラッグ&ドロップでも可能です。

ステッカーを表現する絵文字を1つ以上割り当ててください。最初に選んだ絵文字がチャットプレビューに表示されます。

sending the stickers

残りのWEBMファイルに対してもこの作業を繰り返してください。

すべてのステッカーを追加したら、ボットに /publish というコマンドを送信して公開することができます。ステッカーセットにアイコンを割り当てるかどうか尋ねられますが、/skipコマンドでスキップすることができます。最後に、ボットはステッカーセットの短い名前を尋ねるので、それを入力すると、ステッカーセットへのリンクが表示され、それを使って実際のステッカーをインストールすることができます。

publish the set

このSpineboyステッカーセットは、こちらのリンクからインストールすることができます。

preview of the set

Discord向けのエクスポート

ではDiscordのステッカー要件についても確認していきましょう:

  • アニメーション付きのファイルタイプ: APNG APNGとはアニメーションPNGのことで、Spineはこのフォーマットに直接エクスポートすることができます。
  • 最大ファイルサイズ: 500 KB このサイズはなかなか厳しいですが、通常は Reduce colors(減色) を有効にし、色数を減らすことでかなり小さいAPNGを作成することができます。これだけでは十分でない場合は、FPSも下げてください。
  • 寸法: 320px x 320px (ピッタリこの寸法である必要があります) Spineでは、Scaleの代わりにFitを選び、Fit設定の幅と高さの欄を320に設定し、Padをチェックして、出力がサイズに正確に一致するように設定することが可能です。

discord export settings

Telegramの場合と同じように、1つのアニメーションにつき1つのファイルをエクスポートし、透明な背景を設定します。

このエクスポート設定をダウンロードしてSpineプロジェクトに読み込むことができます。

Discordサーバーにステッカーを追加する

Discordサーバーにステッカーを追加するには2つの要件があります: あなたのDiscordロールに絵文字とステッカーの編集権限があること、そしてステッカーを追加したいDiscordに少なくとも1つのブーストが必要なことです。ステッカーの追加と管理については、こちらのDiscord公式の記事で詳しく説明されています。

Discordサーバーにステッカーを追加するには、サーバー設定にアクセスしてください:

Discord server settings

そして、サーバーのメニューからStickers(日本語UIではスタンプ)を選びます:

Discord stickers settings

ステッカーの必要条件と、ステッカーを追加できるかどうかの概要が表示されます。ステッカーがない場合は、下部のプラスボタンで追加できます。

Discord stickers overview

各APNGをアップロードし、絵文字を割り当て、説明を追加します。説明は簡単な言葉にしておくと、その言葉が入力されたときにステッカーが提案されるようになります。最後に、変更を保存してください。

Single sticker

完了すると、サーバー内の全員がこのカスタムステッカーを使えるようになります!

set preview in Discord

動画で見るプロセス

視覚的に学びたい方もご安心ください! ErikaがこれらのテクニックのTwitch配信を行いました。完全な 配信、またはこちらのダイジェストをご覧ください:

まとめ

ステッカーはとっても楽しいです! このワークフローを実践してみましたか? 作ったものをぜひ私たちにも見せてください! 私たちは皆さんが作成されたものを見るのが大好きなので、ソーシャルメディアに投稿する際はぜひ #madewithspine のタグをつけて投稿してください。

Spineフォーラムでこれらのテクニックについてあなたの感想を聞かせてください。また、もし行き詰まったら質問してください!

Timeline拡張を使ってUnityでアニメーションを組み合わせる

March 30th, 2022

Timeline拡張パッケージを使えば、コードを1行も書かずにUnity上で複数のSpineアニメーションを組み合わせることができます。新しいチュートリアルビデオでは、Timelineを利用した作業を始める方法から、出来上がったものを動画やPNGシーケンス、アニメーションGIFとしてエクスポートする方法をご紹介しています。

このビデオは役に立ちましたか?ぜひフォーラムでご意見をお聞かせください!