spine-threejsランタイムのアップデート

December 6th, 2024

/img/blog/spine-threejs-update/threejs.png

three.js用のSpineランタイムをアップグレードしました!

three.jsはブラウザ上で3Dアニメーションを作成するためのライブラリです。Spineユーザーにとって必ずしも真っ先に選ばれるとは限りませんが、2Dと3Dの要素を組み合わせたい場合には優れた選択肢です。当社のランタイムを使えば、2DのSpineアニメーションを簡単にthree.jsの3Dの世界に持ち込むことができます。

ライティング

今回のアップグレードは、three.jsにSpineスケルトンをより自然に統合できるようにすることを目的としています。まず、Spineオブジェクトの作成に使用するマテリアルを選択できるようになりました。つまり、MeshStandardMaterial のようなマテリアルを使用すれば、スケルトンがライトに反応し、影を落としたり受けたりできます。また、Spineエディターに表示されるアニメーションをそのまま表示したい場合は、ライティングに反応しない MeshBasicMaterial のようなマテリアルを使用することもできます。

こちらにRaptorスケルトンが影を落とす/受けるインタラクティブなデモをご用意しました(ドラッグでカメラの角度変更/スクロールでズームができます):


ティントブラック

spine-threejs がすべてのSpine機能を完全にサポートするように、「ティントブラック」機能のサポートを追加しました。

ESMモジュール

r160で、three.jsはIIFEバンドルのサポートをやめ、最新のECMAScriptモジュール(ESM)を採用しました。効率化のために、当社は ESM モジュールも提供し始めました。今後は、コードで以下のように import/export 構文を使うことができます:

html
<script type="importmap">
{
   "imports": {
      "three": "https://cdn.jsdelivr.net/npm/three@0.171.0/build/three.module.js",
      "spine-threejs": "https://unpkg.com/@esotericsoftware/spine-threejs@4.2.67/dist/esm/spine-threejs.min.mjs"
   }
}
</script>

<script type="module">
import * as THREE from "three";
import * as spine from "spine-threejs";
...
</script>

最小バージョン

spine-threejs が依存していたAPIが削除されたため、three.jsの最小サポートバージョンをr141からr162にアップグレードしました。しかしながら spine-threejs API は以前のままから変わっていません。ピア依存関係をアップグレードすることはしばしば破壊的変更と見なされますが、このアップデートは spine-threejs を1年以上前のthree.jsリリースにロックすることを避けるために必要でした。当社は最新のr171までのthree.jsバージョンで更新された spine-threejs ランタイムを徹底的にテストし、すべてが期待通りに動作することを確認しました。

これからも気軽にご連絡ください!

いつも通り、ランタイムを使用する上でサポートが必要な場合は、フォーラムで新しいスレッドを作成してください。バグを見つけたり、ランタイムの改善に貢献したい場合は、当社のGitHubで課題やPRをオープンしてください。

このブログ記事についての話題はフォーラムで話しましょう!

spine-pixi-v8ランタイムをリリースしました

November 7th, 2024

/img/blog/spine-pixi-v8/spine-pixi-v8.png

この度、PixiJS用Spineランタイムをバージョン 8 にアップグレードしました!

PixiJSは、WebGL ベースのレンダリングライブラリとして長年にわたって最も広く使用されているライブラリの 1 つであり、その高速かつ柔軟なレンダラーによって数え切れないほどの Web ゲームやアプリケーションで利用されています。PixiJSは、Spineユーザー、特にHTML5ゲーム開発者にとって最良の選択です。

当社の最初のPixiJS用公式ランタイムはPixiJS v7用でした。ランタイムを公式なものにすることで、ユーザーをよりよくサポートし、最新の機能を確実に利用できるようにしたいと考えていました。

一方、PixiJSチームは、10年近くにわたって独自の pixi-spine ランタイムを開発し、保守してきました。そのため、PixiJS v8では、PixiJSの開発者であるMat GrovesおよびPixiJSチームと協力しました。その結果、spine-pixi-v8ランタイムが完成し、当社によって公式にサポートされつつPixiJSチームも必要に応じて利用できるようになりました。

このように我々が力を合わせることで、PixiJSユーザーにとって素晴らしいSpine体験が保証されます!私たちは、Spineエディターのリリースと同期して、タイムリーなアップデートとバグ修正を提供することをお約束します。そしてこのコラボレーションによりMatおよびPixiJSチームの作業負担を軽減し、PixiJSそのものにより集中できるようにします。

PixiJS のパワーにより、spine-pixi-v8 はWebGPUによるハードウェアアクセラレーションを活用する最初のspine-tsランタイムになります!以下は、WebGPUレンダラーを使用した最小限の例です:


spine-pixi-v7spine-pixi-v8 はほとんど同じインターフェイスを共有しているので、両方に同じドキュメントを使用することができます。詳しくは spine-pixiドキュメント および コード例を参照してください。PixiJS v7のサンプルは全て移植されているので、フィールドとメソッドは同じままであることがよくわかると思います。

もし使用する上でサポートが必要な場合は、フォーラムで新しいスレッドを開いてください。バグを見つけたり、ランタイムの改善を提案したい場合は、どうぞ気軽にGitHub上でissueを開いたり、PRを送ってください。

このブログ記事についての話題はフォーラムで話しましょう!

spine-androidランタイムをリリースしました

September 16th, 2024

新しく spine-android ランタイムをリリースしました!

この新しいランタイムを使えば、Java と Kotlinのどちらを使用しているかどうかに関わらず、SpineアニメーションをAndroidアプリに簡単に統合できます。 spine-android は、当社のリファレンスランタイムであるspine-libgdxの上に構築されています。

Spine Runtimes APIのコア部分は、spine-libgdxランタイムと同様に、慣用的なJavaとして公開されています。また、コアAPIの上に、SpineViewのようなAndroid固有のクラスを作成しました。Jetpack Composeとの統合も簡単です

spine-android は定期的にMaven Centralにリリースされており、Gradle経由で依存関係として簡単に追加できます。

さらに詳しく知りたい方は、spine-androidのドキュメントサンプルプロジェクトをご覧ください。

このリリースに関する話題はフォーラムで話しましょう!

spine-haxeランタイムをリリースしました

August 5th, 2024

新しく spine-haxe ランタイムをリリースしました!

spine-haxe を使えば、StarlingOpenFLを使ってSpineアニメーションをレンダリングできます。HaxeとOpenFL を組み合わせることで、HTML5 アプリケーションや、デスクトップとモバイルの両プラットフォーム向けのネイティブ アプリケーションなど、幅広いターゲット向けのアプリケーションを作成できるようになります。

spine-haxe ランタイムは依存関係ゼロのコア・モジュールを備えており、他のフレームワーク用のHaxeランタイムを開発するための優れた基盤となっています。実際、当社はすでにHaxeFlixel用の物も制作中です。

まずは spine-haxeドキュメントをご覧ください。また、このリリースに関する話題はぜひフォーラムで話しましょう!