下图这是什么动画?

上一篇文章介绍了冒泡排序和它的优化。这次介绍的快速排序是冒泡排序演变而来的算法,比冒泡排序要高效的很多。

快速排序之所以快,是因为它使用了分治法。它虽然也是通过不断的比较和移动来实现排序的,只不过它的实现,增大了比较的距离和移动的距离。而冒泡排序只是相邻的比较和交换。

快速排序的思想是,通过一趟排序将待排记录分割成独立的两部分,其中一部分记录的关键字均比另一部分记录的关键字小,则可分别对这两部分记录继续进行排序,以达到整个序列有序的目的。

从字面上感觉不到它的好处,我们通过一个示例来理解基本的快速排序算法,假设当前数组元素是:5, 1, 9, 3, 7, 4, 8, 6, 2。

选择5作为一个基准元素,然后从右向左移动hight下标,进行基准元素和下标为hight 的元素进行比较。

如果基准元素要大,则进行hight的左移一位;如果基准元素要小,则进行元素的交换。

在hight下标左移的过程中,我们目的是找出比基准元素小的,然后进行交换。

交换完之后,进行left的右移,找出比基准元素大的,找到则进行交换。

举一个恰当的例子,假设数组元素是9,8,7,6,5,4,3,2,1。

进行hight左移的时候第一个就发生了交换,1,8,7,6,5,4,3,2,9。嗯看似效率蛮快,但是进行low右移的时候一个个做了不必要的计算,没有一个元素比枢轴值要大。和冒泡排序一样,这一趟进行了8次比较,时间复杂度达到最坏程度O(n^2)。和快排的O(nlongn)相悖。

那拿什么更好的方式选取枢轴值呢?

我看到网上都说是,随机选取一个数作为基准元素。嗯看似一个好的方法,但是和上面大概率出现的最坏情况还是有可能发生的。每次选取枢轴值都有可能是最大的或者最小的。如果是庞大的数据量第一个随机选到了最大的数,程序卡的半死不活的,只有kill掉再重新运行吗?

改进情况,取三数之中的中间数的一个数。什么意思呢?

就是在一组数中取三个关键数字,将中间数作为枢轴,一般可以取左端,右端和中间三个数,也可以随机选取。那你可能说了,要是三个数都是最小的或者都是最大的那什么办呢?

没错,这样选取还是会带来时间上的开销,并不证明选取到一个好的枢轴值。那要是取九数之中的中间数呢?

这当然不是采用随机取九个数然后再排序排一半取中间数那一个。

它是从数组中分三次取样,每次取三个数,三个样品中各取出中间数,然后在这三个中枢当中再取一个中间数作为枢轴。如果一次极端就算了,但是分三次取样还会碰到三次极端那显然是微乎其微的。这样的方法增加选到好的枢轴的概率。

回到基本的快速排序算法,回顾上面的视频动画。我们可以发现,这其中发生了不必要的移动方式。

我们最终要求一趟选的枢轴值,大的数在它的右边,小的数在它左边。但是这个枢轴值每次符合条件去了不该去的地方。我认为它前面的地方不要动,等一趟完了就去自己该去的地方,减少时间上的消耗。

我们都知道,递归对性能是有一定影响的,quickSort函数尾部有两次递归操作。如果待排序的序列极为极端不平衡,递归的深度几乎接近于n的高度(没有了二分法的优势)。这样的时间复杂度也是达到了最坏的程度O(n^2),而不是平衡时的O(nlogn)。

时间慢也就算了,但是栈的大小也是有限的,每次递归操作都消耗一定的栈空间,函数的参数越多,每次递归调用参数耗费的空间也是越多。

如果能减少递归,性能也因此大大提高。

那拿什么方式优化递归操作呢?

执行结果之后和前面两个结果无异。这是一个很好的方法。我们把if改成while,然后一次递归之后,low已经没有用处了,所以把pivot + 1赋值给low作为下一个参数。结果你也看到了,结果都相同。

因此采用迭代而不是递归的方法可以缩减堆栈深度,从而提高了整体性能。

长按下图二维码关注公众号,「算法无遗策」持续更新算法

到了2003年,本于1981年成立的京阿尼动画公司,刚刚开始独立的制作动画。这个以萌系画风所著名的公司陆续出品了:《全金属狂潮》《轻音少女》《AIR》《CLANND》《KANON》《凉宫春日的忧郁》《日常》《中二病》等等御宅动画。现在的大部分所谓的二次元风格的游戏也大多都是走的萌系路线。



大冢雅彦、今石洋之、舛本和也三个GAINAX的核心人物于2011年8月22日从 离职创办了扳机社TRIGGER。这个动画公司在动画制作水平方面没的说,非常喜欢炫技,但是往往作品深度不够,不过我还是非常喜欢这个公司,特别是今石洋之的基于金田系但是更夸张的作画风格。扳机社也是非常喜欢使用CG技术来实现动态效果的一个公司。


我相信还有许多动画公司和动漫作品没有讲解到,由于篇幅的问题,无法长篇大论的详细介绍。略有浅薄之处,请读者诸位海涵。

二次元游戏制作中主要参考的还是动画多一些,那么我来继续介绍一下动画中的不同作画风格。


