- CreateJS – includes EaselJS (BOM and events), TweenJS, PreloadJS and SoundJS
- ZIMjs – powered by CreateJS plus conveniences, components and controls
- PixiJS – a 2D canvas / WebGL rendering engine with a BOM and events
- PhaserJS – a game framework based on PixiJS
- PaperJS – a vector graphics scripting framework with beziers
Recent activity over the last couple of years had led to StageGL where WebGL is used to render bitmap-based display objects. Note that many objects can be effectively cached to bitmap to make use of StageGL. After a long incubation, CreateJS has just launched version 1.0!
The library has been very stable since its inception as one of the earliest canvas libraries and became well known making the Atari Arcade with sponsorship by Microsoft. Founder, Grant Skinner, is well known in the interactive media world and has worked with Adobe to make Adobe Animate (formerly Flash) export directly to CreateJS which has helped Adobe publish to the HTML 5 canvas. CreateJS is also considered cached according to Ad Networks so does not count as ad size: http://createjs.com/html5ads/. The stability, support from ad networks and connection with Adobe Animate for vector assets has led to billions of loads of the CreateJS code.
ZIM at http://zimjs.com extends CreateJS and adds conveniences like one-line drag and drop, multitouch gestures, multiple hit tests as well as components like buttons, sliders, dials, colorPickers, tabs, etc. and controls like adaptive layout, page management, parallax, scrollers, swiping, hotspots, grids, guides, motion and gamepad controllers, particle emitters, sound-wave analysis. To reduce bloat, ZIM Distill lets you minify only the ZIM code that is used.
ZIM is a general canvas library and demonstrates remakes of the other canvas libraries projects at an average of 60-80% the code. For example:
The ZIM site has an extensive tutorial section for beginners, mid and advanced with code and video tutorials, a Code Zero series for people new to code and a rapidly growing Bubbling series for new features of which there have been 30 in the last four months.
ZIM provides a Frame class with scaling options. The Frame also reduces the number of lines for asset loading compared to CreateJS. ZIM Parameters can be passed in sequence but also as a single configuration object. Chaining is encouraged with ZIM with short chainable methods for basic transformation properties. There is a single Ticker class that works with all animated features of zim like dynamic sprite animation, parallax, etc. to consolidate stage updates.
You can also optimize ZIM for mobile and while developing, easily turn animations off with one the ANIMATE constant. ZIM has pioneered dynamic sprites and scrollers that run in sync with a single Accelerator class. There are also ways to pass in parameters that will have a delayed determined value. The list of innovations goes on, yet the whole framework has a consistent object oriented format. ZIM is also Accessible for screen readers with all its components keybord and screen-reader ready.
Pixi at http://pixijs.com is a 2D WebGL rendering engine (with canvas fall-back) that provides and BOM and events to manage interactive media. Pixi is very much like CreateJS and has focused on speed and WebGL filters. Pixi also provides access for screen readers.
Pixi is well supported with “Thousands of award winning sites and experiences are being made with PixiJS by leading content authors around the world” and as an extra bonus, the popular PhaserJS game framework is powered by Pixi much like the ZIM general framework is powered by CreateJS.
The team at PixiJS and PhaserJS are very involved in development and are featured in the FITC Spotlight Web Games Conference.
PhaserJS at https://phaser.io/ is a desktop and mobile HTML 5 game framework for Canvas and WebGL that runs on PixiJS. They have a newsletter with thousands of subscribers and run the HTML5 Game Devs forum. So PhaserJS is certainly the leading game engine in the HTML 5 world with integrated physics, tilemaps and other classes specific to 2D gaming.
Phaser has a large community and many examples broken down into sections. Even so, Phaser does not have 80% of what ZIM has in terms of general components and controls so watch out for missing efficiencies. On the other hand, for your typical side-scroller, you will find more resources in Phaser.
P5JS – Processing
Processing has been around for quite some time – it was developed in the Java world to provide a more simple access to Java. It is based on a sketch where you put your code. It has an initialization area and a loop area (much like Phaser). Processing is famous for its access to hardware and has generally been used for coding experiments, art works, physical computing, etc.
There is a set of libraries that goes along with P5JS to help connect to various other systems. The Interfaces and Play sections are rather limited compared to ZIM and Phaser with a statement such as: p5.play is built for accessibility and simplicity, not performance. It is designed to be understood and possibly modified by intermediate programmers. It is not a box2D-based physics engine, it doesn’t use events, nor supports 3D. If you are looking for robust (but more complex) game frameworks I suggest phaser.io or easel.js.
Processing has a vast history of cool data visualizations. These days, most if not all of these can be done in any of the canvas libraries – CreateJS, ZIMjs, PixiJS, PaperJS. It is just a matter of porting over the code.
Paper.js at http://paperjs.org is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and Bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.
Paper comes from an Adobe Illustrator scripting background and works well with Beziers, SVG, etc. Here are some of its features:
- Document Object Model
- Paths & Segments
- Mouse Interaction
- Keyboard Interaction
- SVG Import and Export
- Raster Images and Color Averaging
- Selection Outlines
- Vector Geometry
- Mathematical Operations
- Object Conversion
ZIMjs extends CreateJS to give extensive components and controls on top of a very solid base for general Interactive Media. PhaserJS extends PixiJS to give tools that Game Developers would find familiar. Certainly do not count ZIM out with respect to 2D games. ZIM features Sprites, Physics integration, Particle Emitters, multiple types of HitTests, GamePad / Keyboard controls, integration with A-Star for tilemaps, a LeaderBoard class, fantastic Multi-user with ZIM Socket, etc. But ZIM also has many other Interface components – all with leading edge accessibility.