网易游戏：大自然守护者计划

2019-06-11 H5案例分享 H5案例分享

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

识别图中二维码

大自然守护者计划-查阅二维码

完整欣赏此案例大约需要2分30秒

案例：大自然守护者计划

品牌：网易游戏

亮点：

1. 创意策划上

通过拟人的手法，讲述植物的成长。

① 以内蒙古为故事的位置背景，开始是“新生”，用户向上滑动屏幕，看到一颗种子在空中落下，落进土壤中，小树的爸爸妈妈温柔的对小树说话。大风来了，小树的爸爸妈妈用身体为小树挡住了风魔，自己被大风吹折。

② 小树又经历了沙尘、白色垃圾、牛羊的啃食踩踏。小树发问“为什么世界的样子跟爸爸妈妈说的美好不一样”。

③ 一幅幅小树心目中美好的世界的样子和现实干枯的土地做对比，配合联合国环境规划署发布的数据。呼吁大家“留住美好”。

④ 最后，展示目前已有多少人加入大自然守护计划，关于大自然保护协会的介绍，同时可以生成守护者海报。

2. 设计上

手绘彩色素描，开始画面以绿色为主，大风、沙尘、白色垃圾、牛羊的啃食踩踏采用深色调营造恐怖的气氛。

3. 技术上

依然采用的PixiJS进行舞台的加载，配合tweenMax执行动画。

4. 体验上

素材比较多，案例开始加载比较慢，需要等待时间稍长。

技术实现： pixi.js + tweenMax.js + Scroller.js

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

标签