drawTrianglesとUVマッピング #1
November 13, 2008
drawTrianglesとは
・drawPathと同じようにVector型を使って、描画を行うメソッド
・三角形を描画することが決まっているので、drawPathと違って、コマンド(GraphicsPathCommand.MOVE_TOとかGraphicsPathCommand.LINE_TO)は不要
・3D表現を行う際、このメソッドが活きてくる(3Dでは、三角形の組み合わせで立体を表現することが多いため)
・UVマッピング(別のエントリーで書く予定)に対応
三角形を描画するのに必要なデータ
1.頂点の座標データ
2.描画の順番データ
処理の流れ
1.頂点の座標データセット
三角形なので三つの座標データ(たとえば左上、左下、右上の座標データ)が必要。

var vertices:Vector.<Number> = new Vector.<Number>();
// 0 左上
vertices[0] = 0;
vertices[1] = 0;
// 1 左下
vertices[2] = 0;
vertices[3] = 300;
// 2 右上
vertices[4] = 300;
vertices[5] = 0;
2.描画の順番データセット
頂点の座標データはx、yをひとつのデータと考えると、次の順番にセットされている。
頂点の座標データ
0番目 左上( x:0, y:0 )
1番目 左下( x:0, y:300 )
2番目 右上( x:300, y:0 )
0番目、1番目、2番目の順に頂点を結んでいくと三角形になる。
var indices:Vector.<int> = new Vector.<int>();
indices.push(0,1,2);// 描画の順番セット
3.描画
塗りを指定して、drawTrianglesメソッドを実行。
graphics.beginFill(0xFFFF00);
graphics.drawTriangles(vertices,indices);
実行結果
描画されるのは黄色い三角形。

正方形を描画するには三角形をふたつ描画する。
処理の流れ
1.頂点の座標データ
三角形をひとつ描画するときと違って、四つ頂点が必要。

var vertices:Vector.<Number> = new Vector.<Number>();
// 0 左上
vertices[0] = 0;
vertices[1] = 0;
// 1 左下
vertices[2] = 0;
vertices[3] = 300;
// 2 右上
vertices[4] = 300;
vertices[5] = 0;
// 3 右下
vertices[6] = 300;
vertices[7] = 300;
2.描画の順番データセット
頂点の座標データはx、yをひとつのデータと考えると、次の順番にセットされている。
頂点の座標データ
0番目 左上( x:0, y:0 )
1番目 左下( x:0, y:300 )
2番目 右上( x:300, y:0 )
3番目 右下( x:300, y:300)
正方形といっても2つの三角形の組み合わせなので、2個三角形を描画するための情報があればいい。
1つ目の三角形を描画するには、0番目、1番目、2番目の順に頂点を結ぶ。
2つ目の三角形を描画するには、2番目、3番目、1番目の順に頂点を結ぶ。
var indices:Vector.<int> = new Vector.<int>();
indices.push(0,1,2,2,3,1);// 描画の順番セット
3.描画
塗りを指定して、drawTrianglesメソッドを実行。
graphics.beginFill(0xFFFF00);
graphics.drawTriangles(vertices,indices);
実行結果
黄色い正方形が描画される。

おまけ
AdobeのUSサイトでFlash CS4のトライアル版配布スタート。
Trackback
Trackback URL for this entry:


















