Posted in character

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–精灵教程进阶3

我介绍一下我的方法。把图放在背景层(你确认是RGB色彩模式),新建层。 填充颜色(我选蓝的),图层模式设置为screen(滤色),黑线线变成蓝色的了。这样做是为了使你画的黑线可以清晰显示,如果都是黑色容易混淆。 再新建层,填充白色,设置模式为multiply(正片叠底),这样你就能看到底下的图了。现在你可以画了,铅笔的快捷键是“b”,橡皮的快捷键是“e”。 因为这的白色是透明的(图层模式为multiply正片叠底),所有你可以通过切换前后景颜色(按“x”)来替换橡皮功能。 把缩完后的图放在下面,更改下透明度,然后照着描线。 边描边修改,这个方法可以节约很多时间。脸部的细节完全没有了,所以在这里你要重新绘制。 这里我改了左脚的角度,注意要避免像素挤成一团,去掉多余的像素。有些时候轮廓线会挨着,这样就会像素挤成一团,注意左手和左腿相接的地方。 我做了更改以避免这种情况。 完成了勾线。 脸有一些改变,特别是眼睛,当我上色后你就会明白了。黑色的点是眼球,白色的点则是眼白。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–精灵教程进阶3
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来1

这个页面有大量的动画GIF文件(豆瓣不支持gif)…在网页上加载时可能会因为数量的原因而播放显得缓慢。你应该可以在你的浏览器里点右键选查看图片(在 Netscape是这样,我并不知道其他的如IE或Opera这些浏览器的选项是否一样)单独观看某张图片,这样的话播放速度就会正常。 读到这章你已经可以自主制作角色(sprite)了。你现在有了一个包括别人和你自己都说酷的角色,但似乎缺少了一点什么:你的人物还不会动。 那现在就让我们给角色添加一些简单的动作让角色鲜活起来,让我们先看看怎么让角色呼吸起来。不过在那之前,我们还是来参考学习一下Capcom公司的例子,这是我们想要达到的效果: 首先让我们来看看这些呼吸动作的动画帧数。 最左边的图是很活跃地跳着的拳王,他看起来就好像要对对手吼着“小子,尽管放马过来吧!! ”。他的动作幅度和弹性都很大。 而处于最右下角的Guy则是另外一个典型,几乎没有动作,他很轻松的呼吸着,很冷静,似乎在说着“如果你靠近我,你会后悔的…”。这些你赋予人物的动作应该用来表现这些人物的性格和格斗风格。 当然这也并不只限于格斗游戏。任何游戏里只要你需要用到待机动作,这个原则就可以用得上。 这里我用格斗游戏做例子和用格斗游戏的术语来做解释是因为他们是学习角色动画的好例子。从中学到的技巧可以举一反三,运用在其他方面上。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来1
Posted in animation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来2

好,下面就让我们看看怎么一步一步给这个我刚画好的角色加上呼吸动作: 这个人物有110像素高,而且做好准备开架的姿势。接下来我要展示的是如何在像素级上制作呼吸的动画。 如果我制作的是像狮王Blanka那样的动作幅度很大的人物(因为动作幅度大的原因可以保证动作间的区别),我也许会考虑给每一桢单独画一张手稿。但因为这章是讨论另外一个方法的,所以接下来我们说的是剪切加粘贴的方法。 我给他设计的形象是他的上半身会上下晃动,两个拳头则是一上一下的交替运动(当一只手在上面时,另外一只在下面),而他的两条腿也会随着身体的动作稍做弯曲,给整体一点小弹跳的感觉。又或许我会让他的脚踝也稍微的弯曲一下来表现他的动态。 不过这些都仅是我脑海里的计划而已,现在我们来看如何实现它们。第一步要完成的是幅度最大的那个动作…我要将他的上半身往上移2个像素。 在设计中,他的呼吸是很重的,吸气吸得快且深,当吸气逐渐达到最深时(也就是上半身达到最高高度的时候),胸部的动作会逐渐缓慢下来(就好像你跳起来,越达到最高点,速度越慢),然后呼气,再次在另外一个端点逐渐缓慢下来。在像素上来说,这代表着在呼吸的快速部分移动数量比较多的像素,而在慢速的部分移动比较少的像素。 下面来看一下做好呼吸动作的样子: 好了,在一个四桢的动作序列里我们可以看出他的呼吸动作了。我做的步骤仅有将胸部上下移动和稍微整理一下多余像素而已,成图是上面的左边那个图。 用Photoshop来做这种剪切和粘贴的操作再适合不过了,用方形选择工具来选择所要的像素非常简单(配合Shift键做出不规则选区)。这样操作之后,左边的动画看起来已经挺不错了,看起来已经有呼吸的感觉,但看起来还是有点单调。 每一桢的延迟都是一样的,看起来他就像是上半身在上下下上的滑动。我决定要改进他,所以接下来我们要在桢的延迟上做文章,在他达到呼吸的最高点和最低点时,这两桢的延迟是其他过渡桢的两倍。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–让角色呼吸起来2
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 foundation

【手机游戏像素画美术教程】跟Tsugumo学像素画系列–视觉补偿(selout)PartA

