はじめに

Cavalry Web Player と API は現在ベータ版であり、変更される可能性があります。

概要

Cavalry Web Player は WebAssembly ベースのランタイムで、Cavalry アニメーション（.cv ファイル）をウェブブラウザでレンダリングおよび再生します。

モダンブラウザで表示および書き出し可能な、完全にカスタマイズ可能なアニメーションを作成できます。Cavalry の豊富な機能をネイティブサポートしているため、デザイナーやアニメーターは Lottie などのフォーマットの制限から解放され、非技術チームでも軽量で使いやすいフォーマットでデザインシステムを作成し、クライアントに提供できるようになりました。

Web Player API を使用すると、Web Player に埋め込まれたシーンからレイヤー属性を更新できます。

Algo の素晴らしいチームが scenery.io 上の様々なアーティストとコラボレーションしたこの素晴らしいプロジェクトをチェックして、Web Player で可能なことの一端を感じてください。

以下の例は、Web Player と API を使用して .cv ファイルを読み込み、コントロールセンターに追加された属性に基づいてシーンを更新するカスタム UI を組み合わせたカスタム統合です。

Cavalry Player を読み込み中…

コントロールを使用してアニメーションを更新します。

クイックスタート

Cavalry Web Player をダウンロード↓ Download

1. Cavalry Web Player パッケージをダウンロードします。

2. 解凍します。

3. 付属のサーバーを起動します：

   # macOScd /path/to/cavalry-web-player# Windowscd \path\to\cavalry-web-playerpython3 serve.py

これによりブラウザウィンドウが開き、localhost:8000 が読み込まれます。‘Minimal Player’ の例を試し、.cv シーンファイルを読み込んで再生コントロールを使用してみてください。

統合

統合例

// Import the Cavalry moduleconst wasm = await import("/CavalryWasm.js");// Initialise the moduleconst Module = await wasm.default({    locateFile: (path) => `/wasm-lib/${path}`});// Load a scene fileModule.FS.writeFile("scene.cv", sceneData);const player = Module.Cavalry.MakeWithPath("scene.cv");// Set up rendering surfaceconst canvas = document.getElementById("canvas");const surface = Module.makeWebGLSurfaceFromElement(canvas, 800, 600);// Render current frameplayer.render(surface);// Start playbackplayer.play();// Animation loop using requestAnimationFrame (for display sync and power efficient playback)let animationFrameId = null;function runPlaybackLoop() {    const tick = (timestamp) => {        if (!player.isPlaying()) {          return;        }        // tick() advances the frame based on elapsed time and renders        const status = player.tick(surface, timestamp);        // Optionally update UI when a frame changes        if (status.frameChanged) {            console.log(`Frame: ${status.currentFrame}`);        }        animationFrameId = requestAnimationFrame(tick);    };    animationFrameId = requestAnimationFrame(tick);}runPlaybackLoop();// To stop playback:// player.stop();// cancelAnimationFrame(animationFrameId);

サーバー要件

本番環境にデプロイする場合、サーバーは以下を満たす必要があります：

1. 適切な MIME タイプを設定する：
   • .wasm ファイルには Content-Type: application/wasm
   • .js ファイルには Content-Type: application/javascript
2. HTTPS 経由で配信する。

ファイルサイズの最適化

Cavalry Web Player のファイルは、包括的な機能セットのため比較的大きくなっています。将来的にサイズを削減する予定ですが、現時点でファイルサイズが問題になる場合は、以下を試してください：

• .wasm ファイルを gzip で事前圧縮する。
• Content-Encoding: gzip ヘッダーを設定する。
• CDN を使用して配信を最適化する。
• ほとんどのサーバーはこれらのファイルを自動的に圧縮します。

ブラウザ互換性

要件：

• WebAssembly 対応
• WebGL 2.0
• モダン JavaScript（ES6 modules）

---

複数のプレーヤー

同じページで複数の Cavalry Web Player を使用できます。ページに複数のプレーヤーインスタンスを追加するだけです。デモにはプレーヤーモジュールを作成する多くの例が含まれています。

Shadow Dom

Web Player は Shadow DOM 内での使用をサポートしており、canvas 要素を公開 DOM から隠すことができます。これは HTML 内の shadowHost と Shadow DOM 設定で構成できます。デモを参照してください。

動画アセット

Web Player は動画アセットをサポートしていますが、動画プレーヤーとは見なされません。純粋な動画再生には video 要素の使用を推奨します。

Web Player での動画再生を示す動画サンプルが含まれています。さらなる機能が必要な場合は、webcodec-helper.js ファイルを出発点として参照してください。デモを参照してください。

注意事項

シーンファイル（.cv）は、Cavalry 2.5.0 以降でサポートされているファイルバージョン 1.0.55 以上で保存する必要があります。

サポートされていない機能：

• オーディオ（オーディオ対応は進行中です）

サポートされていないレイヤー：

• Image Smart Folder
• Audio Smart Folder
• JavaScript Layers
• Jsmath

よくある質問

Cavalry のすべての機能がサポートされていますか？

99% の機能がサポートされています。現在も対応中の機能は注意事項セクションで確認できます。

アニメーションにインタラクションを追加できますか？

部分的に可能です。属性は UI やカーソル位置を通じてリアルタイムに調整できます。デモページで例を確認してください。なお、Web Player にはステートマシンは組み込まれていません。

Web Player ランタイムのファイルサイズはどのくらいですか？

現在のペイロードは圧縮時で約 3MB です（ファイルサイズの最適化を参照）。この比較的大きなファイルサイズは、包括的な機能サポートに重点を置いているためですが、このファイルはブラウザにキャッシュされるため、ウェブページへの再訪問時には事前に読み込まれます。将来のベータ版ではプレーヤーのサイズ削減に取り組む予定です。