Chap09 図形の描画の最近のブログ記事

（section09-03 Flash Player10の新しいGraphicsメソッドから抜粋）

　図形を分割する頂点をマウスでドラッグするように動かして再描画すれば、図形をマウスドラッグで変形させることができます。次の例では四角形を図のように４分割し、2番の頂点をマウス座標に合わせて移動させています。


fig: マウス座標の位置に頂点2を作り、頂点をマウスドラッグで移動させます。
→swfを試す

　ただし、クリックした座標に単純に２番の頂点を移動させるとドラッグしなくてもマウスダウンしただけでテクスチャが変形してしまいます。そこでマウスダウンした位置のUV座標も再計算して再描画します（52行目）。この状態からマウスドラッグに合わせて頂点を移動させれば（61行目）、マウスダウンした位置から頂点をドラッグすることになり、マウスでイメージをつかんで引っ張っているように見えます。

（section09-03 Flash Player10の新しいGraphicsメソッドから抜粋）

　次のサンプルは図形を８個の三角形に分割した場合です。頂点は９個になり、それぞれの座標は6〜9行目でverticesに登録しています。８個の三角形は頂点を0-1-3、1-3-4、1-2-4のよう結んで作ります。この頂点の並びを11〜19行目でindicesに登録します。0〜8の各頂点のUV座標は21〜24行目でuvtDataに登録します。たとえば、7番の頂点のUV座標は(0.5, 1)になります。



[:script:]]図形を8個の三角形に分割してテクスチャを貼る

var shape:Shape=new Shape();
//ビットマップデータで塗る
var bmpdata:BitmapData=new IMG_8268(0,0);
shape.graphics.beginBitmapFill(bmpdata);
//頂点の座標
var vertices:Vector.<Number>=new Vector.<Number>();
vertices.push(0,0, 160,0, 320,0);//頂点0-1-2
vertices.push(0,120, 160,120, 320,120);//頂点3-4-5
vertices.push(0,240, 160,240, 320,240);//頂点6-7-8
//三角形を描く頂点
var indices:Vector.<int>=new Vector.<int>();
indices.push(0,1,3);//三角形A
indices.push(1,3,4);//三角形B
indices.push(1,2,4);//三角形C
indices.push(2,4,5);//三角形D
indices.push(3,4,6);//三角形E
indices.push(4,6,7);//三角形F
indices.push(4,5,7);//三角形G
indices.push(5,7,8);//三角形H
//頂点のUV座標（0〜1）
var uvtData:Vector.<Number>=new Vector.<Number>();
uvtData.push(0,0, 0.5,0, 1,0);//頂点0-1-2
uvtData.push(0,0.5, 0.5,0.5, 1,0.5);//頂点3-4-5
uvtData.push(0,1, 0.5,1, 1,1);//頂点6-7-8
//三角形を描く
shape.graphics.drawTriangles(vertices,indices,uvtData);
shape.graphics.endFill();
shape.x=100;
shape.y=50;
addChild(shape);

　さきほどと同じように頂点の座標を変更すると、頂点の移動に合わせてテクスチャとして貼ったビットマップデータも変形します。

vertices.push(0,30, 160,0, 320,30);//頂点0-1-2
vertices.push(30,120, 190,120, 290,120);//頂点3-4-5
vertices.push(0,210, 160,240, 320,220);//頂点6-7-8

（section09-03 Flash Player10の新しいGraphicsメソッドから抜粋）

　図形にビットマップデータをテクスチャとして貼るには、各頂点がビットマップデータのどの位置になるかをUV座標で指定します。UV座標はビットマップデータの左上角を(0,0)、右下角を(1,1)とした比率で示す座標です。


　次のサンプルは三角形を描き、ビットマップデータの左上半分をテクスチャとして塗るスクリプトです。三角形の頂点の座標をvertices、描画する頂点番号をindices、そして頂点に対応するビットマップのUV座標をuvtDataで指定しています。ビットマップデータはビットマップシンボルをIMG_8268の名前でリンケージ書き出ししています。

[:script:]三角形にビットマップデータのテクスチャを貼る

