html5 canvas ImageData, Uint8ClampedArray。簡易アニメーション

ImageData {height: 100, width: 100, data: Uint8ClampedArray[40000]}
data: Uint8ClampedArray[40000]
[0 … 9999]
[10000 … 19999]
[20000 … 29999]
[30000 … 39999]
buffer: ArrayBuffer
byteLength: 40000
byteOffset: 0
length: 40000
__proto__: Uint8ClampedArray
height: 100
width: 100
__proto__: ImageData

でこの配列40000は、rbgaの4データがずっと並んでる100×100なので4*100*100です。

というメモです。

何をしたいかというと
・canvasの一部だけ上書きすることで、負荷の少ないアニメーションにする。
・移動と回転
・残像を残す
・複数パーツ重ねて同時に変化
・ぱらぱらアニメ（複数画像）+移動

まずは、適当に点を動かして出来そうな雰囲気が出てきたら
ブロック崩しみたいなのを作ろうかと
先の話ですが
・ブロックデータ自体が、この配列になる。崩されると（当たった点からの距離で）透過され０になる。

検証：au IS03
100×100のオブジェクトを2つ、10fpsで描画し続けても問題ありませんでした。2万pixel更新（若干遅れますが）

4×4を２つ、10fpsで移動させてみます。putImageの描画前データを保管して、更新を繰り返します。32pixel x 2 = 64 pixel
当然速い。30fpsでも IS03でさくさくです。

描画の問題と別に、focusがcanvasにあたっていると色が反転というか選択状態になるので、focusを他に移す必要がある。これも負荷になるから

変なシューティングでも作ろうかな

This entry was posted on 木曜日, 11月 15th, 2012 at 9:18 PM and is filed under html5, Javascript. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Unityによるゲームを公開しております iOS/Android
https://itunes.apple.com/jp/app/lost-knight-3d-action/id900917032
https://play.google.com/store/apps/details?id=com.groundroad.runknight

各種開発支援・機能開発等小さいお仕事などもお請けしております。
unity開発支援, PHPシステム開発, javascript/html5 フロント開発, titanium mobileアプリ開発
お気軽にお問い合わせください
大崎・五反田近郊での対面でのお打ち合わせはいつでも可能です。