sib今回はEaselJSをある程度いろいろといじってみた。以下に作ってみた物を置いてある。01]画像読み込みは、jsで普通の方法で行い、その画像をBitmapオブジェクトに入れて使う。as3のBitmapDataとBitmapの関係に似ている。Bitmap(image);imageはロードされたImage画像だ。flashのspriteやmovieclipのようにContainerオブジェクトを使用すると親子関係も作れる。今回は、こんなふうに親子を連続して4つくらい入れ子にしている。bitmapContainers[cNum-1].addChild(bitmapContainers[cNum]);cNumは入れ子にするコンテナのナンバーだ。この入れ子にした4つの画像を回転させて動きを作っている。regX、regYでflashで言う中心点の移動が可能になる。ドラッグ&ドロップもオグジェクト群まとめて出来るようにしてみた。PCの方はマウスの形状を変えたかったのだけど動作してくれない。EaselJSのサンプルもマウス形状が変わるものが無いので、もしかするとできないのかもしれない。タイトル部分はDOMを扱えるようにするDOMElementオブジェクトを使用している。fontsからフォントもダウンロードして使用できている。一つテキストを扱えるEaselJSのクラスにはTextがありこれはcanvasのfillTextのようで、文字間調整やwebfontも使えなかった。iPadやiPhoneの回転対応はまず、機種判別としてua()関数を作成しスマートフォン以外は’general’と出るようにしておく。'general';}スマートフォンは回転時の対応と、PCはブラウザウィンドウサイズを変更した時の対応に振り分けをする。$(window).resize(onResizeWin);}iPhoneのアドレスバーを消すために表示後、setTimeoutで遅延させonResizeWinでスクロール1pxを入れている。02]これの元になったスクリプトはサンプルにあった以下のものだ。false;としてリフレッシュさせないようにしてみると思いの外かっこ良く、そちらで作り上げてしまったものだ。snapToPixel=trueとしてみているのだけど、ちゃんとしたFPSが出ているところをみると、パフォーマンスに良い影響出ているようだ。各動作は、タップやドラッグで、Bitmapオブジェクトが中心から等距離で離れていくようにしてある。0.03;とすることで、毎フレーム、アルファ付きのシェイプが重なることでフェードアウトするようにしてある。バグなのだけど、alphaを0.1以下くらいにしておくとうっすらと後が残り少し面白い仕上がりとなってくれる。出来ればこのバグは修正されないで欲しい。これにもiPhone/iPad対応を入れておいた。[感想]両スタディともプログラミングの骨を作るのはたいした時間かかっておらず、ひたすら調整の時間が大半だった。この状態は、フラッシュでもよくあった状態であり、そこにわりと簡単に到達出来るという事はEaselJSが優れたフレームワークであるということなのだろう。感触的には、もうこの段階で実作ガシガシ作っても大丈夫そうだ。いうことで、Node.jsと合わせてなにか作成してみたいと思う。Comment返信をキャンセルする。