天天看點

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

本節書摘來自異步社群《點睛:actionscript3.0遊戲互動程式設計》一書中的第2章,第2.3節,作者:遊志德 , 彭文波 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

濾鏡清單中,【斜角】似乎最接近斜面的含義,我們不妨點出來看看,如圖2-45所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

嗯,是這個效果了。現在把photoshop的斜面樣式重新打開,我們按之前對photoshop的設定來修改flash裡的參數。“大小”參數我們沒有使用預設值,而是從原來的5改成了3。在flash裡我們也應用同樣的設定,如圖2-46所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

出來的效果并不好看。細心的讀者應該不難發現,斜角濾鏡加上以後,整個字好像帶上了重影一樣,第一眼看上去還以為是自己的眼睛出了問題。

我們把flash舞台的背景顔色改深一點,各種越界的邊緣便原形畢露,如圖2-47所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

我們如果把斜角陰影區的顔色調亮,問題将會更加顯著,如圖2-48所示。

整個投影都被斜角的陰影部分覆寫了。

還記得之前提到的多濾鏡的有序性嗎?當一個顯示對象被應用上了多個濾鏡之後,它最終的效果會受到先後順序的影響。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

photoshop的圖層樣式直接應用到原始圖形上,樣式之間互不影響,而flash的濾鏡則不同,如果目前對象已經設定了一個投影濾鏡,那麼,它下一個濾鏡的作用範圍将會包含投影濾鏡的顯示區域。

為了讓大家看得更清楚,我們決定用一個簡單的方塊作為試驗的材料。

2.3.1 用方塊觀察斜面樣式與斜角濾鏡作用方法的差異

