wonderfl CHECKMATE 第2回目 (2) -実装1（画像分割）-
2009/08/24 20:09 - AS3.0
前回は Elastic Rectangle の元ネタの話をしました。
流れで、ビジュアル的な実装についても軽く触れました。 画像を複数の三角形に分割し、それぞれの三角形を変形させるというものですね。
そしてその三角形を表示する手段は、AS 3.0 では専用のメソッドができたため、とっても簡単になって良かった良かった、というのが前回までのあらすじ。
drawTriangles が導入されて、以下のことが言えるようになったと思います。
三角形を描けば良い、それすなわち、三角形の頂点の定め方を考えれば良い
じゃあ、三角形の頂点をどう決めんだよ、ということですが、順を追って考えていきましょう。
画像をぐにゃぐにゃさせるには、その画像を複数の三角形に分割するわけですが、そのためにはまず複数の四角形に分割することになります。
以下、左図のように横2、縦3に分割する場合で考えてみます。 2×3で6個の長方形ができました。
ここで各長方形に対角線を1本ずつ引いてみましょう。 6×2で12個の三角形ができました。
分割した四角形の各頂点を左図のように定めたとき、三角形の頂点は以下のような組み合わせになります。
0 と 1 と 3
1 と 4 と 3
1 と 2 と 4
2 と 5 と 4
3 と 4 と 6
4 と 7 と 6（以下同様・略）
対角線の方向はどっちでもいいんですが、とりあえず右上から左下の方にしました。
ここまで決まれば、drawTriangles の記述はできたも同然ですね。
第2引数 indices は上の頂点の組み合わせそのまま。
第3引数 uvtData は縦、横、それぞれの分割数による割り算に過ぎない。 例えば頂点7なら、x に相当するのが 0.5（1/2）、y に相当するのが 0.6666…（2/3）となります。
あとは第1引数 vertices である、全頂点の座標を決定するだけですが、これも別に造作もないこと。 画像の幅と高さに第3引数の値と掛け合わせるだけです。 例えば、画像の幅が 240px、高さが 300px だとすると、頂点7は、X座標値が 120、Y座標値が 200 になりますね。
頂点の順番の決め方はコーダーの恣意によりますが、まぁ上で示したとおり、左側から右側、上側から下側にしておくのが無難でしょう。 あとはすべて計算によって値を求めることができます。実に簡単ではありませんか。
これで三角形を表示するための基礎は固まりました。
次に実装しなければならないのは、頂点を動かすということですが、それは次回の講釈で。
