サイトトップ

Director Flash 書籍 業務内容 プロフィール
 
 
近日開講講座
11月26日木曜日HTML5 + CreateJSによるリッチコンテンツ作成講座
オンラインビデオトレーニング: lynda.com日本語版
CreateJS Style Book WebクリエイターのためのCreateJSスタイルブック Away3D TypeScript in gihyo.jp gihyo.jp連載
「Away3D TypeScriptではじめる3次元表現」
■Twitter: @FumioNonaka / Facebook Page: CreateJS / Away3D

CreateJS勉強会 (第6回)「最新のCreateJSを取り巻く環境にキャッチアップする」

CreateJSのアップデートとFlash Professional CC 2015のHTML5 Canvasパブリッシュ

図005

2015年6月にメジャーアップデートされたFlash Professional CC 2015のHTML5 Canvasのパブリッシュと2015年5月21日のCreateJSアップデートの新しい機能や、2014年12月12日のバージョンアップの中であまり触れられてこなかったり、ドキュメントからはわかりにくい項目について、少し掘り下げて解説する。


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■[パブリッシュ設定]ダイアログボック
図001

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

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

図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.durationMovieClip.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.durationMovieClip.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参照)。

  1. function drawDashRect(_graphics, thickness, color, _rect, segments, offset) {
  2.   _graphics.beginStroke(color)
  3.   .setStrokeDash(segments, offset)
  4.   .setStrokeStyle(thickness)
  5.   .drawRect(_rect.x, _rect.y, _rect.width, _rect.height);
  6. }

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を使う」の以下の解説を参照。

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

なお、継承の仕方が変わったことについては、「新しいCreateJSで書くコードはどう変わるのか」の02「CreateJSのクラスの新たな継承の仕方」および「CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド」をお読みいただきたい。

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」で正規公開された。



作成者: 野中文雄
更新日: 2015年9月20日 最新情報に[追記]。
作成日: 2015年9月5日
ドラフト作成: 2015年9月4日


Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.