Papervision3D演出サンプルNo.04:細切れフォトグラフ

2008年09月23日 (火)

Papervision3D演出サンプルNo.04:細切れフォトグラフ

先日のフォトプリントのシンプル版。一枚の画像を細切れにして3D的に見せるサンプルです。ペラ一枚の画像を表示するだけでもPapervision3Dが使える例として、いろんな局面で利用しやすい使い方を考えてみました。

demo (require Flash Player 9)
source (140行, with Papervision3D 2.0 beta, Tweener 1.31.x)
写真はFlickrにアップした写真から Minato Mirai Yakei 03 on Flickr

画像の分割キャプチャは行列でラクチンに

先日のフォトプリントではBitmapの分割キャプチャは行列(flash.geom.Matrix)を使えば簡単にできることを知らず、親コンテナを作ってその中でDisplayObjectをループ文の中で原点に移動させてキャプチャしていました。Matrixを使えば親コンテナが不要でシンプルにBitmapDataキャプチャができます。

ソースコードでbefore/afterしてみると･･･

コンテナを使った方法(やや面倒)

// 親コンテナとなるfolderスプライトがあり、その中にbitmapがある想定です
bitmap.x = - ずらしたいX座標;
bitmap.y = - ずらしたいY座標;

// 親コンテナをキャプチャします
bmpData.draw(folder);

行列(Matrix)を使った方法(シンプル)

// 行列を用いてキャプチャする画像の原点をずらします
var matrix:Matrix = new Matrix();
matrix.translate( - ずらしたいX座標, - ずらしたいY座標);

// 　行列変換を用いてキャプチャします
bmpData.draw(bitmap, matrix);

あまり変わってないですが親コンテナをわざわざ作っていないところがスマートかと。。