【幕后】动态水墨风格的H5创作思路揭秘

所谓“水墨风格”，因其强烈的东方美学倾向，已经太多次用在各个领域。无论是电影、广告、游戏，甚至时尚领域，都可以找到其身影。

移动端H5作品《朝日啤酒超爽一击活动，免费击出你的超爽足球风》中，就被要求制作具有强烈水墨风格的过场动画。

这里要感谢我的插画师同事 @Bruce Ji 童鞋的出色绘制！基于移动端屏幕的大小，运用漫画的分割形式，在有限空间里，极力表现出了足够丰富的内容。同时，每个细节的绘制过程中，都充分考虑到了水墨表现的延展性，给予了我足够的发挥空间。

接下来就是考虑动态的表现方式了。首先，作为基础，以下几个点非常重要：

1. 因为 H5 的媒介特性，其核心要点在于传播的顺畅不卡滞。因此全屏动画的时长不宜过长，以尽可能地减少加载所耗费的时间。

2. 同理，为了保证播放的顺畅，内嵌视频的压缩比率和画质间的权衡也是需要经过反复推敲的。比如，水墨风格（黑白灰）可以降低色彩信息的容量，画面速度加快也可以让低画质在视觉上显得不那么突兀。

3. 这段过场动画的作用，是在游戏接近尾声时给予观众成功或失败的及时反馈。因此，干脆、有力、迅捷地把结果呈现给观众是非常必要的。而且，这次的内容也和足球运动有关，挥洒凌厉的视觉印象成了我的主要制作目标。

通 常提到水墨的动态形式，直观的印象就是舒缓、大气、沉稳。譬如，缓缓晕染开的墨迹，层层铺陈的自然山水，写意的自然花鸟等。2015年，Netflix 的原创剧集《Marco Polo》的片头动画就是个中翘楚。观众随着慢慢流动的墨晕和大气史诗的东方旋律，逐渐被带入马可波罗的时代。

Marco Polo – Title sequence (Vimeo)

但这种形式和我们前述的要点相违背。我们所要寻 找的是更加爽快的动态形式。Capcom 的经典格斗游戏新作《Street Fighter V》的开场动画，就将水墨的动态笔触运用到了极致。严格来讲，动画本身属于全三维渲染，但可见细节上大胆借鉴了很多水墨技法，营造了爽快凌厉的动态效果。

Street Fighter V – Opening sequence

我所做的第一步，是将角色的肢体进行图层拆分，捕捉瞬间的动作，构建细节。这样可以让动势更丰富，更耐看。如下图，捕捉守门员蓄势待发时微微下蹲的动态， 让画面有一触即发的感觉。动势并不是很大，但在转瞬即逝的动画里，观众的视觉仍然可以察觉到细微的不同。微微的动作倾向和完全僵直的静态图层，会让最终的 成品效果大有不同。

然后，将动态的角色放入场景中，拉开前后的纵深距离，并始终将摄像机置于运动当中，不让观众视觉有停滞的感觉。为了表现攻守双方严阵以待的紧张感，还可以 瞬间拉近镜头，将焦点集中在足球上。这样的表现方法，一是可以拉开对峙双方的空间；二是可以丰富视觉体验，稍稍破除传统漫画排版的思维定势。

接着，搭建三维场景。整个足球场，应该是非常空旷的，所以，需要考虑如何把空间距离拉远。搭建简单的三维环境，有助于突破原本平面的局限，让场景立体生动起来。镜头的操控同样重要。我选择让摄像机跟随飞速前进的足球，穿越球场，营造视觉冲击和速度感。

顺便一提足球本身的旋转运动。显而易见，纸片似的足球，是无法满足全三维场景的需求的。所以，我借助了 VideoCopilot 出品的 AE 三维插件 Elements3D V2，去制作尽可能真实可信的三维足球。并且在后期添加了相当漫画感的速度线条，让足球的旋转有了“高速”的视觉印象。

场景与场景之间的转换，考虑用大块的黑白笔触，快速涂抹过画面，营造视觉上的强对比。转场时，摄像机镜头也会做出大幅度的动势，让画面更激动人心，抓人眼球。

最终的动画效果如下：

作者：Tony Tong