Fork: 0
mark / pixi.js
Transfer to URL with SHA Find file
Newer
Older
pixi.js / docs / files / src_pixi_loaders_AssetLoader.js.html
@mathew groves mathew groves on 10 Jul 2014 13 KB Republished files
Raw Blame History 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src/pixi/loaders/AssetLoader.js - pixi.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="http://www.goodboydigital.com/pixijs/logo_small.png" title="pixi.js"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.6.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/AbstractFilter.html">AbstractFilter</a></li>
            
                <li><a href="../classes/AjaxRequest.html">AjaxRequest</a></li>
            
                <li><a href="../classes/AlphaMaskFilter.html">AlphaMaskFilter</a></li>
            
                <li><a href="../classes/AssetLoader.html">AssetLoader</a></li>
            
                <li><a href="../classes/AtlasLoader.html">AtlasLoader</a></li>
            
                <li><a href="../classes/autoDetectRenderer.html">autoDetectRenderer</a></li>
            
                <li><a href="../classes/BaseTexture.html">BaseTexture</a></li>
            
                <li><a href="../classes/BitmapFontLoader.html">BitmapFontLoader</a></li>
            
                <li><a href="../classes/BitmapText.html">BitmapText</a></li>
            
                <li><a href="../classes/BlurFilter.html">BlurFilter</a></li>
            
                <li><a href="../classes/CanvasGraphics.html">CanvasGraphics</a></li>
            
                <li><a href="../classes/CanvasMaskManager.html">CanvasMaskManager</a></li>
            
                <li><a href="../classes/CanvasRenderer.html">CanvasRenderer</a></li>
            
                <li><a href="../classes/CanvasTinter.html">CanvasTinter</a></li>
            
                <li><a href="../classes/Circle.html">Circle</a></li>
            
                <li><a href="../classes/ColorMatrixFilter.html">ColorMatrixFilter</a></li>
            
                <li><a href="../classes/ColorStepFilter.html">ColorStepFilter</a></li>
            
                <li><a href="../classes/ComplexPrimitiveShader.html">ComplexPrimitiveShader</a></li>
            
                <li><a href="../classes/DisplacementFilter.html">DisplacementFilter</a></li>
            
                <li><a href="../classes/DisplayObject.html">DisplayObject</a></li>
            
                <li><a href="../classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
            
                <li><a href="../classes/DotScreenFilter.html">DotScreenFilter</a></li>
            
                <li><a href="../classes/Ellipse.html">Ellipse</a></li>
            
                <li><a href="../classes/EventTarget.html">EventTarget</a></li>
            
                <li><a href="../classes/FilterTexture.html">FilterTexture</a></li>
            
                <li><a href="../classes/getRecommendedRenderer.html">getRecommendedRenderer</a></li>
            
                <li><a href="../classes/Graphics.html">Graphics</a></li>
            
                <li><a href="../classes/GrayFilter.html">GrayFilter</a></li>
            
                <li><a href="../classes/ImageLoader.html">ImageLoader</a></li>
            
                <li><a href="../classes/InteractionData.html">InteractionData</a></li>
            
                <li><a href="../classes/InteractionManager.html">InteractionManager</a></li>
            
                <li><a href="../classes/InvertFilter.html">InvertFilter</a></li>
            
                <li><a href="../classes/JsonLoader.html">JsonLoader</a></li>
            
                <li><a href="../classes/Matrix.html">Matrix</a></li>
            
                <li><a href="../classes/Matrix2.html">Matrix2</a></li>
            
                <li><a href="../classes/MovieClip.html">MovieClip</a></li>
            
                <li><a href="../classes/NormalMapFilter.html">NormalMapFilter</a></li>
            
                <li><a href="../classes/PixelateFilter.html">PixelateFilter</a></li>
            
                <li><a href="../classes/PixiFastShader.html">PixiFastShader</a></li>
            
                <li><a href="../classes/PixiShader.html">PixiShader</a></li>
            
                <li><a href="../classes/Point.html">Point</a></li>
            
                <li><a href="../classes/Polygon.html">Polygon</a></li>
            
                <li><a href="../classes/PolyK.html">PolyK</a></li>
            
                <li><a href="../classes/PrimitiveShader.html">PrimitiveShader</a></li>
            
                <li><a href="../classes/Rectangle.html">Rectangle</a></li>
            
                <li><a href="../classes/Rope.html">Rope</a></li>
            
                <li><a href="../classes/SepiaFilter.html">SepiaFilter</a></li>
            
                <li><a href="../classes/Spine.html">Spine</a></li>
            
                <li><a href="../classes/Sprite.html">Sprite</a></li>
            
                <li><a href="../classes/SpriteBatch.html">SpriteBatch</a></li>
            
                <li><a href="../classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="../classes/Stage.html">Stage</a></li>
            
                <li><a href="../classes/Strip.html">Strip</a></li>
            
                <li><a href="../classes/Text.html">Text</a></li>
            
                <li><a href="../classes/Texture.html">Texture</a></li>
            
                <li><a href="../classes/TilingSprite.html">TilingSprite</a></li>
            
                <li><a href="../classes/TwistFilter.html">TwistFilter</a></li>
            
                <li><a href="../classes/WebGLFilterManager.html">WebGLFilterManager</a></li>
            
                <li><a href="../classes/WebGLGraphics.html">WebGLGraphics</a></li>
            
                <li><a href="../classes/WebGLMaskManager.html">WebGLMaskManager</a></li>
            
                <li><a href="../classes/WebGLRenderer.html">WebGLRenderer</a></li>
            
                <li><a href="../classes/WebGLShaderManager.html">WebGLShaderManager</a></li>
            
                <li><a href="../classes/WebGLSpriteBatch.html">WebGLSpriteBatch</a></li>
            
                <li><a href="../classes/WebGLStencilManager.html">WebGLStencilManager</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="../modules/PIXI.html">PIXI</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src/pixi/loaders/AssetLoader.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 * @author Mat Groves http://matgroves.com/ @Doormat23
 */

