程序員如何從零開始制作像素 GIF 動畫？我的實戰心得分享

程序員如何從零開始制作像素 GIF 動畫？我的實戰心得分享

大家好！我是 Gulnur。

今天想和大家分享一段有趣的經歷：我是如何從零基礎開始，為我最喜歡的 VS Code 插件——VS Code Pets親手制作并添加一只小雞（Chicken）寵物的。

如果你也想讓自己的像素畫“動”起來，希望我的這份實戰心得能給你帶來啟發。

緣起：為了那只“不存在”的小雞

VS Code Pets 是一個能在編輯器旁邊養寵物的小插件。

我在翻看插件的 GitHub Issue 時，發現有人非常想要一只小雞寵物。

雖然我當時對像素動畫完全沒有經驗，但我還是決定挑戰一下，親手把它做出來。

零基礎如何起步？

作為小白，我的第一步自然是去 YouTube 尋找靈感。

我發現了一個非常棒的頻道 @Saultoons[1]，他有一系列專門講像素動畫基礎的視頻。通過這些視頻，我了解了幀（Frames）的概念、基本的運動規律以及各種動作的處理技巧。

工具選擇：免費又好用的 Pixilart

視頻里推薦了 Aseprite，但它是付費的。為了降低成本，我找到了一個免費的在線工具：Pixilart[2]。它的界面非常直觀，打開瀏覽器就能直接上手畫。

我先在網上找了一些像素小雞的圖片作為參考，勾勒出了基礎幀的輪廓，然后逐步上色和添加陰影。這就是我的第一版成品：

賦予靈魂：動作設計與實戰

為了讓小雞看起來更有生命力，我設計了 5 種狀態：

1. 待機（Idle）
2. 啄米（Grain picking）
3. 行走（Walking）
4. 奔跑/飛翔（Fast walking/flying）
5. 玩球（With a ball）

為了還原真實的動作，我甚至在 YouTube 上看了幾十個養雞場的視頻（笑）。

一個有趣的發現：小雞走路時脖子會前后擺動。我將這些動作分解成多幀，并反復測試每一幀的時間間隔，確保動作流暢自然。

踩過的坑與避雷指南

在這過程中，我也踩了不少坑，分享給大家：

1. 一定要保存原始格式：不僅要導出 GIF，還要保存為.pixil格式。GIF 只是最終結果，如果以后想修改，GIF 很難完美還原成可編輯的像素點。
2. 透明背景的小技巧：Pixilart 有時在導出透明背景 GIF 時會出問題。我的做法是先用一種獨特的背景色填充，然后使用Onlinegiftools[3]來手動去除背景色，實現透明化。
3. 尺寸縮放：由于插件有特定的尺寸要求，我還用到了ezgif.com[4]來進行最後的裁剪 and 縮放。

最后，我的 Pull Request 成功被合并了！現在，全世界使用 VS Code Pets 的小伙伴都能看到這只愛啄米、愛玩球的小雞了。

如果你也對像素畫感興趣，別猶豫，現在就動手試試吧！只要有熱情，零基礎也能創造出屬于你的像素世界。

參考資料

@Saultoons: https://www.youtube.com/@saultoons/featured

Pixilart: https://www.pixilart.com/draw

Onlinegiftools: https://onlinegiftools.com/create-transparent-gif

ezgif.com: https://ezgif.com