Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化1

这个页面有大量的动画GIF文件…在网页上加载时可能会因为数量的原因而播放显得缓慢。你应该可以在你的浏览器里点右键选查看图片(在Netscape是这样,我并不知道其他的如IE或Opera这些浏览器的选项是否一样)单独观看某张图片,这样的话播放速度就会正常。 好,之前的章节里我们讨论了设计角色和制作角色动画的基础…但剪切加粘贴的技巧只能制作一些基本的动作,对接下来的动画来说是远远不足的。如果你的人物需要一个侧身踢的动作的话,你确实需要将整个新姿势都画出来。 下面还是让我们来看看少年街霸3代的一些图: 如果上面的图因为网页加载图片速度不理想而播放缓慢的话,那正好可以让我们来研究分解动作。现在试观察上面的动画,看看你能不你能说出每一个动画各有多少桢。 另外你还需注意到你每个动作的动作量有多少。上面古烈Guile的踢法是360度回旋踢,大概9桢左右。 轻拳呢,则是5桢的刺拳动作,对于这个动作,可能只有2桢是实打实画的(站立一桢,手臂伸出一桢)。中间过渡桢很容易解决,直接在像素级别下调整部分像素就可以了,就好像我们之前制作呼吸动作一样。 我把中间那行留给了凯琳Karin的飞踢,因为它们看起来实在太酷了,简直就是完美的。直踢有力,回旋踢则轻盈,动作流畅极了。 泰王Sagat的踢法只有几桢,因为你可以从他收腿的动作里看到,这个动作实际上就是踢腿动作的回放。又一个节省时间的好办法,当然还得在保证效果的前提下。 这样处理不影响Sagat的帅劲,但如果我们对第一排第三个古烈Guile的重拳也做同样的处理可能就不大适合了。因为他出拳时手臂是水平伸出的,而收回来时手臂是下沉的,如果我们将他出拳的动作回放来作为收拳动作,看起来他的拳就收得太后了,好像出拳完了之后又得肘击后面的人。 是否运用这个技巧还得按实际情况而定。如果你手头有个摄影头的话,你可以尝试拍下自己做这个动作的样子来研究四肢是如何运动的。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化1
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化2

对于这种动作,基本的制作流程是先画出分解动作然后用像素笔触来描出线稿。因为这个教程是为了个人制作角色(一个人包揽所有工作)而写的,我想重复申明的一点是不要做无用功。 当然,你可以摧残你自己,将每一桢里的人物的表情都画出来,但其实你清楚的知道“在这个动画序列里脸部是保持不变的”,这些就是无用功了。对桢的处理上也是类似的,你知道第五桢里手稍微动那么一下,这种情况下完全没有必要重画第五桢,只需在前一桢的基础上稍做改变就可。 但如果你是大公司的老板,手下有一帮子做原画和做像素的人,那么也许你有必要要求原画画出所有的桢,因为描图的人未必会了解到设计人的意图,他们并不知道怎么填充中间桢。下面给出一些Capcom公司的手绘桢图,来自少年街霸3代。 桢数不少吧。上面那个例子还不错,但下面那个却在一个及其细微的动作上花了好多功夫,最后那三桢几乎是一样的,直接在像素级别下修改会高效很多。 但就如我上面所讲,Capcom是一家大公司,同一个项目上有很多人手,每个任务都变得巨细无遗。如果你看过少年街霸3代的动画(我手头上没有,也许你得上大机上或其他收集这个系列的动画的网站上去观摩一下,另外也可以参考Capcom对SNK这个游戏的动画),你就知道他们将动作分解得如此细致的原因了。 但对于我们个人的练习,我们可以将上面的桢数的奇数桢省略掉,而成品仍然是很流畅的。当然画更多的过渡桢动画会更圆滑,但却不是必须的,因为人脑会自动修补上中间桢。 因为这个的原因,你画出拳这个动作就不需要将拳头每次移动一个像素,你可以一下跳过几个像素,人脑会自动翻译中间的过渡部分。但要控制好“度”的问题,如果省略过多的桢又或移动过多的距离,动画是不可能自然的。 达到以最少的桢数来表现足够自然的动作这种程度是需要不断磨练的。这个跟画画一样是没有捷径的。 利用一下动画片,在播放器里逐桢播放来学习怎么控制动作的桢数。日式动画是很好的教材,因为里面的播放桢率比较低,只画出比较重要的桢数。 而Disney动画里那些超高的播放桢率会对学习造成麻烦。如果观察一下李小龙或成龙的动作,你会发现这些动作通常只有两三桢。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化2
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化4

