我们花不到 10 天，做了支细节惊人、妖气十足的「捉网红」H5
这几天朋友圈流传着一个「中秋新传说」，关于月老养的网红逃跑到人间的故事，而奉命为月老找回网红者，就是下面这支画风有点骚骚的H5：《月宫网红猎人》，相信很多朋友都已经玩过。从立项到制作完成用时不到10天，网红逃跑故事背后，还有怎样的故事？今天无非创意（也就是此次H5的制作团队）将亲自给大家讲讲H5制作幕后那些事...
原标题：《揭秘最近朋友圈那支捉网红H5幕后那些事》
数英网用户原创文章，转载请联系本人
点击查看案例：http://www.digitaling.com/projects/18854.html
《月宫网红猎人》最让大家印象深刻的,大概就是那让人眼瞎的游戏画面吧？
有用户朋友反应，第一次进入游戏，简直刺瞎狗眼，像素化、三维、长画幅，并且细节惊人，眼花缭乱，非常好奇这妖气十足的游戏页面是怎么设计出来的。
既然大家有兴趣，那我们就来扒一扒H5制作过程中的那些事，并偷偷附上从美术那里偷来的线稿（坏笑.jpg）
关于设计风格的选择，在和甲方爸爸沟通的过程中，双方意见都比较一致，所以很快达成共识，决定采用三维的像素画面，虽然这种风格相对于普通的平面风格在设计和程序上会大大增加难度和工作量，但对于「找网红」这个既定的游戏方案来讲，三维、像素化的画面无疑能够提高游戏的难度和可玩性、增加画面冲击感以及达到混淆用户视觉的效果。
在一开始确定画面尺寸的时候，我们做了几个不同尺寸的demo进行试验，从内容的表现以及游戏的体验效果考虑，最后决定采用长度为1920px即主流手机屏幕三倍左右的画幅。（PS：这个尺寸可以作为大多数长画幅的互动游戏类H5的参考尺寸）
确定了风格、尺寸以及场景内容之后，设计师饮下一碗鸡血，奋笔疾书几小时之后，热乎乎的线稿出炉！
从线稿上我们可以看到大体的场景布局及画面内容
虽然很快完成了线稿，但离胜利还很远，接下来要做的就是填色以及磨细节——也是最漫长最繁琐的阶段!
经过两天的打磨，终于完成了整体的填色和部分细节：
但，很明显这并不是最终版的配色方案。为了更突出商城夜晚的热闹氛围以及贴合H5背景故事的基调，在内部探讨以及甲方的建议下，我们对配色做了一次大胆的调整，最后的效果也就是大家现在所看到的画面，色彩对比更加鲜明，更加妖气：
程序方面，最繁锁的部分就是动效的处理了。
大家在玩游戏的同时，可能有注意到游戏画面上有一些细节上的动效，比如墙上的灯、店铺的照片、舞台灯光以及地面上部分行走的小人等。虽然单纯的动效实现并没有多大的难度，但由于游戏页面图层十分复杂，动效的处理便增加了不少难度。
另外值得一提的是H5的BMG
童年时期浸淫在红白机世界里的朋友们对H5的背景音乐肯定很有亲切感吧？为了让H5更有像素游戏的感觉，我们特意翻出了十几首经典像素游戏配乐，逐首配对甄选，最后敲定并进行分段剪裁；
细心的朋友会发现，游戏前后两段背景音乐其实是有差别的，的确我们在剪裁上也下了一番功夫，游戏之前我们剪裁了较为平淡的部分，而游戏部分则使用较为激昂的部分，以此增强游戏的活跃气氛，突出限时形式的紧迫感；另外为了整个游戏配乐的流畅和谐，游戏胜利与失败的音效也是从整首音乐中仔细寻找并剪裁出来的小片段，这里对剪裁的要求更高，多一分少一秒都会影响效果。
H5推出之后，我们在朋友圈做了个小调查，很多用户朋友表示游戏看似简单，但捉齐6个网红却很难。能捉齐6个的，不是有神力相助，就是眼力爆表！
上完彩蛋，我们最后再来捉一遍网红，看看你是不是合格的网红猎人吧！
扫描二维码，立即捉网红
（数英网 App 用户需点击放大二维码后，长按识别）
参与评论
参与评论
推荐评论
暂无评论哦，快来评论一下吧！
全部评论（0条）