Suggestion: Additional AssetLoader onProgress Event Data

[aleroy]

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.

[d13]

Could you add this as a feature request to Pixi's github repo?

 

https://github.com/GoodBoyDigital/pixi.js

 

It will get noticed there.