バージョンアップしたCreateJSを試してみたよ

先日、CreateJSの新しいバージョンが公開されました。CreateJSのサイトからダウンロードできます。新しいCreateJSでは、バグフィックスと共に様々な新機能が追加されており、ますます便利になっています。今回は、バージョンアップにより変更された点や追加された新機能をレポートしたいと思います。

CreateJSの名前空間

新しくなったCreateJSでは、他のライブラリ等との名前衝突を避けるため、オブジェクトを利用した名前空間が使われるようになりました。今後、CreateJSのクラスを利用する際には、下記のように名前空間として"createjs"を付けて呼び出す必要があります。

JavaScript

_canvas = document.getElementById("my-canvas");
_stage = new createjs.Stage(_canvas);
createjs.Ticker.setFPS(30);
createjs.Ticker.addListener(_stage);

なお、FumioNonaka.comさんの「CreateJS Suiteのクラスに名前空間が設定される」では、名前空間を省略する方法が紹介されています。毎回"createjs."と記述するのが面倒に感じるなら、こちらの方法を試してみると良いでしょう。

EaselJSのマルチタッチサポート

EaselJSのバージョン0.50では、スマートフォンやタブレットでのマルチタッチがサポートされるようになりました。createjs.Touch.enable()をコールすることで、同時に発生した複数のタッチイベントをマウスイベントと同様に扱うことができます。

下記のサンプルでは、EaselJSでcanvasに2つの円形シェイプを配置しています。タッチパネルでマルチタッチすることにより、2つのシェイプを同時にドラッグ&ドロップすることができます。

JavaScript

function MultiTouchSample(canvasID) {
  _canvas = document.getElementById(canvasID);
  _stage = new createjs.Stage(_canvas);
  if (createjs.Touch.isSupported()) {
    createjs.Touch.enable(_stage);
  }
  _circleL = createCircle("#cc3300");
  _circleL.x = (_canvas.width >> 1) - 100;
  _stage.addChild(_circleL);
  _circleR = createCircle("#0066cc");
  _circleR.x = (_canvas.width >> 1) + 100;
  _stage.addChild(_circleR);
  createjs.Ticker.setFPS(30);
  createjs.Ticker.addListener(_stage);
}

function createCircle(color) {
  var circle = new createjs.Shape();
  var g = circle.graphics;
  g.beginFill(color).drawCircle(0, 0, 50).endFill();
  circle.y = _canvas.height >> 1;
  circle.onPress = function(pressEvent) {
    var offsetX = this.x - pressEvent.stageX;
    var offsetY = this.y - pressEvent.stageY;
    pressEvent.onMouseMove = function(mouseMoveEvent) {
      this.target.x = mouseMoveEvent.stageX + offsetX;
      this.target.y = mouseMoveEvent.stageY + offsetY;
    };
    pressEvent.onMouseUp = function(mouseUpEvent) {
      delete this.onMouseMove;
      delete this.onMouseUp;
    };
  };
  return circle;
}

TweenJSのonChangeイベントハンドラ

TweenJSのバージョン0.30では、onChangeイベントハンドラが追加されました。onChangeイベントハンドラは、Tweenによって対象プロパティが更新される度に実行されます。他のTweenライブラリではonUpdateと呼ばれることもあります。onChangeイベントハンドラで処理をするには、Tween.get()の第2引数でオブジェクト形式で関数を指定します。

下記のサンプルでは、上下に2つの円形シェイプを配置し、上の赤いシェイプをTweenでアニメーションさせています。onChangeイベントハンドラの処理で、赤いシェイプのx座標を下の青いシェイプに代入しているため、2つのシェイプは同じように左右にアニメーションします。なお、サンプルではcanvasをクリックするとTweenの一時停止/再生を切り替えられるようにしています。

JavaScript

function tween() {
  _tween = createjs.Tween.get(_circle1, {onChange:onChangeHandler, loop:true})
  .to({x:_canvas.width - 100}, 1000, createjs.Ease.quadInOut)
  .to({x:100}, 1000, createjs.Ease.quadInOut);
  _playing = true;
}

function onChangeHandler(tween) {
  console.log("onChange");
  _circle2.x = tween.target.x;
}

function clickHandler(e) {
  _tween.setPaused(_playing);
  _playing = !_playing;
}

PreloadJSのXML対応

PreloadJSのバージョン0.20では、イベントオブジェクトのresultプロパティからXMLを取得できるようになりました。下記のサンプルでは、PreloadJSで読み込んだXMLファイルからデータを取得し、HTMLで出力しています。

JavaScript

function load() {
  var loader = new createjs.PreloadJS();
  loader.onFileLoad = function(e) {
    switch(e.id) {
      case "xml" :
        console.log(e.result);
        output(e.result);
        break;
    }
  };
  loader.onComplete = function(e) {
    e.target.onFileLoad = null;
    e.target.onComplete = null;
  };
  var query = "?" + new Date().getTime();
  loader.loadFile({src:"xml/test.xml" + query, id:"xml", type:createjs.PreloadJS.XML});
}

function output(xml) {
  var nodes = xml.getElementsByTagName("product");
  var html = "<dl>\n";
  for (var i = 0, l = nodes.length; i < l; ++i) {
    var node = nodes[i];
    var price = node.getAttribute("price");
    var content = node.textContent || node.text;
    html += "<dt>" + content + "</dt>\n";
    html += "<dd>" + price + "円" + "</dd>\n";
  }
  html += "</dl>";
  document.getElementById("my-div").innerHTML = html;
}

window.onload = function() {
  load();
};

その他の変更点・新機能

今回のアップデートでは、ここで紹介した以外にも様々な新機能が追加されています。下記に気になる新機能をピックアップしてみました。最近あまり時間がなく、まだ試せていないですが、色々と試してみて改めてレポートしたいと思います。

  • DisplayObject.mask
  • DisplayObject.hitArea
  • DisplayObject.getMatrix()
  • Text.getMeasuredHeight()
  • AlphaMapFilterとAlphaMaskFilter
  • SpriteSheetBuilder
  • stage.mouseMoveOutsideとmouseEvent.rawX/Y