May 9th, 2025
新しいSpine Tipsチュートリアル動画を公開しました！今回は、アニメーション用にアセットを分割する方法を紹介します。これは一般的な作業であり、ここで紹介するヒントは、キャラクターの作成、リギングやアニメーションの準備の効率化のために役立つでしょう。
各キャラクターやプロジェクトには独自の課題がありますが、ここで紹介するヒントは様々な種類のプロジェクトに役立ちます。この動画と併せて、多くの例が掲載されている同じテーマのブログ記事もぜひご覧ください。また、当社のTwitch ストリーミングページもお見逃しなく！ キャラクターのカットとリギング・アニメーション準備とワークフローに関する質問やご意見はぜひSpine フォーラムに投稿してください！ 楽しんで、素敵なアニメーションライフを！
April 17th, 2025
この度、spine-phaserランタイムをPhaser v4に対応するようにアップグレードしました！
Spineはこれまで、Phaser v3を2年以上正式にサポートしてきました。Phaserがv4リリース候補版を公開したため、PhaserのクリエイターであるRichard Davey氏と協力し、spine-phaser-v4 というPhaser v4用の公式Spineランタイムを提供することに運びになりました。
現在、新しい spine-phaser-v4 または古い spine-phaser-v3 のどちらも選択できます。両者は同じAPIを提供し、ドキュメントも共通です。詳しくは Phaser v4 に移植された spine-phaser-v4 examplesを確認してください。
質問やサポートが必要な場合は、いつも通りフォーラムに投稿してください。バグを発見した場合やランタイムの改善を希望する場合は、どうぞご自由に当社の GitHub リポジトリでissueまたはプルリクエストを作成してください。
April 4th, 2025
ついにSpine v4.3 beta版の開発が始まりました！
前回のSpineリリースでは、アニメーションに革新をもたらす物理演算や、その他の素晴らしい新機能が追加されました。4.3でもいくつかの大きな新機能を追加するほか、最もよく使われるSpineの機能をより強力に改善する予定です。
以下はすでにbeta版で実装されている主な変更点です。全リストは変更履歴をご覧ください。他にも様々な機能改善を追加する予定です！
トランスフォームプロパティを異なる種類のプロパティにマッピングできるようになりました！例えば、ボーンを回転させたり移動したりした時に、他のボーンを移動、拡大縮小、シアーさせたりできるようになりました。
また、指定した範囲を超えないように、制約されたボーンの値を「固定(Clamp)」することができます。ワールド値とローカル値どちらで制約するかは、ソースボーンと制約されるボーンで別々に選択できます。
トランスフォームコンストレイントは、以前と同じようにも動作しますが、より良くなりました。例えば、以前のようにソースボーンの回転を制約されるボーンの回転にマップすることができますが、異なる速度でマップしたり、Clampを使用するという選択肢が追加されました。
これらの変更によって、スケルトンを自動的に動かすための選択肢が大幅に広がります！以下の例では、トランスレートXがスケールXに接続されています:
この例では Clamp が有効になっているので、スケールは -1 以下にも 1 以上にもなりません。また、スケールが -1 または 1 のどちらかになるように、トランスレートXの範囲は非常に小さく設定されています。その結果、ソースボーンが0を通過すると、制約されたボーンが反転するようになります:
以前は、グラフ内でキーを上下に移動したり、新しいキーを設定したりしても、ベジェカーブのハンドルは固定されたままになっていました。4.3では、ハンドルの調整が非常にスマートになり、可能な限りカーブの滑らかさがそのまま維持されるようになりました。つまり、キーを調整した後、ハンドルに手を加えて修正する手間が大幅に減りました。あるユーザーからは、これによりアニメーションの作成が200%速くなったという報告も受けています！
PSDをインポートする際、以前にSpineがPSDをインポートして作成したすべての画像を削除するオプションが追加されました。これにより、リネーム後に古い画像が取り残されることがなくなり、画像フォルダがすっきり整頓されます。
Spineは100%と200%のUIスケールをネイティブでサポートしています。これは1080pや4K画面ではうまく機能しますが、1440pなど他のサイズでは小さすぎたり大きすぎたりする場合があります。他のUIスケールを設定することもできますが、以前は125%や150%といった値ではかなりぼやけていました。今は違います！SpineのテキストレンダリングはどのUIスケールでも鮮明で、あなたの好みやモニターサイズに合わせて最適なUIサイズを設定できるようになりました。
テクスチャパッカーには以前から Fast 設定があり、タイトなパックにはならない代わりにより速くパックすることが可能でした。今回の改善ではかなり速くなりました！場合によっては、8倍速くなることもあります。それだけでなく、以前よりもずっとタイトにパックされ、時には Fast を使わないのと同じくらい良い結果になります。より高速なパッキングはゲーム開発中に多くの時間を節約できるので、ぜひお試しください。
これは小さな変更点ですが、フォルダに色を設定することができるようになり、整理整頓と迅速な識別がしやすくなりました。
ボーンを分割する際のオプションが増え、オプションを変更するとリアルタイムにビューポートに結果が表示されるようになりました。
お試しいただいたらぜひ、あなたのご感想をSpineフォーラムでお聞かせください。たくさんのユーザー様からのフィードバックをお待ちしております！
March 6th, 2025
Spineで初めて2Dスケルタルアニメーションの世界に飛び込んだ方の多くは、まず「アニメーション用のアセットをどのように準備すれば良いか？」という問題に直面するでしょう。今回は、アニメーションの制作を始める前に注意すべき点と効率化のためのヒントをご紹介します。
アセットを作成するとき、通常は他のアセットで覆われている部分も描くことが重要です。例えば、一部が頭の後ろに隠れている髪を描く場合、見えている部分だけでなく、髪全体を描くようにしてください。この手間をかけることで、髪を回転させたり動かしたりして、隠れていた部分が見えるようになった際に隙間が発生してしまうことを防ぐことができ、可動域を最大化することができます。
スムーズで自然な手足の動きのためには、関節の描き方にこだわることが大切です。例えば上腕と前腕のような四肢のパーツを描くときは、関節が重なる部分をできるだけ円形に近い形で残すようにしましょう。
重なっている部分を丸くすることで、隙間ができず、回転の可動域が最大になります。一般的に、他のパーツと重なる部分をどのような形状にするか迷ったら、丸くしておくのが安全です。これは、肩や肘など、根本を中心に回転する必要があるパーツでは特に重要です。
湾曲させる必要のあるアセットをデザインするときは、まっすぐな画像を用意しましょう。まっすぐな画像は両方向に曲げることができ、より柔軟に変形できます。すでに曲がっている画像を反対方向に曲げようとすると、綺麗な結果が得られないことがよくあります。ウェーブのかかった髪など、常にカーブがあるべきものをまっすぐにする方法がわからない場合は、風の影響を受けていない、落ち着いた状態を想像してみてください。
また、画像を斜めに描くのは、効率が悪くなってしまうので避けましょう。斜めの画像は、ポリゴンパッキングを使っていない限り、同じ画像を縦や横に配置するよりも多くのアトラススペースを占有する可能性があります。また、生成(Generate)ボタンを使うと均一なグリッドを生成することができますが、画像に描かれているものが斜めになっていると役に立ちません。
Spineのアニメーションで重要なのは、各パーツを独立して動かせることです。これを実現するには、アニメーションさせたい各パーツを別々に描き、それぞれのレイヤーに配置します。分離の程度はあなた次第で、各パーツをどのようにアニメーションさせたいかによります。ただし、十分に分かれていないと、個々のパーツのアニメーションが難しくなり、クリエイティブな可能性が制限されてしまう場合があることを覚えておいてください。
オブジェクトの前後に表示される要素を同じレイヤーに描画するのは避けましょう。例えば、マントを羽織ったキャラクターをアニメートする場合、マントのパーツが体の前後で別々のレイヤーに描かれるようにします。中間点で接続する必要がある場合は、その点を両方に描画し、Spine上で、両方の画像が 同じウェイト になるようにします。ウェルド(Weld)を使えば完璧に一致させることができます！
輪郭線があるアートスタイルの場合は、交差させる手足のパーツの上下にアウトラインを含めると便利です。こうすることで、四肢がどのように回転してもアウトラインが維持されます。たとえば以下のGIFでは、このテクニックが前腕と手の両方に使われています。これによって、前腕が上腕に合体することなく重なり、手も前腕との接続を保ちながらも大きな回転可動域を持つことができています。
SpineはPSDファイルを直接インポートできるようになりました。これは従来のPhotoshopToSpineスクリプトよりもはるかに高速で、PSD形式で保存できる画像編集ソフトなら何でも使用できます。タグをPSDのレイヤーやグループに追加することで、Spineの外で効率的にアセットを管理し、お好みの画像編集ソフトウェアからSpineへの合理的なパイプラインを作成することができます。タグをレイヤーやグループ名に追加するだけで、PSDインポート時にSpineが自動的に処理します。
これを利用する際は、ドキュメントの色空間がCMYKではなくRGBに設定されていることを確認してください。また、新しいアセットを簡単に追加できるように、原点を追加することを忘れないように注意してください。
Spineでは、効果的なキャラクターの構成とアニメーションの方法を理解するための豊富な参考資料を提供しています。プロジェクト例ページでは、完成した様々なキャラクターの例をダウンロードできます。さらに、Twitchストリームファイルでは、ライブデモやアニメーションプロセスに関して深く掘り下げています。これらのサンプルは、プロのアニメーターがどのようにアセットを整理し、構成しているかを見る上で非常に貴重です。配信全体は長いので、興味のある情報を見つけるためにフィルターやチャプターを活用してください。
これらのガイドラインに従うことで、Spineを使用して洗練されたプロフェッショナルな2Dアニメーションを作成することができます。この投稿についての話題はぜひSpineフォーラムに投稿してください。それでは、楽しいアニメーションライフを！
