canvas教程

爱消除+小王子粘土风格动画H5 制作花絮(2)

字号+ 作者:H5之家 来源:H5之家 2015-12-26 19:55 我要评论( )

于是,我们选择模拟粘土动画的方案。把需要做动画的素材都拆解成零件在flash中重组,重复的素材可以多次使用,减少资源占用。参考其中一个分镜的制作,整部动画基本都是用这种方法完成的。不过片中这么多分镜头,设

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



  • Canvas脚本(多媒体开发)


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



    5.小王子3D模型 (Yigaxu多媒体设计组)


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

     



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



  • 音乐&配音( 多媒体设计 )

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


    这次音乐使用Garage Band的钢琴来演奏,在情绪升华的部分加入了弦乐组合。为了能让这段音乐略带法国诗意童话的味道,第一次使用混合里第亚的教会调式The Modes,它起源于欧洲古代基督教赞美诗,使用这种调式会使曲子听上去带有淡淡的神秘感和故事性。不过很遗憾,最后这首曲子没能被采用,但我还是希望它能跟大家见个面,有兴趣的同学可以点击下方欣赏音乐。


    Garage Band  iphone版界面



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


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

     

    重构/开发测试(前端重构)


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



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



     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • canvas的神奇用法 javascript技巧笔记 CFEI.NET

      canvas的神奇用法 javascript技巧笔记 CFEI.NET

      2017-04-30 12:00

    •  canvas 魔兽技巧冷却效果

      canvas 魔兽技巧冷却效果

      2017-04-28 12:00

    • 使用CamanJS在Web页面上处理图像的技巧【站长博客网】

      使用CamanJS在Web页面上处理图像的技巧【站长博客网】

      2017-04-13 17:02

    • Android开发基本常识及技巧

      Android开发基本常识及技巧

      2017-04-13 16:02

    网友点评
    7