ActionScript 3.0で始めるオブジェクト指向スクリプティング

第45回 領域をビットマップで塗る - テクスチャマッピング

この記事を読むのに必要な時間:およそ 3 分

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

ビットマップで塗る

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

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

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

図1 塗りで使う[ライブラリ]のビットマップにクラス名「Image」を設定

図1 塗りで使う[ライブラリ]のビットマップにクラス名「Image」を設定

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

スクリプト1 Shapeインスタンスに描いた円をビットマップで塗る

// フレームアクション
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)⁠

図2 Shapeインスタンスに描いた円がビットマップでタイル状に塗られた

図2 Shapeインスタンスに描いた円がビットマップでタイル状に塗られた

※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つずつ加えていく。

図3 小さな三角形で形づくられた缶の曲面

図3 小さな三角形で形づくられた缶の曲面

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

図4 Graphics.drawTriangles()メソッドで描くふたつの三角形

図4 Graphics.drawTriangles()メソッドで描くふたつの三角形

描くのが仮に三角形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だ。

スクリプト2 Graphics.drawTriangles()メソッドによりふたつの三角形をビットマップで塗る

// フレームアクション
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下図)⁠

図5 ふたつの三角形がビットマップでタイル状に塗られた

画像 画像

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

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入