程序員如何從零開始制作像素 GIF 動(dòng)畫？我的實(shí)戰(zhàn)心得分享

大家好！我是 Gulnur。

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

如果你也想讓自己的像素畫“動(dòng)”起來，希望我的這份實(shí)戰(zhàn)心得能給你帶來啟發(fā)。

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

VS Code Pets 是一個(gè)能在編輯器旁邊養(yǎng)寵物的小插件。

我在翻看插件的 GitHub Issue 時(shí)，發(fā)現(xiàn)有人非常想要一只小雞寵物。

雖然我當(dāng)時(shí)對(duì)像素動(dòng)畫完全沒有經(jīng)驗(yàn)，但我還是決定挑戰(zhàn)一下，親手把它做出來。

零基礎(chǔ)如何起步？

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

我發(fā)現(xiàn)了一個(gè)非常棒的頻道 @Saultoons[1]，他有一系列專門講像素動(dòng)畫基礎(chǔ)的視頻。通過這些視頻，我了解了幀（Frames）的概念、基本的運(yùn)動(dòng)規(guī)律以及各種動(dòng)作的處理技巧。

工具選擇：免費(fèi)又好用的 Pixilart

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

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

賦予靈魂：動(dòng)作設(shè)計(jì)與實(shí)戰(zhàn)

為了讓小雞看起來更有生命力，我設(shè)計(jì)了 5 種狀態(tài)：

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

為了還原真實(shí)的動(dòng)作，我甚至在 YouTube 上看了幾十個(gè)養(yǎng)雞場(chǎng)的視頻（笑）。

一個(gè)有趣的發(fā)現(xiàn)：小雞走路時(shí)脖子會(huì)前后擺動(dòng)。我將這些動(dòng)作分解成多幀，并反復(fù)測(cè)試每一幀的時(shí)間間隔，確保動(dòng)作流暢自然。

踩過的坑與避雷指南

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

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

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

如果你也對(duì)像素畫感興趣，別猶豫，現(xiàn)在就動(dòng)手試試吧！只要有熱情，零基礎(chǔ)也能創(chuàng)造出屬于你的像素世界。

參考資料

@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