Fizz was the result of my own desire to help make graphics programming more approachable to the non-programmer. The library takes multiple design cues from the Adobe Flash display-list rendering model, while providing a collection of straightforward, minimal APIs that simplify and accelerate the process of making games and other interactive art.
Features of the library include:
Entityclasses, which define transient, spatial entities that interact in a scene.
EventEmitterclasses, which set up Fizz’s hierarchical event system.
Spritesheetclasses, whose APIs allow a user to draw static and animated entities in a scene.
Textboxclasses, which build on top of
Graphicto deliver custom on-canvas typography.
DisplayGridclasses, which allow entities to be nested and group hierarchically in a scene.
EntityPoolclass, which can manage a large collection of pre-allocated display entities that can be reused for improved performance.
Democlasses, which abstract all interactions with the Document Object Model and
RAFRendererclass, which leverages the browser’s
requestAnimationFrameAPI to synchronize canvas updates with the browser’s repaint timing.
Users can write event handlers that listen for and respond to events in a scene, including user input from a mouse or keyboard. The
Stage classes are responsible for quietly transforming DOM events into Fizz events in the context of a particular
Canvas. This includes translations of coordinates from document-space to canvas-space.
Fizz entities can broadcast many events, including:
Fizz supports translation and scaling. It does not support entity rotation.
To support high frame rates with complex display-object graphs, Fizz automatically caches the visual state of each
DisplayGroup by storing bitmap information inside of offscreen
<canvas> elements; flags are used to mark changed objects as “dirty” between draw calls—allowing unchanged objects in the scene to be repainted quickly.
While writing Fizz, I followed a test-driven development strategy, using the open-source Jasmine test framework to define detailed specs for new classes and methods, and for describing the relationships between entities. The approach saved me many times from making mistakes or introducing insidious bugs. As I introduced new built-in functionality and new levels of abstraction, the level of effort needed to write new demos decreased substantially.
The default, minified Fizz distribution is ~50kB (12kB gzipped).