Class Resolver

Set the base path to prepend to all urls when resolving

Example

resolver.basePath = 'https://home.com/';
resolver.add('foo', 'bar.ong');
resolver.resolveUrl('foo', 'bar.png'); // => 'https://home.com/bar.png'
Copy

All the active URL parsers that help the parser to extract information and create an asset object-based on parsing the URL itself.

Can be added using the extensions API

Example

resolver.add('foo', [
    {
        resolution: 2,
        format: 'png',
        src: 'image@2x.png',
    },
    {
        resolution:1,
        format:'png',
        src: 'image.png',
    },
]);

// With a url parser the information such as resolution and file format could extracted from the url itself:
extensions.add({
    extension: ExtensionType.ResolveParser,
    test: loadTextures.test, // test if url ends in an image
    parse: (value: string) =>
    ({
        resolution: parseFloat(settings.RETINA_PREFIX.exec(value)?.[1] ?? '1'),
        format: value.split('.').pop(),
        src: value,
    }),
});

// Now resolution and format can be extracted from the url
resolver.add('foo', [
    'image@2x.png',
    'image.png',
]);
Copy

Set the root path for root-relative URLs. By default the basePath's root is used. If no basePath is set, then the default value for browsers is window.location.origin

Example

// Application hosted on https://home.com/some-path/index.html
resolver.basePath = 'https://home.com/some-path/';
resolver.rootPath = 'https://home.com/';
resolver.add('foo', '/bar.png');
resolver.resolveUrl('foo', '/bar.png'); // => 'https://home.com/bar.png'
Copy

Deprecated

Tells the resolver what keys are associated with witch asset. The most important thing the resolver does

Example

// Single key, single asset:
resolver.add({alias: 'foo', src: 'bar.png');
resolver.resolveUrl('foo') // => 'bar.png'

// Multiple keys, single asset:
resolver.add({alias: ['foo', 'boo'], src: 'bar.png'});
resolver.resolveUrl('foo') // => 'bar.png'
resolver.resolveUrl('boo') // => 'bar.png'

// Multiple keys, multiple assets:
resolver.add({alias: ['foo', 'boo'], src: ['bar.png', 'bar.webp']});
resolver.resolveUrl('foo') // => 'bar.png'

// Add custom data attached to the resolver
Resolver.add({
    alias: 'bunnyBooBooSmooth',
    src: 'bunny{png,webp}',
    data: { scaleMode:SCALE_MODES.NEAREST }, // Base texture options
});

resolver.resolve('bunnyBooBooSmooth') // => { src: 'bunny.png', data: { scaleMode: SCALE_MODES.NEAREST } }
Copy

This adds a bundle of assets in one go so that you can resolve them as a group. For example you could add a bundle for each screen in you pixi app

Example

resolver.addBundle('animals', {
    bunny: 'bunny.png',
    chicken: 'chicken.png',
    thumper: 'thumper.png',
});

const resolvedAssets = await resolver.resolveBundle('animals');
Copy

Add a manifest to the asset resolver. This is a nice way to add all the asset information in one go. generally a manifest would be built using a tool.

Returns the aliases for a given asset

Checks if a bundle with the given key exists in the resolver

Checks if an asset with a given key exists in the resolver

Let the resolver know which assets you prefer to use when resolving assets. Multiple prefer user defined rules can be added.

Example

resolver.prefer({
    // first look for something with the correct format, and then then correct resolution
    priority: ['format', 'resolution'],
    params:{
        format:'webp', // prefer webp images
        resolution: 2, // prefer a resolution of 2
    }
})
resolver.add('foo', ['bar@2x.webp', 'bar@2x.png', 'bar.webp', 'bar.png']);
resolver.resolveUrl('foo') // => 'bar@2x.webp'
Copy

Used for testing, this resets the resolver to its initial state

Resolves each key in the list to an asset object. Another key function of the resolver! After adding all the various key/asset pairs. this will run the logic of finding which asset to return based on any preferences set using the prefer function by default the same key passed in will be returned if nothing is matched by the resolver.

Example

resolver.add('boo', 'bunny.png');

resolver.resolve('boo') // => { src: 'bunny.png' }

// Will return the same string as no key was added for this value..
resolver.resolve('another-thing.png') // => { src: 'another-thing.png' }
Copy

If the resolver has had a manifest set via setManifest, this will return the assets urls for a given bundleId or bundleIds.

Example

// 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',
                },
            ],
        },
    ]
};

resolver.setManifest(manifest);
const resolved = resolver.resolveBundle('load-screen');
Copy

Does exactly what resolve does, but returns just the URL rather than the whole asset object

Override how the resolver deals with generating bundle ids. must be called before any bundles are added

Sets the default URL search parameters for the URL resolver. The urls can be specified as a string or an object.