Phaser and RequireJS - Is it still working?

Recommended Posts

Was following a guide on using RequireJS with Phaser and my main.js starts like this:

require(['lib/phaser.min','module/Player'],function(Phaser,Player){    var game = new Phaser.Game(1067, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }, false, false);

And right away the console gives me the error "Uncaught TypeError: Cannot read property 'Game' of undefined"

But if I try it with an older version of Phaser (the one provided with said guide, don't know how to check the version) it gets past that line.

So are the new versions of Phaser incompatible with RequireJS or do I need to do something else?

Share this post

Link to post
Share on other sites

I got the same error.

My solution is to not give Phaser a name, when loading it.

require(['module/Player','lib/phaser.min'],function(Player){  var game = new Phaser.Game(etc..);});

This makes Phaser globally accessible, so you can use Phaser in modules without passing it to them. 

Share this post

Link to post
Share on other sites

Thank you! Does this in someway contradict the way you're supposed to use RequireJS or is it still good practice?


By the way, I can't seem to find it right now, but I'm pretty sure it was your guide I was following, so double thanks ;)

Share this post

Link to post
Share on other sites

Only Phaser is global, so it's not a huge problem and sometimes it comes handy that i don't have to pass Phaser around.

I don't even know if it's a good way to require phaser this way. I found this solution by chance and I couldn't find anything about it in the Require.js docs.


My guide is pretty old now that Phaser 2.0.0 came out, but you can find here: http://www.html5gamedevs.com/topic/4437-how-to-organize-your-phaser-game-even-better/?hl=organize


I remade the Invaders example using require.js with Phaser 2.0.2(No Physics). The best thing about the game is that it uses states.

You can find it here: https://github.com/StrykerKKD/SpaceInvaders

Share this post

Link to post
Share on other sites

The problem here is that Phaser is now a named module giving it the id "Phaser".  I've got a bit of an OCD tick that requires me to use only lowercase in my require statements and have all third party libraries ID'ed by only their name.


To do this, just add this to your confg:

requirejs.config({	paths: {		Phaser: 'path/to/phaser'	},	map: {		'*': {			phaser: 'Phaser'		}	}});

Now, you can just pull in phaser like this:

define(function(require) {	"use strict";	var Phaser = require('phaser');	.	..	...});

Now that's much more clean.


I should also note that using the alternative commonjs-ish syntax will make your life a whole hell of a lot easier.  In fact, I did a small post on this a little bit ago.

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.