EaselJSで遊んでみた

起承転結

@yuu_hara easelJS, tweenJS ゆーたん好きそう

— きゅぶんず@右手親指爪破壊さん (@kyubuns) 9月 25, 2012

↓

@kyubuns うおおおおおおなにこれ！☆*:.｡. o(≧▽≦)o .｡.:*☆

— ゆうなんとか@ね む いさん (@yuu_hara) 9月 26, 2012

↓

@kyubuns 確かにね。ただもうDOMとCanvasでやってしまってるので、今作の背景っぽいのをこれ使って作ってみようかなと [くるる@らぼ]

— ゆうなんとか@ね む いさん (@yuu_hara) 9月 27, 2012

↓

とまあこんな感じでCreateJSのライブラリのひとつであるEaselJSというライブラリを使ってみました*1。

EaselJS使ってみた感想

神すぎ。

ちまちまCanvasのAPI叩くよりもはるかに楽です。複数のオブジェクトをグループ化して、他のグループのオブジェクトに影響が無いように、回転させたり移動させたりする、みたいなのが簡単にできます。今回は2つのグループを作って、各6枚ずつ、合計12枚の長方形をランダムに回転させて、まあまあいい感じになるように配置させています。アニメーションはまだしませんが、ひとまずそれっぽくなった気がしますね。ときどきひどい描かれ方するけど何も考えてない擬似乱数だから仕方ないね！これを今までの方法でやろうと思ったらちょっとしんどいですね。多分さじ投げてます。ちなみにEaselJSの兄弟ライブラリであるTweenJSというのを使うと、アニメーションが楽に実装できるらしいです。こちらも近々触ってみましょう。

*1:jsdo.itで用意してくれているライブラリではないので、HTMLエディタの画面にscriptタグを書いてインポートしてきましょう。ちなみにjsdo.itが用意してくれていない他のライブラリもだいたい同じ感じで使えるらしいです