今回から，定められた領域をビットマップで塗りつぶすお題に取りかかる。目指すは，3次元空間から2次元平面に透視投影された面に，素材となるビットマップを貼りつけることだ。素材を「テクスチャ」と呼び，貼りつけは「マッピング」という。この「テクスチャマッピング」を学ぼう。

ビットマップで塗る

まず，3次元空間は今回置いておく。ビットマップで，決まった領域を塗ってみたい。使うのは，Graphicsクラスのメソッドだ。第33回「遠近法の投影」の「ステージにランダムなシェイプを配置する」で，Shapeインスタンスに塗りの円を描いた。このとき塗り色を定めたのは，Graphics.beginFill()メソッドだった。このメソッドをGraphics.beginBitmapFill()と書替えれば，塗りにビットマップが使える。必須の第1引数には，塗りに用いるBitmapDataオブジェクトを渡す（※1⁠）⁠。

Graphicsオブジェクト.beginBitmapFill(BitmapDataオブジェクト)

塗りのビットマップは[ライブラリ]に置いて，インスタンスは動的につくろう。そのためには，そのビットマップに[クラス]を設定しておかねばならない(詳しい手順については，第34回「3次元空間における回転」の「ビットマップのインスタンスを動的に配置する」参照)。クラス名は「Image」としておく（図1⁠）⁠。

タイムラインには予め何も置かなくてよい。つぎのスクリプト1をフレームアクションとして書くだけだ。

// フレームアクション
var nSize:Number = stage.stageHeight / 2;
var myShape:Shape = new Shape();
var myGraphics:Graphics = myShape.graphics;
var myTexture:BitmapData = new Image();
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawCircle(nSize, nSize, nSize);
myGraphics.endFill();
addChild(myShape);

タイムラインに動的にShapeインスタンス（myShape）を置いて，そのShape.graphicsプロパティから得たGraphicsオブジェクト（myGraphics）にGraphics.drawCircle()メソッドで円を描いた（前掲第33回「遠近法の投影」参照⁠）⁠。そのとき，塗りはGraphics.beginBitmapFill()メソッドで，[ライブラリ]のビットマップのインスタンス（myTexture）を指定している（※2⁠）⁠。すると，円の内側はビットマップでタイル状に塗られる（図2⁠）⁠。

※1

Graphics.beginBitmapFill()メソッドには，オプションとしてあと3つの引数がある。第2引数はビットマップの変形を定めるMatrixオブジェクト，第3引数はタイル状に塗るかどうかのブール（論理）値，第4引数がスムージングに関わるレンダリングの仕方を決める。

※2

ビットマップ（Image）のインスタンスをつくるとき，コンストラクタに引数を渡していない（new Image()⁠）⁠。これはFlash Professional CS5以降の書き方なので，Flash CS4 Professional以前では引数をふたつ渡す必要がある（前掲第34回「3次元空間における回転」の「ビットマップのインスタンスを動的に配置する」参照⁠）⁠。

三角形に分けて描く － Graphics.drawTriangles()メソッド

描画領域をいくつもの三角形に分けて描くのが，Graphics.drawTriangles()メソッドだ。三次元空間の曲面も，複数の細かな三角形に分ければ，平面の三角形の集まりで表現できる。某ビールメーカーの特徴的な酎ハイの缶を思い浮かべてもらうとよい（図3⁠）⁠。必須の第1引数はNumberベース型のVectorオブジェクトで，3角形の頂点座標をxyの順に交互に3つずつ加えていく。

Graphics.drawTriangles()メソッドにより，ふたつの三角形をビットマップで塗ってみよう。ふたつの三角形それぞれの3頂点，都合6つの座標は下図4のように定める。

描くのが仮に三角形1ひとつだけだったら，引数となるNumberベース型のVectorオブジェクトをつぎのようにつくって，Graphics.drawTriangles()メソッドに渡しても構わないかもしれない。

var vertices:Vector.<Number> =
  new <Number>[20, 20, 120, 20, 20, 120];   // 三角形1の3頂点座標
myGraphics.drawTriangles(vertices);

しかし，Graphics.drawTriangles()メソッドをテクスチャマッピングに用いると，面を数多くの三角形に分けて塗ることが少なくない。上記のように座標をただ書連ねると，三角形がいくつあるのか，どれがx座標でどれがy座標なのか訳がわからなくなる。筆者としては，VectorオブジェクトにVector.push()メソッドを用いて，頂点ひとつずつ，つまりxy座標ひと組ごとに加えることをお勧めしたい。

Graphics.drawTriangles()メソッドでふたつの三角形を描き，ビットマップで塗ったのが，つぎのスクリプト2だ。

// フレームアクション
var myShape:Shape = new Shape();
var myGraphics:Graphics = myShape.graphics;
var myTexture:BitmapData = new Image();
var vertices:Vector.<Number> = new Vector.<Number>();
// 三角形1の3頂点座標
vertices.push(20, 20);
vertices.push(120, 20);
vertices.push(20, 120);
// 三角形2の3頂点座標
vertices.push(140, 40);
vertices.push(140, 140);
vertices.push(40, 140);
myGraphics.beginBitmapFill(myTexture);
myGraphics.drawTriangles(vertices);
myGraphics.endFill();
addChild(myShape);

[ムービープレビュー]を確かめると，ふたつの三角形が描かれて，その内側はビットマップでタイル状に塗られる（図5上図⁠）⁠。Graphics.beginBitmapFill()メソッドは，デフォルトでは対象となるShapeオブジェクトの基準点，つまりスクリプト2ではステージ左上隅からビットマップを塗り始める（※3⁠）⁠。そのため，三角形に塗ったビットマップの左上が少し切れてしまった（図5下図⁠）⁠。

※3

塗りの起点は，Graphics.beginBitmapFill()メソッドの第2引数として渡すMatrixオブジェクトで変えられる（前述注※1参照⁠）⁠。