讲到这步你也许会心存疑问,“为什么不直接用这些画好的帧?为什么要这么辛苦的重新描画? 稿子上的已经是很细很干净的线稿了啊!”。 我的回答是他们的尺寸不是我们最终成品所要的。如果直接缩小,自动抗锯齿这个功能就会来妨碍我们,加入多余的中间像素,如下图所示: 自动抗锯齿是一种平滑图像的方法,如果你在白色背景上有一黑色直线,自动抗锯齿就会帮你在黑线上加入灰色的像素来过渡,这样的直线在稍远一点的距离看来就很圆滑了(对于弧线来说更是)。 这个对于一般的CG来说是好事,但对于像素精灵来说,它就是噩梦了。就像上图那样,精灵的外边缘分布着一些浅灰色(非纯白)的像素。 游戏里很少运用自动抗锯齿(除了一些很新的3D游戏,而且也不是所有的3D游戏用上了这个技术)因为需要额外计算中间过渡像素会将性能降低。如果一个人物跑过一个以彩虹为背景的背景,那么程序就得为每一个角色计算出跑过各种颜色背景时外边线的过渡像素,对于现有硬件来说还是太大的负荷了。 实际上玩家在玩电视和街机游戏时因为电视屏幕的渲染,一般都觉察不到像素的存在。而当你在电脑上玩模拟游戏时能觉察到这个是因为电脑的屏幕比较精确。 说这么多,其实我就是想说明在创作像素画时,自动抗锯齿是不需要的。当然,你可以将草图缩小然后逐个的将那些自动加的过渡像素删除,但我觉得这样跟重描所花的功夫相差不大,所以我选择重描线图。 另外一点如果你观察她的手指和脚趾,因为尺寸问题和自动抗锯齿的介入,你很难分辨出手指脚趾间的区别。通过重描线图,我可以重新刻画这些部位来表现更好的效果。 最后还有一个原因是添加自动抗锯齿后颜色总数为37。如果你的色板每次每屏只允许256色(标准的VGA色板,超级任天堂和Genesis游戏也是用的这个标准),你就已经浪费掉了37色,得出的效果也仅是黑白的而已。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–基本攻击的动画化4
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列-奔跑动画序列(完结)

在之前章节我阐述了怎么给一个16×16的角色制作行走动画。如果你要制作旧式RPG(在我写那篇文章的时候仍有很多人乐于此道)那篇文章就够用了…但到今天,你更可能去制作比较大型的角色。 所以我们今天要教的是大型角色的奔跑动画制作。先让我们来看一些来自 Capcom VS SNK的例子: 说到Capcom VS SNK,这是一个比较新的游戏。 不是超级任天堂或早期NeoGeo时代的产物。Capcom的技术已经更进一步,对画面的把握更加出色,那些角色看起来真是帅呆了…但先来看看一些古董: 跟上面的新玩意对比起来真的是惨不忍睹…但如果你仔细的比较新老两种动画,你有没有发现雷同的地方?…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列-奔跑动画序列(完结)
Posted in animation RPG Maker

【中级】RPGMaker官方像素画教程连载八:动画基础

动画基础对动画完全没有概念的人怎么做动画?首先从动画是什么开始吧。 动画的原理,为什么动画会动?动画片还有电视、电影会动,是不是很神奇不可思议? 实际上那是很多很多张图片练习播放造成的视错觉。如果图片连续播放的速度接近或超过每秒24张,人的眼睛和大脑就会认为这些图片是动态的。 为了表现动作,我们需要原画(原画也叫关键帧),原画就是动画中静止的图片,比如一个角色坐在椅子上,然后站起来。坐在椅子上和站着是2张原画,那么中间从坐着变成站着就需要制作动画,动画也叫中间画。 即2张原画之间的过渡画。下图中红色框框内的就是中间画了,中间画也叫中间帧。 动画的路径 类似上图的圆球动画(小球下落,弹起撞到墙后再下落,构成循环),是简单的位移动画。位移动画需要位移的路径。 直线路径最简单,比较复杂有曲线运动,还有类似蝴蝶飞这种不规则运动,还有人的动作等等。所以制作动作之前,先想好动作运动路径哦。 人的动作比较复杂,同一个动作可能有多种实现方式。比如举手。 所以再设计角色动作的时候要画出动作线,如果中间帧是由其他人制作的话。动画速度调整假设帧速为每秒60张,那么一张画的显示时间为0.01秒。…

Continue Reading... 【中级】RPGMaker官方像素画教程连载八:动画基础
Posted in animation

像素独立游戏美术开发指南-动画基础

需要了解的知识和方法1、了解什么是动画,了解帧速2、了解制作动画的原理3、了解制作位移动画的方法1、什么是动画?帧速是什么? 画一个马里奥,感觉如何?是简单还是困难? 如果你有wacom压感笔(1:绘图用的数码压力感应笔,简称压感笔,一般配合数位板一起使用。比较出名的是wacom品牌的压感笔。 )的话,可能画起来比较轻松,如果只有鼠标,点啊点的确实枯燥和麻烦,可能画不了几张像素画,你就放弃了。所以工具的好坏不仅仅影响效率,还会影响我们的心情和状态。 每秒10帧的动画 图片:维基百科每秒2帧的动画图片: 维基百科一张画是静止的,很多张画连起来播放就是动画。最少多少张画才可以欺骗大脑呢? 最少需要每秒16张画(2:动画是指由许多帧静止的画面,以一定的速度(如每秒16张)连续播放时,肉眼因视觉残象产生错觉,而误以为画面活动的作品。)。 这个就是最基础的动画原理了。一般来说帧速越高(3:指电子绘图或游戏每秒播放多少帧)动画越流畅。 作者:Phil…

