AssetLoader IE10&9

[FraukeVdz]

Hi

I'm making a rowboat game in pixijs. But I have some cross browser issues.

When I use the AssetLoader my game doesn't work in IE10 & 9 due to a Crossoriging error.

Below you find my code. I don't think I'm doing anything wrong. Can somebody help me on this ?

Also , my game is very very slow in IE9, any suggestions to fix this ?
 

var assetsToLoader = [ "img/sprites/red/red.json","img/sprites/blue/blue.json","img/sprites/black/black.json"  ];var loader = new PIXI.AssetLoader(assetsToLoader, true);loader.onComplete = init;loader.load(); // when comment this line, my game works 

[xdiepx]

I just did a test and i am having the same problem. It was working for me before.

[Mat Groves]

Hey guys - Will definitely look into this for ya. Would you mind testing this with the latest dev version of pixi to see if the issue is still present? thanks!

[xdiepx]

Hi Matt. I am tested with the latest dev version and nothing seems load, there was not error message came up to. 

[CinkoNaap]

On IPad while using Cocoon there is Load XHR Error, 'resource unavaiable' in some random cases.

[Mat Groves]

Hi Matt. I am tested with the latest dev version and nothing seems load, there was not error message came up to. 

 

Cool - would you mind sharing the code example of it not working? If you could it should be a pretty quick fix i'm betting! Cheers!

[xdiepx]

this.project = this.project || {};

 

(function(){

var Preloader = function(mainStage){

project.MyActivity = this;

this.init(mainStage);

};

 

var p = Preloader.prototype;

p.stage = null;

p.canvasId = 'mainCanvas';

p.activityContainer = null;

p.assets = null;

p.assetsQueue = null;

p.stageContainer = null;

p.sound = null;

 

p.init = function(mainStage){

p.stage = mainStage;

p.stageContainer = project.stageContainter;

project.MyActivity = this;

this.activityContainer = this.stageContainer.addChild(new PIXI.DisplayObjectContainer());

this.assets = new project.Assets();

 

requestAnimFrame(p.updateStage);

this.loadActivityAssets ();

};

 

 

p.loadActivityAssets = function(){

var me = this;

var assetList = this.assets.getAssetsList();

var preload = this.assetsQueue = new PIXI.AssetLoader(assetList);

preload.addEventListener('onComplete',function(e){

me.onLoadActvity(e);

});

 

preload.addEventListener('onProgress', function(e){

me.onProgress(e);

});

preload.load();

};

 

p.onLoadActvity= function(){

this.stageContainer.removeChild(this.spinnerMovieClip);

var activity = new project.Activity(this, this.sound);

};

 

p.onProgress = function(e){

var prct = Math.floor((1 - (e.content.loadCount / e.content.assetURLs.length))*100);

this.spinnerMovieClip.gotoAndStop(prct-1);

};

 

p.updateStage  = function(){

requestAnimFrame(p.updateStage);

project.renderer.render(p.stage);

};

 

project.Preloader = Preloader;

}());

[Mat Groves]

 

this.testProject = this.testProject || {};

 

