详情

顺序员若何从零开动制作像素 GIF 动画？我的实战心得共享

大家好！我是 Gulnur。

今天念念和大家共享一段理由的阅历：我是若何从零基础开动，为我最心爱的 VS Code 插件——VS Code Pets亲手制作并添加一只小鸡（Chicken）宠物的。

若是你也念念让我方的像素画“动”起来，但愿我的这份实战心得能给你带来启发。

缘起：为了那只“不存在”的小鸡

VS Code Pets 是一个能在编著器傍边养宠物的小插件。

我在翻看插件的 GitHub Issue 时，发现存东说念主相等念念要一只小鸡宠物。

诚然我其时对像素动画十足莫得告诫，但我如故决定挑战一下，亲手把它作念出来。

零基础若何起步？

看成小白，我的第一步当然是去 YouTube 寻找灵感。

我发现了一个相等棒的频说念 @Saultoons[1]，他有一系列迥殊讲像素动画基础的视频。通过这些视频，我了解了帧（Frames）的宗旨、基本的通顺端正以及多样动作的贬责手段。

器用采取：免费又好用的 Pixilart

视频里推选了 Aseprite，但它是付费的。为了裁汰资本，我找到了一个免费的在线器用：Pixilart[2]。它的界面相等直不雅，掀开浏览器就能径直上手画。

我先在网上找了一些像素小鸡的图片看成参考，勾画出了基础帧的空洞，然后慢慢上色和添加暗影。这即是我的初版制品：

赋予灵魂：动作诡计与实战

为了让小鸡看起来更有生命力，我诡计了 5 种现象：

待机（Idle）啄米（Grain picking）行走（Walking）奔波/漂荡（Fast walking/flying）玩球（With a ball）

为了复兴确切的动作，我以至在 YouTube 上看了几十个养鸡场的视频（笑）。

一个理由的发现：小鸡走路时脖子会前后摆動。我将这些动作剖释成多帧，并反复测试每一帧的時間远隔，确保动作清醒当然。

踩过的坑与避雷指南

在这进程中，我也踩了不少坑，共享给大家：

一定要保存原始面貌：不仅要导出 GIF，还要保存为.pixil面貌。GIF 仅仅最终畛域，若是以后念念修改，GIF 很难完竣复兴成可编著的像素点。透明配景的小手段：Pixilart 巧合在导出透明配景 GIF 时会出问题。我的作念法是先用一种独到的背景象填充，然后使用Onlinegiftools[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