xdiepx Posted April 27, 2015 Share Posted April 27, 2015 I have just updated to pixi 3.0.2 and i am getting a blank screen with a console log saying "requestAnimFrame is not defined".I thought it was my code at first but then I copied and pasted an example from the pixi site (the one with the spinning bunny). It turns out that I am getting the same problem with the requestAnimFrame. my folder has bunny.pngindex.htmlpixi.jspixi.js.map index code: <!DOCTYPE HTML><html><head><title>pixi.js example 1</title><style>body {margin: 0;padding: 0;background-color: #000000;}</style><script src="pixi.js"></script></head><body><script>// create an new instance of a pixi stagevar stage = new PIXI.Stage(0x66FF99);// create a renderer instancevar renderer = new PIXI.WebGLRenderer(400, 300);//autoDetectRenderer(400, 300);// add the renderer view element to the DOMdocument.body.appendChild(renderer.view);requestAnimFrame( animate ); // // create a texture from an image pathvar texture = PIXI.Texture.fromImage("bunny.png");// create a new Sprite using the texturevar bunny = new PIXI.Sprite(texture);// center the sprites anchor pointbunny.anchor.x = 0.5;bunny.anchor.y = 0.5;// move the sprite t the center of the screenbunny.position.x = 200;bunny.position.y = 150;stage.addChild(bunny);function animate() { requestAnimFrame( animate ); // just for fun, lets rotate mr rabbit a little bunny.rotation += 0.1; // render the stage renderer.render(stage); //}</script></body></html> Quote Link to comment Share on other sites More sharing options...
d13 Posted April 27, 2015 Share Posted April 27, 2015 Did you try:requestAnimationFrame Quote Link to comment Share on other sites More sharing options...
xdiepx Posted April 27, 2015 Author Share Posted April 27, 2015 Yeah that fixed it, but i have another problem now . "Uncaught ReferenceError: The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class." p.s i don't like the changes. It has broken a lot of things... Quote Link to comment Share on other sites More sharing options...
Bobby Posted April 28, 2015 Share Posted April 28, 2015 You must be using Paul Irish's requestAnimFrame. Download the script and include it in HTML before you javascript file. Quote Link to comment Share on other sites More sharing options...
xerver Posted April 28, 2015 Share Posted April 28, 2015 You must be using Paul Irish's requestAnimFrame. Download the script and include it in HTML before you javascript file. Don't use this polyfill, pixi ships with one already. Just use requestAnimationFrame as if it exists and we will take care of it. Yeah that fixed it, but i have another problem now . "Uncaught ReferenceError: The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class." p.s i don't like the changes. It has broken a lot of things... We broke only a few things (that is what a major version is by the way), and the few things we did break we wrote extra code to tell you about it. You are experiencing one of those messages. It clearly tells you what the error is, and how to upgrade for v3. What are you stuck on? In v3, there is a brand-new loader. You can create one yourself with "new PIXI.loaders.Loader()" or use the premade one we have for you at "PIXI.loader". xdiepx 1 Quote Link to comment Share on other sites More sharing options...
xdiepx Posted April 28, 2015 Author Share Posted April 28, 2015 Don't use this polyfill, pixi ships with one already. Just use requestAnimationFrame as if it exists and we will take care of it. We broke only a few things (that is what a major version is by the way), and the few things we did break we wrote extra code to tell you about it. You are experiencing one of those messages. It clearly tells you what the error is, and how to upgrade for v3. What are you stuck on? In v3, there is a brand-new loader. You can create one yourself with "new PIXI.loaders.Loader()" or use the premade one we have for you at "PIXI.loader".Yeah i got those messages, it keeps mention about stages and DisplayObjectcontainer. however i have changed them to "Container" and it still popping up lol. I'll need to do a re build of what i have. Maybe I have missed something out. Do you have an example of how to use the "PIXI.loader.Loader"? I keep getting an undefined message. I might be missing something out. Quote Link to comment Share on other sites More sharing options...
Bolko Posted April 28, 2015 Share Posted April 28, 2015 loader:http://www.html5gamedevs.com/topic/14107-v3-loader/ changing DisplayObjectContainer to Container works. Just be sure to find them all Quote Link to comment Share on other sites More sharing options...
xdiepx Posted April 28, 2015 Author Share Posted April 28, 2015 loader:http://www.html5gamedevs.com/topic/14107-v3-loader/ changing DisplayObjectContainer to Container works. Just be sure to find them all I did a search and replace on all of DisplayObjectContainer and i still get "DisplayObjectContainer has been shortened to Container, please use Container from now on.". Maybe I have built it wrong and something is still missing. i'll just rebuild my structure. I saw that link that xerver posted.PIXI.loader// add resources.add('name1', 'url/to/resource1.png').add('name2', 'url/to/resource2.json')// listen for progress.on('progress', onProgressCallback)// load resources.load(function (loader, resources) {// resources is an object containing the loaded resources, keyed by the names you used above.var sprite = new PIXI.Sprite(resources.name1.texture);});Can we do something link this (might not work but just asking).var myAssets = {name:'name1', src:'url/to/resource1.png',name:'name2', src:'url/to/resource2.png'}PIXI.loader// add resources.add(myAssets).on('progress', onProgressCallback)// load resources.load(function (loader, resources) {// resources is an object containing the loaded resources, keyed by the names you used above.var sprite = new PIXI.Sprite(resources.name1.texture);});Or does it have to be the above way xerve showed? Quote Link to comment Share on other sites More sharing options...
xerver Posted April 29, 2015 Share Posted April 29, 2015 Resource loader's `add` method supports just about any way you can think of to add data: https://github.com/englercj/resource-loader/blob/master/src/Loader.js#L147-L198 Your code snippete is broken though because you have duplicate keys in a single object. I think you meant to have an array with two objects in it. Quote Link to comment Share on other sites More sharing options...
Bobby Posted April 29, 2015 Share Posted April 29, 2015 Don't use this polyfill, pixi ships with one already. Just use requestAnimationFrame as if it exists and we will take care of it. Woah that's nice, didn't know that PIXI shipped with rAF polyfill. Adding that information to the doc might be useful for newcomers. Quote Link to comment Share on other sites More sharing options...
xdiepx Posted April 29, 2015 Author Share Posted April 29, 2015 Resource loader's `add` method supports just about any way you can think of to add data: https://github.com/englercj/resource-loader/blob/master/src/Loader.js#L147-L198 Your code snippete is broken though because you have duplicate keys in a single object. I think you meant to have an array with two objects in it.Sorry that was a typo. I meant :var myAssets = {name:'name1', src:'url/to/resource1.png'},{name:'name2', src:'url/to/resource2.png'}PIXI.loader// add resources.add(myAssets).on('progress', onProgressCallback)// load resources.load(function (loader, resources) {// resources is an object containing the loaded resources, keyed by the names you used above.var sprite = new PIXI.Sprite(resources.name1.texture);}); Quote Link to comment Share on other sites More sharing options...
xerver Posted April 29, 2015 Share Posted April 29, 2015 Now you have a syntax error. I think you are trying to do:var myAssets = [{name:'name1', src:'url/to/resource1.png'},{name:'name2', src:'url/to/resource2.png'}];Which you will need to pass "url" not "src". xdiepx 1 Quote Link to comment Share on other sites More sharing options...
xdiepx Posted April 29, 2015 Author Share Posted April 29, 2015 Oh, thanks xerver, i'll give that a go and re-build a game. Quote Link to comment Share on other sites More sharing options...
xdiepx Posted May 3, 2015 Author Share Posted May 3, 2015 Now you have a syntax error. I think you are trying to do:var myAssets = [{name:'name1', src:'url/to/resource1.png'},{name:'name2', src:'url/to/resource2.png'}];Which you will need to pass "url" not "src".If you are adding a sprite sheet do i need pass in the json url as well? I made this function but it seems to crash and fail on browser function onAssetLoader(){var loaderAssets = [{name:"bg",url:'http://localhost/bg.png'},{name:"myAnime",url:'http://localhost/myAnime.json'} ];new PIXI.loader.add(loaderAssets) .load(function(loader,resource){ console.log("me") }); }; I don't get any error message but it just crashes. Any clues? Thanks Quote Link to comment Share on other sites More sharing options...
xdiepx Posted May 3, 2015 Author Share Posted May 3, 2015 If you are adding a sprite sheet do i need pass in the json url as well? I made this function but it seems to crash and fail on browser function onAssetLoader(){var loaderAssets = [{name:"bg",url:'http://localhost/bg.png'},{name:"myAnime",url:'http://localhost/myAnime.json'} ];new PIXI.loader.add(loaderAssets) .load(function(loader,resource){ console.log("me") }); }; I don't get any error message but it just crashes. Any clues? Thanks Removed the new PIXI.loader.add(loaderAssets) to PIXI.loader.add(loaderAssets) . fixed my problem 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.