LimeJS : Polygon 的鋸齒

上週以 LimeJS 在寫 HTML5 版的「籃球高手」時，遇到了一個困擾，除了籃球、球網動畫是用 PNG 的圖片檔，其它在場景中的圖都是用 LimeJS 中的圖形元件「畫」出來的，但是卻發現「畫質不佳」，連選項按鈕上的文字都「糊掉了」。而且更好玩的是，同樣的程式，在 Chrome 中看到的畫質差到令人無法接受，而在 iPad 的 Safari 中卻又正常。試了好久，令人百思不解。哈！問題後來解決了，但也花了不少時間才換來經驗。
話說 LimeJS 中提供了幾個常用的圖形元件：

• Layer
• Sprite
• Label
• Circle
• Polygon
• RoundedRect

上面的除了 Layer 算是一個單純的「容器」，其它的都只要設定一下參數，就可以有「造型」。我們可以使用 appendChild 來把任意元件組合在一起──原來我是這麼單純的想。但是在製作「籃球高手」碰到的問題，讓我了解到，其實不能亂配的。
看看我實驗的結果

上面的四個圖是我把一個 Label 和一個 Circle 分別加入 Layer、Sprite、Polygon 和 RoundedRect 的情形。Polygon 那一組的文字及圓形有很明顯的「鋸齒」，萬一因為 ViewPoint 不同而需要縮放處理時，鋸齒就更明顯了。另外，看看在 Windows 中，我們把滑鼠移到四個不同的 Label 時的滑鼠指標，除了 移到 Polygon 上的是「圖形模式」的「箭頭」，其它的三個都是「文字模式」的滑鼠指標。由此看來，當我們把 Label 加在 Polygon 時，它被以「點陣圖」的方式來「畫」出文字了。正因為如此的特性，造成文字可能會糊掉，甚至連加入 Polygon 的 Circle 也是如此。
如何解決 Polygon 當「Parent」的困擾呢？當然就是不要讓它當 Parent，把 Label 和 Circle 加到 scene 或是某個 Layer 上，「糊掉」的問題就可以迎刃而解。