drawTriangles+UV貼圖筆記

寫給自己的筆記，很粗淺。

昨天研究了一下drawTriangles，直接google這關鍵字可查到最基本的官方教材
．關於使用 drawTriangles()
接著也會看到這篇
．UV 對應

照著UV對應這篇很快就能弄出一個3D旋轉的範例，如下
．Demo:Spinning3dOcean.swf

這個旋轉教學很簡單，但也有點小複雜，因為他同時使用了3D投影及triangle UV貼圖兩件事。原因是Flash的UV貼圖功能是包含了3D透視比例(就是裏面那個T變數)。所以這篇教學才需要一次介紹這麼多。

---

不過我個人偏好把東西再分得清楚些，且有很多時候我需要UV變形，但不見得同時也需要3D座標。

所以，以下我先不管3D座標，所有T值都帶1，單純把UV變形的部份練習一下。如下

．Demo: UVT_test_0.swf

這個測試是從上面的官方教學修改而來，並加入線條顯示，及四角控制點。拖拉四個角，可任意變形圖片。唯一問題是變形會像是兩個三角面在折來折去，而不是很smooth的3D傾斜，原因就在我前面說的T值目前都帶1，暫時不考慮3D因素所致。(關於3D問題，將補充說明在最後面)

．Source code

---

上面的練習只切了兩片三角面，接著我就想試多切幾面的效果，先試試切8片的效果：

．Demo: UVT_test_1.swf

切愈多面可使變形效果較smooth，不過仍與套用3D T值的效果不太相同，目前這種會比較像是2D的網面效果
．Source code

---

上面的練習是用手動的方式key入9個節點，很弱，所以接下來要設計成用迴圈自動運算節點座標的方式：

．Demo: UVT_test_2.swf

不過demo裏我沒有再做一個UI介面讓人動態去改切割數了，太花時間了。有興趣的人，在source code裏去調整slice這個變數即可。

．Source code

---

練習至此，就可以利用drawTriangles及UV貼圖的技巧來做許多事了，例如以下的精靈效果：

．Demo: UVT_genie.swf

---

關於3D的補充說明
使用UV貼圖時，那個T變數，最佳的解決方式就是用3D座標的方式來算，就如同最上面那個官方範例一樣。這點對已熟知3D投影算法的人來說，並不是什麼大問題。也因此這篇筆記才沒對此特別著墨。

而有興趣瞭解3D投影的人，可參考這篇：3D選單教學裏最前面的原理說明部份。

除了直接算出3D標座外，也有神人提出別種解法，請看這篇The best drawPlane/distortImage method, ever
文中作者用兩條對角線，再配合很神妙的公式，算出合理的3D T值，而不用透過真實的3D座標計算。
比較可惜是作者並沒有說明這公式的導出原理。(可能是硬湊出來的，因為他說他花了很多時間try & error & beer XD)
且這方式只能用在只有四個頂點的UV變形裏。其他狀況就完全不適用了。

所以我個人的結論是，單純要做UV變形的話，我會先不考慮T值，能弄出需要的效果就好。假若遇到需要實際3D表現的話，再視情況寫一個3D座標系統配合使用。而上面神人導出的奇妙公式，有出現剛好的使用時機才會考慮使用了。