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

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


在設計類似打地鼠的遊戲時，一般會利用遮罩疊在地洞的上方，當地鼠在洞口下方時會被遮罩遮住，而地鼠移動到洞口上方時才會顯現。
紅色的圖片為遮罩，使用時，下方帶有紅色的半圓會和洞口的下緣重疊在一起，這樣一來，地鼠只會在紅色範圍內顯現，其它位置時都會被遮罩遮住而看不到。

遮罩圖片

地洞的洞口

看起來好像很完美，不過，前面說過了，在 LimeJS 中以 setMask() 將上面的遮罩設給圖片時，遮罩下方的半圓形好像被填平了般，效果如下圖：

LimeJS 只能使用矩形的 mask

也就是說，我們根本不用特別去製作遮罩的圖形了，在 LimeJS 中只能遮出矩形，無法遮出圓弧的形狀。
沒關係，山不轉人轉，大不了再製作一張「遮羞布」，疊在最上層：

最上層用的圖片

也就是在安排時，依下面的順序來放置圖片

• 最底層：地洞的圖片。
• 中間一：矩形的遮罩圖片(以 lime.Sprite 來製作即可)。
• 中間二：地鼠的圖片。
• 最上層：「遮羞布」地洞下緣鏤空只剩背景，讓它剛好接在遮罩的正下方。

這樣一來，矩形遮罩無法遮住的地方，直接用最上層的圖片蓋住。效果如下：

加了最上層的遮羞布後的效果

這樣製作起來沒有直接使用一張遮罩圖片就搞定的方便，卻是目前想到較簡單的方法。有空再來研究一下有沒有更簡單的方法。至少，遮罩的問題解決了，類打地鼠的遊戲也解決了最大的困難。