非擬真動漫畫編輯工具設計與製作

) (

)

Figure 76 主要流程示意圖

5.4 非擬真動漫畫編輯工具設計與製作

我們互動式非擬真動漫畫之加值應用之平台為WINDOWS XP/2000，開發環 境為Microsoft Visual Studio .NET 2003，使用程式語言是 C＃與 Matlab 7.0。

5.4.1 編輯工具主要架構

構成動畫的主要元素是場景，而構成每一個場景是一個個keyframe，主要元 素為『人物』、『場景』及『對白』，依此概念，我們系統便可分為人物編輯、非 擬真場景產生與動畫合成工具，Figure 77為系統主要架構，本章重點在人物編輯

與非擬真轉換的技術，動畫合成工具介紹請參考附錄二製作動畫之流程。

Figure 77 系統架構圖

5.4.2 人物編輯工具

5.4.2.1 人物各部位資料蒐集

本計畫目前除了利用非擬真轉換所得的色鉛筆風格的漫畫人物素材之外，並 從網路上蒐集的漫畫人物各部位資料，是從http://www.abi-station.com/ tchinese/

這個免費的人物圖片資料庫蒐集而來的，希望在之後能對交通大學浩然圖書館 中，現有的典藏漫畫作品做數位化的動漫畫製作，以求更完善的加值應用。

到目前為止，我們一共蒐集了兩種風格的人物資料。在第一種風格中，『雙 人物編輯工具

+ + + +

+ …..

非擬真轉換工具

轉換非擬真風格

動畫合成工具

對話框

哈囉！

文字內容

手』共有37 張 GIF 圖片影像，『衣服』共有 42 張 GIF 圖片影像，『眉毛』共有 16 張 GIF 圖片影像，『眼睛』共有 53 張 GIF 圖片影像，『眼鏡』共有 15 張 GIF 圖片影像，『頭部』共有82 張 GIF 圖片影像，『雙腿』共有16 張 GIF 圖片影像，

『嘴巴』共有23 張 GIF 圖片影像，『褲子』共有 11 張 GIF 圖片影像。在第二種 風格中，『身體』共有4 張 GIF 圖片影像，『衣服』共有35 張 GIF 圖片影像，『眉 毛』共有29 張 GIF 圖片影像，『眼睛』共有 83 張 GIF 圖片影像，『臉型』共有 11 張 GIF 圖片影像，『眼鏡』共有 22 張 GIF 圖片影像，『髮型』共有 90 張 GIF 圖片影像，『左手拿的物品』共有 11 張 GIF 圖片影像，『嘴巴』共有 59 張 GIF 圖片影像，『鼻子』共有36 張 GIF 圖片影像，『褲子』共有20 張 GIF 圖片影像，

『右手拿的物品』共有19 張 GIF 圖片影像，『鞋子』共有 18 張 GIF 圖片影像。

5.4.2.2 人物編輯介面

為了讓使用者在操作上能更容易更快上手，而不需事前花太多時間學習，在 界面設計上我們主要以圖形界面為主，如此使用者便可透過快速瀏覽，直接找到 自己所需要的部位圖片，然後再透過我們所提供的工具，把零碎的人物各部位組 合起來，最後便可完成一個完整人物的製作，這便是整體界面設計的基本概念。

以下我們針對系統功能做更深入一步的介紹，整個使用界面如Figure 78所示。在 編輯人物的這分頁上，主要切割成兩塊區域，左半部是人物各部位的預覽以及選 取的區塊，右半部則是對各部位做大小及位置的調整，並且在組合完成後所預覽 的畫面區塊。

Figure 78 人物編輯界面

在左半部人物各部位的預覽以及選取的區塊的最左方，我們特別提供了樹狀 的選擇清單。依據不同人物風格，做第一層的分類。這兩種人物風格是各自獨立 的，也就是說在製作人物時，兩種風格的各部位圖案是不能混用的。就第一種人 物風格來說，其底下又繼續細分成『雙手』、『衣服』、『眉毛』、『眼睛』、

