Using easeljs and tweenjs with requirejs

This page explains shortly how to use requirejs along with easeljs and, more importantly, together with tweenjs.

To use easeljs, configure require this way:

require.config({
    shim: {
        easel: {
            exports: 'createjs'
        }
    },
    paths: {
        easel: '../your/path/to/easel'
    }   
});

The paths part is just a shortcut for convenience, so that you can easily reference easel.

To use easeljs and tweenjs, you need to make sure that easeljs is loaded before tweenjs. Otherwise, tweenjs will not work properly - and it won’t even tell you! This can be achieved by declaring easel as dependency for tween:

require.config({
    shim: {
        easel: {
            exports: 'createjs'
        },
        tween: {
            deps: ['easel'],
            exports: 'Tween'
        }
    },
    paths: {
        easel: '../your/path/to/easeljs',
        tween: '../your/path/to/tweenjs'
    }   
});

Then if you wanted to use Easel in a simple Backbone view, you could create: GameView.js

define([
	'jquery',
	'underscore',
	'backbone',
	'easel'
	], function($,_,Backbone) {
	var GameView = Backbone.View.extend({
		initialize : function(){
			var canvas = document.getElementById('gameCanvas');
            		var stage = new createjs.Stage(canvas); // all good - soldier on... 
			console.log(stage, "GameView / initialize"); // quick test - stage is not null 
	});
	return GameView;
}); 

For more detailed information on requirejs configuration options, see http://requirejs.org/docs/api.html#config