腾讯视频：猪年画猪诸事大吉

2019-02-09 H5案例分享 H5案例分享

案例演示，请长按/扫描以下二维码 ->

识别图中二维码

猪年画猪诸事大吉-查阅二维码

完整欣赏此案例大约需要45秒

案例：猪年画猪诸事大吉

出品：腾讯视频

亮点：

1. 创意定义

主题“和火箭少女一起画猪撞好运”，突出“画猪”和“撞好运”，猪年画猪，再由火箭少女拜年。

2. 策划上

加载页完毕后，提示用户长按屏幕，加载到120%，出现一个猪头冲向云霄，撞上了鲤鱼锦和其他猪，映衬了“撞好运”的主题；而后开始画猪，画出一个图案，写上名字，点击“确定”按钮，出现火箭少女的一个成员拜年，最后是含有刚刚拜年的火箭少女，你画的图案，还有好运词（33个随机出现）的海报。

3. 设计上

主色调为节日红，辅助色为蓝色，采用祥云、海浪、中国繁体字、类似八卦阵的转盘的图案，都是一些中国传统年画上用到的元素。

对于火箭少女人物刻画，小五非常喜欢，采用了工笔画的方式，下面仅列出团队中的4个成员，案例中共11位成员。

4. 技术上

采用2D游戏引擎pixi.js进行画面的绘制，通过把需要的设计稿图案切割成png24格式的图片，根据需要进行精灵图的添加。

使用pixi.js在canvas画布上，创作动画时，采用将图案绘制成两幅或者多幅图案的精灵图，配合精灵动画，来呈现动的效果。

技术实现： pixi.js

以上为“H5案例分享”团队原创文章，转载请注明出处！

标签