Getting p2 is not defined

[brejep]

I've just tried the Phaser 1.2 branch with a project that uses requirejs and I get a reference error for p2:

Uncaught ReferenceError: p2 is not defined

Do I have to do something special to get this version working with requirejs?

 

I think there were similar problems with SAT for a while in the 1.1.x version but that was fixed.

[rich]

If you're using requireJS, then for now I would edit the grunt build script and remove p2.js from it, then 'require' it normally and phaser after.

[brejep]

Sure, I'll do that for now. Thanks.

 

Just wondering, will it be require-friendly for v2.0 release? With SAT, before it was fixed, I just uncommented the wrapper but that seems a little more involved for p2.

[rich]

We still need to redo the UMD wrapper for 2.0 - I would really like to have p2 and pixi outside of the Phaser wrapper, so they are all global objects and no conflicts. If anyone who's a grunt script and UMD master would like to lend a hand I'd very much appreciate it.

[negue]

Till this is fixed, I just load phaser (script-tag) before all of my other requirejs files.

[rich]

I've been trying to fix this today but it's proving to be a real pain in the ass. I'm not sure what p2 is doing, but requireJS really doesn't like it

[brejep]

It looks like even with the changes made to the 1.2 branch grunt tasks I get problems with p2 and PIXI not being defined. They aren't being put in global scope and so Phaser doesn't find them.

 

I can fix it in PIXI by using this UMD pattern: https://github.com/umdjs/umd/blob/master/amdWebGlobal.js but trying to apply the same thing to p2 seems difficult. The wrapper they use does not lend itself to being understood. 

 

In the end I just made p2 global by removing the define check ("function"==typeof define&&define.amd) but that isn't a real solution just a hack so I could try out p2 with my current project.

 

I expect this may be the prod that will move me to use browserify instead.

[rich]

Really? I just tried a single html page including nothing but phaser.js and from the dev tools I can see Phaser, PIXI and p2 defined in the global scope and the following runs for me:

if (window['p2'] && window['PIXI'] && window['Phaser']) { console.log('globals ahoy'); }

[rich]

I appreciate that's not the same thing as running them under requireJS though

 

In that case you could try this: require first build/custom/p2.min.js then build/custom/pixi.min.js and finally phaser.min.js and see what happens?

[brejep]

Is that when using requirejs?

 

If the define function exists and has define.amd then p2 and PIXI aren't added to the window object and that means Phaser can't access them.

 

Wrote that and then saw your subsequent post.

[brejep]

Now the weekend is almost here I'll have a look and see if I can add the amdWebGlobal approach to p2 as well. That should fix the issue. Just wish p2 was using a more standard wrapper.

[brejep]

Ok, I have come up with a solution that just about works for requirejs:

 

At the moment, all the libraries (p2, PIXI, Phaser) have a simple define(module) call, for example in the Pixi Outro.js file:

else if (typeof define !== 'undefined' && define.amd) {        define(PIXI);    }

Which I've changed to:

} else if (typeof define !== 'undefined' && define.amd) {        define('PIXI', (function() { return (root.PIXI = PIXI); })());    }

This gives us a global instance of PIXI and a named 'PIXI' module that require can recognise. That allows Phaser to find the global instance of PIXI and allows you to have several modules in one file.

 

Similar change to line 24 of the p2.js file:

 

From: 

"function"==typeof define&&define.amd?define(e)

To: 

"function"==typeof define&&define.amd?define('p2', (function() {return (this.p2 = e());})())

And in Phaser's Outro.js file, I've just named the module without creating a global instance, by changing line 13:

 

From :

define(Phaser);

To:

define('phaser', Phaser);

Then, in require I can do something like this:

requirejs.config({    baseUrl: 'script',    paths: {        phaser: 'vendor/phaser/build/phaser',        p2: 'vendor/phaser/build/phaser',        PIXI: 'vendor/phaser/build/phaser'    }});require(['phaser', 'p2', 'PIXI'], function(Phaser, p2, PIXI) {    console.log('phaser', Phaser);    console.log('p2', p2);    console.log('PIXI', PIXI);    var game = new Phaser.Game(400, 300, Phaser.AUTO);});

I tested with and without requirejs and it worked but not tried with anything that uses exports instead.

[hayesmaker]

 

 

I expect this may be the prod that will move me to use browserify instead.

 

Don't worry.. p2 breaks with browserify also