var shape:Shape=new Shape();
//ビットマップデータで塗る
var bmpdata:BitmapData=new IMG_8268(0,0);
shape.graphics.beginBitmapFill(bmpdata);
//頂点の座標
var vertices:Vector.<Number>=Vector.<Number>([0,0, 320,0, 0,240]);
//三角形を描く頂点
var indices:Vector.<int>=Vector.<int>([0,1,2]);
//頂点のUV座標（0〜1）
var uvtData:Vector.<Number>=Vector.<Number>([0,0, 1,0, 0,1]);
//三角形を描く
shape.graphics.drawTriangles(vertices,indices,uvtData);
shape.graphics.endFill();
shape.x=50;
shape.y=50;
addChild(shape);

（section09-03 Flash Player10の新しいGraphicsメソッドから抜粋）

　drawTriangles()は三角形を描くためだけの単純なメソッドではありません。
drawTriangles()は図形を三角形で分割し、図形の変形に応じて変形するビットマップを貼るためのメソッドです。この機能は3D物体のテクスチャ表現が主目的ですが、2Dのアニメーションでも利用できます。drawTriangles()の書式は次のとおりです。なお、第４引数のcullingは3D空間でのカリング（隠れた部分を描画しない）の設定なので、ここでは初期値であるカリングを行わない"none"のまま使用します。

書式： drawTriangles(vertices:Vector, indices:Vector = null, uvtData:Vector = null, culling:String = "none"):void

頂点の座標と番号の振り方
　drawTriangles()の第１引数のverticesは頂点の座標、第２引数のindicesは頂点の番号です。verticesは先の例でも見たように頂点のローカル座標(x,y)をペアにしてベクターに入れます。indicesは頂点の番号を0から順に振った連番です。頂点の番号の振り方は自由ですが、この頂点番号の並びとverticesの座標の並びを合わせます。また、図形を分割する三角形の形や個数も自由です。


[:note:]カリングを行う場合は、三角形の頂点を時計回りに指定します。

（section09-03 Flash Player10の新しいGraphicsメソッドから抜粋）

　drawTriangles()を使うと簡単に三角形を描くことができます。drawTriangles()では、三角形の頂点をベクターで指定します。次のサンプルではローカル座標(0,0)、(150,80)、(-50,120)を頂点とした三角形を描いています。drawTriangles()の引数のベクターverticesではこの３つの座標を連続した6個の数値で指定します（4〜6行目）。

[:script:]drawTriangles()を使って三角形を描く

var shape:Shape=new Shape();
shape.graphics.beginFill(0xFF0000);
//頂点の座標
var vertices:Vector.<Number>=Vector.<Number>([0,0, 150,80, -50,120]);
//三角形を描く
shape.graphics.drawTriangles(vertices);
shape.graphics.endFill();
shape.x=200;
shape.y=100;
addChild(shape);

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　drawPath()は描画コマンドと座標をセットにしてパスを描くメソッドですが、実際にはさらに線のスタイル、塗りのスタイルを組み合わせることで図形の描画が完成します。 　drawGraphicsData()は、これらの描画に必要な値をgraphicsDataベクターにまとめ、drawGraphicsData(graphicsData)のように実行することで図形の描画を完成させることができます。
　次のHexagonクラスではdrawGraphicsData()を使って六角形の図形を描いています。スクリプトを見るとわかるように引数のgraphicsDataはstroke、fill、pathの３つの値が入っているベクターです（47〜49行目）。

var graphicsData:Vector.<IGraphicsData> = new Vector.<IGraphicsData>();
graphicsData.push(stroke, fill, path);
graphics.drawGraphicsData(graphicsData);

　stroke、fill、pathは、それぞれが線のスタイル、塗りのスタイル、描画パスを示すデータです。Hexagonクラスでは、これらの３つのデータをsetStroke()、setFill()、setPath()で作成しています。

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　drawPath()の第３引数で設定するwindingプロパティは図形のパスが交差してできる領域を塗るかどうかの湾曲規則を指定します。初期値では"evenOdd"になっていて、重なりが奇数回の場合に塗ります。
　次の例ではdata1、data2、data3と３つの図形が重なったパスを使って図形を描いています。このとき、２度重なっている部分は色が塗られず、３回重なっている部分は色が塗られているのがわかります。