翻译:MIP(Metaldudu/Imick/Pixel32) 2007更 新启事:从第十二章开始是一套全新的教程,而上一次的更新则已经是四年前的第十一章的完成了。在那之后我又学到不少新的技艺,现在的我已经可以回答以前那 些萦绕着我的难题了。 但这并不是说以前那些章节提供的资讯就是“错”的,而是和我现在的理解方式有所差异。以前的章节仍是不错的教材,但在新的章节里我会 更正一些我觉得需要更正的信息。 不过请注意,要对像素艺术有一个比较完整的概念的话最好还是阅读这里所有的章节,从第一章到最新的一章,而不要只看你感兴 趣的部分而跳过其他章节。因为我想解释很多事情,有时我会故意偏离主题和加入额外的内容,所以事实上在一章里所谈及的内容是比它的题目涵盖的方面多很多东 西的。 好,那么让我们正式开始吧。视觉补偿”,简称selout”,这是一个让我困惑了挺久的技术。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列–视觉补偿(selout)PartA
Posted in 色彩与明暗

【手机游戏像素画美术教程】跟Tsugumo学像素画系列-让光照进来

回头看11章,我说过这样的话:作画时首要要在角色前面假想一个光源。我学过如何摆放实际光源,不过要我承认以前对此不甚了解是很难的,咳咳,我很确定的是,某人在某论坛上的留言启发了我,虽然只是一个无关主题的回复;然而像很多跟像素画有关的事情一样,问题的简单性和逻辑性反而把我绕住了。 电视游戏中运用了大量的精灵翻转,为什么要对同一个角色做两个奔跑动画(一个朝左一个朝右)呢?浪费时间、精力,内存/存储空间,如果只是画出角色的一个朝向,比如朝右,然后通过游戏引擎把它们翻转成朝左这样不是挺好的嘛。 但问题在于一个精灵做了翻转以后,原来握在右手的剑会突然出现在左手。听起来是很明显的差异,但其实大多数人根本没有注意到这些。 人们对游戏里面发生的事物是没有很多限制的(譬如说一个角色的脚已经站到一 个平台的边缘的外面去了,但不知道为什么这个角色还是在平台上面站得稳稳的,又或者当跳跃按钮按下去的时候那个角色立即就跳起来了,而不用蓄劲,不过那样的话操作感就会很迟钝)。 虽然人们总是不关心细节,但你仍需要尽可能地避免那些视觉上的“错误”,你最不想见到的是玩家在玩游戏时都没有享受游戏,而是在抓你的错误。如果有了光线,这样的问题解决起来就简单了,光源应该放在角色的正上方。 设想一个人正好站在一个点光源下面。如果你以光影角度来考虑,精灵左右翻转的时候,光线应该看起来是一致的。 让我们看看下面这个简单的例子: 如果光源在角色的正上方,我们用三个颜色区分它,深绿、中绿和浅绿。左侧的腿在角色的正下方。 因为它无法被那个点光源直接照到(上面挡着腿的身体部分没画出来,这部分使光线不能直射到腿上),只需要用到深绿和中绿就可以了。大腿部分是圆柱形的,所以前面部分有点突出,这意味着前面得到的光比后面多(就像一个渐变过渡的3D球体,边缘部分要比中间部分暗一些)。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列-让光照进来
Posted in 新手入门

【手机游戏像素画美术教程】跟Tsugumo学像素画系列-效率越高,余地越大

翻译:MIP(Metaldudu/Imick/Pixel32) 2007在开始编写这套教程时,我已经在游戏业呆了8个月。我在一家小型公司,那里的工作基本上由我独揽。 我既要负责好几个手机游戏的主美术,又得为一个任天堂DS游戏设计所有的角色。基本上每天都在极速工作。 在此之前我对截止期限毫无概念,就算给自己强加了一个完成日期,通常也是万年拖,因为没有什么不良后果。刚开始工作我斗志很高,一整天画草稿,做设定,扫描, 勾线,包揽了所有的工作…现在我的日程表是每4个工作日完成一个新人物兼待机动作(4帧),加行走动画(6帧),还有两招攻击动作(各6帧),3套人物朝向图。 详细的说就是4天66帧,每天平均16.5帧。庞大的工作量。 这些都是独特的原创人物,也就是说我不可能做一个基本形然后通过改变这个基本形的某几个部分来创造一个新人物(我讲的是一个巨型机器人铿铿地走来走去,一个巨型怪兽冲来冲去,一个小人踱来踱去,这种情况)。我的像素作画速度比很多人都来得快…因为这些对我都是再熟悉不过的东西, 有些步骤自自然然地就完成了…但即使如此,我还是为了在限期前完工,将一些可以精简的步骤尽量精简,那一些无法精简的则尽量提高效率,尽我所能想出一套高效的工作方法。 在我现在的工作流程里,人物的动作设计最多花5分钟来完成。如果我手头上有参考图,我会将它分解成几个主要的部分(举例说明,一个怪物,身穿巨大的盔甲,那么就可以简化成一个圆形的身体,有棱角的盔甲部分,小一点的原形的头部,等等,简单而直接),这一步主要是分析人物将如何运动。 接着我就开始画出他的待机动作,然后画出他奔跑动作的动作(控制在6帧以内)。到现在为止的图都是简单的,暂时还没有细化的必要…我不想到后来因为型不准而要重新勾线。…

Continue Reading... 【手机游戏像素画美术教程】跟Tsugumo学像素画系列-效率越高,余地越大
Posted in animation

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

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

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