LINE 動態貼圖製作紀錄。我的第一組像素貼圖誕生了！
最近我終於學會怎麼在 Aseprite 中加入中文字，決定用上次畫的上班族小動畫來做一組 LINE 動態貼圖！
一、第一步先決定 Aseprite 畫布大小
根據 LINE 動態貼圖製作準則，動態貼圖圖片的素材必須符合以下兩個條件：
- 圖片大小必須在寬 320px × 高 270px 以內
- 寬或高其中一邊必須是 270px 以上
平常像素圖畫好以後我會以 400% 匯出，倒推回去，畫布大小開 68x64，這麼一來匯出以後的大小是 272x256。圖片不留白邊，左右都要有碰到，讓寬符合「其中一邊必須是 270px 以上」的條件。
二、加入文字
Edit> Insert Text
- Text：Aseprite無法直接輸入中文，先把文字打在記事本上，複製貼上。
- Font：下拉選單> Load External Font，選擇下載好的中文字型。
- 這次我使用了俐方體11號。
三、匯出成 PNG
File> Export> Export As...> Output File> Choose File...>存檔類型選.png
四、製作 APNG
接下來要把剛才匯出的 PNG 組合成 APNG。先下載 APNG Assembler，把所有畫格匯進去。
因為從預覽圖也要能看得出這張圖的主題，所以 APNG 的頭尾最好是同一個畫格。Aseprite 的匯出檔已經有按編號排序，例如我現在的檔案有 15 個畫格，我把最後一格（編號 15）先拉進去，再把全部（編號 1-15）一起加入，這麼一來第一格和最後一格都是編號 15 的圖，總共有 16 格。
再來要算時間了。在這邊 LINE 有兩條規定：
- 最長播放時間為 4 秒。時間單位為 1、2、3、4 秒，無法以小數（1.5秒）單位設定。
- 每個 APNG 檔的 PNG 畫格數：插圖為最少 5 個畫格，最多 20 個畫格。
所以我要想辦法讓 16 格在 4 秒內播完，且不能有小數點。「Delay,sec」這邊指的是每一格停留的秒數，「Playback Settings」則是重播的次數。剛開始我完全看不懂這個秒數要怎麼設定，幾次嘗試以後終於得出了一個公式：
Frames x Delays x Loops ≤4
比如說現在我有 16 格，我想讓它在 2 秒內跑完，那麼「Delay,sec」這邊設定「2/16」，「Playback Settings」這邊設定 1 loop，16x (2/16)x 1=2，剛好 2 秒。
同理，如果我有 7 格，想要 1 秒內跑完，重播兩次，那我可以設定 7x (1/7) x2=2，同樣 2秒。
這邊的重點是最後得出來的結果一定要是整數。假如我使用預設 1/10 的 Delay，16x (1/10) x 1= 1.6，雖然小於 4 秒，但秒數不是整數，那就不合格式了。
在 1 秒內塞進越多格，圖看起來就會動得越快，有一種緊張激動的效果。我個人覺得 1/8 左右的 Delay 是視覺上最舒適的速度。
設定完以後，點底下的「Make Animated PNG」，就會匯出一個名為「animated」的 APNG 檔案。這個檔案直接在資料夾打開是不會動的，可以把它拉到網頁瀏覽器上預覽，看看成果是不是想要的感覺。APNG 的製作到這邊告一段落，接下來的上傳步驟就跟一般製作 LINE 貼圖的時候相同。
五、等待審核
第一次審核這組貼圖被退回了，理由是「1.8.圖片與說明、標題有矛盾之處」。我想是因為我在標題和說明寫了「像素」，可是 LINE 覺得這看起來不像像素吧……。一邊吐血一邊說「我愛工作」的圖也被退回，理由是「2.7 文字與貼圖的圖像衝突」，LINE 不欣賞這種諷刺。把像素兩個字還有吐血的效果拿掉以後，審核就通過了。
至於後來的修正版，是因為通過審核了以後我才發現其中一張圖有瑕疵，雖然不明顯還是重新審核一次。經過一波三折，我的第一組像素貼圖終於上架了！另外也有把無字版上傳到 GIPHY ，希望大家用得開心。
LINE STORE 搜尋 ShuyuLin