Namespace The global cache of all assets within PixiJS
The loader, loads stuff!
the resolver to map various urls
All the detection parsers currently added to the Assets class.
Optional s: string | string[]Optional d: unknownOptional f: stringOptional lp: stringAllows you to specify how to resolve any assets load requests. There are a few ways to add things here as shown below:
the data to add
import { Assets } from 'pixi.js';
// Simple
Assets.add({alias: 'bunnyBooBoo', src: 'bunny.png'});
const bunny = await Assets.load('bunnyBooBoo');
// Multiple keys:
Assets.add({alias: ['burger', 'chicken'], src: 'bunny.png'});
const bunny = await Assets.load('burger');
const bunny2 = await Assets.load('chicken');
// passing options to to the object
Assets.add({
alias: 'bunnyBooBooSmooth',
src: 'bunny{png,webp}',
data: { scaleMode: SCALE_MODES.NEAREST }, // Base texture options
});
// Multiple assets
// The following all do the same thing:
Assets.add({alias: 'bunnyBooBoo', src: 'bunny{png,webp}'});
Assets.add({
alias: 'bunnyBooBoo',
src: [
'bunny.png',
'bunny.webp',
],
});
const bunny = await Assets.load('bunnyBooBoo'); // Will try to load WebP if available
This adds a bundle of assets in one go so that you can load them as a group. For example you could add a bundle for each screen in you pixi app
the id of the bundle to add
a record of the asset or assets that will be chosen from when loading via the specified key
import { Assets } from 'pixi.js';
Assets.addBundle('animals', {
bunny: 'bunny.png',
chicken: 'chicken.png',
thumper: 'thumper.png',
});
const assets = await Assets.loadBundle('animals');
Initiate a background load of some assets. It will passively begin to load these assets in the background. So when you actually come to loading them you will get a promise that resolves to the loaded assets immediately
An example of this might be that you would background load game assets after your inital load. then when you got to actually load your game screen assets when a player goes to the game - the loading would already have stared or may even be complete, saving you having to show an interim load bar.
the url / urls you want to background load
import { Assets } from 'pixi.js';
Assets.backgroundLoad('bunny.png');
// later on in your app...
await Assets.loadBundle('bunny.png'); // Will resolve quicker as loading may have completed!
Initiate a background of a bundle, works exactly like backgroundLoad but for bundles. this can only be used if the loader has been initiated with a manifest
the bundleId / bundleIds you want to background load
import { Assets } from 'pixi.js';
await Assets.init({
manifest: {
bundles: [
{
name: 'load-screen',
assets: [...],
},
...
],
},
});
Assets.backgroundLoadBundle('load-screen');
// Later on in your app...
await Assets.loadBundle('load-screen'); // Will resolve quicker as loading may have completed!
Instantly gets an asset already loaded from the cache. If the asset has not yet been loaded,
it will return undefined. So it's on you! When in doubt just use Assets.load instead.
(Remember, the loader will never load things more than once!)
The key or keys for the assets that you want to access
Best practice is to call this function before any loading commences Initiating is the best time to add any customization to the way things are loaded.
you do not need to call this for the Asset class to work, only if you want to set any initial properties
Optional options: AssetInitOptionsoptions to initialize the Asset manager with
Loads your assets! You pass in a key or URL and it will return a promise that resolves to the loaded asset. If multiple assets a requested, it will return a hash of assets.
Don't worry about loading things multiple times, behind the scenes assets are only ever loaded once and the same promise reused behind the scenes so you can safely call this function multiple times with the same key and it will always return the same asset.
the urls to load
Optional onProgress: ProgressCallbackoptional function that is called when progress on asset loading is made.
The function is passed a single parameter, progress, which represents the percentage
(0.0 - 1.0) of the assets loaded.
import { Assets } from 'pixi.js';
// Load a URL:
const myImageTexture = await Assets.load('http://some.url.com/image.png'); // => returns a texture
Assets.add('thumper', 'bunny.png');
Assets.add('chicko', 'chicken.png');
// Load multiple assets:
const textures = await Assets.load(['thumper', 'chicko']); // => {thumper: Texture, chicko: Texture}
Optional onProgress: ProgressCallbackBundles are a way to load multiple assets at once.
If a manifest has been provided to the init function then you can load a bundle, or bundles.
you can also add bundles via addBundle
the bundle id or ids to load
Optional onProgress: ProgressCallbackOptional function that is called when progress on asset loading is made.
The function is passed a single parameter, progress, which represents the percentage (0.0 - 1.0)
of the assets loaded. Do not use this function to detect when assets are complete and available,
instead use the Promise returned by this function.
all the bundles assets or a hash of assets for each bundle specified
import { Assets } from 'pixi.js';
// Manifest Example
const manifest = {
bundles: [
{
name: 'load-screen',
assets: [
{
alias: 'background',
src: 'sunset.png',
},
{
alias: 'bar',
src: 'load-bar.{png,webp}',
},
],
},
{
name: 'game-screen',
assets: [
{
alias: 'character',
src: 'robot.png',
},
{
alias: 'enemy',
src: 'bad-guy.png',
},
],
},
]
};
await Assets.init({ manifest });
// Load a bundle...
loadScreenAssets = await Assets.loadBundle('load-screen');
// Load another bundle...
gameScreenAssets = await Assets.loadBundle('game-screen');
General setter for preferences. This is a helper function to set preferences on all parsers.
the preferences to set
Unload an asset or assets. As the Assets class is responsible for creating the assets via the load function
this will make sure to destroy any assets and release them from memory.
Once unloaded, you will need to load the asset again.
Use this to help manage assets if you find that you have a large app and you want to free up memory.
the urls to unload
import { Assets } from 'pixi.js';
// Load a URL:
const myImageTexture = await Assets.load('http://some.url.com/image.png'); // => returns a texture
await Assets.unload('http://some.url.com/image.png')
// myImageTexture will be destroyed now.
// Unload multiple assets:
const textures = await Assets.unload(['thumper', 'chicko']);
Bundles are a way to manage multiple assets at once. this will unload all files in a bundle.
once a bundle has been unloaded, you need to load it again to have access to the assets.
the bundle id or ids to unload
import { Assets } from 'pixi.js';
Assets.addBundle({
'thumper': 'http://some.url.com/thumper.png',
})
const assets = await Assets.loadBundle('thumper');
// Now to unload...
await Assets.unloadBundle('thumper');
// All assets in the assets object will now have been destroyed and purged from the cache
Generated using TypeDoc
A one stop shop for all Pixi resource management! Super modern and easy to use, with enough flexibility to customize and do what you need!
Memberof
PIXI Assets
Only one Asset Class exists accessed via the Global Asset object.
It has four main responsibilities:
It also has a few advanced features:
Assets Loading
Do not be afraid to load things multiple times - under the hood, it will NEVER load anything more than once.
For example:
Here both promises will be the same. Once resolved... Forever resolved! It makes for really easy resource management!
Out of the box it supports the following files:
More types can be added fairly easily by creating additional loader parsers.
Textures
Sprite sheets
my-spritesheet{resolution}.{imageFormat}.jsonFor example:
my-spritesheet@2x.webp.json// 2x resolution, WebP sprite sheetmy-spritesheet@0.5x.png.json// 0.5x resolution, png sprite sheetThis is optional! You can just load a sprite sheet as normal. This is only useful if you have a bunch of different res / formatted spritesheets.
Fonts
Web fonts will be loaded with all weights. It is possible to load only specific weights by doing the following:
Background Loading
Background loading will load stuff for you passively behind the scenes. To minimize jank, it will only load one asset at a time. As soon as a developer calls
Assets.load(...)the background loader is paused and requested assets are loaded as a priority. Don't worry if something is in there that's already loaded, it will just get skipped!You still need to call
Assets.load(...)to get an asset that has been loaded in the background. It's just that this promise will resolve instantly if the asset has already been loaded.Manifest and Bundles
Example