Continue Reading... 像素独立游戏美术开发指南-动画基础
Posted in animation

像素独立游戏美术开发指南-动画关键帧

需要了解的知识和方法1、什么是关键帧?中间帧? 2、如何画出关键帧?中间帧? 3、如何调整帧动画? 1、什么是关键帧? 中间帧?关键帧是动画术语,意思就是非常关键的单张画。 因为动画就是连续播放的好多张画啊。看上面这个蝙蝠小怪物的动画。 蝙蝠飞就是扇动翅膀,所以飞的关键帧就是翅膀在最高点;翅膀在最低点。其他的都属于中间帧。 将关键帧画出来。2、如何画出关键帧? 中间帧?这里新手会犯难,怎么画哦? 虽然我能看出来,也能想到,可是凭空叫我画,好难哦!(好吧,最起码提到蝙蝠飞,你要可以想象出来蝙蝠扇翅膀的样子……如果这你都想不出来……去看100遍动物世界。…

Continue Reading... 像素独立游戏美术开发指南-动画关键帧
Posted in animation

像素独立游戏美术开发指南-动画制作

本文需要了解和掌握的知识和方法: 1、2D游戏动画是怎么制作的?2、有没有方法可以节约制作时间? 3、如何快速提高动画制作水平? 2D游戏美术动画一般都是逐帧动画,就是需要一张一张图画出来的。 比如一个踢腿动作6帧,那么你就要画6张图。动画ok后,把这6张图转画成像素,修线,上色……这当然是非常痛苦的事情。 那么有什么好办法可以节约时间呢?有的。 先画草图再做正式稿,新手可以这样做。熟练以后呢,可以直接使用压感笔起像素稿。 线稿或者是剪影都可以,动画ok以后就可以直接上色。上面的例子是剪影,相对来说线稿还是挺麻烦的,第一遍线稿通常无法保存到最后,因为会修改啊。 所以熟练以后呢,从剪影起稿就是最佳选择了。 而且剪影对于角色或怪物的特征把握非常准确,对于动态的展现也非常有优势。…

Continue Reading... 像素独立游戏美术开发指南-动画制作
Posted in animation

像素独立游戏美术开发指南-动画制作方法

需要了解和掌握的知识和方法: 1、动画制作方法2、获得形状3、调整动画动画是由帧组成的。比如下面的动画共有5帧。 将这5帧合理的摆放就可以获得一个比较理想的动画。 想要做出同样理想的动画,有2种方法。 第1种你需要了解蝙蝠的身体骨骼构造。 了解并理解蝙蝠飞行的规律和特点。 看完这图就可以发现上面那个蝙蝠其实不太准确,制作动画的人参考了鸟类飞行的动画规律。艺术允许适当的夸张。 但加如你是完美主义者,制作的蝙蝠动画是不是还是尽量真实比较好呢。 第2种方法就是使用素材了,找个鸟类或蝙蝠的动画分解图或者gif动画,就可以开始制作了。 我就以第2种方法为例子。…

Continue Reading... 像素独立游戏美术开发指南-动画制作方法
Posted in animation

像素独立游戏美术指南-使用素材制作动画

学会画单张画以后,我们制作一个简单的动画。让这个恐龙活起来。 首先恐龙是2足生物,就是用两条腿跑步的,所以先找一个人类跑步的分解图。然后再找找恐龙跑步的图。 还有原先这只恐龙的图也摆出来。 这里你仔细观察,会发现恐龙跑起来和人略有不同,恐龙的脚似乎比人多出一段,这样我们把恐龙最末的一段当作脚掌,这样就可以和人的下肢匹配上了。 下面人跑的这一帧刚好对应这张恐龙图。只不过人的左右腿要互换一下。 你能看出来吗? 好,现在就可以开始画啦。 当然你也可以直接缩小这个恐龙参考图然后执行阀值命令获取轮廓。不过我还是建议你将上次画好的恐龙填黑,然后做一点处理。 可以发现恐龙跑的时候上半身是抬起的,所以呢用选区工具选中上半身旋转一下,记得模式选邻近。好了,然后呢,把原来的腿擦去,恩,这里最好新建2个图层,比对着参考图分别画恐龙的前后两条腿。 好了,画好第一帧,继续画后面的帧,这里有一点难度,就是需要参考人的跑步帧画出恐龙的跑步帧。另外经过观察你可以发现跑步循环的时候,前后腿的动作是一样的,所以呢,这个第一帧可以复制2份。…

Continue Reading... 像素独立游戏美术指南-使用素材制作动画