Anyway.2017 设计 制作后记

其实从去年十月开始,我和 Leon 就策划要继续做一个 2017 年的 Anyway.FM 年度总结了,最初的想法其实很简单,就是做一个直接滚动的页面,只不过外面套一个模仿 GameBoy 的壳子,做成类似纵版滚轴游戏的样子,而视觉风格是手绘的感觉,因为 Leon 说这样比较省事儿,他「 随便一画就是一张出来了 」,内容上想做成大事记,每个月选取一个事件。很快,我们就把前 10 个月的事件都想好了,并且分头行动,我 P 了一个 GameBoy 出来,他画了一些顶 45° 视图的人物草稿:

然后

……

然后

……

日历飕飕地向后翻了两个月

期间我写了一小半的代码,等美术资源的同时蛋疼地从 jQuery 换到了 Vue,而 Leon 因为工作非常繁忙(后期是因为沉迷《荒野之息》),场景始终停留在第一幕而木有动静。嗯,我和 Leon 两个缺少执行力的家伙经常能非常快地从 0 进行到 0.1(此阶段包括但不限于画图标、取名字、买域名等),而 0.1 到 1 就……哈哈哈哈哈

后来为了能把难产的年度总结在至少春节前给做出来,我想了一个折中的可以帮 Leon 一起绘制场景的方法,那就是和我们的 2016 版年度总结 一样用像素风。手绘我不行,像素的至少还能画画,而且网上找到一些非常厉害的 8-bit 免费资源库,于是在一月底一个月黑风高的夜晚,我完成了一份非常糙的原型丢给了 Leon:

眼看再不做完就得黄了,所以我们就直接朝这个方向走了下去。

然而

……

然而

……

人算不如天算,后来换成了我开启加班模式,因为公司春节活动的需要,连着两个礼拜又没动过这个页面了哈哈哈哈

节前的爆发

好在最近几天一切归于平静,忙完公司的活动终于可以做自己的了,在阉割了多达七个场景之后(想来还好没有做那么多,否则真的又臭又长了)终于把地图给「拼」完了!

此处用了「拼」而不是「画」,因为场景里面很多元素都来自于国外一个论坛 OpenGameArt ,这个网站看起来非常古老,像上世纪的产物(为啥我老是推荐这样的网站?),但里面的内容非常丰富,都是好心人士上传的游戏美术资源,从像素到 3D,从人物八个方向行走的逐帧动画到可以平铺的场景地图,而且 CC 协议的占大多数,实在是令人激赏。

关于像素化

之前在做 2016 版年度总结 的时候,为了保证像素风的图片不会在放大过程中变模糊失去硬边,我是很傻地在设计完页面之后用 Photoshop 保留硬边成倍放大,然后输出超高分辨率的图,保证在各种分辨率下都留存「像素风」。一直到前几个月前,在那个我曾经推荐过的「点像素」社区 Colorglyph 的页面上,点开他的实现方式我才知道 WebKit 是有一个私有属性直接支持以「像素化」或者说「保留硬边」的方式放大图片的。所以这次的 Anyway.2017 就直接使用了这个属性,但好像还不是事实标准,FF 上略有不同,但毕竟以手机为主,所以下面这样也就直接够用了(偷偷地说其实最后一行效果咋样我不知道,Windows 平台完全没测过……),终于所有的图片都可以 1:1 输出了,节省了很多体积和导出的麻烦。

pixelated {

image-rendering: -moz-crisp-edges;

image-rendering: pixelated;

-ms-interpolation-mode: nearest-neighbor;

}

关于地图的实现

一开始为了省事儿,我和 Leon 的约定是人物只在中间走,所有的物品和场景主要内容都摆在道路两边,这样就减少了遮罩的麻烦。但是后来发觉这样限制太多,很多场景做出来就没意思了,所以加了第二层地图,也就是罩在人物顶上的遮罩,这里既能实现「穿门而过」时,门梁显示在人物上方,也能加一些「下雪特效」等。后来为了加上行走时候的「雪中脚印」等元素,又加了第三张地图,也就是专门叠在人物身后这片区域上,比如第二个场景就是下面这三张图:

关于操作

第一版的操作很简单,纯纯的普通的网页 scroll,但是后来心有点儿黑了,想要全面仿真 GameBoy 的交互,包括移动是长按 :arrow_down: 键,其他 A、B 键也都有反馈等等。这期间遇到了很多实现问题,因为没啥做「长按」操作的经验,所以花了很多精力处理桌面端 & 移动端的事件处理区别。包括长按方向键会弹菜单、快速双击会放大窗口、Vue 好像没法方便地控制音频等等。还好有伟大的 Google 和 Stack Overflow,基本上现在还是在桌面和移动端都能用的状态。所有的代码和资源都在 GitHub 上,有兴趣的朋友可以参考一下,不过还木有整理过:

Anyway-Design/Anyway.2017

关于人物

前期在反复调整的工作(或者说还算做得比较细的方面)其实就是三个主要人物(「你」有三个可选角色,所以总共有 5 种人物),尽管偷懒没有做「往下」以外的其他行走方向,但还是有「站着」、「走路」、「说话」、「听别人说话」等 4 个姿态,这每个人物 9 帧的动画其实迭代了不少版本,毕竟是画面的中心。还少的一些细节是「站着」以及「听别人说话」状态下的动画,本来想着要给我自己加点「抠鼻」、给 Leon 加上「抖腿」啥的,嗯,等我有空了再做吧~

关于素材

最后还是要特别感谢贡献了宽松免费授权的伟大的原创者们,虽然他们很多都声明不一定需要提他们的名字,但还是请允许我列一下完整的 credits:

稿源:图月志 (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 产品设计 » Anyway.2017 设计 制作后记

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录