作画是代表一集或一段日本动画中的高水平片段。一般这种高水平片段的原画都是由一个艺术家所绘制的。动画粉丝把这些高水平的艺术家和绘画方式进行归类。是单纯的以艺术表现方式而来的,而非导演、公司等等。Bilibili等视频网站上有Fans制作的大量名人作画MAD视频,感兴趣的同学可以找找看。


以作画方式来分,常见的大致分类有时间轴系,演算系,WEB系。这三个类别是山下清悟和平川哲生在一次访谈里对日式动画作画派系的分类。日本针对于作画大师的访谈非常多,感兴趣的同学可以搜索一下。

以名人的作画风格来区分的话,又分为金田系,大张系,宇都宫系,真实系,崩坏系等等。关于作画派系没有确定的学术分类,大多是作画名人和粉丝群体根据风格来定义的。

比较一目了然的是大张正己的大张一刀流(勇者透视)和中村丰的中村方块。



我个人最喜欢研究的是金田系(金田伊功风格)的夸张表现手法。非常遗憾的是金田伊功于2009年去世。不过他影响了很多人,有今石洋之这新一代金田系大神把金田系继续发展下去。


这里我要表达的是,无论漫画作者还是作画大神或者某个动画公司,他们的风格是很强烈的,甚至每个公司或工作室都有自己的风格,一般熟悉的二次元动漫的粉丝一眼就能认出来是哪个公司的谁谁谁画的。而不是现在二次元游戏千篇一律的卡通渲染效果,目前的二次元游戏的画面效果还有很多视觉元素没有表现出来,有很大的提升空间。

相信您可以看出来基本二次元的漫画创作风格到了九十年代末期实际上就基本已经定型了。我们只需要根据漫画的画风分类和作者的独特风格进行细分研究即可。


《新世纪福音战士剧场版Air/真心为你》

如果您是游戏或动画相关的美术从业者,首先请思考,如何通过动画来实现上图中的情感表现?如何通过3D渲染技术来表现上图中的嘴部线条表现?如何通过灯光处理来烘托气氛?略有些年代感的赛璐璐风格的平面化的统一配色是否依然好看?您在项目制作过程中是否由考虑表现这种效果?

下面我来介绍一下如何通过CGI技术在游戏制作中对二次元进行效果实现。

首先我把二次元技术实现分为5个模块,分别是:线条,着色,变形,帧率,镜头和后处理。

其中线条和着色都收到渲染方式的影响,线条又与变形和帧率都收到动画调节的影响。

日本漫画的线条,光是使用的笔就有好多种。大多使用的笔尖又粗到细分别是:毛笔,马克笔,科学毛笔,G笔尖,D笔尖,学生笔尖,圆笔尖,等等。

这些笔尖给漫画还来丰富的描边效果,不同的漫画家的表现手法不太一样,可以通过线条的近粗远细,近密远疏,近工整远凌乱的表现手法来表现远近关系。也可以通过轮廓加粗,粗细叠加,来表现物体的叠加关系。有的线条是由粗变细,有点是两头尖中间粗,有的是一样粗,来单纯表现线条的笔势美感。

比如井上雄彦的《浪客行》就是把的毛笔的粗线条运用到了极致。并且他的作品中也充满了传统素描的调子。


《浪客行》创作中 - 井上雄彦

漫画线条的粗细变化看起来随机,实际上是和绘画功力有直接的关系,比如漫画中:

物体边缘会变粗(轮廓线),

两个线条转角比较大的地方会变粗(类似于书法中折角的顿笔),

形状与形状的交界处会变粗(体现遮挡关系),

凹陷下去比较深的地方会变粗,

阴影部分的线条会变粗,

这种漫画师绘制的线条的粗细变化的美感类似于书法作品中的笔画形式。通过人类几千年来书写出来的经验,对于线条控制这种线条的美感有多种多样的归纳,例如:刚健、柔韧、朴厚、丰润、工稳、灵动、华滋、涩劲、稚拙、精到等等。实际上在传统绘画中的速写画法中也是对线条要求非常讲究。

不同的漫画家的线条风格也类似于书法中的各种不同字体,目前大部分二次元游戏对于线条的表现程度也就算是电脑字体中的黑体。这也就是现在游戏画面中该有的元素都有,就是看起来不好看的原因,这需要对于技术和艺术的沉淀与融合。

举个例子,比如三轮士郎的的线条风格比较锐利一些,类似于书法中的瘦金体,还有很多其他漫画家也是这种锐利风格的线条。比如



在制作动画时,由于需要大量原动画人员配合工作,原画师在绘制原画的时候已经丢失了原版漫画的一些线条细节,并且在这个原画师完成具有一定自己风格的作画后,动画师会对原画进行描原(在带有灯光的透台上,用一张纸叠在原画上,照着原画把线稿描出来)处理并且加入中割,这时就会又丢失一些原本的作画细节。动画师一般在描线的时候使用的都是0.2的细线,所以我们在看动画片的时候的线条基本上粗细变化就不是很明显了。我们可以从下面这个例子《海贼王》的原画中可以看出线条粗细变化以及比较小了,但并不是没有,只是不明显,动画师描原后很有可能这些细节就没了。



