2012年11月19日 星期一

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 上,「糊掉」的問題就可以迎刃而解。




沒有留言:

張貼留言

 
© 2009. Design by Pocket