ActionScript 3.0入門ノート CS4でタグ「drawTriangles()」が付けられているもの

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

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

fig09-03-18_shiji.jpg fig09-03-19.jpg
fig: マウス座標の位置に頂点2を作り、頂点をマウスドラッグで移動させます。
swfを試す

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

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

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

fig09-03-16_shiji.jpg

[: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

fig09-03-17.jpg
(section09-03 Flash Player10の新しいGraphicsメソッドから抜粋)

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

fig09-03-10_shiji.jpg
 次のサンプルは三角形を描き、ビットマップデータの左上半分をテクスチャとして塗るスクリプトです。三角形の頂点の座標を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);

fig09-03-12.jpg

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

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

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

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

fig09-03-09.jpg
[:note:]カリングを行う場合は、三角形の頂点を時計回りに指定します。
(section09-03 Flash Player10の新しいGraphicsメソッドから抜粋)

 drawTriangles()を使うと簡単に三角形を描くことができます。drawTriangles()では、三角形の頂点をベクターで指定します。次のサンプルではローカル座標(0,0)、(150,80)、(-50,120)を頂点とした三角形を描いています。drawTriangles()の引数のベクターverticesではこの3つの座標を連続した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);
fig09-03-08_shiji.jpg

イメージの変形

|

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

イメージをドラッグで変形できます。
fig09-03-19.jpg

swfを試す

まったく新しいAS3の世界!
694a.jpg
Adobe Flash CS4
詳細!ActionScript3.0入門ノート[完全改訂版](CD-ROM付)

楽しいActionScript。
新たなる1歩へと踏み出しましょう。
■内容は?→ 目次を見る
■評判は?→ 書評を読む
この本を書いたわけ

タグ

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

あわせて読みたいブログパーツ