アセットの読み込み

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

サポートされているアセットタイプ

タイプ	API メソッド
画像	replaceImageAsset()
フォント	replaceFontAsset()
CSV	replaceCSVAsset()
Excel	replaceExcelAsset()
SVG	replaceSVGAsset()
Google スプレッドシート	replaceGoogleSheet()

モジュール

まず CavalryWasm.js JavaScript モジュールをインポートしてモジュールをインスタンス化します。

const CavalryModule = await import("./wasm-lib/CavalryWasm.js");const Module = await CavalryModule.default(    // `locateFile` is required for the module to load the wasm files    { locateFile: (path) => `./wasm-lib/${path}` });

仮想ファイルシステム

各メソッドにファイルパスを渡すと、プレーヤーは仮想ファイルシステム内でファイルを検索します。

FS.writeFile を使用してアセットを仮想ファイルシステムに書き込みます。

Module.FS.writeFile("my-image.png", Uint8Array)

fetch を使用して URL からアセットをリクエストします。データは Response.bytes で読み取れますが、ブラウザのサポートは限定的です。より広範なブラウザサポートが必要な場合は、Response.arrayBuffer を使用して Uint8Array に変換します。

const filename = "my-image.png"const response = await fetch(`/url/to/${filename}`)// 限定的なブラウザサポート// const asset = await response.bytes()const asset = await response.arrayBuffer()Module.FS.writeFile(filename, new Uint8Array(asset))

アセットの置き換え

アセットは実行時に置き換えることができます。assetId（例：asset#2）は Cavalry シーンファイル内のアセット ID と一致します。

// 画像アセットを置き換えconst filename = "new-image.png"const response = await fetch(filename);const imageData = await response.arrayBuffer();Module.FS.writeFile(filename, new Uint8Array(imageData));player.replaceImageAsset(filename, "asset#2");player.render(surface);

// CSV アセットを置き換えconst filename = "data.csv"const response = await fetch(filename);const csvData = await response.arrayBuffer();Module.FS.writeFile(filename, new Uint8Array(csvData));player.replaceCSVAsset(filename, "asset#3");player.render(surface);

フォント

フォントはプレーヤーが認識するために読み込む必要があります。

// `MakeWithPath` でシーンを読み込む前にModule.loadFont(filename, assetId);

必要に応じてフォントアセットを置き換えます。これは既存のフォントをアンロードせず、そのフォントを使用しているテキストシェイプのフォントも変更しません。

player.replaceFontAsset(filename, assetId);

Google スプレッドシート

Google スプレッドシートは自動的に読み込まれます。replaceGoogleSheet を使用して、実行時に Google スプレッドシートアセットを置き換えます。

エラーを避けるために、Google スプレッドシートの共有権限を「リンクを知っている全員」に設定してください。

const sheetId = "UNIQUE_ID_OF_GOOGLE_SHEET"const url = `https://docs.google.com/spreadsheets/d/${sheetId}`player.replaceGoogleSheet(url, assetId);

保留中のアセット

MakeWithPath でシーンを読み込むと、そのアセットは Module.pendingAssets 配列に格納されます。

配列をループしてアセットを読み込むことができます。

const player = Module.Cavalry.MakeWithPath("scene.cv");const assets = Module.pendingAssetsfor (const { type, filename, assetId } of assets) {    // リソースのファイル名がシーン内のアセットと同じであることを前提とします    const response = await fetch(`/url/to/${filename}`);    const data = await response.arrayBuffer();    Module.FS.writeFile(filename, new Uint8Array(data));        switch (type) {        case "image":            player.replaceImageAsset(filename, assetId);            break;        case "font":            // フォントは読み込む必要があります            module.loadFont(filename, assetId);            // 必要に応じてフォントアセットを置き換え            player.replaceFontAsset(filename, assetId);            break;        case "csv":            player.replaceCSVAsset(filename, assetId);            break;        case "svg":            player.replaceSVGAsset(filename, assetId);            break;        case "excel":            player.replaceExcelAsset(filename, assetId);            break;        default:            console.warn(                `Unexpected asset type "${type}" for ${filename} (${assetId})`            );            return;    }}const canvas = document.getElementById("canvas")const { width, height } = player.getSceneResolution()const surface = module.makeWebGLSurfaceFromElement(canvas, width, height)player.render(surface);

グローバルイベント

MakeWithPath でシーンを読み込むと、各アセットに対して cavalryAutoLoadAsset イベントが発生します。

Module.pendingAssets の代替として、このイベントをリッスンします。

コールバック関数が Module、player、surface にアクセスできるようにしてください。

window.addEventListener("cavalryAutoLoadAsset", async (event) => {        const { assetId, filename, type } = event.detail    const response = await fetch(`/url/to/${filename}`);    const data = await response.arrayBuffer();    Module.FS.writeFile(filename, new Uint8Array(data));        switch (type) {        case "image":            player.replaceImageAsset(filename, assetId);            break;        case "font":            // フォントは読み込む必要があります            Module.loadFont(filename, assetId);            // 必要に応じてフォントアセットを置き換え            player.replaceFontAsset(filename, assetId);            break;        case "csv":            player.replaceCSVAsset(filename, assetId);            break;        case "svg":            player.replaceSVGAsset(filename, assetId);            break;        case "excel":            player.replaceExcelAsset(filename, assetId);            break;        default:            console.warn(`Unexpected asset type "${type}" for ${assetId} (${filename})`);            return;    }    player.render(surface);})