CreateJSの2014年12月12日および2015年5月21日の改訂のまとめ [Edit]
投稿者：野中 文雄 | 投稿日：2015.06.04 | [CreateJS][HTML5][野中ゼミ]CreateJSライブラリは、2014年12月12日に大きく改訂されました。EaselJSに多くの修正が加わり、SoundJSとPreloadJSも大幅に書替えられました。さらに、2015年5月21日に0.0.1の更新が行われました。核となる変更は、正規リリースに近づいています。これらの改訂にもとづく筆者の記事を以下にまとめました。
01 CreateJS 2014/12/12
2014年12月12日付のリリースは、つぎのバージョンのライブラリから成立ちます。
- EaselJS 0.8.0
- TweenJS 0.6.0
- SoundJS 0.6.0
- PreloadJS 0.6.0
01-01 CreateJS 2014/12/12全体
- CreateJS 14/12/12 : getter/setterプロパティを実装する
新たなCreateJSでは、内部的にgetter/setterプロパティを大幅に採入れました。すでにあるプロパティに多くの役立つ機能を加え、あるいはいくつかのメソッドはgetterプロパティにしました。 - CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド
次期バージョン候補(NEXT)にもとづいて書いたリファレンスを、正規バージョンリリースにともない、加筆・補正しました。 - 新しいCreateJSで書くコードはどう変わるのか
2015年2月11日CreateJS勉強会 (第5回)「新CreateJSをコンテンツ制作に活かす」で務めた一席のレジュメです。新たなCreateJSは、内部的な設計が整理され、最適化も進められました。そうした仕組みの中から公開された新しい機能もあります。知っておくとお得なコードや、書き方に注意しなければならない点など、つぎのようなお品書きでご説明しました。- Graphicsクラスでコマンドを使う
- CreateJSのクラスの新たな継承の仕方
- PreloadJSの新しいローダーを使う
- Matrix2Dの行列演算の仕様が変わった
01-02 EaselJS 0.8.0
- EaselJS 0.8.0 : 新たなイベント ー DisplayObject.addedとDisplayObject.removedおよびSprite.change
DisplayObjectインスタンスの親が変わったとき、またスプライトシートのフレームが切り替わるときに新たなイベントが送られます。 - EaselJS 0.8.0: EaselJSの最適化が進められた
EaselJS 0.8では、パフォーマンスを最適化するため、テスト用のフレームワークを採入れました。その結果をもとに、大きく3つの変更が加えられました。 - EaselJS 0.8.0: Pointクラスの実装を見る
EaselJSは、CreateJS Suiteのおおもととなるライブラリです。その中でも備わるプロパティやメソッドが少なくて簡素なPointクラスの実装を見ることは、CreareJSのライブラリを研究するはじめの一歩に適しているでしょう。 - EaselJS 0.8.0: カラフルに光る円のアニメーション
さまざまな色と大きさの円を、それぞれの向きに動かすサンプルです。速さは大きさと比例させました。フィルタで縁をぼかし、重なった色を加算することにより、光のような表現にしています。また、簡単な最適化の手法も加えました。
- EaselJS 0.8.0: extend()メソッドを使った継承に書替えるときに注意すること
EaselJS 0.8.0からextend()メソッドが備わり、CreateJSのクラスの継承の仕組みも改められました。そこで、これまでの継承の仕方で定められたクラスを、この新しい仕組みにどう書替えたらよいか、かいつまんでご説明します。 - EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算
EaselJSライブラリのMatrxi2Dクラスによる座標変換は、おもに変換行列の乗算で表されます。バージョン0.8.0から、多くのメソッドで掛ける順序が変わりました。そこで、Matrix2Dクラスの基本的なメソッドについて、その行列演算をご紹介します。 - EaselJS 0.8.0: 使い回すオブジェクトにプロパティを定める
オブジェクトは、できれば使い回した方がお得です。EaselJS 0.8.0には、そのために使えるプロパティを定め直せるメソッドが加わったり、これまでのメソッドが変わったりしました。そのいくつかを、かいつまんでご説明します。
- EaselJS 0.8.0: Graphicsクラス
EaselJS 0.8.0では、Graphicsオブジェクトに描画するとき、内部的にGraphicsコマンドが用いられることになりました。さらに、Graphicsコマンドオブジェクトも直接扱えるように公開されます。 - EaselJS 0.8.0: Graphics.commandプロパティ
Graphics.commandプロパティは、Graphicsオブジェクトに対してつくったり、加えたりした直近のGraphicsコマンドの参照をもちます。これを用いると、Graphicsコマンドのプロパティで後から描画が動的に変えられます。 - EaselJS 0.8.0: フレームレートを扱う
新たに加わったMovieClip.framerateプロパティを定めると、インスタンスごとにフレームレートが変えられます。また、Ticker.framerateとTicker.intervalプロパティも備わりました。それらをリファレンスとして解説します。 - EaselJS 0.8.0: DisplayPropsクラス
DisplayPropsは、DisplayObjectインスタンスの表示に関わるプロパティ値の計算をまとめて扱う新しいクラスです。これまでは、Matrix2Dクラスの拡張された機能として、表示のためのプロパティを演算するメソッドやプロパティが備えられていました。しかし、EaselJS 0.8.0から、Matrix2Dクラスはもっぱら座標変換を担い、表示のプロパティはDisplayPropsクラスが扱うことになりました。 - EaselJS 0.8.0: 改訂された項目
2014年12月12日付で公開されたEaselJS 0.8.0の改訂された項目について、VERSIONS.txtにもとづきご紹介します。細かい点も含めると数が多いので、この機会にまとめました。 - EaselJS 0.8.0: Rectangleクラス
EaselJS 0.7.1のRectangleクラスには、geomパッケージのクラスの最低限の実装というべきメソッド4つしかありませんでした。EaselJS 0.8.0で、矩形領域の範囲を変えたり、他の矩形領域や座標との関係を調べるメソッドが7つ加わりました。これらについて、簡単にご説明します。
01-03 TweenJS 0.6.0
- TweenJS overhaul: Tweenクラスで相対値を使う
TweenJS 0.6.0のTweenクラスのメソッドでは、相対値でトゥイーンすることはできません。けれど、相対値を使うためのプラグインが、テスト用にCreateJSのGitHubにアップロードされました。
01-04 PreloadJS 0.6.0
- PreloadJS 0.6.0: 読込みにwithCredentialsとheadersを定める
インターネットの性質から、リクエストに手を加えたり、セキュリティフラグを立てなければならないこともあります。そこで、低レベルのリクエストをカスタマイズできるように、ロード項目に新たにwithCredentialsとheadersというふたつのプロパティが加わりました。 - PreloadJS 0.6.0: 新たな個別ローダーの仕組み
PreloadJSはこれまでブラウザごとの違いやくせをうまく扱うため、コードがあちこち複雑になってしまいました。新たなリリースでは、この複雑さをなくすため、内部的な仕組みを改めています。 - PreloadJS 0.6.0: ImageLoaderクラス
ImageLoaderクラスは、イメージファイルを読込みます。コンストラクタで、読込むファイルとXML HTTP Requestsの要否を定めます。そして、読込み始めるには、ImageLoader.load()メソッドを呼出さなければなりません。 - PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す
PreloadJS 0.6.0から、コンテンツの形式に応じたローダをクラスとして備えました。イメージファイルはImageLoaderクラスで読込みます。読込むのが初めからイメージとわかっているときは、LoadQueueよりImageLoaderクラスを使った方がお得です。そこで、古いバージョンで書いたコードを、ImageLoaderクラスで書替えてみます。
02 CreateJS 2015/05/21
2015年5月21日付のリリースは、つぎのバージョンのライブラリから成立ちます。
- EaselJS 0.8.1
- TweenJS 0.6.1
- SoundJS 0.6.1
- PreloadJS 0.6.1
02-01 CreateJS 2015/05/21全体
- CreateJS 15/05/21: 0.0.1のライブラリアップデート
CreateJS Blogの2015年5月28日付記事「New versions of CreateJS released!」で、CreateJSのライブラリのバージョンをそれぞれ0.0.1ずつアップデートしたことが公開されました。EaselJSが0.8.1に、他のTweenJSとSoundJS 、およびPreloadJSの3ライブラリはいずれも0.6.1に改められています。blog記事にもとづいて、おもな改善点をご紹介します。
02-02 EaselJS 0.8.1
- EaselJS 0.8.1: MovieClipオブジェクトの再生の長さ・フレーム数を調べる
EaselJS 0.8.1のMovieClipクラスには、再生の尺つまり再生にかかる長さを示すプロパティが新たに加わりました。MovieClip.durationとMovieClip.totalFramesがそのプロパティで、いずれも再生し終えるまでのミリ秒数またはDisplayObject.tickイベント数を示します。 - EaselJS 0.8.1: 破線を描く ー Graphics.setStrokeDash()メソッド
EaselJS 0.8.1に備わったGraphics.setStrokeDash()メソッドは、描画する線に破線のスタイルが定められます。第1引数の配列には数値エレメントをふたつ加え、初めが線の長さ、後が余白の間隔を定めます。第2引数の数値で、描き始める位置が変えられます。他のメソッドの使い方は、実線と同じです。
- EaselJS 0.8.1: 改訂された項目
2015年5月21日付で、EaselJS 0.8.1が公開されました。改訂された項目について、VERSIONS.txtにもとづきご紹介します。