还是可以略微看出线条折角部分和两交接部分会变粗

下图是《绝对魔兽战线-巴比伦尼亚》中的一个作画场面的关键帧原画。在动作表现上,虽然都是细线条,但是线条的曲直和概括也直接影响画面表现。请仔细看图中头发区域的弧线的飘逸感与腿部的比较硬朗线的力量感的作画方式。有曲有直的线条会丰富画面表现效果。


《绝对魔兽战线-巴比伦尼亚》原画

OK,通过分析,我们可以把线条的变化大概归纳为:粗细变化,曲直变化,疏密变化,连续性变化。通过这些变化,可以表现物体结构的体积关系和穿插关系和远近空间感。

3D渲染技术有一个优势就是品控可以保证,那么我们就可以根据不同风格的需求调节出漫画线条中的粗细变化效果。线条的渲染实现上有模型变换,屏幕空间计算,贴图绘制,模型制作等多种实现方法,根据最适合的方法进行提炼即可。

《二之国2:亡魂之国》中使用了基于屏幕空间深度的运算方法,细节的粗细变化通过渲染3D模型的顶点色和特殊贴图的RenderTexture来控制。


《二之国2:亡魂之国》

表现模型的内部轮廓线时,《罪恶装备》中通过“本村线”的UV拆分方法会使模型内部描边非常清晰,并且不受到贴图尺寸影响。


《罪恶装备》中通过 本村C純也氏 的方法分布的UV

《火影忍者究极风暴4》中面部表情的线条是通过直接建模的形式制作的,模型内部的描边是在贴图中通过特殊的UV拆分方法来实现。


《火影忍者:究极风暴4》中的一些面部细节线条为模型制作

睫毛的线条和眼球高光一般也是使用模型来制作,所以二次元渲染对于模型细节精度的要求很高。




有的动画公司做法很HACK,比如这个通过建模的方法实现线条叠加的效果。比如下面这个:



要还原二次元动漫的线条实际上核心是要靠3D描边渲染技术和夸张的动画技术相配合的,由APLUS制作的游戏作品《小魔女学园-时空魔法与七大不可思议》对于扳机社的动画还原的非常好,他们也制作了动画《斩服少女:异布》的游戏版本,画面表现非常自然,如果3D模型面数堆上来的话已经非常接近二维动画。


《小魔女学园-时空魔法与七大不可思议》


下图中是动画作品《小魔女学园》中,从吉成曜绘制的原画可以看出一些线条的动态,粗细与转折之间的关系。


《小魔女学园》设计稿 – 吉成曜


《小魔女学园》设计稿 – 吉成曜

由于3D渲染线条的局限性,我们要通过一些技术来规避当角色或物体缩小后的密集线条。如图中头发和手心的线条,实际上在动画中画师是会对这个物体自动有一个概括。


请看图中头发和手心的线条变化

动画中经常使用凌乱密集的线条来表现画面在爆炸或强烈光线中的冲击力,如下图《天元突破》中的效果,这种画面是由类似于草稿的 复线描边+速度线+阴影调子组成的。我们可以通过寻找各种技术手段来实现它,但是我觉得技术一定是要由效果来驱动的会比较好。



根据参考类型分析好我们想要表达的线条效果后,就可以开始进行技术选型了。

自己尝试研究或找相关技术论文就好,然后根据自己想要表现的的风格化需求进行改进,比如下面的几个论文:




动画《高分少女》中的背景中扭曲的线条也可以找到对应的论文来研究实现方法。



风格化的卡通人物着色总体上的表现方式大概为:

固有色+阴影色+边缘光+普通高光+各向异性高光

通过《犬夜叉》动画中可以看出,除了瞳孔或光滑表面有高光外,根本就很少高光,并且头发的各向异性高光和边缘光合在了一起:


《犬夜叉》- 高桥留美子

高度概括后的画面一方面是具有平面的美感,另一方面在制作中会省掉很多经费和时间。


计算这种赛璐璐风格的光照模型计算使用最简单的Lambert就够用了,然后通过查找UV的方式来读取渐变贴图来控制明暗和高光变化。也可以直接使用step或floor函数当做SpecularMask和ShadowMask还原赛璐璐的硬边着色效果。更佳简单的可以直接通过查找UV的方式来读取卡通风格的MatCap贴图来模拟同样的效果。

计算出的光照由于模型法线精度太高会导致出现一些没有被概括掉的不想要的细节,所以需要通过调节法线方向的方式来进行光影概括,简单的方法是我们只需要烘焙低模法线到高模上即可。阴影色一般是由计算的动态阴影和模型上的阴影进行混合效果会比较好。


有的日本CGI动画公司使用的另外的方式来实现想要的体积感和光影表现,就是通过反直觉的建模强行把3D模型进行扭曲,主要是在最终渲染结果的时候表现的画面是对的就好。

虽然3D模型奇形怪状,但是二次元对于3D建模的精细程度,和布线要求非常高,最好根据角色阴影走向来布线,这也比较好控制阴影方向。




有一些阴影颜色是直接通过模型布线切割或者覆盖模型的方式进行制作。


说到颜色,传统的赛璐璐动画的上色是具有标准的指色机制的,如图:




《圣杯战争》中角色在不同光照环境下的颜色指定