(function(){

p.assetsQueue = null;

}

 

 

Cool - not 100% sure what that code means?

If you could provide a zip of the whole example that would be perfect cheers. That way I can open up and debug the code a lot quicker and easier. cheers!

[xdiepx]

this.project = this.project || {};

(function(){

var Preloader = function(mainStage){

project.MyActivity = this;

this.init(mainStage);

};

var p = Preloader.prototype;

p.stage = null;

p.canvasId = 'mainCanvas';

p.activityContainer = null;

p.assets = null;

p.assetsQueue = null;

p.stageContainer = null;

p.sound = null;

p.init = function(mainStage){

p.stage = mainStage;

p.stageContainer = project.stageContainter;

project.MyActivity = this;

this.activityContainer = this.stageContainer.addChild(new PIXI.DisplayObjectContainer());

this.assets = new project.Assets();

requestAnimFrame(p.updateStage);

this.loadActivityAssets();

};

p.loadActivityAssets = function(){

var me = this;

var assetList = this.assets.getAssetsList();

var preload = this.assetsQueue = new PIXI.AssetLoader(assetList);

preload.addEventListener('onComplete',function(e){

me.onLoadActvity(e);

});

preload.addEventListener('onProgress', function(e){

me.onProgress(e);

});

preload.load();

};

p.onLoadActvity= function(){

this.stageContainer.removeChild(this.spinnerMovieClip);

var activity = new project.Activity(this, this.sound);

};

p.onProgress = function(e){

var prct = Math.floor((1 - (e.content.loadCount / e.content.assetURLs.length))*100);

this.spinnerMovieClip.gotoAndStop(prct-1);

};

p.updateStage = function(){

requestAnimFrame(p.updateStage);

project.renderer.render(p.stage);

};

project.Preloader = Preloader;

}());

[xdiepx]

Cool - not 100% sure what that code means?

If you could provide a zip of the whole example that would be perfect cheers. That way I can open up and debug the code a lot quicker and easier. cheers!

Sorry i was trying to indent the code. ok i'll put it in a zip file

[xdiepx]

There you go

pixiTest.zip

[Mat Groves]

There you go

 

perfect will take a peek and let you know once its sorted. thanks!

[Mat Groves]

Righto! Sorry about the delay on this one! - should be all good now if you try again with the latest dev branch of pixi

Thanks!

[xdiepx]

Cool! I'll just download pixi again and give it a go .

[xdiepx]

Hi Mat, sorry about this but i am still getting the same problem. 

[Mat Groves]

doh - could you try again? updated dev again.. thanks!

[xdiepx]

Hi Mat

I have updated the pixi.dev.js and tested it and is not loading. I have also tested it in IE 9, 10 and 11. Are you not having the same problem?

[Mat Groves]

Hi Mat

I have updated the pixi.dev.js and tested it and is not loading. I have also tested it in IE 9, 10 and 11. Are you not having the same problem?

 

It seems to work fine for me on a project we are about to launch.. Are you loading from cross domain?

I'm sure we will get to the bottom of this soon enough!

[xdiepx]

Nope, I am just running it locally. I got a friend to test it out on his computer and he got this error message on IE 10.

Origin http://pixitest.local not found in Access-Control-Allow-Origin header

By the way have you tested the zip file i sent you? I am doing it that way using wamp

[xdiepx]

Hi Mat, I think I have managed to find the problem out. For some reason the AssetLoader wont let me load my spinnerLoader.json has there been a change in the AssetLoader? or it might be shoebox output, but like I said it is fine in version 1.5.1.  

[1-800-STAR-WARS]

Also getting cross-origin errors in IE10 in 1.5.2, 1.5.3 and the dev branch - appears to be the bitmap font loader causing the issue, everything else seems to load ok.

 

Each font load triggers a cross origin error and this error in pixi:

SCRIPT5007: Unable to get property 'getAttribute' of undefined or null reference

Seems to be when it's trying to get the file attribute from a tag at this line (apologies, only got minified output)

var i=this.baseUrl+e.getElementsByTagName("page")[0].getAttribute("file")

Context is BitmapFontLoader

 

Hope this is helpful. Cheers!

[xerver]

Hi Mat, I think I have managed to find the problem out. For some reason the AssetLoader wont let me load my spinnerLoader.json has there been a change in the AssetLoader? or it might be shoebox output, but like I said it is fine in version 1.5.1.  

 

Shoebox outputs invalid JSON with the "PIXI Exporter". The skip a necessary comma near the end of the file. Hopefully they can fix that soon.

[xdiepx]

Shoebox outputs invalid JSON with the "PIXI Exporter". The skip a necessary comma near the end of the file. Hopefully they can fix that soon.

Hi xerver

I think shoebox outputs it as a .js, I just change it to .json and then add the comma in the end and it worked in the 1.5.1, however I did another test. This time using http://www.goodboydigital.com/pixijs/examples/3/ with the latest version and it didnt load the json.

[george]

I can confirm this crossorigin error with PIXI in IE9/IE10. Everything is fine until I load a valid(!) json file. In dropped in an overwrite of PIXI.JsonLoader#load to use jquery to load the json. Then everything works. I looked at both requests (pixi's way vs jquery) and couldn't find the reason for the cross origin error. I even have a wildcard CORS option active on my rails backend and never saw an option preflight in the logs. So this error is kind of misleading 

 

This is the error to name it (IE & IE10)

SEC7120: Origin --URL-- not found in Access-Control-Allow-Origin header

 

Regards
George

[winthers]

I made this patch that overrides the default behavior in the json loader, and then i works in ie,

just put it in a file and load it after pixi

 

PIXI.JsonLoader.prototype.load = function () {    var scope = this;    scope.ajaxRequest = {};    $.get(this.url).done(function (data) {         scope.ajaxRequest.responseText = JSON.stringify(data);        scope.onJSONLoaded();    }).fail(function () {         scope.onError();    })}