Assets

Assets are the static resources that your game loads to run. These can be:

• Images
• JSON files
• Audio files
• Fonts
• Spritesheets
• Spine animations

Loading Assets

Setting up your build tools per our project setup guide will automatically copy your assets to the correct location whether you’re developing locally or building for production.

From the Application

You can load assets that are available globally to the entire application by defining them in the requiredAssets() getter in the Application.ts file or where your application is defined.

Application.ts

import {
  AssetMapData,
  TextureAsset,
  AssetType,
  JsonAsset,
  AudioAsset,
  FontAsset,
} from 'dill-pixel';

...

public get requiredAssets(): AssetMapData[] {
  return [
    new TextureAsset('foo', AssetType.PNG),
    new TextureAsset('bar', AssetType.JPG),
    new JsonAsset('config'),
    new AudioAsset('bang', 'sfx'),
    new FontAsset('myFont'),
  ];
}

Tip

When preloading audio files you have to specify their category.

From a Game State

For assets that are only needed in a single game state, you can define which assets you want to load in the Assets() getter of the game state:

MyGameState.ts

import {
  AssetMapData,
  TextureAtlasAsset,
  JsonAsset,
  TextureAsset,
  AudioAsset,
  AssetType
} from 'dill-pixel';

...

public static get Assets(): AssetMapData[] {
  return [
    new TextureAtlasAsset('myspritesheet'),
    new JsonAsset('settings'),
    new TextureAsset('someImage', AssetType.JPG),
    new AudioAsset('killerSong', 'music'),
    new AudioAsset('splat', 'sfx'),
  ];
}

Accessing Assets

Once your assets are loaded, you can access them in your game. The way you access them depends on the type of asset.

Images

Images are loaded as Texture objects. You can access them by their key:

// A single image

const myImage = this.add.sprite({ asset: 'foo', position: [-150, 50] });

// A sprite from a spritesheet

const mySprite = this.add.sprite({ asset: 'bar', sheet: 'myspritesheet', position: [150, 50] });

JSON Files

JSON files are accessed using Pixi’s Cache class. For example, if you have the following file:

config.json

{
  "foo": "bar",
  "baz": 42,
  "qux": [1, 2, 3]
}

You can access it in your game like this:

import { Cache } from 'pixi.js';

const config = Cache.get('config');
console.log(config.foo); // Outputs "bar"

Audio Files

Once audio files have been loaded, you can play them using the playAudioTrack function:

// Play a sound once

playAudioTrack('sound');

Tip

Audio files don’t actually have to be loaded in advance. Because they’re streamed, you can play them on demand by just calling playAudioTrack('sound'); and the file will be loaded and played.

Fonts

The only font format that can be loaded using the asset manager is an .fnt file, which is a bitmap font. Once a font has been loaded, you can use it in your game like this:

const myBitmapText = this.add.bitmapText('Hello World!', {
  fontName: 'myFont',
  fontSize: 64,
  letterSpacing: -2,
});

To use web fonts and load custom fonts, check out the styling text guide.