【幕后】动态水墨风格的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