/**
 * A Class that loads a bunch of images / sprite sheet / bitmap font files. Once the
 * assets have been loaded they are added to the PIXI Texture cache and can be accessed
 * easily through PIXI.Texture.fromImage() and PIXI.Sprite.fromImage()
 * When all items have been loaded this class will dispatch a &#x27;onLoaded&#x27; event
 * As each individual item is loaded this class will dispatch a &#x27;onProgress&#x27; event
 *
 * @class AssetLoader
 * @constructor
 * @uses EventTarget
 * @param {Array&lt;String&gt;} assetURLs an array of image/sprite sheet urls that you would like loaded
 *      supported. Supported image formats include &#x27;jpeg&#x27;, &#x27;jpg&#x27;, &#x27;png&#x27;, &#x27;gif&#x27;. Supported
 *      sprite sheet data formats only include &#x27;JSON&#x27; at this time. Supported bitmap font
 *      data formats include &#x27;xml&#x27; and &#x27;fnt&#x27;.
 * @param crossorigin {Boolean} Whether requests should be treated as crossorigin
 */
PIXI.AssetLoader = function(assetURLs, crossorigin)
{
    PIXI.EventTarget.call(this);

    /**
     * The array of asset URLs that are going to be loaded
     *
     * @property assetURLs
     * @type Array&lt;String&gt;
     */
    this.assetURLs = assetURLs;

    /**
     * Whether the requests should be treated as cross origin
     *
     * @property crossorigin
     * @type Boolean
     */
    this.crossorigin = crossorigin;

    /**
     * Maps file extension to loader types
     *
     * @property loadersByType
     * @type Object
     */
    this.loadersByType = {
        &#x27;jpg&#x27;:  PIXI.ImageLoader,
        &#x27;jpeg&#x27;: PIXI.ImageLoader,
        &#x27;png&#x27;:  PIXI.ImageLoader,
        &#x27;gif&#x27;:  PIXI.ImageLoader,
        &#x27;webp&#x27;: PIXI.ImageLoader,
        &#x27;json&#x27;: PIXI.JsonLoader,
        &#x27;atlas&#x27;: PIXI.AtlasLoader,
        &#x27;anim&#x27;: PIXI.SpineLoader,
        &#x27;xml&#x27;:  PIXI.BitmapFontLoader,
        &#x27;fnt&#x27;:  PIXI.BitmapFontLoader
    };
};

/**
 * Fired when an item has loaded
 * @event onProgress
 */

/**
 * Fired when all the assets have loaded
 * @event onComplete
 */

// constructor
PIXI.AssetLoader.prototype.constructor = PIXI.AssetLoader;

/**
 * Given a filename, returns its extension, wil
 *
 * @method _getDataType
 * @param str {String} the name of the asset
 */
PIXI.AssetLoader.prototype._getDataType = function(str)
{
    var test = &#x27;data:&#x27;;
    //starts with &#x27;data:&#x27;
    var start = str.slice(0, test.length).toLowerCase();
    if (start === test) {
        var data = str.slice(test.length);

        var sepIdx = data.indexOf(&#x27;,&#x27;);
        if (sepIdx === -1) //malformed data URI scheme
            return null;

        //e.g. &#x27;image/gif;base64&#x27; =&gt; &#x27;image/gif&#x27;
        var info = data.slice(0, sepIdx).split(&#x27;;&#x27;)[0];

        //We might need to handle some special cases here...
        //standardize text/plain to &#x27;txt&#x27; file extension
        if (!info || info.toLowerCase() === &#x27;text/plain&#x27;)
            return &#x27;txt&#x27;;

        //User specified mime type, try splitting it by &#x27;/&#x27;
        return info.split(&#x27;/&#x27;).pop().toLowerCase();
    }

    return null;
};

/**
 * Starts loading the assets sequentially
 *
 * @method load
 */
PIXI.AssetLoader.prototype.load = function()
{
    var scope = this;

    function onLoad(evt) {
        scope.onAssetLoaded(evt.content);
    }

    this.loadCount = this.assetURLs.length;

    for (var i=0; i &lt; this.assetURLs.length; i++)
    {
        var fileName = this.assetURLs[i];
        //first see if we have a data URI scheme..
        var fileType = this._getDataType(fileName);

        //if not, assume it&#x27;s a file URI
        if (!fileType)
            fileType = fileName.split(&#x27;?&#x27;).shift().split(&#x27;.&#x27;).pop().toLowerCase();

        var Constructor = this.loadersByType[fileType];
        if(!Constructor)
            throw new Error(fileType + &#x27; is an unsupported file type&#x27;);

        var loader = new Constructor(fileName, this.crossorigin);

        loader.addEventListener(&#x27;loaded&#x27;, onLoad);
        loader.load();
    }
};

/**
 * Invoked after each file is loaded
 *
 * @method onAssetLoaded
 * @private
 */
PIXI.AssetLoader.prototype.onAssetLoaded = function(loader)
{
    this.loadCount--;
    this.dispatchEvent({ type: &#x27;onProgress&#x27;, content: this, loader: loader });
    if (this.onProgress) this.onProgress(loader);

    if (!this.loadCount)
    {
        this.dispatchEvent({type: &#x27;onComplete&#x27;, content: this});
        if(this.onComplete) this.onComplete();
    }
};

    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>