node package manager
Loosely couple your services. Use Orgs to version and reuse your code. Create a free org »

springroll

SpringRoll Logo

SpringRoll Build Status Dependency Status GitHub version Inline docs

A light-weight, extensible, future-forward framework for building HTML5 canvas-based games and applications. The framework is built on a display plugin architecture to work with PixiJS, EaselJS and native canvas rendering. The framework comes with several modules for doing common multimedia development tasks, such as:

  • Adding Sound (WebAudio)
  • Hardware Rendered Games (via WebGL)
  • Implementing Captions
  • Remote Debugging
  • Responsive Interfaces
  • Game State Management
  • Preloading Assets
  • Browser Cache Control

Browser Support

The primary objective of the framework is to build content which supports WebAudio API and WebGL (with Context2d fallback). With the exception of the WebAudio API fallback to Flash, there are very few fallbacks implemented. We want to produce canvas content that is about the future. Here are the currently planned browser support:

  • Internet Explorer 9+
  • iOS Safari & iOS WebView 6+
  • Chrome for Android 37+
  • Chrome 30+
  • Firefox 25+

We have intentionally avoided support for these browsers:

  • Android stock browser (no WebAudio support or suitable fallback support)
  • Internet Explorer 7/8 (no HTML5 canvas support)

Installation

SpringRoll can be installed using Bower.

bower install springroll

Examples

To test the examples, run the grunt task examples. This will download any dependencies and automatically launch the examples in your browser.

grunt examples

Dependencies

Usage

The basic usage is to create a canvas element on the DOM, assign it an ID and then create a new Application to render that canvas.

<html>
    <head>
        <!-- Core is required! -->
        <script src="dist/core.min.js"></script> 
 
        <!-- Optional modules -->
        <script src="dist/modules/easeljs-display.min.js"></script> 
    </head>
    <body>
        <canvas id="stage" width="600" height="400"></canvas>
        <script>
 
            // Create the application 
            var app = new springroll.Application({
                canvasId : "stage",
                display : springroll.EaselJSDisplay
            });
 
            // Listen for when the application 
            // has been fully initialized 
            app.once('init', function(){
                // Ready! 
            });
 
        </script> 
    </body>
</html>

Modules

Modules are components which contain common code classes, documentation and/or related tools that can easily be bundled into a project. The goal of these modules is to provide convenient solutions to common problems producers face when authoring games. All modules are optional and located in the dist/modules folder, except the Core Module.

Displays

The Framework is inherently canvas-rendering agnostic. We support two different rendering display plugins for EaselJS and Pixi.js. Features within the different modules require SpringRoll's forks of EaselJS and PixiJS. In addition, there is a generic display for rendering using Context2d or WebGL. An Application built with the Framework can support all three displays methods simultaneously.

Examples

Documentation

API Documentation has full documentation for the core and related modules. For examples of implementing each module please consult the wiki.

License

Copyright (c) 2015 CloudKid

Released under the MIT License.