お品書き
• 01 CreateJS +0.0.1で何が変わったか
  
  • 01-01 バグが直った
  • 01-02 新しいデモが加わった
  • 01-02 機能が新たに加えられた
• 02 EaselJS NEXTで何が変わるか
  • 02-01 スプライトシートのアニメーション
  • 02-02 マウスイベントの扱い
  • 02-03 Graphics.inject()メソッド

2013年5月にCreateJSライブラリ群が+0.0.1アップデートされた。また、7月26日現在EaselJS次期バージョン候補(NEXT)が公開されている。これらについて、簡単にご紹介したい。

01 CreateJS +0.0.1で何が変わったか

参考:「CreateJSがバグ修正で0.01バージョンアップ」

01-01 バグが直った

「EaselJSのMatrix2D.scale()メソッドを他の変換の後に呼出すと正しく伸縮されない」

var matrix = new createjs.Matrix2D(); matrix.rotate(Math.PI / 2); matrix.scale(2, 2); matrix.decompose(myBitmap);

→

「SoundJSのSoundInstance.completeイベントでSoundInstance.play()メソッドがサウンドを再生しない」。

createjs.Sound.addEventListener("loadComplete", loadHandler); createjs.Sound.registerSound("sounds/test.mp3", "sound"); function loadHandler(eventObject) {   var instance = createjs.Sound.play("sound");   instance.addEventListener("complete", playAgain); } function playAgain(eventObject) {   var instance = eventObject.target;   instance.play(); }

「CreateJSのproxy()メソッドに第3引数が渡せない」

参考:「SoundJSで関数にスコープを定める ー proxy()メソッド」

createjs.proxy()メソッドの実装:
• SoundJS 0.4.1 (0.4.0)
• PreloadJS 0.3.0 → PreloadJS 0.3.1

01-02 新しいデモが加わった

「ALPHAMASK FILTER」

図002■EaselJSのデモ「ALPHAMASK FILTER」

• 第8回「ぼかしフィルタとアルファマスク」
• 第9回「ドラッグでアルファマスクを描く」
• 第10回「ドラッグの軌跡を滑らかな曲線で描く」

• サンプルコード

図003■ドラッグするとアルファマスクで軌跡の画像が表れる

01-03 機能が新たに加えられた

「PreloadJSで外部ファイルを読込む」

新たに加えられたbasePathの引数に注意。

02 EaselJS NEXTで何が変わるか

「EaselJSの次期バージョン候補が公開される」

02-01 スプライトシートのアニメーション

「EaselJSの次期バージョン候補でアニメーションの扱いが変わる」

• BitmapAnimationクラス → Spriteクラス
• frequency(コマおき) → speed (= 1 / frequency)
• SpriteとSpriteSheetクラスにframerateプロパティが備わる。

• サンプルコード

図004■BitmapAnimationクラスでなくSpriteを使うように警告が示される

02-02 マウスイベントの扱い

「EaselJSの次期バージョンにおけるイベントのバブリングとマウスイベント」

• イベントのバブリングとキャプチャ
• MouseEvent.mousemove → DisplayObject.mouseup
• MouseEvent.mouseup → DisplayObject.mousemove

• サンプルコード

図005■「EaselJS vNEXT API Documentation」のMouseEventクラス

02-03 Graphics.inject()メソッド

「EaselJS次期バージョン候補のGraphics.inject()メソッド」

• Graphicsオブジェクトのキューに、Context2D (Canvas) APIの呼出しを挿入する。

• サンプルコード

Graphicsオブジェクト.inject(コールバック関数, 引数)

function コールバック関数(引数) {
  // Context2Dオブジェクトのスコープで実行
}

var settings = {   x: 10,   y: 10,   width: 100,   height: 100,   color: "blue" }; drawingGraphics.inject(drawRectangle, settings); stage.update(); function drawRectangle(settings) {   this.fillStyle = settings.color;   this.fillRect(settings.x, settings.y, settings.width, settings.height); }

作成者: 野中文雄
作成日: 2013年7月26日