サイトトップ
Director Flash 書籍 業務内容 プロフィール
 
 
近日開講講座
2/24(火)JavaScriptインタラクティブアニメーション講座
3/27(金曜)HTML5 + CreateJSによるリッチコンテンツ作成講座 		CreateJS Style Book WebクリエイターのためのCreateJSスタイルブック Away3D TypeScript in gihyo.jp gihyo.jp連載
「Away3D TypeScriptではじめる3次元表現」
■Twitter: @FumioNonaka / Facebook Page: CreateJS

CreateJS勉強会 (第5回)「新CreateJSをコンテンツ制作に活かす」

新しいCreateJSで書くコードはどう変わるのか

図005

01 Graphicsクラスに新たに備わったコマンドオブジェクト

Graphicsクラスにコマンドオブジェクトをつくるクラスが新たに備わった。

01-01 EaselJSのGraphicsクラスとCanvasの描画の違い

EaselJSはCanvasに描画する。しかし、そのためのGraphicsクラスのメソッドは直感的に描けるよう設計されている。Canvasのメソッドを使った場合との違いを確かめておこう。線と塗りのついた円を描いてみる(図002)。

図001■Canvasに線と塗りのついた円を描く
図001

Graphicsクラスのメソッドで円を描くのは、FlashやFireworksでツールやプロパティを使って操作するのは同じ手順になる。

    Graphicsクラスのメソッドで円を描く手順
  1. Graphics.setStrokeStyle()
    • 線の太さを決める
  2. Graphics.beginStroke()
    • 線のカラーを選ぶ
  3. Graphics.beginFill()
    • 塗りのカラーを選ぶ
  4. Graphics.drawCircle()
    • 定められた線と塗りで円を描く

EaselJSのGraphicsクラスのメソッドで円を描くスクリプトは、以下にまとめたコード001のとおりだ。つぎに抜書きした円を描く関数(drawCircle())は。前述の手順どおりに処理している(第11〜14行目)。

  1. function drawCircle(_graphics, x, y, radius, fillColor) {
  2.   _graphics.setStrokeStyle(1);
  3.   _graphics.beginStroke("black");
  4.   _graphics.beginFill(fillColor);
  5.   _graphics.drawCircle(x, y, radius);
  6. }
コード001■Graphicsクラスのメソッドで円を描く
  1. var stage;
  2. function initialize(){
  3.   var canvas = document.getElementById("myCanvas");
  4.   var shape = new createjs.Shape();
  5.   stage = new createjs.Stage(canvas);
  6.   stage.addChild(shape);
  7.   drawCircle(shape.graphics, canvas.width / 2, canvas.height / 2, 50, "cyan");
  8.   stage.update();
  9. }
  10. function drawCircle(_graphics, x, y, radius, fillColor) {
  11.   _graphics.setStrokeStyle(1);
  12.   _graphics.beginStroke("black");
  13.   _graphics.beginFill(fillColor);
  14.   _graphics.drawCircle(x, y, radius);
  15. }

Canvasのメソッドでは、目に見えないパスでかたちをつくったうえで、そのパスにもとづいて塗りや線を描く(HTML5.JP「さまざまな図形を描く」参照)。ことさら複雑ではないものの、直感的な手順とはいえない(第7〜11行目)。

    Canvasのメソッドで円を描く手順
  1. beginPath()
    • パスを始める
  2. fillStyle()
    • 塗りのカラーを定める
  3. arc()
    • 円形のパスをつくる
  4. fill()
    • パスに塗りを描く
  5. stroke()
    • パスに線を描く
  1. function drawCircle(context, x, y, radius, fillColor) {
  2.   context.beginPath();
  3.   context.fillStyle = fillColor;
  4.   context.arc(x, y, radius, 0, Math.PI*2, false);
  5.   context.fill();
  6.   context.stroke();
  7. }
コード002■Canvasのメソッドで円を描く
  1. function initialize(){
  2.   var canvas = document.getElementById("myCanvas");
  3.   var context2D = canvas.getContext("2d");
  4.   drawCircle(context2D, canvas.width / 2, canvas.height / 2, 50, "cyan");
  5. }
  6. function drawCircle(context, x, y, radius, fillColor) {
  7.   context.beginPath();
  8.   context.fillStyle = fillColor;
  9.   context.arc(x, y, radius, 0, Math.PI*2, false);
  10.   context.fill();
  11.   context.stroke();
  12. }

