臉譜製作指引
請參考此說明，來使用臉譜編輯器，製作您專屬的臉譜。
使用臉譜編輯器製作臉譜的方式目前分成兩種：
方法 1：直接修改範本上的圖案內容，並反覆於機器人上測試效果。
方法 2：重新設計臉譜，再將各個臉譜部位，依照欄位放入貼圖中。
方法 2 的製程相對繁瑣，但靈活度與自由度較高。本篇教學主要會著重在方法 2 的使用方法，
在開始設計臉譜之前，我們會建議您使用能：
1. 區分圖層
2. 製作剪裁遮色片 / 遮罩
3. 輸出透明圖檔
的編輯軟體，eg. Adobe Illustrator、Adobe XD、Sketch。（由於物件較多，較不建議使用 Photoshop 等類似的編輯軟體。）
並將每個物件（臉、眼睛、鼻子、嘴巴、情緒特效等）分開繪製。
此外，也建議您將範本中的：「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」分別放置於不同的圖層中（範本內容將於下一段落詳細介紹）。
👉 本篇說明會以機器人的 CAT（花貓）臉譜作為素材範例。
📔 什麼是圖層？
圖層（Layer）的概念，就像是將一張張透明片疊在一起。可以透過圖層的透明區域，看到下面的圖層。每個圖層與下一個圖層（在套用特殊效果前）並不會互相影響。
通常會建議將需要分開編輯，或是最後需要分開存出圖檔的部分，畫在不同的圖層上，以利操作與修改。
像是如上方敘述，我們會建議您在編輯臉譜編輯器所使用到的圖檔時，將範本所提供的「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」放置於不同的圖層中。
如此一來，您在最後輸出圖檔時，可以直接將「欄位範圍參考」以及「黑色格線 & 欄位名稱」的圖層關閉，不需要再使用橡皮擦清除該內容，減少編輯出錯的可能性。
📔 什麼是剪裁遮色片 / 遮罩？
剪裁遮色片 / 遮罩（Creat Clipping Mask / Mask）的用途，是讓您可以控制某個圖層的顯示範圍。這個概念經常被運用於上傳照片來製作個人頭像時。
舉例來說，假如今天需要以花貓的臉來製作一個圓形的大頭貼，就可以替花貓上一個圓形的剪裁遮色片，用以控制只顯示圓形範圍內的內容。
剪裁遮色片與遮罩在臉譜編輯器的圖檔製作中，主要會用來限制各個欄位的顯示、取用範圍（然而此功能非必要項目，只是有這個功能編輯時會比較方便）。
p.s. 請參考您的繪圖軟體的使用說明，來製作剪裁遮色片或遮罩
📔 為什麼要輸出透明圖檔？
機器人在取用貼圖圖檔時，會以矩形為單位取用圖檔中的內容，再疊加在臉譜上。
假如圖檔的背景不是透明的，就會有項目被蓋住無法顯示，因此請務必輸出透明背景的圖檔。
臉譜範本說明
在此段落，會說明範本的下載方式，與介紹範本的內容。
下載範本
每個資料夾中又個別包含：
．欄位範圍參考（0_Align_Ref）
．貼圖格線 ×1（0_CleanGrid）
．角色貼圖 ×4（UV_F1、UV_M1、UV_M2、UV_VFX01）
範本說明
臉譜編輯器提供三個角色骨架（Bongo、Cat、Husky），讓使用者作為素材與修改。
由於每個角色的動畫特性與骨架稍有不同，會需要大家在製作時，因應不同的需求，選擇不同角色作為修改依據，並參考該角色的貼圖來修改。
1. 認識角色
BONGO 為凱比的預設表情，特色是簡單可愛的造型，擁有豐富的表情變化，如果您的臉譜角色想要擁有多種表情，且以情緒表現為主，能以 BONGO 作為修改依據。
CAT 的造型為花貓，特色是擁有一張又大又圓的眼睛，以及長長的鬍鬚，若您的臉譜設計需要運用到類似的元素，能用 CAT 的素材來修改喔。
HUSKY 的造型為哈士奇，特色是可以針對臉部造型製作更大範圍的斑紋與造型變化，若您的臉譜設計是擁有較多花色的角色，能以 HUSKY 的貼圖作為您的修改依據。
2. 貼圖（UV）說明
每一個角色都需要四張貼圖（UV），您可以將貼圖視為有複數個欄位的圖檔，每個欄位中都需要放置與欄位對應的內容。
系統會截取欄位中的內容，並放到角色的臉上呈現。貼圖總共有以下幾張：
．UV_F1
．UV_M1
．UV_M2
．UV_VFX01
接下來會解釋每張貼圖的內容，以及各個欄位的對應意義。
⚠ 並非每個角色都會使用到所有的欄位，詳細的欄位使用狀況，請參考該角色的貼圖範本。
⚠ 貼圖欄位的內容以及位置，都經過系統定義，無法更改、調整位置或是範圍大小。
UV_F1（臉）
．hairA：瀏海造型
．stripe：臉部造型
．faceA：臉部/膚色
．noseB：聞東西/流鼻水
．noseA：鼻子
．cheekL/R：臉頰特徵（eg. 鬍鬚/臉紅）
．eyeR_L/R_RefA、eyeR_L/R_RefB：眉毛（擇一或皆會用到，請參考該臉譜範例）
．eyeline_L/R：閉眼、眨眼
．eveball_L/R：眼球
．pupilA_L/R、pupilB_L/R：瞳孔/震驚的瞳孔（擇一或皆會用到，請參考該臉譜範例）
UV_M1（嘴型 1）
一個嘴型會以 4 張圖來做成動畫，因此每種嘴型都有 01~04 的編號。01 為閉嘴時，04 為嘴巴最大時，中間的 02、03 為補間影格。
．mouthA：聊天
．mouthB：主要嘴型
．mouthC：微笑/得意
．mouthD：不太樂意/累
UV_M2（嘴型 2）
．mouthE：生氣/不要
．mouthF：緊張/嚴肅
．mouthG：飢餓/想吃
．mouthH：吃驚/驚喜
👉 說明範例所使用的「CAT」剛好沒有使用到 mouthF~H。
UV_VFX01（特效）
．surprise_VFX：驚喜/喜歡的特效（左右共用）
．sadA_VFX_L/R：哭泣的特效
．sadB_VFX：想哭的特效（中間）
．angerB_VFX：生氣的特效（左上）
．angerA_VFX：很生氣的特效（中間）
．disgustA_VFX：噁心/不舒服的特效
．eyebrow、brow、cover：眉毛（此區域會被拉伸，請填滿顏色並使用單一色塊）
．background：背景色（此區域會被拉伸，請填滿顏色並使用單一色塊）
👉此功能仍開發中，尚未釋出
．eyelid：眼皮、眨眼用圖層，請參考範本填滿顏色
．joy_VFX：開心的特效
．cheek_VFX：臉紅的特效
．disgustB_VFX_L/R：噁心/不舒服的特效（臉頰）
．angerC_VFX：很生氣的特效（右下）
3. 欄位範圍參考說明（0_Align_Ref）
在欄位範圍參考「0_Align_Ref」資料夾中，提供了標示了欄位範圍的檔案，以及每個欄位範圍在臉譜與貼圖上的對應位置（提供 .ai、.svg、.psd、.pdf 檔）。
您可以使用此欄位範圍參考，來進行設計臉譜後的後續貼圖編輯。
⚠ 欄位範圍參考為「大致對應」的參考範圍，最終仍需派發至機器人，並對照機器人上的實際臉譜，來調整貼圖內容與位置。
4. 貼圖格線（0_CleanGrid）
在貼圖格線資料夾「0_CleanGrid」中，為乾淨的「黑色格線 & 欄位名稱」檔。
您可以使用此檔案，來輔助製作臉譜最終的貼圖（UV）成品。
開始製作臉譜
臉譜製作與貼圖的關係相對繁複，我們會建議您跟循以下步驟，來製作您的專屬臉譜。
Step 1：設計臉譜
請先暫時無視以上所有的範例檔（範例內容將會在後續的步驟中才用到），用您使用的軟體，開啟一個 1024 × 576px 的工作範圍，用以繪製您的專屬臉譜。
繪製完成後如下圖：
📔 繪製與拆解物件時，假如需參考圖層順序，各欄位在機器人上的圖層順序為：
noseA > mouthA_01 > eye_RefA > hairA > Stripe > cheek > eyelid > pupilA > eyeball > faceA > background
Step 2：拆解臉譜（切圖）
在開始拆解臉譜前，請先決定好您的臉譜要使用哪一個角色的骨架（Bongo、Cat、Husky）。相關說明可以參考此頁上方的「範本說明 > 1. 認識角色」。
請將範例中給予的欄位範圍參考（工作區域名稱：Ref_01），「垂直置中」與「水平置中」對齊您的臉譜，對齊完之後會如下圖所示。
接著，請執行以下步驟：
1. 解開切圖範圍的群組
2. 刪除背景（背景為對齊用）
3. 再次解開群組，解放各欄位的方框
4. 參考上述的貼圖欄位說明，將您的物件（眉毛、眼睛、鼻子、嘴巴等）與各自對應的方框進行群組 / 遮罩 / 剪裁遮色片。
eg. 將花貓的右邊眉毛與 eyeR_RefA 群組；額頭左上的花紋與 hairA 群組。
如下圖：
⚠⚠⚠ 請注意 ⚠⚠⚠
⛔ 物件的範圍不能超出方框範圍，假如超出範圍，需調整臉譜以符合規範。
⚠ 貼圖上所標註的「L（Left 左邊）/R（Right 右邊）」為角色本身的「L（Left 左邊）/R（Right 右邊）」，請注意不要放反。
⚠ 方框的範圍為「大致對應」的參考範圍，最終仍需派發至機器人，並對照機器人上的實際臉譜，來調整貼圖內容與位置。
Step 3：將物件放至對應位置（拼 UV）
將臉譜拆解完成後，要將拆解完的物件放到貼圖（UV）的對應位置上。
對應位置大致如下圖：
此步驟做完後應如下圖：
接下來，請打開範本，將您的貼圖對照角色（Bongo、Cat、Husky）的原有貼圖，並補上缺漏的項目。
都補上後，就可以清除欄位範圍參考的矩形了！
全部完成後應如下圖：
👉 p.s. 請比照以上作法，製作 UV_VFX01 的特效內容，詳細的欄位參考範圍皆已附在範本之中（工作區域：Ref_VFX01）。
Step 4：輸出貼圖
在完成切圖後，需要將完成的貼圖輸出，才能上傳至《臉譜編輯器》。
每張貼圖應為 2048 × 2048px 尺寸的 .png，共四張。
⚠ 有可能會因為使用軟體的不同，導致匯入範本時，工作區域的範圍不是 2048×2048，此情況發生時，請手動調整貼圖尺寸。
⚠ 請注意，除了貼圖內容本身外，其他不想要顯示的部分「必須」為透明狀態，否則會遮蓋其他內容。
我們會建議您在輸出貼圖時，「不要輸出」用來對位的黑色格線 & 欄位名稱，以免黑色格線不小心被切入使用範圍。
清除黑色格線 & 欄位名稱的模樣應如下圖：
接下來，就可以帶著製作好的 png，上傳至《臉譜編輯器》啦！
