Forums » Help » AMD/RequireJS?

Is it possible to integrate Impact with AMD module loading via RequireJS?

See: http://requirejs.org/

If my first AMD module requested is made to depend on 'lib/impact/impact.js' and 'lib/game/main.js', then the loading process seems to start off OK, but fails with an ig.system undefined error.

I think because both ImpactJS and RequireJS try to load their modules asynchronously, meaing RequireJS starts loading before ImpactJS has finished?

My plan so far is to try this:

1) load Impact normally from index.html

2) sometime near the call to ig.main(), initiate the AMD load (probably using an appendChild call to the DOM head)

3) when the last AMD module finishes loading, set a flag in ig.game signifying that the game update and draw functions can begin real work

This works for me, so far.

Put the require.js file into: lib/

Load Impact from your index.html using the usual impact.js and main.js lines.

Include the AMD loader script, require.js, from inside your Impact Game's init() function, using some kind of script load function. I use an appendChild() call in a CoffeeScript loader function, similar to Impact's internal _loadScript function.

However you do that load, first load the require.js, then in the callback from that successful load, load your own index.js file (or whatever you want to call it). The index.js file is where you call the AMD require() function, listing your AMD modules.

Now you can mix AMD modules with Impact modules. The only problem I've had so far is that your class definition names aren't obviously accessible from inside the AMD modules. So e.g. if you've defined an Impact class like EntityPlayer, then typing EntityPlayer inside an AMD module will be an error.

But ig, ig.game, etc. are fully accessible. So for now I've been creating my Impact classes like this:

code
EntityPlayer = ig.EntityPlayer = ig.Entity.extend(
...
)
code

The middle part of that = line lets you access EntityPlayer inside your AMD modules as ig.EntityPlayer.

Also, I forgot to add that your top-level module should set a flag to true in ig.game telling the game it is alive. Your Impact Game's update() and init() functions should check this flag first and return immediately if false.

Why go to all this trouble?

Multiple reasons:

1) Because I already have other code written in AMD module form that I want to use with Impact.

2) Because I want to use CoffeeScript, which provides it's own class inheritance system.

3) Because AMD/require.js is the industry standard for modules, meaning Impact's module system -- although it works fine -- is redundant for me and not needed.

I even write my Impact-related code in CoffeeScript, such as my Impact game derived from ig.Game using ig.Game.extend, it is all CoffeeScript.