Newer
Older
pixi.js / packages / spritesheet / src / SpritesheetLoader.js
import url from 'url';
import { Resource, Loader } from '@pixi/loaders';
import Spritesheet from './Spritesheet';

/**
 * {@link PIXI.loaders.Loader Loader} middleware for loading
 * texture atlases that have been created with TexturePacker or
 * similar JSON-based spritesheet. This automatically generates
 * Texture resources.
 * @class
 * @memberof PIXI
 */
export default class SpritesheetLoader
{
    /**
     * Middleware function to support Spritesheets, this is automatically installed.
     * @see PIXI.loaders.Loader.useMiddleware
     */
    static middleware()
    {
        return function spritesheetLoader(resource, next)
        {
            const imageResourceName = `${resource.name}_image`;

            // skip if no data, its not json, it isn't spritesheet data, or the image resource already exists
            if (!resource.data
                || resource.type !== Resource.TYPE.JSON
                || !resource.data.frames
                || this.resources[imageResourceName]
            )
            {
                next();

                return;
            }

            const loadOptions = {
                crossOrigin: resource.crossOrigin,
                loadType: Resource.LOAD_TYPE.IMAGE,
                metadata: resource.metadata.imageMetadata,
                parentResource: resource,
            };

            const resourcePath = SpritesheetLoader.getResourcePath(resource, this.baseUrl);

            // load the image for this sheet
            this.add(imageResourceName, resourcePath, loadOptions, function onImageLoad(res)
            {
                const spritesheet = new Spritesheet(
                    res.texture.baseTexture,
                    resource.data,
                    resource.url
                );

                spritesheet.parse(() =>
                {
                    resource.spritesheet = spritesheet;
                    resource.textures = spritesheet.textures;
                    next();
                });
            });
        };
    }

    /**
     * Get the spritesheets root path
     * @param {PIXI.loader.Resource} resource - Resource to check path
     * @param {string} baseUrl - Base root url
     */
    static getResourcePath(resource, baseUrl)
    {
        // Prepend url path unless the resource image is a data url
        if (resource.isDataUrl)
        {
            return resource.data.meta.image;
        }

        return url.resolve(resource.url.replace(baseUrl, ''), resource.data.meta.image);
    }
}

// Install loader support for Spritesheet objects
Loader.useMiddleware(SpritesheetLoader.middleware);