01-02 Graphicsクラスのコマンドオブジェクトを使う

GraphicsクラスからCanvasに与える指示が、Graphicsコマンドとしてクラスに定められた(図002)。これらの新たなGraphicsコマンドオブジェクトを用いて描画することもできる(「EaselJS 0.8.0: Graphicsクラス」参照)。Graphicsコマンドオブジェクトは、Graphics.append()メソッドでキューに加える。

図002■Graphicsクラスに備わったコマンドをつくるクラス
図002

Graphicsコマンドを用いると、Canvasのメソッドに沿った手順で描画することになる(コード003)。

    Graphicsコマンドで円を描く手順
  1. Graphics.beginCmd
    • パスを始める
  2. Graphics.Circle()
    • 円形のパスをつくる
  3. Graphics.Fill()
    • パスにカラーの塗りを描く
  4. Graphics.Stroke()
    • パスにカラーの線を描く
コード003■Graphicsクラスのコマンドオブジェクトで円を描く
  1. function drawCircle(_graphics, x, y, radius, fillColor) {
  2.   _graphics.append(createjs.Graphics.beginCmd);
  3.   _graphics.append(new createjs.Graphics.Circle(x, y, radius));
  4.   _graphics.append(new createjs.Graphics.Fill(fillColor));
  5.   _graphics.append(new createjs.Graphics.Stroke("black"));
  6. }

Graphicsコマンドで行った描画は、コマンドのプロパティにより後から変えられる。たとえば、描いた円の半径と塗りは、それぞれGraphics.Circle.radiusとGraphics.Fill.styleプロパティで描き変えられる。

  1. var circle;
  2. var fill;
  3. function initialize(){
  1.   shape.addEventListener("click", changeCircle);
  1. }
  2. function drawCircle(_graphics, x, y, radius, fillColor) {
  1.   circle = new createjs.Graphics.Circle(x, y, radius);
  1.   fill = new createjs.Graphics.Fill(fillColor)
  1. }
  2. function changeCircle(eventObject) {
  3.   var radius = Math.random() * 50 + 20;
  4.   var color = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF));
  5.   circle.radius = radius;
  6.   fill.style = color;
  7.   stage.update();
  8. }

つぎのサンプル001は、円をクリックすると半径と塗りがランダムに変わる。まとめたスクリプトは以下のコード004のとおりだ。

サンプル001■EaselJS 0.8.0: Using Graphics commands

コード004■インスタンスへのクリックでGraphicsコマンドの設定をランダムに変えて描き直す
  1. var stage;
  2. var circle;
  3. var fill;
  4. function initialize(){
  5.   var canvas = document.getElementById("myCanvas");
  6.   var shape = new createjs.Shape();
  7.   stage = new createjs.Stage(canvas);
  8.   stage.addChild(shape);
  9.   drawCircle(shape.graphics, canvas.width / 2, canvas.height / 2, 50, "cyan");
  10.   shape.addEventListener("click", changeCircle);
  11.   stage.update();
  12. }
  13. function drawCircle(_graphics, x, y, radius, fillColor) {
  14.   _graphics.append(createjs.Graphics.beginCmd);
  15.   circle = new createjs.Graphics.Circle(x, y, radius);
  16.   _graphics.append(circle);
  17.   fill = new createjs.Graphics.Fill(fillColor)
  18.   _graphics.append(fill);
  19.   _graphics.append(new createjs.Graphics.Stroke("black"));
  20. }
  21. function changeCircle(eventObject) {
  22.   var radius = Math.random() * 50 + 20;
  23.   var color = createjs.Graphics.getRGB(Math.floor(Math.random() * 0xFFFFFF));
  24.   circle.radius = radius;
  25.   fill.style = color;
  26.   stage.update();
  27. }

Graphicsコマンドのクラスを使わなくても、メソッドの呼出しによりつくられた直近のGraphicsコマンドオブジェクトはGraphics.commandプロパティで参照が得られる(「EaselJS 0.8.0: Graphics.commandプロパティ」参照)。すると、その参照したコマンドのプロパティが操作できるようになる(コード005)。前掲サンプル001を書替えたのが、以下のサンプル002だ。

