Jump to content

Suggestion: Additional AssetLoader onProgress Event Data


Recommended Posts

I have a suggestion to add a little convenience to PIXI.AssetLoader's onProgress event:


It would be helpful to pass the index of asset that was just loaded (and possibly---for extra convenience---the length of the assetURLs array).


The code would go something like:

PIXI.AssetLoader.prototype.load = function(){// - var scope = this;    // - function onLoad(evt) {// -    scope.onAssetLoaded(evt.data.content);// - }    this.loadCount = this.assetURLs.length;    for (var i=0; i < 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's a file URI        if (!fileType)            fileType = fileName.split('?').shift().split('.').pop().toLowerCase();        var Constructor = this.loadersByType[fileType];        if(!Constructor)            throw new Error(fileType + ' is an unsupported file type');        var loader = new Constructor(fileName, this.crossorigin);// -    loader.on('loaded', onLoad);/* + */ this.setLoadHandler(loader, i, this.assetURLs.length );        loader.load();    }};// +PIXI.AssetLoader.prototype.setLoadHandler = function(loader, nth, of){    var scope = this;    function onLoad(evt)    {        scope.onAssetLoaded(evt.data.content, nth, of);    }    loader.on('loaded', onLoad);    }// end +/** * Invoked after each file is loaded * * @method onAssetLoaded * @private */// -    PIXI.AssetLoader.prototype.onAssetLoaded = function(loader)/* + */ PIXI.AssetLoader.prototype.onAssetLoaded = function(loader, nth, of){    this.loadCount--;// - this.emit('onProgress', { content: this, loader: loader });/* + */ this.emit('onProgress', { content: this, loader: loader, nth: nth, of: of});    if (this.onProgress) this.onProgress(loader);    if (!this.loadCount)    {        this.emit('onComplete', { content: this });        if(this.onComplete) this.onComplete();    }};

...and usage would go something like (example with bootstrap & jquery for ui elements):

function init(){    var self   = this;    var assets = [                 // ...                 ];    var loader = new PIXI.AssetLoader(assets);    function onProgress( e )    {        var percent = Math.round(e.data.nth / e.data.of) * 100;        var value = percent + "%";        // 'pb_loader' is a bootstrap progress bar nested in a modal dialog        $('#pb_loader').width(value).text(value);    }    function onComplete( e )    {        // 'myModal' is bootstrap modal dialog        $('#myModal').modal('hide');    }    loader.on('onProgress', onProgress);    loader.on('onComplete', onComplete);    $("#myModal").modal('hide');    loader.load();}

I have this working on a recent project.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...