drawTrianglesとUVマッピング #1

November 13, 2008

drawTrianglesとは
・drawPathと同じようにVector型を使って、描画を行うメソッド
・三角形を描画することが決まっているので、drawPathと違って、コマンド(GraphicsPathCommand.MOVE_TOとかGraphicsPathCommand.LINE_TO)は不要
・3D表現を行う際、このメソッドが活きてくる(3Dでは、三角形の組み合わせで立体を表現することが多いため)
・UVマッピング(別のエントリーで書く予定)に対応


三角形を描画するのに必要なデータ
1.頂点の座標データ
2.描画の順番データ


処理の流れ
1.頂点の座標データセット
三角形なので三つの座標データ(たとえば左上、左下、右上の座標データ)が必要。
drawTrianglesイメージ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);


実行結果
描画されるのは黄色い三角形。
drawTrianglesイメージ2

サンプルソースダウンロード


正方形を描画するには三角形をふたつ描画する。

処理の流れ
1.頂点の座標データ
三角形をひとつ描画するときと違って、四つ頂点が必要。
drawTrianglesイメージ3

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);


実行結果
黄色い正方形が描画される。
drawTrianglesイメージ4

サンプルソースダウンロード


おまけ
AdobeのUSサイトでFlash CS4のトライアル版配布スタート。

カテゴリー: 



Posted by scratchbrain at November 13, 2008 6:22 AM ブックマークに追加する

Trackback

Trackback URL for this entry:

Post a Comment


検索

このブログを検索

サイトコンセプト

当ブログは、レディオヘッド、司馬遼太郎作品の読書感想、Flash、Actionscriptの技術メモ・サンプルソース、日記・雑感などを公開しています。
[SCRATCHBRAIN プロフィール]
[アートワーク]
[Twitter]

リンク

  • scratchbrain.netホーム
  • アートワーク
  • scratchbrainプロフィール
  • 音楽ブログ
  • スクラップブック
  • 実験プロジェクト
  • こんなライヴに行きました

広告

最近のエントリー

カテゴリー

タグクラウド

全てのエントリー一覧

RSSフィード

月別アーカイブ

powered by Movable Type Pro 4.23-ja

hosted by