コード005■Graphics.commandプロパティでコマンドオブジェクトを得る
  1. function drawCircle(_graphics, x, y, radius, fillColor) {
  2.   _graphics.setStrokeStyle(1);
  3.   _graphics.beginStroke("black");
  4.   fill = _graphics.beginFill(fillColor).command;
      // _graphics.beginFill(fillColor);
      // fill = _graphics.command;
  5.   circle = _graphics.drawCircle(x, y, radius).command;
  6. }

サンプル002■EaselJS 0.8.0: Using the Graphics.command property


02 CreateJSのクラスの新たな継承の仕方

「CreateJS 14/12/12: 新たな継承の仕組みを定めるextend()とpromote()メソッド」が備わり、CreateJSのクラスはすべてこの仕組みにしたがって書直された。

これまでのCreateJSのクラスは、Function.prototypeプロパティにスーパークラスのオブジェクトを与えて継承した。また、コンストラクタは、クラスのinitialize()メソッドを呼出すのが決まりだった。

function スーパークラス() {
  this.initialize();
}

function サブクラス() {
  // スーパークラスのinitialize()メソッドを呼ぶ
  // インスタンスの初期化
}
サブクラス.prototype = new スーパークラス();

新たなCreateJSのクラスは、extend()メソッドでスーパークラスを継承する。また、promote()メソッドが、オーバーライドされたスーパークラスのメソッドをサブクラスに定め直す。呼出すメソッドは「スーパークラス_メソッド()」で参照され、コンストラクタは「スーパークラス_constructor()」として定められる。

function サブクラス() {
  this.スーパークラス_constructor()   // promote()で備わる
  // インスタンスの初期化
}
createjs.extend(サブクラス, スーパークラス);

createjs.promote(サブクラス, "スーパークラス名");


03 PreloadJSの新しいローダーを使う

PreloadJSに新しくローダーのクラスが備わった。読込むコンテンツに応じて、用いるローダーが変わる。

03-01 LoadQueueクラスは引続き使える

これまでは、LoadQueueクラスを用いてさまざまなファイルが読込めた。たとえば、「ドラッグする軌跡でアルファマスクを描く」は、画像ファイルをロードしている(図003)。画像を読込む処理は、以下に抜書きしたとおりだ。読込むファイルのオブジェクト(file)にdataプロパティを与えると、AbstractLoader.fileloadイベントのリスナー(draw())に引数として渡されるイベントオブジェクト(eventObject)からitemプロパティをとおして参照できる。

図003■マウスポインタの軌跡が滑らかな曲線でアルファマスクに描かれる
図003

function initialize() {
  var canvasElement = document.getElementById("myCanvas");
  var canvasSize = new createjs.Point(canvasElement.width, canvasElement.height);
  var file = {
    src: "images/image.png",
    data: canvasSize
  };

  var loader = new createjs.LoadQueue(false);
  loader.addEventListener("fileload", draw);
  loader.loadFile(file);

}

function draw(eventObject) {

  var canvasSize = eventObject.item.data;

}

03-02 イメージはImageLoaderクラスで読込むのがお得

LoadQueueクラスは、読込むデータを調べて、内部的に実際の仕事はローダーに振り分ける。その数多くのローダーのクラスが、直に使うこともできるように整えられた。そして、イメージは「PreloadJS 0.6.0: ImageLoaderクラス」が引受ける。

読込むのがイメージと決まっていれば、ImageLoaderクラスを使う方がデータを調べる手間が省ける。ImageLoaderクラスによりイメージを読込む手順は、LoadQueueクラスとは用いるメソッドや引数、イベントなどが少しずつ異なる。

    ImageLoaderクラスでイメージを読込む手順
  1. ImageLoader()コンストラクタに読込むファイルを引数で渡す
  2. 読込みの終わりはAbstractLoader.completeイベントで捉える
  3. ファイルはImageLoader.load()メソッドで読込む

「PreloadJS 0.6.0: 古いコードのイメージ読込みをImageLoaderクラスで書直す」例では、まずはつぎのように置き替えてみる。

function initialize() {

  // var loader = new createjs.LoadQueue(false);
  var loader = new createjs.ImageLoader(file);
  // loader.addEventListener("fileload", draw);
  loader.addEventListener("complete", draw);
  // loader.loadFile(file);
  loader.load();
}

