スマホでベクター

スマホでFlashのようなベクター画像をそのまま使うとやはり重くなるのだろうか・・・
勉強会のネタにもできるだろうと思って検証。
検証機としてはiPhone4S iOS7を使ってみました。
スマホの中では、かなり高速に動く部類の端末です。

LWFはベクターが使えないので、まずはCreateJSで実験。

※ちゃんと、FPS測っているわけではなく体感で測ってます。すいません...
//------

３種類のベクター図形に切り替わるインスタンスを100個配置。(60fps)
http://lwfs.tamagokobo.com/createjs/shapeSimpleTest/shapeSimpleTest.html

【結果】
うん・・・まあ、わかってはいましたけど何も対策しなけりゃムチャクチャ重い・・・

//------

３種類のベクター図形(グラデーション)に切り替わるインスタンスを100個配置。(60fps)
http://lwfs.tamagokobo.com/createjs/shapeTest/shapeTest.html

【結果】
グラデーション塗りにすると更に激重に・・・。

//------

CreateJSにはcache機能があるので、各図形をキャッシュするようにしてみました。
http://lwfs.tamagokobo.com/createjs/shapeCacheTest/shapeCacheTest.html

【結果】
やはりキャッシュして画像にしてしまうとかなり軽くなりました。しかし、FPS若干落ちてしまっている印象...

//------

キャッシュするとはいえ、最初は描画はしないといけないのでLWFみたいに最初から画像にしてみました。
http://lwfs.tamagokobo.com/createjs/shapeToImageTest/shapeToImageTest.html

【結果】
cacheと比べてそこまで劇的な変化はなかったが、ガクつきがなくなり安定した印象。
でも、PCに比べるとやっぱりなんか遅い気が...

//------

やはり、スマホで使っていくには極力ベクターは使わない方が安心かなぁという結論。
しっかりチューニングすれば、問題ない気もしますが大変そうだ・・・


比較用にLWFも作ってみました。

フレームスキップOFF canvas renderer
http://lwfs.tamagokobo.com/lwf/createjsTest2/

フレームスキップON版 canvas renderer
※最大で3フレームスキップします。(デフォルト設定)
http://lwfs.tamagokobo.com/lwf/createjsTest3/

なんかLWF版のほうがPCとほぼ同じ速度で動いてるような気がする・・・
前の比較では殆ど一緒だったのにﾝﾅｾﾞｪ...