[:script:]重なりがある図形をwindingプロパティを"evenOdd"で塗る

var w:int=120;
var h:int=150;
var data1:Array=[0,0, w,0, w,h, 0,h, 0,0];
var data2:Array=[25,25, w+25,25, w+25,h+25, 25,h+25, 25,25];
var data3:Array=[50,50, w+50,50, w+50,h+50, 50,h+50, 50,50];
var datalist:Array=data1.concat(data2,data3);
var commands:Vector.<int>=Vector.<int>([1,2,3,2, 1,2,3,2, 1,2,2,2,2]);
var data:Vector.<Number>=Vector.<Number>(datalist);
//描画の交差領域の塗りの処理法
var winding:String=GraphicsPathWinding.EVEN_ODD;
//図形を描く
var shape:Shape=new Shape();
shape.graphics.beginFill(0xFF0000);
shape.graphics.drawPath(commands, data, winding)
shape.graphics.endFill();
shape.x=200;
shape.y=150;
addChild(shape);

　windingプロパティのもう一方の値は"nonZero"です。この値はGraphicsPathWinding.NON_ZEROとして定数が定義してあります。windingプロパティを"nonZero"に設定すると湾曲タイプ（点を順に線で結ぶ方向）が時計回りか反時計回りかで図形を区別します。時計回りの値を+1、反時計回りの値を-1とし、重なっている領域はこの値を合計します。そして、値の合計が0の領域は塗らず、0以外の領域は塗ります。
　次の例ではすべてがdata1、data2、data3の全部が時計回りで+1なので、重なっている領域で合計が0になるところはありません。したがって、すべての領域が塗られます。

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　次の例はdrowPath()を使って渦巻き状に線を引くサンプルです。このように座標を計算式で求めることで図形を効率よく描けます。

[:script:]drawPath()を使って渦巻きを描く

var r:Number=1;
var rad:Number=2*Math.PI/8;
//描画コマンド
var commands:Vector.<int>=new Vector.<int>();
//描画に使う座標
var data:Vector.<Number>=new Vector.<Number>();
//コマンドと座標を追加する
commands.push(GraphicsPathCommand.MOVE_TO);
data.push(0,0);
for (var i:int=1; i<50; i++) {
	commands.push(GraphicsPathCommand.LINE_TO);
	r=i*i/20;
	var pt:Point=Point.polar(r,rad*i);
	data.push(pt.x,pt.y);
}
//図形を描く
var shape:Shape=new Shape();
shape.graphics.lineStyle(1,0x005500);
shape.graphics.drawPath(commands, data);
shape.x=stage.stageWidth/2;
shape.y=stage.stageHeight/2;
addChild(shape);

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　次にdrawPath()を使って図形を描くサンプルを示します。これを実行すると19行目でシェイプが作られ、このシェイプに図形を描画されます。drawPath()での描画はdrawRect()などの描画の手順と同じように図形を塗るならば描画する前にbeginFill()で塗りを開始し、描画終了でendFill()を実行します（20〜22行目）。実際に描画を行っているのは21行目のdrawPath()です。drawPathの３個の引数のcommandsとdataとwindingには、描画で必要となる値を入れておきます。
　commandsとdataはベクターです。ベクターを作るには、new Vector.<ベース型>()のようにベース型（値のデータ型）を指定してインスタンスを作ります。commandsは要素の値がint型なのでを指定します（4行目）。

[:script:]drawPath()を使って図形を描く

var w:int=150;
var h:int=120;
//描画コマンド
var commands:Vector.<int>=new Vector.<int>();
commands.push(GraphicsPathCommand.MOVE_TO);
commands.push(GraphicsPathCommand.LINE_TO);
commands.push(GraphicsPathCommand.CURVE_TO);
commands.push(GraphicsPathCommand.LINE_TO);
//描画に使う座標
var data:Vector.<Number>=new Vector.<Number>();
data.push(0,0);
data.push(w,0);
data.push(w,h);
data.push(0,h);
data.push(0,0);
//描画の交差領域の塗りの処理法
var winding:String=GraphicsPathWinding.EVEN_ODD;
//図形を描く
var shape:Shape=new Shape();
shape.graphics.beginFill(0xFF0000);
shape.graphics.drawPath(commands, data, winding);
shape.graphics.endFill();
shape.x=200;
shape.y=150;
addChild(shape);

