Hello Again, World!
We are happy to announce the (long-awaited) release of CreateJS version 1.0! This release introduces major improvements, wraps up features and bugs, and brings all libraries to the same version number!
It’s Been a While…
The 1.0 version was pushed to GitHub a few months ago, and Twitter subscribers to @createjs were quietly notified about the release, however, we have been waiting for all our CDNs to get updated prior to making official announcements.
Don’t misinterpret this lull between major releases as a lack of activity: it’s actually quite the opposite! There have been constant updates to all the libraries: adding new features, both big and small, addressing bugs, iterating on pull requests, and even a complete rewrite to a certain library (I am looking at you TweenJS)!
Moving forward we are aiming to be more transparent with major releases. We have a ton of ideas for 2.0 and taking our time with 1.0 has allowed us to do that… and there are big changes coming down the pipe!
Major Changes and Updates
Version 1.0 contains these updates:
- Minified Version Naming
The naming of our minified libs and combined libraries has simplified. We dropped the version number, which is an often-requested change that will play more nicely with CDNs like jsdelivr and cdnjs, which have already been updated. Additionally, the CreateJS combined library is simply “createjs.js”, and available on the CreateJS CDN.
Released to GitHub earlier this year, StageGL is our super fast and flexible rendering pipeline for EaselJS content and filters using WebGL. It replaces the more restrictive and less performant SpriteStage, and is included in EaselJS builds by default, so you can get started today accelerating your Bitmap, Sprite, and cached content with little-to-no effort. Read more in the release article, and stay tuned for more StageGL-specific posts!
- TweenJS Refactor
TweenJS has been rebuilt to be much faster, and the plugin model revamped to be more flexible. We rewrote all the existing plugins, and have also added several new plugins, including an improved ColorPlugin (previously in extras), RelativePlugin, RotationPlugin (previously “SmartRotationPlugin”), and a much more useful CSSPlugin, which now works with computed styles.
- Font Preloading
There has been a beta FontLoader branch since our last tagged version of PreloadJS (Nov 2015). It was officially integrated and battle-tested in 2016, and available by default in PreloadJS builds. This provides font preloading for Google fonts, CSS fonts, and font files.
- NPM “support”
CreateJS is still a minified ES5 library living on a window.createjs namespace. Developers requested both NPM support, as well as module support (RequireJS, CommonJS, etc). The name change in this version-enabled publishing to NPM, however, you will still have to manually link to it, or find a workaround to include it in your ES6/module-based projects. Our next version aims for full module and ES6 support!
- More Getter/SettersTo make the API simpler, many of the getValue/setValue methods have been migrated to getter/setters, such as container.numChildren and Ticker.timingMode. For the time being, all deprecated methods will still work, but throw handy warnings in the developer console.
What Does this Mean for Current and Future Projects?
Will you have to rebuild your entire project? No, of course not… but you may have to tweak how you’re incorporating CreateJS. If you are using the hosted libs from a content delivery network (CDN) you’ll need to update your script paths.
It’s just that simple.
If you are hosting your own versions of the libraries (exporting from AnimateCC) you can find all updated versions of our CreateJS GitHub repository. Once there you’ll be able to grab any versions of the libraries as needed and you should be good to go!
Using Animate CC
Adobe is planning to update Animate to use the latest libraries, but if you want to use the latest libs with content exported from Animate CC today, you can just update the CDN paths manually (and ensure you don’t overwrite the changes when publishing each time). If you use hosted libraries, you can find new versions on the CreateJS GitHub repositories . It is recommended you update all the libraries together, as using older versions with new versions may produce unexpected results.
After changing your CDN paths, Animate content should work as-is with the new libraries, but as always, feel free to log bugs to the EaselJS GitHub if you encounter problems.
You can update to use StageGL by changing the Stage instance in the exported code to StageGL, but note you must be using compatible content (Bitmaps, Sprites, and cached content). Vectors can be set to cacheAsBitmap, however, it may prevent animations from being applied.
var stage = new createjs.Stage("canvas");
var stage = new createjs.StageGL("canvas");
Where Can I Find the Latest Versions?
The best place to look for the latest versions of CreateJS is on GitHub. You’ll find the latest stable version of the libs, but also NEXT versions, which provide relatively stable updates since the last tagged version, and are a good way of using new features and support immediately.
We recommend using the content delivery network (CDN), which provides additional benefits such as caching between websites.
- CreateJS CDN(hosted by Adobe), also the only CDN with the combined libs.
- CDNJS(a createjs combined version has not been updated as of this publication, however EaselJS, TweenJS, PreloadJS, SoundJS are all currently available)
- JSDelivr (updated to 1.0)
We don’t want to reveal everything yet, but with major additions like StageGL in EaselJS and a complete rewrite of TweenJS, it might make sense that our other CreateJS family members get some love too… I mean, it’s only fair. Between some planned refactoring, full ES6 and module support, more filters and effects, and improved Adobe Animate features, we have a lot planned, so stay tuned!
Moving forward, we also want to:
- Aim for a more aggressive and consistent release schedule
- Provide more transparency with production roadmaps and discussion
- Increase our community presence and engage more with developers and content creators
- Trickle out tips, tricks, and content articles on a regular basis
We want to hear from you! We read every comment and tweet out there, and yes, not just the good ones. We are genuinely interested in your feedback and criticism, and welcome your ideas, feature requests, bug reports, and show-and-tell projects. Without this, CreateJS would only be an internal tool for gskinner, and it wouldn’t benefit the countless developers that have been able to build incredible things with it. Don’t be shy. We want to grow and improve our libraries with every release, and we value your help in doing that!
Take CreateJS 1.0 for a spin today.
So pumped to see this integrated with Animate CC! On a side note, is there a place where I can show off a game I wrote with createjs?
@Jacob Feel free to send us a link to your game!
Sweet! Here’s a link to the Google webstore (or just google ‘Boxel Rebound’): https://goo.gl/bUCzGG. Can’t wait to upgrade it with Createjs v1.0!
Good stuff. Do you know when these will be added to the CDNs hosted by DoubleClick and AdWords? Will need those for my banner ads.
Is there an official support channel or forum?
We used to maintain an active support channel, but it was used too much to get help with development. We are pretty active on StackOverflow, so post any questions there. Bugs can be filed on GitHub. Check out this link: http://community.createjs.com
Animate CC + CreateJS <3 .
I’m excited about StageGL! Maybe that can bring back Perlin Noise and Convolution Filters ?
Perlin Noise…hmmmm good idea.
This is still a WIP and we plan on continuing shortly. In the meantime check it out: https://github.com/CreateJS/EaselJS/tree/master/extras/PerlinNoise
Filters are on our list as well however Convolution Filters are not on our short-term list :)
Hi, GREAT JOB ! Do you know when Adobe will include this release to Animate CC ?
Now, Adobe use the “createjs-2015.11.26.min.js”
I experienced a MASSIVE performance drop for dynamic drawing when switching from
to the latest library.
Was this in Chrome? If so, it’s likely you’re seeing issues with the browser. Google introduced some issues in Chrome 65 that greatly reduced performance for canvas. We expect this will be fully resolved in 66.
There should not be any major performance changes in the library itself, but please let us know if you do see something, and can provide an isolated test case. We’d be happy to look into it.
I’ll try and make you an isolated case Grant :)
I only changed the path to the library, Yes it was in Chrome, but working fine with the old one.
Appreciated! StageGL, or Stage?
Stage. i’m recreating some Flash drawing tools.
Click on the icon on the far left. Then click and drag to draw a square.
It’s ofcourse looping and redrawing vector for every frame, with a dotted line. I’ll put up a version with the 1.0 library over the weekend. It can’t redraw fast enough to follow the mouse.
Performance is noticeably choppier, and CPU strain is significantly increased. Try drawing several boxes.
Chrome 65.0.3325.181 on Windows
Even some simple interactions like mouseOver/Out are breaking in 1.0,0, without using StageGL.
Do you have plans for blending modes for CreateJS ie multiply, screen etc?
Yes, blend modes are fully supported in all modern browsers for `Stage`. Due to legacy, they are hidden behind the somewhat unintuitive `compositeOperation` property of `DisplayObject`. For example: `myShape.compositeOperation = “multiply”`.
If you’re using `StageGL`, we’ve also recently added support for blend modes there, though that is not part of v1.0. We’ll be releasing info and a public branch shortly.
Will Adobe be updating Animate to use make use of blending modes?
That’s a question for Adobe, but I certainly hope and expect so.
Webpack has a plugin for importing legacy (gloibal) style scripts.
Hope this helps!