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"にしておけば問題ありません。

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

この例では、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つ以上割り当ててください。最初に選んだ絵文字がチャットプレビューに表示されます。

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

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

publish the set

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

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