我們在photoshop和flash裡都各自建一個500500的空白檔案,然後各自在畫布中心繪制一個純藍的(#0000ff)、100100大小的方塊(不懂得如何完成以上操作的朋友,可自行查閱相關的入門教材),然後flash那邊再多做一步,按f8轉換為元件,類型選擇“影片剪輯”。

為了最大限度上減少對本課題的幹擾,建立的投影應力求做到最簡單,最幹淨。為此,我們把flash投影濾鏡中的模糊值設定成0并且把顔色調亮(#00cc00),距離也拉開到30像素,如圖2-49所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

在photoshop裡我們也制作這樣的一個投影,如圖2-50所示。

下面我們分别給這兩個圖形添加浮雕效果,flash用斜角濾鏡,photoshop用斜面和浮雕,如圖2-51、圖2-52所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

可見,兩者最大的差别在于,flash把投影部分都弄出斜面來了,但photoshop的浮雕絲毫不影響投影樣式的效果。

通過這樣的一個試驗,相信大家都能了解文字上的斜角濾鏡為什麼會越界了吧。

解決flash斜角濾鏡問題的方法很簡單:隻要把斜角濾鏡拖到投影之前,斜角就不再作用于投影了,如圖2-53所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

我們回過頭來給文字作出同樣的修正,如圖2-54所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

邊緣的問題解決了,但斜角的邊緣并不光滑,尤其是轉角較多的區域更顯得凹凸不平。

我們試着把其他可模拟的參數都調成跟photoshop的相一緻,比如角度,按投影的做法,應改為60度;然後就是顔色了,photoshop高光和陰影的alpha預設都等于75%,我們讓flash也跟着改一下;再者,幹脆把品質也往“高”裡調一下。

修改以後的效果如圖2-55所示。

沒有明顯的改善,浮雕的高光和陰影還是太重了,那麼,差距還在哪裡?

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

**

2.3.2 photoshop斜面樣式的精雕細琢vs flash斜角濾鏡的粗制濫造**

我們先把沒對應上的參數一一列出來。

photoshop:樣式,方法,深度&方向,軟化,陰影高度,(等高線)。

flash:強度,距離,類型,(挖空)。

做到這一步,我們很納悶,為什麼flash斜角濾鏡的參數又是這些?看起來跟投影好像沒什麼兩樣。

括号部分的參數我們暫時先排除掉。等高線我們沒有編輯過,它預設也用線性圖,我們姑且認為它對效果沒有任何影響;而挖空幾乎與濾鏡結構無關,也能排除。

photoshop的樣式顯示為“内斜面”,以下拉清單框的形式供使用者選擇,與flash中的【類型】下拉框最為接近。我們分别展開這兩個框看看餘下的選項,如圖2-56、圖2-57所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

兩者都包含内外的選項,而且所要做的事情也基本一緻。photoshop比flash多了三類樣式,效果也都相當細膩,是flash簡單濾鏡所無法比拟的,鑒于篇幅所限,效果圖我們就不貼上來了。而flash則比photoshop多了個“全部”,實際上它僅僅是内外斜角的總和,而非一個全新的樣式,放在這裡有湊數的嫌疑。

但至少我們看到了“内斜面”和“内側”的含義基本一緻,隻是flash處理得比較粗糙而已。因為切換到外側後,浮雕效果也都跑到文字輪廓以外,切換前則出現在輪廓以内。

圖2-58、圖2-59分别展示了photoshop和flash的外斜面效果。

e:desktopas3 text effectssnapshots第4章4.2photoshop外斜面.tif

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

如果大家也在測試這個效果,那現在都還原為内斜面吧,我們繼續探讨其他屬性。

“方法”在flash裡找不到對應選項,難不成對應品質?我們不妨把品質設定為高,如 圖2-60所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

我們可以看到,邊緣稍稍模糊了一點(如果看不到明顯效果,就試着把模糊的數值調大一些),這就是flash傳說中的“平滑”?我們來看看photoshop的方法選項。

圖2-61自上而下地展示了photoshop【方法】下拉框的3個選項的效果(平滑、雕刻清晰、雕刻柔和)。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

不管選用何種方法,其品質都是無可挑剔,所不同的是浮雕的清晰程度。大家可以把大小參數調高一點來欣賞photoshop的細膩之美。

相比之下,flash的斜角就顯得比較虛了,它對邊緣的處理方式跟投影的做法很像。最終,這一猜想也得到了flash幫助檔案的證明,所謂的品質,也是指模糊的次數。

而photoshop的做法則大相徑庭,這一點可以從photoshop的幫助檔案得知。

幫助檔案對這3種模式的描述分别如下。

平滑:稍微模糊雜邊的邊緣,可用于所有類型的雜邊,不論其邊緣是柔和的還是清晰的。此技術不保留大尺寸的細節特征。

雕刻清晰:使用距離測量技術,主要用于消除鋸齒形狀(如文字)的硬邊雜邊。它保留細節特征的能力優于“平滑”技術。

雕刻柔和:使用經過修改的距離測量技術,雖然不如“雕刻清晰”精确,但對較大範圍的雜邊更有用。它保留特征的能力優于“平滑”技術。

從文字上看,隻有“平滑”方法跟flash的處理方式相似。也就是說,flash在這裡隻做了一件事,而且做得還不如photoshop專業,即使把品質設定為高,也還沒有photoshop的“平滑”模式來得好看,有點投影模糊的味道。我們懷疑斜角和浮雕會不會就是同一套東西(第3章我會深入探秘這一問題)。

至于photoshop的【方向】,不難了解,就是指定斜面的凹凸狀态,将“上”改為“下”以後,陰影和高亮區的顔色将會對調,進而形成凹陷的效果。

我們暫且不追究該選項,繼續看下去。

2.3.3 photoshop深度==flash強度?

下一項是【深度】,我們用排除法對應上了強度。這次跟投影的不一樣,深度可以小于100%。但不管如何,我們先試着把深度都調到一個很大的數值,比如1000%,如圖2-62、圖2-63所示。

在photoshop裡,浮雕的高度明顯增大,而且棱角相當清晰。flash雖然也明顯地凸了起來,但已經徹底失控了,又是數值過大所緻?

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

我們将數值調小點,150%?200%?效果始終沒好看過,如圖2-64、圖2-65所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

從色彩的變化來看,強度似乎就是對邊緣做了加強,其變化方式跟投影的強度也比較像,難道這兩個濾鏡的強度概念又是一樣的?

就目前來說,我們還不能給強度和深度拟出一條關系式。

不過慶幸的是,強度不大于100%的情況下,兩者的表現尚算相似,至少色彩的濃度比較接近,如圖2-66所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

下一項是“軟化”,難道該屬性才對應強度的參數?

經測試,軟化的确也降低了強度,但它會通過擴散的方式讓浮雕變“軟”,圖 2-68展示了軟化5像素後的效果。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

2.3.4 photoshop高度==flash距離?

現在剩下“高度”一項了,跟“距離”相對應嗎?

但是,高度以角度為機關,距離則是像素,兩者似乎扯不上關系。不過我們照樣做下試驗。

我們先測試photoshop的高度。在調整的過程中,我們發現,浮雕的厚度并沒有随着高度的增加而變大,隻感覺到光影往某個方向微妙地移動着。

圖2-69、圖2-70、圖2-71、圖2-72、圖2-73、圖2-74、圖2-75展示了不同高度下的效果。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

從0°~90°,光照反射最強的區域(高光區)沿着斜面逐漸上行,到90°剛好跟斜面最高點重合。因為此時隻剩一個像素,是以高光幾乎不可見。

從這種現象來看,我們可以把它了解為光線與水準面的夾角。雖然我無法給出嚴格的數學證明,但通過圖2-76,我們仍可看出一些大緻的趨勢,其中标記為紅色的光線與斜面垂直,光照最強。紅線在斜面上的高度會随着光線角度的增大而提升。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

那麼,flash裡的距離呢?

調整一下,我們發現基本上就在平移,壓根兒就沒有光照的意思,如圖2-77、圖2-78、圖2-79、圖2-80及圖2-81所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

顯然隻是簡單的移位(跟投影的距離是同一概念嗎?),不過我們有了意外發現:距離等于3的時候,整體效果與photoshop的斜面有點接近,而3又恰好等于模糊的值,難道這兩者在photoshop裡面還有所關聯?

筆者在拖動距離這項參數的時候,曾不經意地發現,距離變化的時候,有兩團交錯重疊的光影來回穿梭于文字之間。拖慢一點,我們就會發現它們各自的作用:白色那團用于構造高亮區,黑色層則用于生成陰影部分。

下面我們就來測試下拖動photoshop的“大小”參數是否也有類似的變化。

2.3.5 photoshop大小==flash模糊?

确實我們也感覺到有兩團雲霧交錯穿梭于字元輪廓之間,但它會随着大小參數的增大而逐漸消散。我們可以這麼解釋:photoshop的“大小”是flash裡“模糊”和“距離”合并的結果。在photoshop裡調整了大小以後,flash必須同時設定模糊x、模糊y和距離這3個屬性,才能在這一參數上模拟出photoshop斜面的效果。photoshop之是以不把它們分開,大概是考慮到兩者不相等會給外觀帶來太多的不協調(flash斜角濾鏡就已經印證了這一點)。

為進一步證明這一結論,我們再拿幾個值測試一下,受篇幅所限,書上隻給出大小等于5的效果,如圖2-82、圖2-83所示。

《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式
《點睛:ActionScript3.0遊戲互動程式設計》——2.3 使用斜角濾鏡模拟Photoshop的斜面樣式

至此,斜面的樣式給勉強模拟了出來。最後還剩一項——漸變疊加,它在flash裡無法用這些簡單濾鏡來模拟,我們将在後續章節再作介紹。

繼續閱讀