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
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)
SpringRoll can be installed using Bower.
bower install springrollTo test the examples, run the grunt task examples. This will download any dependencies and automatically launch the examples in your browser.
grunt examples- PreloadJS SpringRoll's fork of PreloadJS
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 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.
- Core Module (required)
- Container Client Module container-client
- Captions Module captions
- Debug Module debug
- EaselJS
- EaselJS Animation Module easeljs-animation
- EaselJS Cutscene Module easeljs-cutscene
- EaselJS Display Module easeljs-display
- EaselJS States Module easeljs-states
- EaselJS UI Module easeljs-ui
- Hints Module hints
- Languages Module languages
- Native Display Module native-display
- Pixi.js
- Pixi.js Animation Module pixi-animation
- Pixi.js Display Module pixi-display
- Pixi.js Spine Module pixi-spine
- Pixi.js UI Module pixi-ui
- Sound Module sound
- States Module states
- UI Module ui
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.
- Application
- Asset Loading & Caching
- Color-Alpha
- Max-Width
- UI Scaling
- Cutscene
- Tweening
- Sound
- Captions
- Captions & Sound
- Multi-Display
- States
API Documentation has full documentation for the core and related modules. For examples of implementing each module please consult the wiki.
Copyright (c) 2015 CloudKid
Released under the MIT License.