aleroy Posted February 7, 2015 Share Posted February 7, 2015 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. Quote Link to comment Share on other sites More sharing options...
d13 Posted February 8, 2015 Share Posted February 8, 2015 Could you add this as a feature request to Pixi's github repo? https://github.com/GoodBoyDigital/pixi.js It will get noticed there. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.