这些色卡的颜色可能是非物理真实的,但是这种颜色在色彩构成上会非常好看。并且在各种光照条件下的颜色变化都不相同,所以通过shader直接叠加灯光颜色或阴影颜色很难还原出来。

某些二次元游戏为了使阴影颜色变得好看,会单独制作一个阴影贴图,再用ShadowMask进行范围选择,但是这种效果换一个环境就不对了,如图:


《天气之子》- 新海诚

因为是非物理的光照,这就需要多张贴图或者TextureArray来实现。使用《火影忍者》或《罪恶装备》的那种本村氏UV分布的方法会大幅减少贴图体积。


《火影忍者》中的贴图UV分布方式

在日本动画中的物体除了正常的暗部颜色,还有大部分的涂黑操作。例如海带影和BL影。还带影主要用于表现金属质感和浓重的明暗交界线,BL影主要是对人物的暗部进行概括涂黑,来表现一种逆光的效果,视觉上看具有版画的感觉。



边缘光RimLight的实现非常简单,只需要计算一下法线和视口方向的点积即可,并可通过混合一张MASK贴图或模型顶点色来控制边缘光范围。也有用这种方法制作描边的,不过效果不怎么好控制所以被放弃了。

实际上边缘光最好在特定氛围情况下使用,现在有些被滥用了,并不是某些制作方分析了二次元所具有的画面构成后,就什么效果都往里面怼。


《棋魂》漫画插图 - 小畑健


《棋魂》动画 - 大部分时候都没有边缘光

所谓各向同性高光就是常见的普通高光。可以直接通过对Phong光照模型进行二值化处理来获得高光范围并进行着色。实现方法非常简单,具体就不展开说了,有兴趣的同学可以自行搜索。有一些高光比如瞳孔的高光通常是通过模型建模的方式制作的。

动画中的高光一般只会出现在光滑的物体表面,人物皮肤上的高光被概括掉了。


《星际牛仔》动画中的各向同性高光

各向异性高光Anisotropic用于某些特殊材质表面,例如头发,丝绸,皮革,CD,羽毛等等。

在游戏制作中常用的头发中的各向异性高光(天使光环)大都使用的是Kajiya-Kay光照模型,然后使用Noise贴图进行扭曲变形。本身这个光照模型里包含两层高光的叠加,实际上还原赛璐璐动画效果只保留一层就好了,不需要特别复杂。

通过光照模型计算出来的高光往往形状不是很受控制,所以有的制作方法就是通过SpecularMask的方式来控制形状,但是不会出现流动的感觉。


《星际牛仔》动画中的各向异性高光

有的日本动画公司在为了表现头发固定的高光位置,依然使用了取巧的3D建模手段来实现。效果也还可以,比如:





基本上赛璐璐动画大部分的着色元素基本上都是有上面讲的几点组成,没有什么特殊的方法,只是尽量追求简约,不要乱用即可。下面我们开始介绍动画变形。

使用3D还原传统动画效果,比较重要并且比较难表现的一点就是动画变形。非真实感的动画变形会对整个运动过程中的动感和冲击力有很强的表现,并且也会对线条产生影响。


《为世界献上美好祝福》动画中的某一帧面部变形

为了表现物体高速运动的速度感,物体表面的轮廓会发生类似于速度线的变形。《罪恶装备》和火影忍者中使用的是插入模型的方式进行制作的。


高速运动中的角色轮廓会产生变形


这种制作方式可以使用TechArtist开发的DCC工具来进一步实现。


另外还可以使用shading着色器来对物体的顶点进行修改来实现类似的效果,不过这种效果对模型精度要求比较高。如果表现大范围的扭曲,并且动的非常快的话表现力还可以。


《街霸》游戏中手绘的运动扭曲效果


使用着色器顶点变换实现的运动扭曲效果

在动画中还有一种扭曲是丰富表情导致的形状扭曲,如果用3D模型来表现这种效果,这需要非常细致的骨骼绑定才会还原的比较好,比如《火影忍者》中实现的效果。人物的微表情调节对情感的表现至关重要,动画《高分少女》中的女主“大野 晶”从头到尾一句台词都没有,全靠动作和微表情来体现人物感情,并且表现的相当好。


《火影忍者》游戏中的面部绑定

另外就是如果要表现一个角色丰富的情感,强调面部表情的非对称性是非常重要的,不然看起来非常的不自然,这也是许多国内游戏或动画制作者的通病。这种调节,在日本动画中一般是作画监督来把控的。



非对称性调整后的表现明显更加自然

在表现动作力量感方面会对模型进行一定程度的缩放。比如动画《高分少女》的制作方法是在特定情况下拉长模型骨骼。这种制作方法可以在过场动画或必杀技的固定镜头下或QTE时来使用,只要摄像机视口看着没问题就可以了,不用考虑真实的合理状态。


动画的扭曲除了形状的长短变化还有缩放变化,例如《罪恶装备》中为了表现人物手部蓄力,会增大手臂的大小。


