Jump to content

Pixi 3.0.2 Uncaught ReferenceError: requestAnimFrame is not defined


xdiepx
 Share

Recommended Posts

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

index.html

pixi.js

pixi.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>
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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);});
Link to comment
Share on other sites

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

Link to comment
Share on other sites

 

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

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...