haraです。FlashCS5の新機能についていけるのやら、とびくびくしつつ、
今回はPlayer10限定の機能、drawTrianglesを使って遊びつつ、使い方を覚えていきます。
基本概念（超ざっくり）
drawTrianglesはその名の通り、三角形を描きます。
頂点座標の配列 verticies
テクスチャの座標配列 uvData
三角形の順番の配列 indicies
これらを受け取って、
MC.graphics.drawTriangles(verticies, indicies, uvData);
ってやってあげると
引数として与えた配列の情報にしたがって、MCのgraphicsで描かれた図形を三角形の集合体に分割することができます。
注意点としては、verticiesには実際に三角形が描かれるピクセルの座標を入れますが、
uvDataには縦横それぞれ1を最大としたパーセンテージを、
さらにindiciesには座標の値ではなく、配列の番号を入れるので、それぞれの役割を把握しておくことです。
一番簡単な例だと、こんな感じ。
private var verticies:Vector.<Number> = new Vector.<Number>(); private var indicies:Vector.<int> = new Vector.<int>(); private var uvData:Vector.<Number> = new Vector.<Number>(); /// 中略 /// // 頂点座標の配列 verticies vertices.push(0, 0); // 頂点0 vertices.push(100, 0); // 頂点1 vertices.push(0, 100); // 頂点2 vertices.push(110, 110); // 頂点3 // 三角形の順番の配列 indicies indices.push(0, 1, 2); // 左上半分: 頂点0-1-2 indices.push(1, 2, 3); // 右下半分: 頂点1-2-3 // テクスチャの座標配列 uvData uvtData.push(0, 0); // 頂点0 uvtData.push(1, 0); // 頂点1 uvtData.push(0, 1); // 頂点2 uvtData.push(1, 1); // 頂点3
drawTrianglesの正確な概念については、AdobeDeveloperConnectionの記事でとてもわかりやすく解説されています。
三角形分割によるテクスチャマッピング − Graphics.drawTriangles()メソッド Part 1
応用編
とはいえ、これらをいちいち意識するのも大変なので、drawTrianglesを使う時は、より簡易な形でdrawTrianglesを使うためのクラスを用意するべきでしょう。
というわけで、今回のサンプルではdrawTrianglesをコントロールするクラスを作成して「drawTrianglesを使ったスライドショーエフェクトを作る」という体で遊んでみます。
実際に作ってみた例がこちらになるのですが、
ソースの中の、DistortというクラスがdrawTrianglesを扱う役割を担います。これは、画像を読み込ませて縦横同じ分割数で三角形を作成するクラスです。
このクラスはDistortUnitというクラスに保持され、与えられた画像と頂点の情報をもとにレンダリングする役割を担います。
本体の、ドキュメントクラスはDistortUnitクラスのインスタンスを２つ作成し、表示を入れ替えることでスライドショー的な動きをします。
drawTrianglesの使い方がわかれば、あとは頂点をどう操るか、という問題に絞られてきます。
今回は３回に分けてお送りいたします。
次回は頂点アニメーションのバリエーションを出してみます。では〜
