Tutorial | 描繪像素圖案 在功能強大的向量繪圖軟體出現以前... 甚至在 640x480 電腦出現以前... 用低解析度顯示器玩遊戲其畫面通常看起來都像是由許多細小的像素組成。 我們現在將這類的圖形稱為「像素圖案」。 Inkscape 是藉由 libdepixelize 將這些「特殊」像素圖片轉換成向量圖。你也可以試試其他類型的圖片,但是記住:若產生的向量圖效果不佳,請改用另一種 Inkscape 點陣圖描繪器 - potrace。 讓我們用簡單的圖片來示範這款描繪引擎的能力。下面左側有一張範例點陣圖 (從自由開放的 Pixel Cup 項目取得的圖片),而右側是轉換成向量圖形的成果。 libdepixelize 使用 Kopf-Lischinski 演算法來將圖片轉變成向量圖形。這種演算法混合使用多種電腦科學技術想法和數學概念,使該算法用在像素圖案上能夠產生很棒的效果。值得注意的是此演算法會完全地忽略透明色版。libdepixelize 目前沒有擴充功能提供專門處理這類的圖片,但是所有含有透明色版的像素圖案仍可以像 Kopf-Lischinski 能辨識的圖片一樣得到相近的結果。 上面的圖片有透明色版,但結果是正常的。不過若你的像素圖案結果不正常且你認為原因出在透明色版,請聯絡 libdepixelize 維護人員 (例如,在專案網頁上填寫程式錯誤回報) 而他會很樂意改進演算法。如果維護人員不知道圖片結果異常的原因便無法改進演算法。 The image below is a screenshot of Pixel art dialog in the English localisation. You can open this dialog using the PathTrace BitmapPixel art menu or right-clicking on an image object and then Trace Bitmap. 對話窗分成兩個區塊:試探法(Heuristics) 和輸出。試探法是專為進階使用者設計的,但是預設值也夠一般用途,不必擔心參數的設定;因此試探法的部分留到後面講解,先從輸出開始談起。 Kopf-Lischinski 演算法就像編譯器的作用一樣 (從高階程式語言的觀點來看),將資料轉換成許多種不同類型的表現形式。在每個階段中演算法給予我們探索此表現手法潛在應用的機會。某些運算過程產生的圖案有正確的視覺表現 (像造形范氏晶格圖案輸出),而有些則沒有 (像相似度圖形)。在 libdepixelize 的開發過程中許多使用者不斷詢問能否加入匯出這些處理過程圖形功能的可能性,最後原始的 libdepixelize 作者同意加入這些使用者所期望的功能。 The default output should give the smoothest result and is probably what you want. You saw already the default output on the first samples of this tutorial. If you want to try it yourself, just open the Trace Bitmap dialog, select Pixel art tab and click in OK after choosing some image on Inkscape. 從下面範例圖你可以看到范氏晶格 (Voronoi) 輸出結果且這屬於「重塑型像素圖」,晶格單元 (以前的像素) 會轉變成相連像素讓圖案有相同外觀。不會建立任何曲線而影像會持續以直線構成。當你放大影像時則會有差異。以前像素不會與對角相鄰的像素共用邊緣,即使會圖形會變成有相同的外觀。但現在 (感謝色彩相似度圖形和試探法讓你可以得到更好的運算結果) 卻能夠讓兩的對角單元共用邊緣 (以前一個頂點只能由兩個對角單元所共用)。 標準貝氏雲形線輸出會有平滑的圖形,因為前面敘述的范氏晶格輸出會轉換成二次貝茲曲線,但轉換不會是 1:1,原因是當演算法要在可見色彩之中達成區塊間網格不連續 (T-junction) 時,試探法會多次運算決定哪些曲線會合併成一條曲線。對於該階段試探法的提示:你無法調整它們。 由 libdepixelize (Inkscape 目前不提供圖形介面,因為本身處於實驗且尚未開發完整階段) 匯出的最後一張輸出結果是用「最佳化曲線」移除貝氏雲形線的階梯現象。此運算階段同時執行了邊界偵測技術來避免某些外觀變得平滑,以及三角測量技術來修正最佳化後的節點位置。當 libdepixelize 的開發脫離「實驗階段」時 (希望是不久之後),你應該就可以個別地停用這些功能的任何一項。 圖形介面中的試探法部分讓你可以調整 libdepixelize 的試探法參數以決定程式遇到 2x2 像素時哪兩個對角像素有相同的顏色。libdepixelize 的問題就是「圖案中哪些關聯性是我該保留的?」。程式會試著對不一致的對角像素套用所有試探法並保留比較好的關聯性。如果出現兩個一樣好的情形時,則關聯性都會被刪除。 若你想要分析每次試探法的效果並用這些數字做其他有趣的試驗,那麼范氏晶格就是最佳的輸出方式。你可以簡單地在范氏晶格輸出中看到更多試探法的效果,而當你滿意自己的設定值時,你便能將輸出類型改成你想要的那一種。 下面的圖片顯示每次只有開啟一種試探法的貝氏雲形線輸出。請注意用紫色圓圈特別標示的位置,那是每種試探法執行時結果不同的地方。 第一次試驗 (最上面的圖片),我們只啟用曲線試探法。這種試探法會試著保留相連一起的長曲線。你會注意到結果很類似最後一張圖片,而最後一張是套用稀疏像素試探法的結果。不同的地方是它的「強度」更均衡且遇到真的會影響到保留連接性時只會把高的數值作為投票值。這裡的「均衡」一詞代表的定義/概念是根據「人類直覺」給定的像素資料庫分析而來。其他差異則是遇到相連部分群組成大型圖塊而不是長曲線 (想像一下棋盤) 時試探法無法決定該怎麼做。 第二次試驗 (中間那幅圖片),我們只啟用孤立試探法。試探法只有試著保留相連部分,換言之圖片結果是含有固定權重投票的某些隔離像素 (孤立)。這種情形與其他試探法處理不相同,但該試探法仍然很棒且有助於得到更好的結果。 第三次試驗 (底下的那張圖片),我們只啟用稀疏像素試探法。這種試探法會試著保留與前景顏色相連的曲線。試探法藉由分析不一致曲線周圍的像素區域來找到前景顏色。使用這種試探法,你不只能夠調整「強度」,也可以調整要分析的像素區域。但記住一件事,當你增加像素區域分析的最大「強度」時其投票也會增加,你可能會需要修改投票的倍數。原始的 libdepixelize 作者認為此種試探法太貪心因而比較喜歡將倍數改為「0.25」。 即使曲線試探法和稀疏像素試探法會得到類似的結果,你仍會想都啟用這兩種試探法,因為曲線試探法可能極為保守地保留輪廓像素重要曲線,而某些情形只有稀疏像素試探法能符合需求。 小技巧提示:你可以將倍數/權重設定值設定為零來停用所有的試探法。你也能將任何一種試探法的倍數/權重數值設為負值讓結果產生與原理相反的效果。至於你為什麼想用反向行為去取代用標準行為所得到的良好畫質結果呢?因為你能這麼做...因為你可能想要一種有「人造感」的效果...不管什麼原因...你就是可以這樣做。 就這樣!上面所述就是 libdepixelize 初次發佈版本提供的全部選項。但假如 libdepixelize 原始作者和創作導師的研究能夠成功,那麼你可能能使用更多額外的選項,甚至能讓用 libdepixelize 產生良好結果的圖片範圍變得更廣。希望他們開發過程順利。 這篇文章使用的所有圖片都來自 Liberated Pixel Cup 以避免著作權問題。連結: http://opengameart.org/content/memento http://opengameart.org/content/rpg-enemies-bathroom-tiles Vinícius dos Santos Oliveira; Nicolas Dufour; Kris De Gussem; Gellért Gyuris Esteban Capella — 2019