HTML5 Canvas用の描画フレームワークを自作してみる

PC

HTML5 Canvasに関しては、IE9が出てから本気出す！…つもりだったんだけど、その前に仕事でやってきて、いきなり本気を出さざるを得なくなったKAZUMiXです。
実際にCanvasを使ってみたら思った以上にローレベル！Flashみたいなものを作ろうとすると、自前で深度管理やらなにやらやらざるを得ない！
というわけで、Flash(AS3)で言うところのSpriteの仕組みが欲しくて作ってみたサンプルが上のものもです。
Spriteとして実装しているメソッドはaddChild, removeChildのみｗ とはいえ親子、兄弟関係に対応するだけで、楽しくなりますね。

サンプルのJavaScriptソース
sprite.js (utf8)

追加したい機能

  • 変化が無い場合は再描画しない
    このサンプルみたいに表示オブジェクトが全部動く場合は不要だけど、現実的にはあった方がいい
  • cacheAsBitmap
    同上
  • rotate
    必要だよね。ただ、単体の画像とかならいいけど、それらを包括するレイヤーとして対応しようとすると超メンドクサイ。
  • scale
    あるといいねー。メンドクサイけど。
  • alpha
    無理かも？

こういうのすでにあるんじゃね？

あるかも。「Mathはまだ実装していないので使わないでください」などとリアルで言われてしまう仕事の都合で、自分が面倒を見れるものが欲しいのです。

しばらくブログ放置してたけど何やってたの？

Facebookアプリ作ったり、モバゲーアプリ作ったりしてました。
モバゲーと言えばガラケーという印象があると思いますが、OpenSocialなAPIが提供されているため、3キャリア対応ガラケーHTML＆絵文字と、モバゲー独自APIさえ把握できれば特に変に苦労するところも無いと思います。技術面はね！儲かるゲームとなると話は別。
逆にSNS世界一の会員数を誇るFacebookは全力で独自APIなのでその変で苦労します。資料も英語前提。日本でFacebookが流行れば日本語の技術書なども出るようになるでしょうね。