今回はEaselJSをある程度いろいろといじってみた。
以下に作ってみた物を置いてある。
EaselJS Study 01
EaselJS Study 02

[EaselJS Study 01]
画像読み込みは、jsで普通の方法で行い、その画像をBitmapオブジェクトに入れて使う。as3のBitmapDataとBitmapの関係に似ている。
bitmap = new Bitmap(image);
imageはロードされたImage画像だ。

flashのspriteやmovieclipのようにContainerオブジェクトを使用すると親子関係も作れる。
今回は、こんなふうに親子を連続して4つくらい入れ子にしている。
bitmapContainers[cNum-1].addChild(bitmapContainers[cNum]);
cNumは入れ子にするコンテナのナンバーだ。
この入れ子にした4つの画像を回転させて動きを作っている。
またregX、regYでflashで言う中心点の移動が可能になる。

ドラッグ&ドロップもオグジェクト群まとめて出来るようにしてみた。
ただ、PCの方はマウスの形状を変えたかったのだけど動作してくれない。
EaselJSのサンプルもマウス形状が変わるものが無いので、もしかするとできないのかもしれない。

タイトル部分はDOMを扱えるようにするDOMElementオブジェクトを使用している。
そのためEaselJS側から傾きや位置を指定できており、またgoogle web fontsからフォントもダウンロードして使用できている。
もう一つテキストを扱えるEaselJSのクラスにはTextがありこれはcanvasのfillTextのようで、文字間調整やwebfontも使えなかった。

iPadやiPhoneの回転対応はまず、機種判別としてua()関数を作成しスマートフォン以外は’general’と出るようにしておく。

function ua(){
  if (navigator.userAgent.indexOf('iPhone') > 0 ){
    return 'iPhone';
  }
  if (navigator.userAgent.indexOf('iPad') > 0){
    return 'iPad';
  }
  if (navigator.userAgent.indexOf('iPod') > 0){
    return 'iPod';
  }
  if (navigator.userAgent.indexOf('Android') > 0) {
    return 'Android';
  }
  return 'general';
}

スマートフォンは回転時の対応と、PCはブラウザウィンドウサイズを変更した時の対応に振り分けをする。

if(ua() != 'general'){
  window.onorientationchange=onOrientationChange;
}else{
  $(window).resize(onResizeWin);			
}

iPhoneのアドレスバーを消すために表示後、setTimeoutで遅延させonResizeWinでスクロール1pxを入れている。

var onOrientationChange = function() {
  canvas = $("#stageCanvas")[0];
  canvas.height = ua() == 'iPhone'?$(window).height()+60:$(window).height();
  setTimeout(onResizeWin, 100);			
}
var onResizeWin = function() {
  scrollTo(0,1);
  canvas.height = ua() == 'iPhone'?$(document).height():$(window).height();
  canvas.width = $(window).width(true);
  if(ua() == 'iPhone'){
    easel_main.changeSize(canvas.width,$(window).height(true)+60);
  }else{		  
    easel_main.changeSize(canvas.width,$(window).height(true));			
  }
}

[EaselJS Study 02]
これの元になったスクリプトはサンプルにあった以下のものだ。
sparklesFade.html

元々ガシャガシャした波紋を作ってみたく、途中までできていたものを試しに
stage.autoClear = false;
としてリフレッシュさせないようにしてみると思いの外かっこ良く、そちらで作り上げてしまったものだ。

snapToPixel=trueとしてみているのだけど、ちゃんとしたFPSが出ているところをみると、パフォーマンスに良い影響出ているようだ。

各動作は、タップやドラッグで、Bitmapオブジェクトが中心から等距離で離れていくようにしてある。

フェードはbkshapeというものを作成して
bkshape.alpha = 0.03;
とすることで、毎フレーム、アルファ付きのシェイプが重なることでフェードアウトするようにしてある。そして、多分バグなのだけど、alphaを0.1以下くらいにしておくとうっすらと後が残り少し面白い仕上がりとなってくれる。出来ればこのバグは修正されないで欲しい。

これにもiPhone/iPad対応を入れておいた。

[感想]
両スタディともプログラミングの骨を作るのはたいした時間かかっておらず、ひたすら調整の時間が大半だった。この状態は、フラッシュでもよくあった状態であり、そこにわりと簡単に到達出来るという事はEaselJSが優れたフレームワークであるということなのだろう。感触的には、もうこの段階で実作ガシガシ作っても大丈夫そうだ。
ということで、Node.jsと合わせてなにか作成してみたいと思う。