Matrix講座

taro

Oct 28, 2009

BitmapData
Matrix

こんにちはtaroです.

こんなことで、お困りになったこと

Spriteに上手く座標や回転を設定しているのにBitmapDataにdrawしたときに、上手く行かない・・・
BitmapDataに渡すMatrixの設定が良く分からない・・・
行列式は苦手・・・

ありませんか？

今回はこちらのテーマで進めようと思います。

BitmapDataのdrawメソッドを用いて、BitmapDataにSpriteやBitmapなどのDisplayObjectを描画したとき、元になるDisplayObjectの位置や回転、拡大率というのは反映されません.なので、下の図のように、左上隅を基点として等倍、回転なしの状態で描画されてしまいます.

回転などをつけてみたい

これはどうしたものか、とリファレンスを当たってみると、第2引数にMatrixというのを渡せばよいということが分かります.では、こういうのは、どうだろうと思って、次のようなコードを書いてみます.こちらでloaderには、写真が入っていてbitmapDataは対象のBitmapDataだとします.

var mat:Matrix = new Matrix();
// 45°回転してみる
mat.rotate(Math.PI / 4);
// これでいける筈・・・
bitmapData.draw(loader, mat);

さて、実行してみるとどうでしょう？

アレ？なんだかかけてしまいました。

これは上の図のオレンジの丸の部分を中心として回転してしまったからです.図の真ん中で回転させるにはどうすればいいでしょうか?

その為には、まず図を一旦平行移動させて基点を図の中心に移動させる必要があります.

var mat:Matrix = new Matrix();
// 平行移動させて図の中心が(0, 0)に重なるようにする
// 写真の大きさは100 x 100だから
// 50だけ左へ、50だけ上へ平行移動させればよい
mat.translate(-50, -50);
bitmapData.draw(loader, mat);

中心が基点となりました.次に回転させます.

var mat:Matrix = new Matrix();
mat.translate(-50, -50);
mat.rotate(Math.PI / 4);
bitmapData.draw(loader, mat);

ちょっと画像が切れてしまって、良く分かりませんが、どうやら中心を基点として上手く回転出来ているようです.では最後に中心に表示されるように位置を調節しましょう.

var mat:Matrix = new Matrix();
mat.translate(-50, -50);
mat.rotate(Math.PI / 4);
// 最後に画面の中心へ
// 画面サイズは250 x 250なので
// 右へ125, 下へ125だけ移動させれば
// 中心に来る
mat.translate(125, 125);
bitmapData.draw(loader, mat);