Skip to main content
HomeWeb Player

Loading Assets

Beta

The Cavalry Web Player and API is currently in beta and so subject to change.

Auto Asset Loader​

The Auto Asset Loader automatically detects and loads external assets (images, fonts, CSV files, etc.) referenced in your Cavalry scene when it's loaded in the Web Player.

Supported Asset Types​

TypeAPI Method
ImagereplaceImageAsset()
FontreplaceFontAsset()
CSVreplaceCSVAsset()
ExcelreplaceExcelAsset()
SVGreplaceSVGAsset()
Google SheetsreplaceGoogleSheet()

Quick Setup​

Step 1: Include the auto-asset-loader script in your HTML (before your app script):

<script src="auto-asset-loader.js"></script>
<script src="app.js" type="module"></script>

Step 2: Call setupAutoAssetLoading() after initialising the Cavalry module:

const CavalryModule = await import('./wasm-lib/CavalryWasm.js');
const Module = await CavalryModule.default({
    locateFile: (path) => `./wasm-lib/${path}`,
    canvas: document.getElementById('canvas')
});

// Enable automatic asset loading
window.CavalryAutoAssetLoader.setupAutoAssetLoading(Module, player);

File Location​

Place your asset files in either:

  • The same directory as your HTML file
  • An Assets/ subdirectory

The loader automatically checks both locations.

my-demo/
├── index.html
├── app.js
├── scene.cv
├── logo.png          # Found at ./logo.png
└── Assets/
    └── photo.jpg     # Found at ./Assets/photo.jpg

You can of course edit the asset auto loader file to look in other locations if you wish.

Minimal Example​

<!DOCTYPE html>
<html>
<head>
    <title>Cavalry Player</title>
</head>
<body>
    <canvas id="canvas"></canvas>

    <script src="auto-asset-loader.js"></script>
    <script type="module">
        const CavalryModule = await import('./wasm-lib/CavalryWasm.js');
        const Module = await CavalryModule.default({
            locateFile: (path) => `./wasm-lib/${path}`,
            canvas: document.getElementById('canvas')
        });

        // Set up auto-loading
        window.CavalryAutoAssetLoader.setupAutoAssetLoading(Module);

        // Load your scene - assets will be loaded automatically
        const response = await fetch('./scene.cv');
        const sceneData = await response.arrayBuffer();
        Module.FS.writeFile('scene.cv', new Uint8Array(sceneData));
        const app = Module.Cavalry.MakeWithPath('scene.cv');

        // Render
        const surface = Module.makeWebGLSurfaceFromElement(
            document.getElementById('canvas'), 800, 600
        );
        app.render(surface);
    </script>
</body>
</html>

Manual Asset Replacement​

You can also replace assets manually at runtime:

// Replace an image asset
const imageData = await fetch('./new-image.png').then(r => r.arrayBuffer());
Module.FS.writeFile('new-image.png', new Uint8Array(imageData));
app.replaceImageAsset('new-image.png', 'asset#2');
app.render(surface);

// Replace a CSV asset
const csvData = await fetch('./data.csv').then(r => r.arrayBuffer());
Module.FS.writeFile('data.csv', new Uint8Array(csvData));
app.replaceCSVAsset('data.csv', 'asset#3');
app.render(surface);

The assetId (e.g., asset#2) corresponds to the asset's ID in your Cavalry scene file.