揭秘爱消除+小王子粘土风格动画HTML 5制作全过程[页4]

奥巴马勇闯恐龙岛,52010778137,谁能百里挑一王可达

　　对分镜头达成一致后，动画师需要根据剧本和草拟分镜，制作一份动态故事板，也就是动态版的分镜头，把每一幕剧情用简明动画串联起来，把故事讲明白。

　　这一步很重要，虽然按照常规H5页面的流程，是没有分镜这一步的，也只是在洛克王国大电影巨人谷H5动画项目设计前，有过和设计师进行分镜讨论的步骤，但却没有时间真正出过一版动态故事板。这次与以往不同，需完成时长接近3分钟的长篇动画，必须使用动态故事板把控整体节奏。(动态故事板片段gif图)

　　第三幕动态图太大，右戳可见：www.uisdc.com

　　粘土制作（视觉设计）

　　动态故事板确定下来后，我们的粘土达人亚非，开始制作需要用到的粘土造型。这一环节非常重要，决定着整个H5的视觉效果。

　　粘土使用了软陶和轻粘土两种材料，软陶制作需要雕刻纹理的部件，轻粘土捏制造型圆润松软的部件，比如角色。捏制完成后，对粘土逐一多角度拍摄，拍摄过程中需要统一光源，完成后将照片素材放置在PS中模拟出定格画面效果，再将素材PSD提供给动画师。

　　下面快来欣赏萌萌哒粘土吧。

　　Canvas动画（多媒体设计）

　　在H5环境下，做长篇逐帧定格动画是不现实的，页面会因为素材量过大而崩溃，除非做成视频格式，但视频兼容性较差，不能满足各类投放平台。

　　于是，我们选择模拟粘土动画的方案。把需要做动画的素材都拆解成零件在flash中重组，重复的素材可以多次使用，减少资源占用。参考其中一个分镜的制作，整部动画基本都是用这种方法完成的。不过片中这么多分镜头，设计师在有限时间内只能把重要的画面设计出来，其余分镜，需要动画师用素材补充完整。动画制作完后提交给Canvas前端开发，将其制作成H5,可在手机页面上预览。

　　Canvas脚本（多媒体开发）

　　这次H5主要面向高端配置的移动设备，尽管如此，素材量也是相当惊人的，再加上动画时长超2分钟，还有循环背景乐、对应字幕的旁白，动画中间部分还有交互，为了节省资源，部分景深效果使用代码来实现的，这些都令我们的脚本哥后期优化花费不少功夫，何况还有最虐的反复修改环节。

　　小王子3D模型（Yigaxu多媒体设计组）

　　H5片中小王子的造型原本计划用粘土来制作，但片方那边关于小王子造型版权的问题比较纠结，加之角色需要做跑、跳、弯腰等动作，假如使用粘土素材拆解方法的话，很难还原正确的肢体光影，于是我们使用项目组提供的3D模型，由另一位动画师渲染粘土小王子的动作素材。

　　还要考虑到灯光的问题，此处光从笼子内散发出来：

　　音乐&配音（多媒体设计）

　　编曲其实是二娃的业余爱好，虽业余，但每次有机会用到工作上都会加倍用心，比如今年上半年有幸为3.30发布会的H5创作了背景音乐。

　　这次音乐使用Garage Band的钢琴来演奏，在情绪升华的部分加入了弦乐组合。为了能让这段音乐略带法国诗意童话的味道，第一次使用混合里第亚的教会调式The Modes，它起源于欧洲古代基督教赞美诗，使用这种调式会使曲子听上去带有淡淡的神秘感和故事性。不过很遗憾，最后这首曲子没能被采用。

　　Garage Band iPhone版界面

　　正如前文提到的，在整个H5 动画、音乐DEMO完成以后，项目组突然提出一个另我们始料未及的修改，从爱消除品牌角度出发，要求把原计划中，偏向《小王子》的走心调性更改成爱消除的欢乐调性，配音也要求从童声改成白领女声。

　　修改调性对于我们来说是件比较严重的事情，在沟通无效后，我们只好重新做一版。时间原因，音乐只好走外包重制，配音也重新录制了好几版。初版那种看完会让人鼻根一酸的感觉已经没有了，现在大伙看到的上线版，便是修改后欢乐结尾的版本。

　　重构/开发测试（前端重构）

　　由于这次H5还涉及游戏福利领取，所以还需要后台开发联调。等H5主要内容准备就绪后，由我们的重构打包发布。游戏内嵌版本也需要游戏开发联调测试，在天天爱消除游戏新版本中上线。

　　终于上线了，过程可谓是困难重重，不管是制作周期的限制，制作流程的繁复，还是后期优化的艰辛，都是一次全新的挑战，辛苦每一位参与的同学，期待下一次的合作。

关于“吴亦凡入伍”H5背后的故事

创意永远是命题作文，项目初期团队了解到：

火爆的“吴亦凡入伍”HTML5背后有哪些设计故事？

早上一睁眼，朋友圈被吴亦凡入伍的H5刷屏，创意受到了广泛的关注，很多人开始找到我了解创作背景，有恭喜的，有质疑的，也有各种分析的。既然火到这个程度，我就借着热度还没有过去，说说团队创作这个H5创意的完整过程。