还有一种模型的变形是为了修正3D模型在面部表现方面还原二次元的时候的侧颜的扭曲感。因为卡通漫画或动画的造型往往是不符合真实的,只要在不同的角度看起来美型就好。但是在3D模型建模的时候往往正面看起来正常,侧面看起来就歪了,所以要进行变形。在游戏中可以使用BlendShapes或其他方法事先把模型在各个摄像机角度的变形调节好,然后再通过运算来对齐效果。


侧颜通过变形来实现看起来正确的动漫形象



《高分少女》- 扭曲修正前后对比

《高分少女》中的的五官除了鼻子都是贴片制作的,这就会导致侧面会穿帮,许多游戏中也是使用的贴片的方式来绘制五官。这也需要对不同角度的五官面片进行换图和扭曲操作。


使用贴片的方法制作嘴巴和眼睛


同一个状态下的正面图和侧面图对比


通过位移扭曲和换图来修正效果

由于3D动画在K好关键帧后是会线性插值的,这就形成流畅的平滑的过度。实际上这种平滑的过度会给常看二次元动画的人非常强的违和感,因为本身赛璐璐动画在制作时的帧率就是24帧,并且有的很多都是一拍二或者一拍多的。

在西川善司的采访中可以了解到《罪恶装备》团队想要表现的是完全还原电视动画的那种感觉。所以他们是完全按照动画帧率进行制作的,并且取消了线性插值。大部分二次元游戏对这部分的还原好像不是很在意。

其他的动画制作方式3D和2D基本上差不多,就是制作好关键帧或者原画就好了。动作游戏中的关键POSE、蓄力和硬直感的处理也是非常主要,这需要专业的动画知识来控制,就不做过多介绍了。


《罪恶装备》中May的必杀技帧率表

镜头的运用无论是在动画中还是游戏中都是非常重要的一个表现方式,对画面的绚丽程度和情感表现具有重要位置。甚至许多动画公司都有自己特定的经典镜头角度和动作。比如GAINAX公司重复使用的一种正视镜头,角色双手抱在胸前,双脚岔开,给人一种霸气的感觉:



《王立宇宙军》中的GAINAX立

在动画中常用的镜头控制比较有代表性的有:板野马戏,勇者透视。

板野马戏是板野一郎发明的一种镜头跟随运动方式,镜头在大量的带有拖尾的运动物体之间来回穿梭翻转,非常酷炫。


勇者透视是大张正己在勇者系列动画中使用出名的夸张透视结构,往往在重要角色登场亮相的时候出现。


我认为对于镜头控制的比较好的例子就是《斩服少女:异布》和《火影忍者》。无论是第一人称还是第三人称游戏,由于需要玩家进行镜头控制,所以在使用特殊镜头的时候需要考虑玩家操作的适应性。这方面可研究的方向还很广,值得深入研究。


《斩服少女:异布》中运用的勇者透视

后处理也就是传统动画中的后期特效。

使用后处理效果可以避免的一个非常重要的问题就是3D模型的锯齿感。使用抗锯齿(各种 Anti-Aliasing技术)后处理可以大幅度减小锯齿感,更像手绘效果。

表面辉光效果(Glow)也经常被传统动画使用,在3D二次元游戏中一般配合抗锯齿一起使用。但是不宜使用过多,比较多的辉光效果一般在动画中会被用于表现温馨的画面情感。

还有一个比较常用的就是镜头光晕(Lens Flare), 这种光晕效果可以增强画面氛围,新海诚的动画中就会经常使用这种效果。

其余的后处理特效不建议增加太多,用多了会破坏画面的色彩构成,非常花哨。


《罪恶装备》中的后处理效果

传统动画还有一些后期调色的工作是在AfterEffects中合成的,同样在3D引擎中也可以通过shading的形式使用这种调色方法。


《崩坏3》宣传片中的后期调色与合成

3D渲染图象后处理的方法实际上就是和视频后期软件差不多的功效,但是要求是要实时渲染,只要性能优化的足够好就可以了。

让我们再回到开始这张《新世纪福音战士》中的截图:


通过以上介绍您是否对如何表现这个画面有了一个大致的解决方案呢?实际上二次元技术就是那么几种,但是如何运用得好,能还原原作风格,并且在情感上得到表达才是最重要的。

随着真实感渲染技术的发展,技术逐渐定型。非真实感渲染(NPR)会越来越受到重视,其中一个最重要的品类就是二次元卡通渲染(Cel-Shading),其余还有其他风格的渲染效果受众群体不是很多。这对传统的赛璐璐动画专业知识与3D技术的强结合的耦合性要求逐渐增加,只有纯技术经验是无法还原赛璐璐效果的。

要把二次元渲染技术做到极致,不仅需要掌握传统美术技法,画过2D原画中间画(起码要知道其中的原理),了解layout的镜头运用,还要会使用渲染技术手段把效果尽可能的还原赛璐璐效果,并且使工作进程实现流程化。在保持视觉审美的同时使用计算机图形,这样做确实很难。

日本的一些游戏公司正在专注的往还原动画风格靠拢,例如ArcSystemWorks、A+GAMES等。并且近年来的动画公司也都为了控制成本纷纷使用CGI技术来制作动画。比如《高分少女》《鬼泣之刃》或《宝石之国》等等,这些作品都看不太出来CGI动画的违和感,游戏制作要是能还原到这种效果就相当不错了。




