CreateJS 1.0が公式アナウンスされた

CreateJS 1.0は2017年9月にリリースされました。その正式アナウンスが、2月12日付CreateJS Blogの記事「Announcing CreateJS 1.0」(サウンドあり)として公開されたので、その中身に沿ってご紹介しましょう。

[追記: 2018年2月13日] 1月26日付でCreateJS Blogに公開された記事が事情により非公開になったため、この記事も一旦削除しました。2月12日のBlog再公開を受けて改めての投稿となります。

はじめに

このリリースで、ライブラリのバージョンはすべて1.0に揃いました。9月のリリースから今回のblogのアナウンスまで間が開いたのは、CDNの準備が整うのを待ったためだということです。また、前回の2015年11月26日のマイナーリリースから2年近くが経ちました。新たな機能が加えられたほか、さまざまな改善やバグの修正、さらにはTweenJSのようにソースから大幅に書き改められたライブラリもあります。1.0で費やした時間は、このあとの2.0に活かされるとのことです。

おもにどこが変わったか

min版のバージョン名が簡潔に

各ライブラリも統合ライブラリも、min版からはバージョン番号が除かれました。要望の多かった変更で、JSDelivrやCDNJSなどのCDNで対応しました。CeateJS公式CDNも含めて、統合版ライブラリ名は簡潔なcreatejs.jsです。

StageGLクラスが備わった

新たな導入されたStageGLクラスは、WebGLを用いてEaselJSコンテンツやフィルタ効果などを高速に描画する柔軟なレンダリングパイプラインです。それまでWebGL対応のクラスとして備わっていたSpriteStageに替わり、制限はより少なく、はるかに高いパフォーマンスが得られます。EaselJSライブラリに標準で含まれ、ビットマップやスプライト、キャッシュされたコンテンツの描画を簡単にWebGLに対応させられるのです。詳しくは「CreateJS: StageGL ー EaselJSのWebGL対応が新たに」および「CreateJS 1.0.0のStageGLでStageを置き替える」をお読みください。

TweenJSライブラリが最適化された

TweenJSライブラリは再構築して高速化し、プラグインモデルもより柔軟な仕組みに改めました。プラグインもすべて書き直し、新たに加えられたものもあります。標準で備わったプラグインはつぎのとおりです。プラグインの使い方については、「CreateJS: TweenJS 1.0.0のプラグインを使う」をお読みください。

• ColorPlugin
• RelativePlugin
• RotationPlugin
• CSSPlugin

FontLoaderクラスが加わった

PreloadJSライブラリにFontLoaderクラスが加えられました。2015年11月からベータブランチとして開発されたクラスが、正式にPreloadJSの標準として備わったのです。Google FontsやCSSフォントなどのフォントファイルが読み込めます。FontLoaderクラスについて詳しくは、「PreloadJS 1.0.0: FontLoader()コンストラクタ」をご参照ください。また、jsdo.itにコードサンプルとして「PreloadJS 1.0.0: Loading Google font」を掲げました。

NPMの対応はまだ手動で

CreateJSはまだ、window.createjsに名前空間をもつECMAScript 5のmin版ライブラリです。開発者からは、NPMおよびモジュール(RequireJSやCommonJSなど)への対応が望まれています。今回バージョンの名前を変えたことで、NPMにパブリッシュすることはできるようになりました。ただし、手動でリンクするか、ECMAScript 6のモジュールにもとづくプロジェクトに含めなければなりません。つぎのバージョンでは、完全なモジュールとECMAScript 6に対応させます。

getterとsetterを大幅に増やした

APIを使いやすくするため、getValue()やsetValue()のようなメソッドの多くを、getterとsetterに改めました。Container.numChildrenやTicker.timingModeのように、プロパティとして参照できるということです。メソッドによる呼び出しが推奨されない場合も、とりあえず使うことはでき、コンソールに警告が示されるようになりました。

これまでのプロジェクトをどう書き直せばよいか

2015年11月26日版のCreateJSライブラリを1.0に改めるには、読み込む<script>要素のsrc属性のパスを書き替えるだけです。CDNを使っていた場合は、つぎのようなURLになっているでしょう。

<script src="http://code.createjs.com/createjs-2015.11.26.min.js"></script>

これを1.0の新たなCDNのURLに改めます(公式CDNの場合)。

<script src='https://code.createjs.com/1.0.0/createjs.min.js'></script>

CDNを使うといろいろとお得です。CreateJSライブラリをホストからプロジェクトに読み込めば、ダウンロードが速く、ライブラリのバージョンが同じなら異なるサイト間でもキャッシュされます。帯域幅を減らすことができ、ページのロードが速くなるということです。

Animate CCからパブリッシュした場合など、CreateJSライブラリの特定バージョンをダウンロードして使っているときも、CreateJSのGitHubリポジトリから必要なバージョンを得て、差し替えればよいでしょう。

Animate CCのコンテンツにCreateJS 1.0を使う

Animate CC 2018(18.0.1)のHTML5 Canvasコンテンツは、まだCreateJSの2015年11月26日版を使っています。つぎのアップデートでは最新版に改められる予定です。今のところは、パブリッシュされたHTMLドキュメントの<script>要素で、src属性のパスを手で書き替えなければなりません(パブリッシュし直すと上書きされますので、ファイル名を変えるなどしておくとよいでしょう)。なお、ライブラリのバージョンはすべて揃えてください。異なるバージョンのライブラリを組み合わせると、予期しない問題が起こるかもしれません。統合版ライブラリ1.0を使うのが確実でしょう。

2015年11月26日版との互換性は高いはずです。けれど、問題が生じたときは、CreateJSのGitHubにバグを登録してください。

Animate CCのコンテンツでStageGLを使うこともできます。その場合、パブリッシュされたHTMLドキュメントのJavaScriptコードで、コンストラクタStage()をStageGL()に書き替えます。また、WebGLはラスターグラフィックス(ビットマップ画像)を描くようにつくられていますので、すべてビットマップを使うか、ベクターグラフィックスはキャッシュしなければなりません。詳しくは、「CreateJS 1.0.0のStageGLでStageを置き替える」をお読みください。

CreateJS 1.0をどこからダウンロードするか

CreateJSのGitHubからは正規リリースされた最新のバージョンだけでなく、開発中の次期バージョン(NEXT)もダウンロードして使うことができます。つぎのバージョンに備わる新たな機能が、いち早く試せるでしょう。

手軽に使えて便利なのがCDNのライブラリです。異なるサイトでもキャッシュが働くので、読み込みの負荷が減らせます。ライブラリをサポートするのはつぎのサイトです。

• CreateJS CDN
  • Adobeによるホスト
• CDNJS
  • EaselJS
  • TweenJS
  • SoundJS
  • PreloadJS
• JSDelivr

これから

今後の方針としてつぎのようなことが上げられています。

• 積極的で一貫したリリースを目指す
• 開発のロードマップや議論などをより広く明らかにする
• コミュニティを活性化して開発者やクリエーターとの関わりを深める
• テクニックやコツおよびコンテンツについての記事を定期的に公開する

【参考】CreateJS 1.0.0で何が変わったか

2017年12月7日に催されたCreateJS勉強会にて「CreateJS 1.0.0で何が変わったか」というお題で、30分間つぎのような項目についてお話ししました。以下にYouTube録画もありますので、興味がある方はご覧ください。

1. StageGLクラスでStageを置き替えてWebGLが使えるようにするには
2. パーティクルのアニメーションをStageGLで動かす
3. TweenJSのプラグインを使う
4. FontLoaderクラスでwebフォントを読み込む

>> YouTubeへ *49:08で映像が一部途切れています。