サイトトップ

Director Flash 書籍 業務内容 プロフィール
 

HTML5 / Flash ActionScript講座
Webクリエイターのための
CreateJSスタイルブック
gihyo.jp連載
「HTML5のCanvasでつくる
ダイナミックな表現
―CreateJSを使う」
■Twitter: @FumioNonaka / Facebook Page: CreateJS

CreateJS Workshop

CreateJS +0.0.1の地味なアップデートと
EaselJS次期バージョン候補

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);

図001■インスタンスを90度回すと伸縮できない
図001左 図001右

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()メソッド

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

ALPHAMASK FILTER

図002■EaselJSのデモ「ALPHAMASK FILTER」
図002

gihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」

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

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

表001■TweenJS とSoundJS 0.4.1に備わったインスタンスを削除するメソッド
TweenJS 0.4.1
Tween.removeAllTweens() すべてのTweenインスタンスを消し去る。
SoundJS 0.4.1
Sound.removeAllSounds() Sound.registerSound()またはSound.registerManifest()メソッドで登録したすべてのサウンドを消す。
Sound.removeSound() Sound.registerSound()またはSound.registerManifest()メソッドで登録した指定のサウンドを消す。
Sound.removeManifest() Sound.registerSound()またはSound.registerManifest()メソッドで登録したサウンドを、マニフェストの配列に定めて消す。

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

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

02 EaselJS NEXTで何が変わるか

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

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

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

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

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

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

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

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

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

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日


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