三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1
作成日
24 March 2009
ページ ツール |
必要条件
ユーザーレベル
中級
サンプルファイル
- drawTriangles_samples.zip (140 KB)
INDEX
- 01 テクスチャで塗る － Graphics.beginBitmapFill()メソッド
- 02 Graphics.drawTriangles()メソッドとVectorクラス
- 03 頂点座標を指定する － Graphics.drawTriangles()メソッドの第1引数
- 04 テクスチャのマッピングを指定する － Graphics.drawTriangles()メソッドの第3引数
- 05 頂点番号で三角形を指定する － Graphics.drawTriangles()メソッドの第2引数
Flash Player 10のGraphicクラスには、三角形に分割した面に対して画像を変形して貼付けるGraphics.drawTriangles()メソッドが備わりました。この機能を用いると、面に3次元の凹凸を加えたように表現することができます。面を塗る画像は「テクスチャ」ともいい、それを分割して貼付ける操作は「マッピング」と呼ばれます(図001)[*1]。
図001■テクスチャを三角形に分割してマッピング
本稿は、このGraphics.drawTriangles()メソッドを使ったテクスチャマッピングについて、基本的な解説を行います。
[*1] ZDNet Japan「テクスチャマッピング」参照。
01 テクスチャで塗る － Graphics.beginBitmapFill()メソッド
Graphics.drawTriangles()メソッドで三角形に分割する前に、単純にインスタンスをテクスチャ(ビットマップ)で塗ってみます。このときに使うGraphics.beginBitmapFill()メソッドは、Flash Player 9からすでに実装されています。第1引数には、塗りに用いるビットマップのインスタンスを渡します[*2]。
beginBitmapFill(ビットマップ:BitmapData):void
メソッドの第1引数には、[ライブラリ]のビットマップを指定することができます。そのビットマップには、[ビットマッププロパティ]ダイアログボックスで[クラス]に任意の名前を設定します(サンプルでは"Pen"としました)[*3]。
図002■[ビットマッププロパティ]ダイアログボックスで[クラス]を入力
Graphics.beginBitmapFill()メソッドの引数に渡すのは、BitmapDataインスタンスです。[ライブラリ]のビットマップは、デフォルトで[基本クラス]としてBitmapDataクラスを継承します(図002)。ですから、ビットマップのインスタンスを生成するには、[クラス]に入力したクラス名(Pen)をコンストラクタメソッドとして、以下のようにnew演算子で呼出します。なお、コンストラクタの引数には、幅と高さを意味するふたつの数値を指定します。この場合の値はともに0で構いません。
var myTexture:BitmapData = new Pen(0, 0); // ふたつの0を引数として渡す
mySprite.graphics.beginBitmapFill(myTexture); // メソッドにBitmapDataインスタンスを渡す
生成したビットマップのインスタンスは、BitmapDataで型指定した変数に格納し、Graphics.beginBitmapFill メソッドの引数として渡します。メソッドは、塗りの対象となるインスタンスのSprite.graphicsプロパティを参照して呼出します 上の例では、SpriteインスタンスをmySpriteとしました 。
これで、Spriteインスタンスへの描画の塗りとして、Graphics.beginBitmapFill メソッドに指定したビットマップ BitmapDataインスタンス が設定されました。あとは、Spriteインスタンスに描画メソッドでシェィプを描けば、その塗りにビットマップが適用されます。
以下のフレームアクション スクリプト001 は、タイムラインにSpriteインスタンスを動的に生成し[*4]、ビットマップ [クラス]はPen をGraphics.beginBitmapFill メソッドで塗りとしたうえで、Graphics.drawRect メソッドにより矩形でビットマップを描いています 図003 。なお、Sprite.graphicsプロパティの参照は、変数myGraphicsに設定しました。
スクリプト001■タイムライン上のSpriteインスタンスに矩形を描いてビットマップで塗る
// タイムライン: メイン
// 第1フレームアクション
var mySprite:Sprite = new Sprite(); // テクスチャマッピング用の空のSpriteインスタンスを生成
var myGraphics:Graphics = mySprite.graphics; // graphicsプロパティを変数に取得
// [ライブラリ]のビットマップからインスタンスを生成
var myTexture:BitmapData = new Pen(0, 0);
addChild(mySprite); // メインタイムラインの子インスタンスとして追加
// テクスチャで塗りを設定
myGraphics.beginBitmapFill(myTexture);
// 画像サイズで矩形を描く
myGraphics.drawRect(0, 0, 100, 100); // 位置(0, 0)、幅100×高さ100
図003■描画された矩形をビットマップで塗る
Graphics.drawRect()メソッドで描いた矩形は、位置がSpriteインスタンスの座標(0, 0)に、幅と高さはビットマップと等しく(100×100ピクセルに)しましたので、矩形のビットマップがちょうどひとつ表示される結果となりました[*5]。
[*2] Graphics.beginBitmapFill()メソッドには、オプションとして(省略可能な)あと3つ引数があります。詳しくは[ヘルプ]のGraphics.beginBitmapFill()メソッドの項をご覧ください。
[*3] クラスが定義されていないと、自動生成される旨の警告が表示されます(図004)。とくにクラスを定義しない場合には、[OK]ボタンをクリックします。
図004■クラス定義が自動生成される旨を伝える警告
とくにクラスを定義しない場合には、[OK]ボタンをクリック。
[*4] Spriteインスタンスを動的に作成する方法については、F-site「new演算子でビジュアルオブジェクトをつくる」をご参照ください。
[*5] 矩形のサイズを拡げれば、Graphics.beginBitmapFill()メソッドのデフォルトでは、ビットマップのイメージはタイル状に繰返し塗られます(図005)。
図005■デフォルトではビットマップイメージが繰返し塗られる
drawTriangles(頂点座標:Vector.<Number>, 頂点番号:Vector.<int> = null, uvtデータ:Vector.<Number> = null):void
3つの引数には、分割する三角形の頂点座標や頂点番号、テクスチャのマッピングの仕方(uvtデータ)などの情報を指定します。分割する三角形の数を増やせば、複雑で多彩な変形ができます(前掲図001参照)。
メソッドの3つの引数は、データ型がFlash Player 10から備わったVectorクラスで定義されています。インスタンスの生成やデータ型の指定が少し変わっていますので、先に簡単に説明しておきましょう。
Vectorクラスは、いわば最適化された配列つまりArrayクラスといえます[*6]。Vectorインスタンスには、配列と同じように、複数の値にインデックスをつけて納められます。配列と違うのは、第1にエレメントのデータ型がひとつに限定されます。そして第2に、エレメントのインデックスは連番でなければなりません。
Vectorクラスのコンスラクタメソッドは、以下のようなシンタックスでインスタンスを生成します[*7]。コンストラクタの後のドット(.)に続けて、山括弧<>の中にエレメントのデータ型を指定します。なお、エレメントのデータ型は「ベース型」と呼ばれます。
Vector.<データ型>(長さ:uint = 0, 長さの固定:Boolean = false)
インスタンスを代入する変数宣言のデータ型にも、山括弧<>でベース型を指定しなければなりません。たとえば、変数myVectorにベース型が整数(int型)のVectorインスタンスを代入するには、つぎのようなステートメントを記述します。
var myVector:Vector.<int> = new Vector.<int>();
Vectorインスタンスのエレメントにアクセスするには、配列と同様に配列アクセス演算子[]を用います。また、Arrayクラスと同じ、Vector.lengthプロパティやVector.push()メソッドなども備えています。ベース型が整数の新規VectorインスタンスmyVectorに対してエレメントを追加したり、取出したりするには、つぎのように配列と同じ要領で処理します。
myVector.push(0);
myVector.push(2);
trace(myVector); // 出力: 0,2
myVector[1] = 1;
myVector[myVector.length] = 2;
trace(myVector); // 出力: 0,1,2
var n:int = myVector[0]; // 取出したエレメントは整数(int型)
Graphics.drawTriangles()メソッドの3つの引数に戻りますと、それらはすべてVectorインスタンスで、ベース型が第1引数と第3引数はNumber型、第2引数がint型とされています。そこでつぎに、これら3つの引数の指定の仕方を説明していきましょう。
[*6] 詳しくは、「Vectorクラス」をお読みください。
[*7] Vectorコンストラクタメソッドの引数については、前出注[*6]に引用のノートをご参照ください。
03 頂点座標を指定する － Graphics.drawTriangles()メソッドの第1引数
Graphics.drawTriangles()メソッドの第1引数は、描く三角形の頂点座標です。Graphics.drawRect()メソッドが位置座標のx、yと幅および高さを引数にしたのに対して、3頂点のxy座標を指定します。三角形が最低限のひとつであれば、3頂点のxyの値計6つをVectorインスタンスのエレメントとして加えます。
たとえば、位置座標(0, 0)で幅100×高さ100ピクセルのテクスチャ(図006)の左上半分の三角形を描くとすれば、Graphics.drawTriangles()メソッドの第1引数を以下のように指定します。この場合、第2および第3引数は指定しなくても構いません。なお、描画対象のインスタンスのSprite.graphicsプロパティを、変数myGraphicsがもつとします。
var vertices:Vector.<Number> = new Vector.<Number>(); // 頂点座標のVectorインスタンス生成
vertices.push(0,0, 100,0, 0,100); // 3頂点の座標値6個を加える
myGraphics.drawTriangles(vertices); // 第2および第3引数は省略
図006■テクスチャ左上半分の三角形の座標値
それでは、前出スクリプト001のGraphics.drawRect メソッドによる矩形の描画を、Graphics.drawTriangles メソッドを使った三角形の描画に書替えてみましょう スクリプト002 。なお、以下のフレームアクションでは、わかりやすいように3頂点の座標をVector.push メソッドで3回に分けて加えています。指定した3頂点で描かれる三角形にビットマップの塗りが適用されます 図007 。
スクリプト002■インスタンスにGraphics.drawTriangles メソッドで三角形を描いてテクスチャで塗る
// タイムライン: メイン
// 第1フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var myTexture:BitmapData = new Pen(0,0);
// 頂点座標のVectorインスタンス生成
var vertices:Vector.<Number> = new Vector.<Number>();
addChild(mySprite);
// Vectorインスタンスに三角形の頂点座標を加える
vertices.push(0, 0); // 左上頂点
vertices.push(100, 0); // 右上頂点
vertices.push(0, 100); // 左下頂点
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices);
図007■左上半分の三角形をテクスチャで塗る
描画する三角形を増やすには、Graphics.drawTriangles()メソッドの第1引数にさらに3頂点の座標を加えます。たとえば、前掲スクリプト002に右下半分の三角形を追加するなら、第1引数として渡すVectorインスタンスにVector.push()メソッドでその3つの頂点座標を加えます。左上の三角形からxy座標を10ピクセルずつ離して描く場合には、つぎのようなスクリプトを追加します。
// Vectorインスタンスに三角形の頂点座標を加える
vertices.push(0, 0);
vertices.push(100, 0);
vertices.push(0, 100);
// 右下半分の三角形の3頂点座標を追加
vertices.push(110, 10); // 右上頂点
vertices.push(110, 110); // 右下頂点
vertices.push(10, 110); // 左下頂点
もっとも、描かれたふたつの三角形は、描画の形状は分かれたものの、ビットマップは一様にタイル状に塗られます(図008)。そのため、ビットマップの塗りに対して、ふたつの三角形でマスクをかけたような表現になります。ビットマップの塗りも分割して指定するには、Graphics.drawTriangles()メソッドに第3引数を加えなければなりません。
図008■三角形の左上半分に右下半分を加える
以下のフレームアクション スクリプト003 は、左上半分と右下半分のふたつに分かれた三角形に対して、ビットマップも同じようにふたつに分割してマッピングします 図010 。Graphics.drawTriangles メソッドには第1引数に加え、第3引数としてテクスチャマッピングするためのuv座標をVectorインスタンスで渡しています。なお、第2引数は使いませんので、無指定を示すnullを渡します。
スクリプト003■インスタンスにGraphics.drawTriangles メソッドで三角形を描いてテクスチャで塗る
// タイムライン: メイン
// 第1フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var myTexture:BitmapData = new Pen(0, 0);
// 頂点座標のVectorインスタンス生成
var vertices:Vector.<Number> = new Vector.<Number>();
// uvtデータのVectorインスタンス生成
var uvtData:Vector.<Number> = new Vector.<Number>();
addChild(mySprite);
// Vectorインスタンスに三角形の頂点座標を加える(第1引数)
vertices.push(0, 0);
vertices.push(100, 0);
vertices.push(0, 100);
vertices.push(110, 10);
vertices.push(10, 110);
vertices.push(110, 110);
// Vectorインスタンスにテクスチャマッピングのuv座標を加える(第3引数)
uvtData.push(0, 0);
uvtData.push(1, 0);
uvtData.push(0, 1);
uvtData.push(1, 0);
uvtData.push(0, 1);
uvtData.push(1, 1);
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices, null, uvtData);
図010■ふたつの分割された三角形に合わせてテクスチャマッピング
前掲スクリプト003で、Graphics.drawTriangles メソッドに渡した第1引数の頂点座標と第3引数のuvtデータの座標とがどのように対応するかを下表001に掲げました。頂点番号は、上図010の記載にもとづきます。
表001■Graphics.drawTriangles メソッドの第1引数/頂点座標と第2引数/uvtデータ － 分割された三角形
| 頂点番号 | 第1引数/頂点座標 | 第3引数/uvtデータ |
| 0 | (0, 0) | (0, 0) |
| 1 | (100, 0) | (1, 0) |
| 2 | (0, 100) | (0, 1) |
| 1' | (110, 10) | (1, 0) |
| 2' | (10, 110) | (0, 1) |
| 3 | (110, 110) | (1, 1) |
05 頂点番号で三角形を指定する － Graphics.drawTriangles()メソッドの第2引数
Graphics.drawTriangles()メソッドを3次元の表現に利用するときは、ひとつの面を複数の三角形に分割して、テクスチャをマッピングします。その場合、前掲スクリプト003とは異なり、複数の三角形は頂点を共有して、互いに接しているのが通常です。
そこで、前掲スクリプト003でふたつの三角形が接するように、Graphics.drawTriangles()メソッドの第1引数に指定するふたつの頂点座標を同じにしてみます。具体的には、前掲図010の1'を1と、2'を2と同じ座標に設定します。第3引数のuvtデータは、もともとふたつの三角形が頂点のuv座標をふたつ共有していますので、とくに変更はありません。
// Vectorインスタンスに三角形の頂点座標を加える(第1引数)
vertices.push(0, 0);
vertices.push(100, 0);
vertices.push(0, 100);
vertices.push(100, 0); // 変更: ← (110, 0)
vertices.push(0, 100); // 変更: ← (0, 110)
vertices.push(110, 110);
// Vectorインスタンスにテクスチャマッピングのuv座標を加える(第3引数)
uvtData.push(0, 0);
uvtData.push(1, 0);
uvtData.push(0, 1);
uvtData.push(1, 0);
uvtData.push(0, 1);
uvtData.push(1, 1);
これでふたつの三角形が接したかたちで、テクスチャがマッピングされます(図011)。Graphics.drawTriangles()メソッドの第1引数に渡される右下隅の座標(図011の頂点3)は変えていませんので、右下半分の三角形は少し右下に伸ばされたイメージになります。
図011■ふたつの三角形の2頂点を一致させてテクスチャマッピング
Graphics.drawTriangles メソッドの第1引数と第3引数の座標を決める三角形の頂点の数は、全部で4つに減りました 図011の頂点0～3 。ふたつの引数に指定する頂点の座標値をまとめると、下表002のとおりです。しかし、前のスクリプトでは、第1引数と第3引数のVectorインスタンスは、スクリプト003と同じく、それぞれふたつの三角形の6頂点分の各12エレメントを相変わらずもっています。
表002■Graphics.drawTriangles メソッドの第1引数/頂点座標と第2引数/uvtデータ － 統合された三角形
| 頂点番号 | 第1引数/頂点座標 | 第3引数/uvtデータ |
| 0 | (0, 0) | (0, 0) |
| 1 | (100, 0) | (1, 0) |
| 2 | (0, 100) | (0, 1) |
| 3 | (110, 110) | (1, 1) |
ふたつの引数でそれぞれ同じ座標値を2度指定することは、書く手間もさることながら、Graphics.drawTriangles メソッドの内部的な処理でもその分負荷が重複してかかることになります。このような場合、Graphics.drawTriangles メソッドの第1および第3引数は、重複する頂点の座標は省くことができます。つまり、それぞれの引数のVectorインスタンスには、表002に掲載した計4頂点の各8エレメントだけ格納すればよいということです。
しかし、頂点を列挙しただけでは、各三角形がどの頂点3つで構成されるのかわかりません。そこで、それらの三角形の頂点の組合わせを、第2引数の頂点番号として指定します。Graphics.drawTriangles メソッドの第1引数に指定したxy座標の順に、0からインデックスが与えられます。第1引数のVectorインスタンスに頂点座標を表002の順で加えた場合には、それぞれに表002の頂点番号0から3が与えられるのです。
前掲図011のようにテクスチャマッピングを行うなら、ふたつの三角形の頂点番号の組は「0-1-2」と「1-2-3」になります。3つの頂点番号の整数の組を、整数がベース型のVectorインスタンスに必要な三角形の数だけ加えて、Graphics.drawTriangles メソッドの第2引数として渡せばよいのです。そのフレームアクションが、つぎのスクリプト004になります 図012 。
スクリプト004■Graphics.drawTriangles メソッドに頂点座標とuv座標に加えて頂点番号の組を指定
// タイムライン: メイン
// 第1フレームアクション
var mySprite:Sprite = new Sprite();
var myGraphics:Graphics = mySprite.graphics;
var myTexture:BitmapData = new Pen(0, 0);
// 頂点座標のVectorインスタンス生成
var vertices:Vector.<Number> = new Vector.<Number>();
// 頂点番号のVectorインスタンス生成
var indices:Vector.<int> = new Vector.<int>();
// uvtデータのVectorインスタンス生成
var uvtData:Vector.<Number> = new Vector.<Number>();
addChild(mySprite);
// 三角形の頂点座標を加える(第1引数)
vertices.push(0, 0); // 頂点0
vertices.push(100, 0); // 頂点1
vertices.push(0, 100); // 頂点2
vertices.push(110, 110); // 頂点3
// 三角形の頂点番号の組合わせを加える(第2引数
indices.push(0, 1, 2); // 左上半分: 頂点0-1-2
indices.push(1, 2, 3); // 右下半分: 頂点1-2-3
// テクスチャマッピングのuv座標を加える(第3引数)
uvtData.push(0, 0); // 頂点0
uvtData.push(1, 0); // 頂点1
uvtData.push(0, 1); // 頂点2
uvtData.push(1, 1); // 頂点3
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices, indices, uvtData);
図012■2頂点を接したふたつの三角形にテクスチャマッピング
以上が、Graphics.drawTriangles メソッドに渡す3つの引数の基本的な指定の仕方となります。
[*8] 第3引数の名称とされたuvtデータのtは、オプションとなる 省略可能な 3番目の座標値です。視点からの奥行きを示す値が指定されます 詳しくは、「Graphics.drawTriangles メソッド」および[ヘルプ]のGraphics.drawTriangles メソッドの項をご参照ください 。
