Throwback is a modern-browser, 2d game rendering engine. You can use it to render old-school, sprite animated games for web and mobile.
As of May 2013 the <canvas> element is still a bottleneck for many mobile devices. One of the goals of Throwback is to maintain an exceptional frame-rate with a large number of on-screen sprites on mobile. As such, Throwback uses absolute-positioned <div> elements and CSS3 animations to provide hardware-accelerated rendering.
(Throwback does use canvas elements for some behind-the-scenes work, e.g. building static background images from sprite-sheets)
All of the HTML content is generated by Throwback at runtime; you can worry about your game logic and let Throwback handle all the messy HTML and rendering details.
Every Throwback game consists of a Stage with one or more user-defined Scenes. A Scene can contain one or more Layers; Layers contain any number of Entities (Animations, Sprites, etc.) or Groups thereof. All of these objects, including the Stage, inherit from a base class called Node, and are connected in a tree hierarchy:
Stage
|
+----------+----------+
| |
Scene Scene
| |
+---------------+------------+ +
| | | |
Layer Layer Layer Layer
| | |
+ +-----+-----+ +
| | | |
Entity Group Entity Group
| |
+ +-----+-----+
| | |
Entity Entity Group
|
+-----+-----+
| |
Entity Entity
The hierarchy of Throwback is inspired by KineticJS, an HTML5 Canvas JavaScript library
Every node in this tree can be styled and animated, including the root node Stage, and these styles can propagate to child nodes.
Examples to follow once more of Throwback is written.