EaselJSでのcacheは、処理が目に見えて軽くなり、重要

EaselJSでは、cacheがレンダリングにおいては便利。

Shapeなどで複雑なベクター画像は、cacheを使うと吉。
特に移動などを使うとなると、かなりcacheが効いてくる様子。
Spriteには効果ない様子。ベクターなどに効果あり。

参考になったページ。
http://espelada.sakura.ne.jp/chaotic/post-190/　

「cashe」という書き方をして、私はハマりました。。。
「cache」が正しかった。「s 」じゃなく「c」。。。。
これは、かなりのローマ字綴りに慣れた日本人はハマりそう。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Textのcacheは、なぜかx,yが0,0のところからのキャッシュ領域でないと覚えてくれなかった。
ShapeなどではそのShapeのあるx,y座標からの長方形を切り取るかたちでないとダメだったが。

Textのcacheは、0,0からの領域指定がキモ。重要でした。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

以下のページがかなり良い解説を書いてくださっている。
http://blog.toggl.com/2013/05/6-performance-tips-for-html-canvas-and-createjs/

パフォーマンス向上の6つのコツ、みたいな。
そのTipsの最初は「Cache It!」。
やっぱりcacheですね。

以下は、canvasを二つ重ねる方法についての解説。
http://www.mikechambers.com/blog/2011/01/25/layering-multiple-canvas-elements-using-javascript-and-easeljs/

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

cacheをすると、Shapeオブジェクトは、ちょっと輪郭がぼやける。
まあ、それほど気にならない程度であり、CPU負担は軽くなるのがわかるので、まあ良いですね。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

containerもcacheすると、いろいろベクター画像を描画したコンテナがかなり軽くなる。
CPUの荷重が目に見えて軽くなった。
cacheは素晴らしい。
単にsomeobject.cache()と書いて、領域を指定するだけですから、お手軽です。

特にTextをTweenさせる際には、cacheさせるとかなり処理が軽くなるのでオススメでした。