1.0.0で何が変わったかお品書きStageGLクラスでStageを置き替えてWebGLが使えるようにするにはパーティクルのアニメーションをStageGLで動かすTweenJSのプラグインを使うFontLoaderクラスでwebフォントを読み込むCreateJSがついに正規バージョン1.0.0としてリリースされた。新たに備わった機能として大きいのがWebGLへの対応だろう。それ以外の新機能はどれも粒が小さい。正規版のリリースとして、最適化や拡張性、安定性など、内部的な改善に力が注がれたものと考えられる。1.0.0で何が変わったのかを紹介したい。本稿の一席は29:25〜。49:08で映像が一部途切れている。1.0.0のStageGLでStageを置き替える」ときの基本からご紹介する。ドラッグ&ドロップするShapeオブジェクトの作例(サンプル001)を、StageからStageGLクラスに置き替えてみよう。ステージの色はグレーがデフォルトコンストラクタStage()の呼び出しはStageGL()に替える。ステージの色はグレーがデフォルトになる。変えたいときは、StageGL.setClearColor()メソッドにカラー値を渡す(整数値でもよい。カラー名は使えない)。6にもとづくこととする。Shapeオブジェクトはキャッシュするつぎに、WebGLはラスターグラフィックス(ビットマップ画像)とポリゴンメッシュを描くようにつくられている。Shapeインスタンスはベクター形式のデータなので、ラスタライズするためにはキャッシュしなければならない。これで、Shapeオブジェクトを使った簡単なコンテンツなら、StageGLで動かせるようになる(サンプル002)。Shapeオブジェクトに線を加えて描いた場合には、キャッシュ領域に線幅も含めなければならない。使える機能と使えない機能フィルタの多くは使える。つぎのサンプル003の画像はBlurFilterでぼかし、ドラッグする軌跡にAlphaMaskFilterを加えることでくっきりした画像が描き出される。実際に試したところでは、ColorMatrixFilterクラスも動いた。(埋め込みではcross-originの制限がかかるため)DisplayObject.maskプロパティにShapeインスタンスを定めても、StageGLではマスクがかからない(サンプル004の初期設定はStage)。StageGLDisplayObject.compositeOperationプロパティは、表示オブジェクト(DisplayObject)の合成とクリッピングを操作する。設定値の中でlighterは、重なりのカラー値を加算して明るくする。多くの表現で使われる(サンプル005)。StageGLではこの効果が働かない(サンプル006の初期設定はStage)。パーティクルのアニメーションをStageGLで動かす最近、CodePenにCreateJSがアカウントを設けた。list」をStageGLに合わせて書き改めている。パーティクルのアニメーションをStageGLで動かす」参照)。StageをStageGLに替えてShapeオブジェクトはキャッシュするまず、StageはStageGLに替えて、StageGL.setClearColor()メソッドで背景色を定める。createjs.StageGL(canvasElement);stage.setClearColor(color);}つぎに、パーティクルのShapeオブジェクトはキャッシュする。これでパーティクルはStageGLのもとで動く(サンプル007)。キャッシュしたShapeオブジェクトの動きは、もとのStageにおけるアニメーションより遅い。ShapeからBitmapオブジェクトをつくるキャッシュで済まさず、パーティクルをビットマップでつくらないと、WebGLの速さが活かせない。DisplayObject.cacheCanvasプロパティで、キャッシュしたイメージをもったHTMLCanvasElementが得られるので、Bitmap()コンストラクタに渡せばビットマップのオブジェクトがつくれる。<canvas>要素はひとつあれば、Bitmapインスタンスはいくつでもできる。stageHeight);}}パーティクルのクラス(Particle)は、ShapeでなくContainerクラスを継承させる。Bitmapインスタンス(image)は、オブジェクトの子に加えた。これで、パーティクルの数を10倍に増やしても、滑らかにアニメーションする(サンプル008)。パーティクルの残像を描くCodePenの作例の方が、パーティクルは密になっているように見える。パーティクルの残像が加えられていたためだ。StageGL()コンストラクタに渡す引数オブジェクトで、preserveBufferとantialiasのプロパティをtrueに定める。そのうえでStage.autoClearプロパティをfalseにすると、Canvasへの描画は消えずにそのまま残る(図002)。false;}図002■Canvasの描画が消えずに残るつぎに、Canvasと同じサイズのShapeインスタンスを重ね、背景と同じ色に薄いアルファ(DisplayObject.alphaプロパティ)を与える。このオブジェクトは再描画(Ticker.tickイベント)のたびに塗り重なるので、古いパーティクルから徐々に消えてゆく。これで、残像の効果が加わった。0.15;}パーティクルのアニメーションそのものはこれででき上がりだ。パーティクルのアニメーションをStageGLで動かす」参照)。TweenJSのプラグインを使うつぎのJavaScriptコードで、円形のShapeオブジェクトがTweenクラスにより左右にトゥイーンアニメーションする(図003)。Tween()コンストラクタに渡すオプションオブジェクトのloopプロパティの値が回数を示す数値に変わったことに注意。繰り返すときには-1を定める。1.0.0アップデート」参照)。プラグインはダウンロードしたTweenJSライブラリの「pulgins」フォルダに納められている(図004)。その中のSamplePluginを試してみる。src="lib/SamplePlugin.js"></script>図004■TweenJSライブラリに含まれるプラグインのJavaScritpファイル静的メソッドSamplePlugin.install()でプラグインをインストールするだけで、x座標の動きに応じてy座標がsin関数で上下に揺れる。SamplePluginクラスの応用性は高くない。1.0.0のプラグインを使う」参照)。ColorPluginクラスを使うColorPluginクラスは、CSSのカラーの定めにしたがった文字列の値をトゥイーンする。src="lib/ColorPlugin.js"></script>プラグインを静的メソッドColorPlugin.install()でインストールする。引数は色をトゥイーンするモードで、デフォルト値は'rgb'で、今回は'hsl'とした。createjs.ColorPlugin.install('hsl');トゥイーンしたいのは、円形のShapeインスタンスの塗り色だ。そのためには、円の描画そのものを繰り返さなければならないようにみえる。radius);Graphics.commandプロパティを使えばGraphics.Fillコマンドオブジェクトの参照が得られるので、Graphics.Fill.styleプロパティのカラー値をhsl()のかたちでトゥイーンすればよい。これで、円が波のように揺れ動きつつ色を変えるアニメーションになる(サンプル010)。FontLoaderクラスでwebフォントを読み込む新たに備わったFontLoaderクラスは、フォントファイルやCSS定義およびCSSパスを読み込む。フォントそのものをプリロードするのではなく、CSS定義をつくって、フォントファイルやCSSパスを扱う。FontLoader()コンストラクタには、読み込む項目の内容が定められたオブジェクトを渡す。つぎのコードは、GoogleフォントRobotoを読み込んで、要素(element)に適用する(サンプル011)。YouTube映像を追加。