I’m very happy to announce that I’ve pushed major updates to a number of our javascript tools and libraries for developing rich content with HTML5. It’s very exciting for me to see these starting to realize some of the vision I’ve had for them over the past year, both as individual pieces and as a suite of tools to make great interactive content using web standards.
Here’s a quick breakdown of what was released:
EaselJS v0.4.0
The latest release of EaselJS (our HTML5 display library) has a completely reengineered sprite sheet engine, which includes a host of new features: multi-image sprite sheets, variable frame dimensions, frame reuse, image preloading, and a new data format. Note that this change will require some minor updates to existing content using sprite sheets in EaselJS.
We’ve added filter effects, and a few sample filters, including a box blur filter by Mario Klingemann, who has agreed to write a number of other filters for the library.
There’s also a fantastic new build system, built on top of Node.js by Adobe’s own Mike Chambers. And, of course, a whole pile of other feature additions, optimizations and bug fixes. Check the VERSIONS file for full details.
Zoë v1.5.0
We’ve released a major update to Zoë, our tool for exporting sprite sheets from SWF animations. It supports EaselJS’s new data format, and adds some great new features like variable frame dimensions with more optimal rect packing, and intelligent frame reuse. The latter allows you to set a threshold for how similar frames can be, and Zoë will automatically remove similar frames and reuse them in animations. Testing on some old content, we saved 20-50% on file size with this feature, with virtually no decrease in animation quality.
This release was a bit more rushed than we would have liked, so you should expect to see a v1.5.1 release before too long that polishes things up and adds additional features such as multi-image export.
TweenJS v0.1.0
This is the first “official” release of TweenJS. TweenJS uses a simple API of chained commands to sequence tweens and actions to create complex animations and timed events. For example:
Tween.get(ball).to({x:200},500).wait(750).to({alpha:0,visible:false}).call(onComplete);
TweenJS makes a great companion to EaselJS, and also has some basic support for working with CSS properties, which will be extended in future versions.
SoundJS v0.1.0
This is also the first official release of SoundJS, our library for working with the HTML5 Audio tag. Sound in HTML5 is a complete mess to work with, and this library aims to make it a bit easier. It handles preloading, allows you to assign a fixed number of tags to a specific sound, provides volume control, and manages sound interruption.
This library is still a little rough, but we’re planning to continue to clean it up and add functionality (ex. WebAudio support) as time permits.
in summary
All of these projects are free and open source, released under the highly permissive MIT license, and are hosted on GitHub. I’d like to thank everyone who contributed to these releases, even if just by providing feedback or encouragement. Hopefully people find these useful in their own quests to build amazing content for the web!
As an aside, now that these releases are out of the way, I’m considering doing a series of posts or videos on getting started with some of these libraries. I think it would be particularly relevant as Flash developers start looking to create content in HTML5, and web developers look to create more interactive content.
The EaselJS site is still saying 0.3.2. Will it be updated soon?
Raymond – try reloading? It’s showing as v0.4 for me. I’m assuming you’re talking about easels.com?
Fan-freaking-tastic work! I’m truly grateful for your efforts and appreciate what you’re doing to help fill in the missing pieces in the html5 gamedev toolchain. Keep up the wonderful work.
Thanks for sharing! BTW – there is already something called tween.js.
Yep, I see it now.
@Grant
RE> TweenJS notation: Tween…call(onComplete);
I have grown to love the jQuery Deferreds which (in v1.7) now supports deferreds for UI animations. It would be GREAT if your Tween API supported something similar so we could use the done() and progress() syntax for adding callbacks.
Tween.get(ball)
.to({alpha:0,visible:false})
.promise()
.done( function() {
$(“#controls”).append( “Finished!” );
});
@see http://jsfiddle.net/ThomasBurleson/RTLr6/
@see http://api.jquery.com/promise/#example-1
Wow! You guys rock! Respect!
Thanks very very much. I was searching for an engine in last few weeks that would be versatile and easy. This offers the promise.
Respects,
Is there support for the iPAd relating to SoundJS, as I woudl like a noise to play on load but this does not happen when viewed on the iPad??
Hey Grant,
I forked EaselJS and am in the process of converting it over to use MinionJS, which is a library I built for inheritance in JavaScript. It resembles AS3 inheritance as close as I could possibly get it, and at the same time handles dependency management.
The benefits to using MinionJS means that you can easily build your project with only the classes that you actually use, it also enables you to have this.__super() calls.
Here’s an example of one of the classes in MinionJS:
https://gist.github.com/1829852
In any event, it definitely helps ease the learning curve and process of switching from AS3 to JS. The project can be found on GitHub here: https://github.com/gigafied/minion