Assets

Assets are visual elements displayed in scenes: images, videos, or Spine animations. They support positioning, transformations, and animated transitions. Assets can also be used as backgrounds for Skill Trees.

Asset Types

Features

Assets support:

Layered Images

An image asset can stack extra plates on top of file_image via its layers list. The whole stack shares one wrapper, so fit mode, position, scale, rotation, opacity, blur, the scene colour grade and every enter/exit/idle transition apply to the finished picture rather than to each plate — author the plates pre-registered at the same canvas size.

Listen to asset_resolve to decide which plates a render actually uses: filter the list to drop the ones you don't want, or replace an entry with an object to say more about one plate. It fires on every render path, so the scene, the gallery and the editor preview all agree.

Alternatives vs overlays

Two kinds of plate behave differently, and fade is how you tell them apart.

An alternative is one of several mutually exclusive options — one body plate per skin tone. It keeps its slot in the stack and swaps source on a single frame. Never set fade on one: crossfading leaves both options in the stack at once, and whatever they cover (the plate below, usually opaque) shows through the pair for the length of the fade.

An overlay adds to a finished picture and has nothing taking its place — sweat, weather, a glow. Set fade and it blooms in and out. Keep overlays at the top of the stack; removed from the middle, every plate above one shifts a slot and re-decodes for nothing.

// One illustration, one plate per skin tone, plus an overlay the scene turns on.
// {asset: "cg_1"}  →  base + body_tan
// {asset: "cg_1(fx = true)"}  →  base + body_tan + fx
game.on("asset_resolve", (asset) => {
  if (!asset.layers) return;
  const skin = game.getCharacter("riko")?.getAttribute("skin");
  asset.layers = asset.layers.filter((file) => {
    const body = file.match(/body_(\w+)\./);
    if (body) return body[1] === skin;
    if (file.includes("fx.")) return !!asset.fx;
    return true;
  });
});

Adding/Removing Assets

Using Actions

Example - Scene with background with custom enter:

{asset: "forest_bg(enter=fadeSlideLeft)"}

Example - Remove the asset:

{asset: "!character_portrait"}

Default Room Assets

Set default_assets on room templates to automatically load assets when entering a room.

Methods

Events

Use asset_render to modify asset properties dynamically before display.

Example - Darken background at night:

game.on("asset_render", (asset) => {
  if (asset.tags.includes("background")) {
    const isNight = game.getStore("world").get("time_of_day") === "night";
    asset.alpha = isNight ? 0.6 : 1;
  }
});

Gallery Integration

Assets with gallery field configured are added to the gallery when displayed:

Using BackgroundAsset Component

The BackgroundAsset component is available for use in custom Vue components. It renders an asset with full support for transitions, idle animations, and all asset features.

Example - Custom component with background:

// Access engine exports
const { vue, components, game } = window.engine;
const { BackgroundAsset } = components;

const MyComponent = vue.defineComponent({
  // Register the component
  components: { BackgroundAsset },
  setup() {
    // getData() returns its own copy of the asset; pass it straight through
    const asset = game.getData("assets").get("my_background");
    return { asset };
  },
  // Pass asset as prop
  template: `<BackgroundAsset :asset="asset" /><div>some other content</div>`
});

getData() returns a static (non-reactive) copy of the editor's source data, so the asset never changes on its own — pass it straight to the prop for a one-time render. Wrap it in vue.ref(...) only if you intend to swap it at runtime (e.g. asset.value = ...) so the component re-renders.

Quick Reference

Next Steps

• Audio - Music and sound effects