Search the Community

Hello everyone I´m having some issues with the Loader in Pandajs 2 When i do the following: this.loader.onStart = this.setGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); Everything is just fine: But when I try to make a onProgress the onProgress does not response: this.loader.onStart = this.setGame.bind(this); this.loader.onProgress = this.processGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); I can see it, and trace it in the Loader.js class : onProgress: function() { //console.log(this.percent); //if (this.barFg) this.barFg.scale.x = this.percent / 100; } Her is a simple implementation I done: game.module( 'game.start' ) .require( 'game.assets' ) .body(function() { game.createScene('Start', { backgroundColor: '#5ca282', init: function() { this.loader = new game.Loader(); this.loader.onStart = this.setGame.bind(this); this.loader.onProgress = this.processGame.bind(this); this.loader.onComplete = this.loadingGame.bind(this); this.loader.start(); }, //END init setGame: function() { console.log('started'); }, processGame: function() { console.log('percent'); }, loadingGame: function() { document.getElementById('loading').style.display = "none"; this.startContainer = new game.Container().addTo(this.stage); if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { this.mytastatur = new game.Sprite('tastatur').addTo(this.startContainer); } else { this.mytastatur = new game.Sprite('uden-tastatur').addTo(this.startContainer); } this.mytastatur.position.x = game.system.width / 2 - this.mytastatur.width / 2; this.mytastatur.position.y = 0; this.mytastatur.interactive = true; this.mytastatur.click = this.mytastatur.tap = this.changeScene.bind(this, "Main"); }, changeScene: function(go) { game.system.setScene(go); var playbg = game.audio.playMusic('bb', true); game.audio.setVolume(playbg, 0.2); }, }) //END Start }); Anybody knows what wrong with onProgress on the Loader. /Lars

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.