在国内外二次元论坛中,二次元饭圈是非常反感照片级写实的,也不想要日文版的皮克斯。这是在由于没有解决掉3D技术实现赛璐璐效果的违和感的前提下产生的。

比如没有还原好二次元的3D动画,就会像《剑风传奇》中的3D表现一样,出现作画崩坏效果:


在动画《宝石之国》的制作中,通过3D渲染技术得到了还原赛璐璐动画表现的最正确的结果。一旦他们得到了正确的部分,我们就会看到非常好的二次元效果,并且达到同样的非常自然的手绘动画的感觉。


我认为Cel-Shading特别是游戏运用方面还有很大的提升空间。比如如果让我来制作一款《圣斗士星矢》的效果,我就会还原这个作品最经典时期的动画作品的风格。

有意思的是,现在这种复古的风格也有逐渐流行的亚文化趋势,比如蒸汽波(Vaporwave)视频中经常就会播放美少女战士或新世纪福音战士的片段,结合Lofi-Hiphop音乐,非常有赛博朋克的感觉。经典的艺术作品是几百年都不会过时的,何况动画的历史本就几十年,经典作品永远不会过时。


一位网友是这样说的:CGI技术不一定是好的或坏的,制作公司对于CGI技术的使用方式决定了它是好是坏。您又是怎样认为的呢?

近年来通过CGI技术,有一些爱好者使用了AI卷积进行补帧和超分辨率技术给一些24帧传统动画进行了补帧和画幅放大,但是二次元粉的评价比较褒贬不一。有的人感觉违和,有的人感觉非常顺滑,有的人感觉头晕。这有一部分是动画是不规则形状的。可能随着科技的发展和技术人员对二次元的理解越来越深会做的越来越好吧。


通过以上内容,我对于传统二次元动漫的历史演变进行了一个大致的介绍,并且对游戏还原二次元的实现方法的一个大体的认知,有许多内容都由于篇幅的关系没有展开去叙述。

实际上每一个漫画和动画大师都可以进行长篇介绍,网络上也有很多名人访谈或纪录片可以参考。技术方面对于描边,着色,动画等等,深入的讲解下去都有很多具体的内容。后面会对不同的作画风格的实现进行单一的技术长篇分享。本文有许多内容是参考了大量的资料和论文,并对这些资料进行的概括,如果一些内容有问题欢迎指正。

xcode很难吗? 只要你稍微花一点点耐心,那么“看起来”稍显复杂的xcode界面只会是一只纸老虎,剥茧抽丝,让我们一同继续来发掘iOS开发工具的绝妙之处。零代码来实现一个可以在手机上运行的demo!你再不来,可真是会后悔的啊。

这期的教程隔的时间有点长,对不住大家,年末工作多,操心的事儿也多,如果你现在还在继续关注静电的教程,那我在这里要再次说一声:感谢。xcode对于设计师来说,大部分人可能并不是很感冒,但我想在这里冒着文章点击量不高,反响不那么好的风险,继续我们的xcode教程。毕竟有很多朋友继续支持着静电,让静电有动力继续为大家普及xcode的知识。其实,只要你稍微花一点点耐心,那么“看起来”稍显复杂的xcode界面只会是一只纸老虎,剥茧抽丝,让我们一同继续来发掘iOS开发工具的绝妙之处,特别是对于我们设计师的。

再次摘录出第一节的,设计师为什么要接触xcode的5个理由:

1.让天马行空的设计被工程师打回而感到失望和沮丧

2.更快更高质量的完成你的设计稿,然后再来个锦上添花。

3.每天跟开发工程师开开心心的配合,成为好基友。

4.如果注定跟工程师成不了好基友,自己搞定那该死的一像素错位,让他们刮目相看。

5.如果这些还不够,那还有最后一条。你可能会因此成为大神,升职加薪,出任CAO,赢取白富美,走上人生巅峰。让同事刮目相看。

最后再加上一条,学习了xcode之后,你会不用花费一行代码,就可以生成一个在真机上演示的APP,对于设计师来说,没有比自己的设计稿被实现更有成就感了对吧?

在第一章和第二章中,我们大概对这个新朋友做了初步了解,让我们可以简单的体验到app是如何在模拟器中运行起来的。对,有的小伙伴会想到那个稍显简陋的启动界面,但肯定大伙不会就那么容易满足于这个启动界面,可以做更多的事情吗?没错,那么在本章中,静电继续为大家介绍xcode的storyboard,翻译过来就是故事板。先来看下最后输出的效果:

Storyboard是一件很奇妙的东西,电影,电视剧等影视剧拍摄的时候,导演会在本子上画类似于连环画一样的图,也就是分镜头,导演通过这些“连环画”来告诉摄影师,演员,接下来的故事,你将出现在哪里,角度是怎样的,如何与周围的环境互动,摄影师需要知道这个场景要如何拍摄,通过什么角度来进行拍摄,拍摄时间,对白等等。也有人将故事板称为“可视剧本”(visual s cript),让导演、摄影师、布景师和演员在镜头开拍之前,对镜头建立起统一的视觉概念。在电影拍摄期间,为了让一个庞大的剧组协调工作,那么,解释剧本、解释导演意图和工作要求的最办法就是“看”,当一场戏的场景动作、拍摄、布景等因素比较复杂而难以解释时,故事板可以很轻松地让整个剧组建立起清晰的拍摄概念。下图是《冰雪奇缘》的故事版。

