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

2008年09月23日 (火)
Tweet

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

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

demo (WebGL版)
demo (require Flash Player 9)
source (140行, with Papervision3D 2.0 beta, Tweener 1.31.x)

（追記：2023年5月14日）Flash Player終了につきWebGLに移植しました。

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

先日のフォトプリントでは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);

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