『眼鏡』、『頭部』、『雙腿』、『嘴巴』和『褲子』這九種部位的類型。第二 種則有『身體』、『衣服』、『眉毛』、『眼睛』、『臉型』、『眼鏡』、『髮 型』、『左手拿的物品』、『嘴巴』、『鼻子』、『褲子』、『右手拿的物品』

和『鞋子』這十三種部位的類型。

當使用著點擊各個部位時，這個區塊的右方會出現所有可選取圖案的預覽畫 面，讓使用者可以很清楚且方便快速地選擇所要創造的人物。如Figure 79所示，

當使用者點擊髮型的選項時，提供使用者即時預覽，使用者在預覽後直接點選圖 片，便可在最後輸出結果的預覽區塊，如Figure 80所示，開始做組合的動作。

Figure 79 人物各部位預覽

Figure 80 輸出結果預覽

在輸出結果預覽區塊中，我們另外提供了兩種功能，即是位移和縮放的功 能。上、下、左和右四個按鈕，讓各部位可以自由自在地移動，下方並且有個由 大到小可調式的橫桿，可以適時地調整各部位的大小，給予使用者最大的彈性空 間。使用者可以依照自己的創意，盡情發揮組合出想要的人物外型，讓最後人物 的製作能更完美。Figure 81、Figure 82是我們所製作的動畫中的男女主角完成範 例。

Figure 81 最後人物（女主角）輸出結果

Figure 82 最後人物（男主角）輸出結果

5.4.3 非擬真轉換工具

目前有了人物的資訊之後，接下來便是需要產生動畫場景的背景，經由非擬 真風格的色鉛筆與油畫模擬，產生獨特的動畫成品，當然，我們設計的非擬真轉 換工具，亦可套用在針對漫畫人物的產生。

5.4.3.1 色鉛筆濾鏡技術

色鉛筆的設計概念相當直覺，完全根據畫家所繪製的過程加以模擬，操作方 式也相當簡單。首先，使用者只需要輸入任何一張，想要轉換的彩色照片，然後 選擇想要的紙張類型，這邊僅提供一種最常用的紙張，並且給予兩種不同的紙張 紋理方向，再來就是模擬畫家繪製粗略的輪廓線底稿，使用者並不需要根據輸入 的影像，作手動的描繪，而只需要調整一些參數，來決定要繪製簡單的輪廓線，

或是複雜的輪廓線，另外還可以決定輪廓線顏色的深和淺。在繪製完輪廓線底稿 後，畫家通常會對物體上一層簡單的淺底色，而本系統亦提供此功能，讓使用者 只需調整所要塗上的底色深淺，而不用逐一地對物體進行上色動作。最後一步，

便是進行顏料筆刷的模擬，同樣的，系統會自動抓出筆刷流動方向，進行繪圖的 轉換處理，使用者僅需調整最後輸出影像的整體顏色深淺即可，如此，具色鉛筆 畫風的作品便產生了。

z 第一步：照片輸入

輸入一張彩色真實照片影像，如Figure 83所示，由照片中取得每個像素的顏 色資訊，即RGB(紅色、綠色與藍色三個顏色色頻)三個值，然後進行色彩模型(color model)的轉換，將RGB色彩空間(color space)轉換到HSI color space(色調、亮度與 飽和度所組成的色彩空間)，由於HSI color space較符合人類的視覺經驗，再加上 轉換過程中，需要在亮度(Intensity)上進行許多處理步驟，也由於RGB和HSI之間 是可互相轉換不失真而且演算簡單，所以才決定使用HSI color space，而不用其 他的色彩模型。

Figure 83 照片輸入 z 第二步：紙張種類的呈現與模擬

在這個步驟運用到一點以紋理為基準(texture-based)的貼圖概念，根據網路上 所找到一小塊的紙張紋理(texture)圖片，根據輸入的影像大小，來決定整張紙的 大小，接著進行分析紙張紋理圖片上的資訊，也就是擷取並計算出圖片上每個像 素的亮度值，把這些亮度值紀錄下來之後，最後便可呈現出紙張的紋理效果，而 此濾鏡僅提供一種最普遍的紙張類型，並且以兩種紋理走向呈現，讓使用者自行 做選擇，如Figure 84所示。

