
顺序员若何从零开动制作像素 GIF 动画?我的实战心得共享 大家好!我是 Gulnur。 今天念念和大家共享一段理由的阅历:我是若何从零基础开动,为我最心爱的 VS Code 插件——VS Code Pets亲手制作并添加一只小鸡(Chicken)宠物的。 若是你也念念让我方的像素画“动”起来,但愿我的这份实战心得能给你带来启发。 缘起:为了那只“不存在”的小鸡 VS Code Pets 是一个能在编著器傍边养宠物的小插件。 我在翻看插件的 GitHub Issue 时,发现存东说念主相等念念
![开yun体育网我找到了一个免费的在线器用:Pixilart[2]-开云(中国)kaiyun体育网址-登录入口](/uploads/allimg/260504/040U0200101D8.jpg)
顺序员若何从零开动制作像素 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