KAZUMiX memo

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

PC |

• HTML5 Canvas Sprite test
  （最近のブラウザなら動くと思う。IEは9なら動く? Google Chromeは爆速）

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が流行れば日本語の技術書なども出るようになるでしょうね。

ツイートする