Figure 84 紙張種類的呈現與模擬

z 第三步：粗略的輪廓線底稿

在這個步驟運用邊界檢測(edge detection)技術，由於這步驟最後所要的結 果，並不需要求太精細，只要大概有粗淺的輪廓線即可，因此我們採用最普遍使 用的Sobel edge detector [8]，也就是利用一次微分進行梯度分析(gradient)的方 式，來抓取物體的大概輪廓線和邊界線，並且多設計了兩個門檻值(threshold)，

讓使用者可以根據輸入圖片種類的不同，或是根據想表達強調的感覺樣式，來自 行決定最後呈現出的輪廓線複雜度與顏色深淺值，複雜度越低，表示輪廓線少而 且簡單；複雜度越高，輪廓線便越多而且複雜，如Figure 85所示。另外，也進一 步額外提供調整輪廓線顏色的參數，可讓使用者決定輪廓線的深淺強度值。

Figure 85 粗略的輪廓線底稿

z 第四步：著上基本底色

就實際畫家在利用色鉛筆作畫而言，除了一開始會做簡略的輪廓速寫外，畫 家通常會再上一層簡單的底色打底，而用來選作底色的顏色，通常會是所要繪製 物體的相容色，也就是說，如果要繪製的物體是一顆紅蘋果，蘋果上面有紅色、

橘色、黃色和綠色，而這些顏色相容色，就會是淡黃色。而我們所採用的作法，

是利用HSI color model中，調整所要繪製物體的亮度値，套用一開始已經得到的 紙張亮度值，加上物體本身的顏色，最後做HSI to RGB轉換從HSI color space轉 成RGB color space，計算出著底色的模擬效果，如 Figure 86所示。

Figure 86 著上基本底色 z 第五步：抓出筆刷流動方向並給與短筆觸

計算輸入影像中，每個像素亮度的梯度值，再根據這些梯度值的方向與大小，來 決定筆觸的走向與長短，預設筆觸有四個方向，分別是垂直、水平、左對角線和 右對角線，而筆觸的大小則有5 和 7 個像素長度大小，如 Figure 87所示。

Figure 87 抓出筆刷流動方向並給與短筆觸

有了R、G、B 三個顏色值之後，便可得到一張具有此材質紋理的紙張大小。

從電腦螢幕觀看影像，我們可以發現，像素亮度越高，其色彩便越淺，像素亮度 方法。Sobel Edge Detection技術為一個 3x3 的矩形遮罩，如 Figure 90所示，其運 算公式如下：

|Gx|為水平方向的所偵測到可能為邊界的一個量度，|Gy|為垂直方向所偵測 到可能為邊界的一個量度， f∇ 則為|Gx|和|Gy|的總和，當 f∇ 值越大，表示此點 為邊線的機率越大。

Figure 90 Sobel Operator Mask

)

廓，此外，Te的計算公式如下： 當多種，我們挑選最接近人類視覺經驗的HSI color space，參考 Figure 91，來作 為色彩轉換的基礎。H為Hue的簡稱，即是彩度，如紅、黃、藍等各種不同色彩，

S為Saturation，即是純度，也就是單一種顏色混合白色的比例，如純紅色一直混 合到粉紅色，I為Intensity，也就是亮度

Figure 91 HSI color model

當我們從輸入影像得知每個像素的 RGB 三個值之後，便要開始進行 RGB 到HIS 之間的轉換，轉換公式參考 Fundamentals of Color Image Processing 一書[21]

中的演算法，如下所示：

⎥⎥

Figure 92 筆觸走向示意圖 Gs_avg為所有Gs(i,j)總和的平均值，當Gs(i,j)大於Gs_avg，則給予 7*7 的矩型遮罩，

Figure 92 筆觸走向示意圖 Gs_avg為所有Gs(i,j)總和的平均值，當Gs(i,j)大於Gs_avg，則給予 7*7 的矩型遮罩，