Modularity and Drop In Library

Though this framework is designed as a complete boilerplate project -- that is, you can download the whole thing and start building on top of it immediately -- you can also drop the JavaScript into an existing project, or choose to use only various components.

To drop in the JavaScript canvas handling, include the combined.min.js file. Source maps are also supported with combined.js and combined.min.map. jQuery is required, and you'll still want to use main.js to write your application.

Note that by default, the canvas will be automatically detected. You can designate a different canvas to use by calling App.setCanvas(). Currently the app can only manage one canvas at a time.

You can also choose to use only specific components. Here are the available JS files and their dependencies:

• libraries/console-extras: Debugging tools. Not included in the combined script.
• libraries/stats: When included, a graph of frame rate or memory usage is shown. Not included in the combined script.
• libraries/jQuery: Required.
• libraries/jquery.hotkeys.js: Provides support for keyboard input.
• libraries/classes.js: Provides support for object hierarchy. Required by actors.js.
• libraries/sprite.js: Provides support for animated sprite images.
• boilerplate/core.js: Required. Initializes the canvas, runs the animation loop, and provides some utilities.
• boilerplate/drawing.js: Provides utilities to make drawing onto the canvas easier. Required by actors.js.
• boilerplate/mouse.js: Handles mouse tracking, scrolling, dragging, and events.
• boilerplate/events.js: Provides an event system for entities on the canvas. Not very useful without mouse.js. Events work well with the entities provided by actors.js.
• boilerplate/storage.js: Provides a wrapper around localStorage to support storing non-string objects.
• boilerplate/collections.js: Provides useful containers for other entities. Though it does not depend on actors.js, the containers work best with items that have certain properties like those of the Box class provided by actors.js.
• boilerplate/actors.js: Provides entities that are useful abstractions for placing objects onto the canvas that support any kind of interaction with the user or with other objects. Depends on drawing.js and classes.js and works well with jquery.hotkeys.js, sprite.js, mouse.js, events.js, and collections.js.
• boilerplate/zoom.js: Allows zooming in and out by scrolling the mouse wheel. Depends on mouse.js and drawing.js. Not included in the combined script.

A few of these have even been pulled out into their own projects.