Assets Directory Structure

Games rely heavily on external assets like images for sprites, audio files for sound effects, and tile maps for levels. Organizing these files consistently ensures that Flame’s built-in loaders (and Flutter’s own asset system) can find them without extra configuration.

Flame has a proposed structure for your project that includes the standard Flutter assets directory in addition to some children: audio, images and tiles.

If using the following example code:

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    await FlameAudio.play('explosion.mp3');

    // Load some images
    await Flame.images.load('player.png');
    await Flame.images.load('enemy.png');
    
    // Or load all images in your images folder
    await Flame.images.loadAllImages();

    final map1 = await TiledComponent.load('level.tmx', tileSize);
  }
}

The following file structure is where Flame would expect to find the files:

.
└── assets
    ├── audio
    │   └── explosion.mp3
    ├── images
    │   ├── enemy.png
    │   ├── player.png
    │   └── spritesheet.png
    └── tiles
        ├── level.tmx
        └── map.json

Optionally you can split your audio folder into two subfolders, one for music and one for sfx.

Don’t forget to add these files to your pubspec.yaml file:

flutter:
  assets:
    - assets/audio/explosion.mp3
    - assets/images/player.png
    - assets/images/enemy.png
    - assets/tiles/level.tmx

If you want to change this structure, this is possible by using the prefix parameter and creating your instances of AssetsCache, Images, and AudioCache, instead of using the global ones provided by Flame.

Additionally, AssetsCache and Images can receive a custom AssetBundle. This can be used to make Flame look for assets in a different location other than the rootBundle, like the file system for example.