说到这里,相信大家一定对故事版的概念有了大概的了解,那么xcode的中的故事版是什么呢?我们知道,APP也是由一个一个页面构成,每个页面承载不同的内容和功能,同时这些页面又是相互关联和依存的,没有一个界面能脱离其他界面单独存在,整个app界面我们把他理解为上图的一幅幅的“分镜头”,再通过某种方式组合起来,就形成了一个完整的app结构。下图就是静电在故事版上讲的故事。每一个页面就是一个“场景”,场景之间使用箭头和连线将一个个的故事串联起来,形成一个完整功能的“故事”。xcode这款针对开发者的工具中为我们提供了非常友好的可视化界面,让我们通过故事版,就可以完成一个简易或者复杂的功能,一切只需要使用各种组件和连线而已。

二.为使用故事版准备设计稿

首先我们要准备设计稿,准备一组相互关联的效果图,以下是静电准备的一组设计,当然,推荐使用同样有故事板的sketch来设计(不知道sketch是什么?马上点击这里来学习)。从最左边的分类入口“情感”点击进入“情感”分类列表,然后点击某一本作品,进入作品主页,在作品主页点击作者头像,进入作者主页。整个流程可以点击左上角返回按钮后退。

三.设定xcode故事板尺寸

准备好这些效果图后,我们接着打开xcode(还没有安装的同学可以参加静电的xcode教程-1来下载和安装,相信每个人都可以轻松上手)。和第一章的做法一样,我们要新建一个工程文件。在xcode启动后的欢迎界面选择箭头所示的选项。或者选择屏幕左上角的File>New>Project,同样可以新建一个项目。

接下来我们给项目起一个名字,product name你可以随便写,第二项也可以随便,第三项默认,language选择swift或者object-c均可,设备选择iphone,最后的对勾不用勾选。接着Next

提交后就来到我们熟悉的界面了,左边的一列是xcode自动为我们生成的文件,中间最大的区域为工作区,右侧为元素的属性栏目。是不是跟某些软件很像呢?

那么Storyboard在哪里呢?眼睛尖的同学想必已经发现,左侧的文件列表区域有一个名为Main.storyboard的文件,对啦,这就是我们今天的主战场,快点击打开吧。

打开这个Main.storyboard文件后,中间的工作区域与右侧的面板会发生变化,如下图所示。我们发现,中间出现了一块类似于sketchartboard一样的东西,对,这就是xcode中的故事板啦,我们可以在故事板上作画,但是,这个画板的尺寸好像不太合适,我们需要将尺寸改成我们需要的手机尺寸大小(这里为了简单起见,静电先不介绍autolayout,也就是自动布局功能,这个是为iphone6 及plus等更大屏幕准备的新功能),依次按箭头点击,找到use Auto Layout,将前面的对勾去掉,这个时候你会发现“画布”尺寸发生了变化,好像开始正常起来了对吧?

亲爱的读者们,你们手头是用哪一款iphone手机来调试呢?如果是iphone5,那么就调成640-1136大小(然后尺寸除以),如果是iphone6,或者plus就各自选择对应的尺寸即可,静电在这里的设计稿使用iphone5s来设计的,所以这里选择ip5的尺寸,注意将物理分辨率宽高分别除以二(xcode中,我们务必将设计稿的尺寸除以2,这一点请务必记住了)。那么在哪里具体设置画布的尺寸呢?请看下图,上边的箭头所指示区域是一把尺子,这代表着关于元素尺寸方面的东东,都可以在这里设置,那么我们点击然后按自己的设计稿尺寸或者手机物理分辨率尺寸除以2,填写在下边的框中。我们的第一个画布就这么完成设定了。

左侧的箭头表示什么呢?那表示我们现在被箭头指的这个是初始界面。

四.了解故事板的构成元素-组件

开发人员可以用代码实现无比复杂的功能,那么作为设计师,我们完全可以通过xcode找到替代品,如下图右侧就是各种的组件,我们可以用组件实现不同的功能,最基本的组件就是最左侧箭头所示的View controller。这个组件是做什么的呢?我们可以尝试拖动一个View controller组件到工作区的空白位置,发现了什么?是的,又生成了一张“画布”!这个奇妙的功能,我只告诉读这篇文的同学啊,很好玩吧?那么View controller左侧的箭头是做什么的呢?好,我们同样拖动一个箭头到一个VC(view controller简写,下同)上,发现了什么?箭头附加到了这个VC的左侧,这个代表我们的故事是从这个vc开始的,也就是这个是启动界面完成后第一次进来的界面啦.

静电在这里准备了四个界面,所以,拖动四个VC到主界面上,依次排列好.然后在这里我们还需要了解另一个控件-image view。由名字可以猜出来,image view是来展示图片的容器。但image view必须依附VC存在而不能单独存在。可以这么理解,VC是画布,没有画布,我们不能在上边做任何操作。下图位置的图标就是image view,在每个VC里都拖动一个image view吧!(请注意,拖动到VC的操作必须在视图百分比显示而不是缩放的情况下,且选中VC的情况下才能拖动,如果你无法实现拖动,记得在主界面右键或者双击左键放大视图,同时选中一个VC,然后再拖动)

