01 Flash Pro CC 2015のHTML5 Canvasパブリッシュの改善

01-01 書出しの最適化

Flash Professional CCは、HTML5 Canvasドキュメントの[ライブラリ]に含まれる以下の項目は書出されない(CC 2014の2015年2月アップデート)。

• タイムラインで使われていないシンボルやサウンド、ビットマップなど
• ガイドレイヤーに含まれる素材
• 非表示レイヤーに含まれる素材([非表示レイヤーを含める]オプションがオフのとき)
• グラフィックシンボルの中で使われていないフレームの素材

01-02 ビットマップをHTML5 Canvasのスプライトシートとして書き出し

HTML5 Canvasドキュメントの中のビットマップすべてを、スプライトシートにまとめて書出せる。サーバーへのリクエスト数が減るので、パフォーマンスの向上に役立つ。[パブリッシュ設定]に加わった[すべてのビットマップとスプライトシートを書き出し]のオプションはデフォルトがオンで、ドキュメント内のすべてのビットマップがスプライトシートとして書出される(図001)。スプライトシートの最大の大きさ(幅と高さ)も定められる。なお、オプションは英語版では"Export bitmaps as sprite sheet"なので、「すべてのビットマップをスプライトシートとして書き出し」と訳すべきだった。

図001■[パブリッシュ設定]ダイアログボック

[ライブラリ]からタイムラインで使ったビットマップがスプライトシートとして書き出される(図002)。併せて出力されるJSONファイルにもとづいて、EaselJSがビットマップを切り出す。なお、ローカルではJSONファイルは読み込めないことに注意(XMLHttpRequestによる)。Flash Professional CC 2015は、[プレビュー]でローカルホストの設定をしてくれる。

図002■[ライブラリ]のビットマップがスプライトシートとして書き出される

01-03 CreateJS 2015/05/21ライブラリに対応

2015年9月4日現在の最新ライブラリに対応。CDNもホストされる。

• EaselJS 0.8.1
• TweenJS 0.6.1
• SoundJS 0.6.1
• PreloadJS 0.6.1

02 EaselJS 0.8.1で加わったちょっと便利な機能

02-01 MovieClipオブジェクトの再生の長さ・フレーム数を調べる

MovieClipクラスのプロパティで直截的に総フレーム数が調べられるようになった。

• EaselJS 0.8.1 & TweenJS 0.6.1
  MovieClip.durationとMovieClip.totalFramesプロパティ
• EaselJS 0.8.0 & TweenJS 0.6.0以前
  MovieClip.timeline.duration

これまでのEaselJSではMovieClip.timelineプロパティでTweenJSモジュールのTimelineオブジェクトの参照を得て、Timeline.durationプロパティからそうフレーム数を調べなければならなかった。ライブラリが分かれ、Timeline.durationプロパティにもミリ秒とtickのモードがあるため見つけにくい(「EaselJS 0.8.0: Flash Pro CCでパブリッシュしたMovieClipオブジェクトの総フレーム数を参照する」参照)。

たとえば、つぎのスクリプトをMovieClipインスタンス(my_mc)に定めると、アニメーションは一度だけ再生される。

my_mc.addEventListener("tick", playOnce); function playOnce(eventObject) {   if (my_mc.currentFrame >= my_mc.totalFrames - 1) {     my_mc.stop();     my_mc.removeEventListener("tick", playOnce);   } }

MovieClip.durationとMovieClip.totalFramesプロパティの実装は、MovieClip.timeline.durationプロパティの値を調べて返している(読み取り専用)。具体的には、つぎのようにふたつのプロパティのgetterとして定められたメソッドMovieClip.getDuration()が調べた値を返す。

Object.defineProperties(MovieClip.prototype, {   totalFrames: {get: MovieClip.prototype.getDuration},   duration: {get: MovieClip.prototype.getDuration} }); MovieClip.prototype.getDuration = function() {   return this.timeline.duration; };

02-02 破線を描く ー Graphics.setStrokeDash()メソッド

新たに備わったGraphics.setStrokeDash()メソッドで、描画する線に破線のスタイルが定められる。

サンプル001■EaselJS 0.8.1: Range selection interface - marching ants

【構文】
Graphicsオブジェクト.setStrokeDash([線の長さ, 余白の長さ], 書き始めの位置)

つぎの関数(drawDashRect())は、第1引数(_graphics)のGraphicsオブジェクトに第2引数以降の設定で破線の矩形を描く。なお、第5引数(segments)は、破線のスタイルを定めた数値エレメントふたつの配列とする(前掲サンプル1参照)。

function drawDashRect(_graphics, thickness, color, _rect, segments, offset) {   _graphics.beginStroke(color)   .setStrokeDash(segments, offset)   .setStrokeStyle(thickness)   .drawRect(_rect.x, _rect.y, _rect.width, _rect.height); }

03 compositeOperationを使う

新しい技術ではないものの、最近CreateJSの中の人が作例を公開している。具体例を示されないと使い方がわかりにくい機能なので、この機会に紹介しておくことにする。なお、定める値については、MDN「CanvasRenderingContext2D.globalCompositeOperation」参照

03-01 DisplayObject.compositeOperationプロパティを"lighter"に定める

DisplayObject.compositeOperationプロパティを"lighter"に定める作例は、これまでも多く見受けられた。カラー値が加算されるので、重なるほどに明るくなる。

サンプル002■EaselJS 0.8.0: Particles

サンプル002のコードについては、gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」の以下の解説を参照。

25. 楕円軌道に残像を描きながら回るパーティクル
26. パーティクルを使い回しながらさまざまな楕円軌道で回す
27. ランダムな楕円軌道を描くパーティクルの仕上げ

03-02 DisplayObject.updateCache()メソッドに"destination-out"を渡す

"destination-out"は、描き加えるイメージを透明とし、もとのイメージに重なる部分は除く。つまり、まさに消しゴムの描画になる。DisplayObject.cache()メソッドでキャッシュした領域をDisplayObject.updateCache()メソッドで描きなおすとき、その引数にcompositeOperationの値が渡せる(引数がないとすべてを消してから描きなおす)。

サンプル003■EaselJS 0.8.1: Draw/erase example

サンプル003のコードについては、「鉛筆と消しゴムによる描画」の解説を参照。

03-03 DisplayObject.compositeOperationプロパティを"destination-in"に定める

"destination-in"は"destination-out"と同じくもとのイメージに重なる部分のみを対象とし、ただし新たなイメージをその上に描き加える。そして、TextクラスもDisplayObjectのサブクラスなので、DisplayObject.compositeOperationプロパティが定められる。

サンプル004■EaselJS 0.8.1: Drawing over text - DisplayObject.compositeOperation property

最新情報

gskinner.comがlabを立ち上げ中。来週をめどにCreateJSの作例を掲げたlabサイトが公開される(URLを伝えることはGrant Skinner氏より了承を得ている。ただし、サイトの内容については、正規公開前であることにご注意いただきたいとのこと)。

[追記] 2015年9月9日付blog記事「The Lab: Experiments From the gskinner Team」で正規公開された。