2012年12月18日 星期二

LimeJS : 解決 mask (遮罩) 只能矩形的限制

遮罩在設計遊戲時滿重要的,看到 LimeJS 號稱支援類似 Flash 中的遮罩,心中大喜,不過實際測試,並沒有那麼完美,它的遮罩,基本上以矩形為原則,即使我們製作了一個背景透明的圖形,遮罩的有效範圍還是矩形,頂多是經過旋轉後,變成菱形而已,沒有想像中實用。不過,沒關係,利用圖層的觀念自己再兜一兜、遮一遮吧!


在設計類似打地鼠的遊戲時,一般會利用遮罩疊在地洞的上方,當地鼠在洞口下方時會被遮罩遮住,而地鼠移動到洞口上方時才會顯現。
紅色的圖片為遮罩,使用時,下方帶有紅色的半圓會和洞口的下緣重疊在一起,這樣一來,地鼠只會在紅色範圍內顯現,其它位置時都會被遮罩遮住而看不到。
遮罩圖片
地洞的洞口
看起來好像很完美,不過,前面說過了,在 LimeJS 中以 setMask() 將上面的遮罩設給圖片時,遮罩下方的半圓形好像被填平了般,效果如下圖:
LimeJS 只能使用矩形的 mask
也就是說,我們根本不用特別去製作遮罩的圖形了,在 LimeJS 中只能遮出矩形,無法遮出圓弧的形狀。
沒關係,山不轉人轉,大不了再製作一張「遮羞布」,疊在最上層:
最上層用的圖片
也就是在安排時,依下面的順序來放置圖片

  • 最底層:地洞的圖片。
  • 中間一:矩形的遮罩圖片(以 lime.Sprite 來製作即可)。
  • 中間二:地鼠的圖片。
  • 最上層:「遮羞布」地洞下緣鏤空只剩背景,讓它剛好接在遮罩的正下方。
這樣一來,矩形遮罩無法遮住的地方,直接用最上層的圖片蓋住。效果如下:
加了最上層的遮羞布後的效果
這樣製作起來沒有直接使用一張遮罩圖片就搞定的方便,卻是目前想到較簡單的方法。有空再來研究一下有沒有更簡單的方法。至少,遮罩的問題解決了,類打地鼠的遊戲也解決了最大的困難。


沒有留言:

張貼留言

 
© 2009. Design by Pocket