こんにちは、11年度新卒のシモダです

今日はGraphicsTrianglePathを使ったテクスチャマッピングを紹介したいと思います

テクスチャマッピングとはBitmapDataをワープのように自由な形に変形させることができるものです

三角形を基本の形として配置し、その頂点を自在に動かすことで画像を複雑な形に変換できます

GraphicsTrianglePathに必要なのは三つのパロメーターです

1、vertices 頂点座標

2、indices 頂点番号

3、uvtData uvtデータ

頂点座標がワープのアンカーポイント、頂点番号がアンカーポイントに割り振る番号で、uvtデータはBitmapDataを切り抜くポイントを指定する、というイメージです

引数にはVector型の変数を与えます

//頂点座標指定
_vertices.push(halfWidth,halfHeight);
_vertices.push(halfWidth,halfHeight + 100);
_vertices.push(halfWidth + 100,halfHeight);
_vertices.push(halfWidth + 100,halfHeight + 100);

//utvデータ設定
_uvtData.push(0,0);
_uvtData.push(0,1);
_uvtData.push(1,0);
_uvtData.push(1,1);

//頂点番号設定、
_indices.push(0,1,2);
_indices.push(1,2,3);

//graphicsData制作
var graphicsData:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
graphicsData.push(new GraphicsBitmapFill(_bitmapData));
graphicsData.push(new GraphicsTrianglePath(_vertices, _indices, _uvtData));
graphicsData.push(new GraphicsEndFill());

これを使ってビットマップを変形させたのがこちらです

flash on 2011-5-26 - wonderfl build flash online

画像が頂点に沿って伸縮されているのがわかると思います 参考にしたページはこちらです!

http://www.adobe.com/jp/devnet/flash/articles/graphicsdrawtriangles.html

HTML5飯