很简单对吗?完成后,就如上图所示的样子,可能有朋友发现自己的imageview大小不太对,很小。没关系,我们在后边可以调整他的大小。接着点击下图所示的位置展开“图层”,我们会发现类似ps里图层的东西,还有一点,image Vew是在VC的下级里的,也就是被包含的关系,以后如果我们在VC里放入其他元素,也会出现在Vew的下级。

五.导入图片资源到xcode

接下来我们还却一样东西,就是设计稿图片了,ok,准备好本文开头静电提到的图片素材(你可以使用sketch或者任何你喜欢的作图软件设计)。接着从最左侧的文件库中找到带有蓝色图标的images.xcassets.打开它,我们发现右侧的主界面发生了变化。接着点击appicon,这个时候主界面出现了我们很熟悉的东西,2x,3x。秒懂!是的xcode在新版本中为我们提供了这个images.xcassets功能,我们可以将所有图片都扔在这个里边(当然,还有一种传统的导入图片方式,就是之间把图片文件拖动到左侧的文件目录中,这里静电不推荐.)appicon是程序的图标,现在我们可以将制作好的图标文件拖动到里边,如果现在没有准备这个图标,也无所谓,没有他我们可以照样继续工作。待会儿再做不迟。

把你刚刚做好的设计稿拖动到第二栏即可。这里为了方便,我们要把文件名加上@2x或者@3x的后缀。这样xcode可以自动识别该放哪一栏。这样图片文件已经导入到xcode工程中了,我们可以在image view里调用。

返回Main.storyboard文件,选中刚刚拖动到VC里的UIimageView,接着我们可以对这个容器的属性进行设置了。

如果imageView尺寸不对,ok,我们在下图的位置更改Width与Height的值,让其充满VC(再次强调,这里的数值是我们实际设计稿的一半,以后都要形成这个概念,这也是我们为什么一定要将图片素材做成偶数像素的原因)。

接着切换到下图箭头位置,调用图片文件到imageview,如果发现图片被拉伸或者压缩了,可以尝试调节第三个箭头所示的缩放模式(如果设计稿较长,选择top比较合适),同样我们可以调节透明度(alpha),其他选项大家可以自行点点看,我们现在暂时用不到,不再讲解。

依照这个操作步骤,把刚刚导入的图片赋予每一个imageview。

用过flash等软件的朋友一定知道,要让某些元素相应我们的点击或者其他事件,我们必须把他设置为按钮。在xcode中,这同样适用。在组件库里找到按钮(button)组件吧,相信你一定可以找到。接着拖动到你想要相应点击事件的位置(当然必须在vc中),另外,必须保持VC为选中状态再进行拖动哦。

拖动按钮到合适的位置,选中按钮,同样在右侧属性窗口改变他的属性,按钮可以是纯文字的,我们也可以用图片来当按钮。这里静电做一个隐形的按钮,在属性窗口,把button字样删除即可。然后拉大button区域到你认为合适的位置。同样为其他的VC中你觉得需要键入按钮的地方设置按钮。(如果你找不到隐形的按钮,可以展开组件抽屉,“图层”形式的操作你一定可以找到并操作好的,但这里与ps的图层有区别,一个元素位于另一个元素的上方,图层中显示顺序是在其下方的)

按钮加好后,我们来进行最后一步,也是最关键的一步,让各个“故事版”形成关联。也就是指定一个按钮的去向是哪里?首先选中第一个vc中的按钮,我们要实现的效果是,点击后跳转到第二个界面。

这里操作稍微复杂,静电一步一步讲解

2.在这个按钮上点击右键并拖动到目标界面

3.在弹出的层中选择“modal”(push现在不可用,下节讲解push的用法)

4.这个时候两个VC中出现了连接线,选中链接线,在右侧属性栏设置transition,也就是跳转动画(自己试试哦)

5.这样一个链接就完成了

6.依次为所有的按钮都加上连线(注意方向,从左到右跳转,就鼠标右键从左到右划线,反之从右到左。)

7.选中连线可以更改跳转的属性,动画。以下是静电使用的属性。

大功告成,我们可以运行下模拟器看看效果了。静电这里的设计稿是为ip5设计的,所以选择ip5或者5s的模拟器。怎么样?这样设计稿就连接起来了。看看静电实际的演示效果吧。没有一行代码,轻松完成页面之间的跳转,当然,他的功能还不只这么简单,下一节,我们会继续深挖xcode的神奇组件。看看他还能给我们带来哪些更奇妙的好东西。嗯哼,设计师也会xcode,让开发工程师和产品经理也羡慕一下吧!

附件为xcode工程文件,大家下载后可以直接打开参考.

下一次将会是xcode的教程第四节,内容更精彩,不容错过,静电为大家带来更好玩的!零代码,只为设计师更好的做交互和设计!欢迎关注静电的微信帐号jingdesign91,不定期为大家带来静电独家原创教程.

别在哼哧哼哧的只顾闷头做图啦,让设计稿动起来吧!

我要回帖

更多关于 gif动画是什么 的文章

 

随机推荐