Sign in to follow this  
FraukeVdz

AssetLoader IE10&9

Recommended Posts

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 

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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;

}());

Share this post


Link to post
Share on other sites

 

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!

Share this post


Link to post
Share on other sites

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;

}());

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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();    })} 
 
 

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.