　dataベクターを見るとわかるようにこの図形の描画には５個の点を使用し、ベクターには合計10個の値が入ります。commandsでは、dataから値を順に取り出してメソッドを実行していきます。commandsに追加したメソッドとdataの座標とを付き合わせると次のようになっています。moveTo()とlineTo()の引数は２個ですが、curveTo()はコントロールポイントの座標があるので４個の値を必要とします。

data.push(0,0);//moveTo(0,0)
data.push(w,0);//lineTo(w,0)
data.push(w,h);//curveTo(w,h,0,h)
data.push(0,h);
data.push(0,0);//lineTo(0,0)

（section09-03 Flash Player 10の新しいGraphicsメソッドから抜粋）

　moveTo()、lineTo()、curveTo()を使って直線や曲線で座標を結ぶことで図形を描くことができますが、辺の数だけ線を結ぶステートメントが必要です。新しく追加されたdrawPath()では、描画コマンドの配列と座標の配列を指定することで、図形の描画パスを１回で命令できます。drawPath()を使うことで描画スクリプトが簡潔になり、座標を数式で計算したり、外部から読み込む場合などにも対応しやすくなります。

書式：
drawPath(commands:Vector, data:Vector, winding:String = "evenOdd"):void

　commandsは描画で使用するメソッドのベクター（データ型を指定した配列）です。使用できるコマンドは基本的にはmoveTo()、lineTo()、curveTo()と同じで、それぞれに1、2、3の数値が割り当ててあります。[1,2,2]ならば、moveTo()、lineTo()、lineTo()の順に実行することになります。dataは描画で使用する座標(x,y)のベクターです。[50,70,100,200,250,300]ならば、(50,70)と(100,200)と(250,300)の３つの点の座標を示しています。

　たとえば、commandsが[1,2,2]でdataが[50,70,100,200,250,300]ならば、moveTo(50,70)、lineTo(100,200)、lineTo(250,300)を実行することになり３つの点を結ぶ直線が引かれます。commandsが[1,3]ならば、moveTo(50,70)、curveTo(100,200,250,300)を実行して、(50,70)から(250,300)への曲線が引かれます。(100,200)の点は曲線を描くためのコントロールポイントの座標として使用されます。

　ところで、commandsには0、4、5の数値に割り当ててあるコマンドもあります。0は何もせずに次のコマンドに進みます。4、5はそれぞれmoveTo()とlineTo()を実行しますが、通常は引数が(x,y)と２個のところを(dummy,dummy,x,y)のように４個の座標値を使用し、最初の２個は無視します。これはcurveTo()で使用するコントロールポイントの座標を無視して描画するためです。先の例のcommandsが[1,3]のところを[1,5]にするとコントロールポイントの座標を無視して(50,70)から(250,300)へ直線で結びます。
　commandsで使用する0〜5の値は、次のようにGraphicsPathCommandクラスでクラス定数として定義してあります。


値　　定数　　　　　　　　　　　　　　実行するメソッド
0　　GraphicsPathCommand.NO_OP　　何も実行しない
1　　GraphicsPathCommand.MOVE_TO　　moveTo(x1,y1)
2　　GraphicsPathCommand.LINE_TO　　lineTo(x1,y1)
3　　GraphicsPathCommand.CURVE_TO　　curveTo(x1,y1,x2,y2)
4　　GraphicsPathCommand.WIDE_MOVE_TO　　値を2個とばしてmoveTo(x2,y2)
5　　GraphicsPathCommand.WIDE_LINE_TO　　値を2個とばしてlineTo(x2,y2)


　最後のwindingは図形が交差した領域を塗るかどうかを決めるパラメータです。値は"evenOdd"または"nonZero"をとります。この値については後ほどサンプルを示します。