ここで考えなければならないのは、リスナー関数へのデータの渡し方だ。なぜなら、AbstractLoader.completeイベントで引数に渡されるイベントオブジェクトはitemプロパティをもたない。そこで、つぎのコード006では、ImageLoaderインスタンスにプロパティでデータを与え(第8行目)、イベントオブジェクトのEvent.targetプロパティからImageLoaderインスタンスとそこに定めたプロパティを得ている(第13行目)。前掲の例は、つぎのサンプル003のように手直しした。

コード006■ImageLoaderクラスでイメージを読込む
  1. function initialize() {
  2.   var canvasElement = document.getElementById("myCanvas");
  3.   var canvasSize = new createjs.Point(canvasElement.width, canvasElement.height);
  4.   var file = "images/image.png";
  5.   stage = new createjs.Stage(canvasElement);
  6.   var loader = new createjs.ImageLoader(file);
  7.   loader.addEventListener("complete", draw);
      // ImageLoaderインスタンスにプロパティを定める
  8.   loader.canvasSize = canvasSize;
  9.   loader.load();
  10. }
  11. function draw(eventObject) {
  12.   var image = eventObject.result;
      // ImageLoaderインスタンスからプロパティを取出す
  13.   var canvasSize = eventObject.target.canvasSize;
      // イメージの処理
  14. }

サンプル003■EaselJS 0.8.0 & PreloadJS 0.6.0: Wiping out blur from a image with AlphaMaskFilter


04 古いコードを新たに書替えてみる

CreateJSの古いバージョンで書いたコードを新たなバージョンで動くように書替えてみよう。まず、サブクラスの継承を、新たなextend()およびpromote()メソッドに改めたのがつぎのサンプル004だ。なお、「EaselJS 0.8.0: extend()メソッドを使った継承に書替えるときに注意すること」も参照してほしい。

サンプル004■EaselJS 0.8.0: Particles

function Particle(radius, color, landscape) {
  // this.initialize();
  this.Shape_constructor();

}
// Particle.prototype = new createjs.Shape();
createjs.extend(Particle, createjs.Shape);

createjs.promote(Particle, "Shape");

つぎに、Matrix2D.rotate()メソッドの引数に渡す角度は、ラジアンから度数に変わった。つぎのサンプル005は角度の単位を改めている。なお、Matrix2Dクラスのメソッドにおける行列の乗算の順序も変わったので、詳しくは「EaselJS 0.8.0: Matrix2Dクラスの基本的なメソッドと行列演算」をお読みいただきたい。

サンプル005■EaselJS 0.8.0: Rotating a Cube around the X and Y axes

var matrixX = new createjs.Matrix2D();
var matrixY = new createjs.Matrix2D();

function rotate(eventObject) {
  var RAD_TO_DEG = 1 / createjs.Matrix2D.DEG_TO_RAD;

  // matrixY.identity().rotate(angle.y);
  matrixY.identity().rotate(angle.y * RAD_TO_DEG);
  // matrixX.identity().rotate(angle.x);
  matrixX.identity().rotate(angle.x * RAD_TO_DEG);

}

そして、前述02「CreateJSのクラスの新たな継承の仕方」に変わったことにともなって、initialize()メソッドが除かれてしまった。つぎのサンプル006は、このメソッドをPointオブジェクトの初期化に用いていた場合だ。geomパッケージのクラス(PointとRectangleおよびMatrix2Dなど)には、コンストラクタと同じ引数でオブジェクトを定め直せるメソッドsetValues()が新たに備わったので差替えた(「EaselJS 0.8.0: 使い回すオブジェクトにプロパティを定める」参照)。

サンプル006■EaselJS 0.8.0: Smooth Line tuned

var lastMidPoint = new createjs.Point();
var currentPoint = new createjs.Point();
var lastPoint = new createjs.Point();

function draw() {

  currentPoint.x += velocityX;
  currentPoint.y += velocityY;  
  var midPoint = new createjs.Point((lastPoint.x + currentPoint.x) / 2, (lastPoint.y + currentPoint.y) / 2);

  // lastPoint.initialize(currentPoint.x, currentPoint.y);
  lastPoint.setValues(currentPoint.x, currentPoint.y);
  // lastMidPoint.initialize(midPoint.x, midPoint.y);
  lastMidPoint.setValues(midPoint.x, midPoint.y);

}


作成者: 野中文雄
作成日: 2015年2月11日
Copyright © 2001-2015 Fumio Nonaka.  All rights reserved.