EaselJSで描画した画像を1000くらいに分割し、トゥイーンで動かした時に気がついた注意点など。
やりたいことの結果はこちら。
https://279798.playcode.io/
注意点として、「刻んだ画像(以下ブロック画像)をモザイク状に再配置する計算を行うスクリプトではない」ということをご承知置きください。
再配置の設計図は別のスクリプトで生成し、JSON化してスクリプトに埋め込んでいます。
結果今回やってみて気がついたこととして、
1. 大量のビットマップインスタンスを扱うときはcacheを使うこと
2. 各インスタンスは必要な時に生成し、必要が無くなったらインスタンスやトゥイーンをこまめに消すこと。
addChildして隠して存在させておくより、必要になったらaddChildし、必要が無くなったら即removeChildさせる
(=大量のインスタンスを生成させるようなプログラムの場合、大量のインスタンスを結合させる設計にすること)
3. 安易なクラス化はパフォーマンスを低下させる
4. CreateJS 2.0Beta(ES Module版)では.updateCache("source-over")がまだ動作しない
(半日悩んだ)
ということでした。
また、CreateJSのcache機能について色々なサイトを読みましたが、「ビットマップオブジェクトでは逆にパフォーマンスが低下する」「シェイプでしか意味がない」などの意見がいくつかありました。
バージョンの関係もあるかと思いますが、1.0.2を使って見た限りではビットマップでもパフォーマンスは向上するように感じました。
細かい解説は追々追記していきたいと思います。