• 媒体品牌
    爱范儿
    关注明日产品的数字潮牌
    APPSO
    先进工具,先知先行,AIGC 的灵感指南
    董车会
    造车新时代,明日出行家
    玩物志
    探索城市新生活方式,做你的明日生活指南
  • 知晓云
  • 制糖工厂
    扫描小程序码,了解更多

微信里也可以玩「纪念碑谷」!原来它才是小游戏最大的惊喜

小程序

2018-01-02 13:59

前两天,在微信更新的 6.6.1 版本中开放了小游戏,微信启动页面还重点推荐了小游戏「跳一跳」。

作为小程序的一个类目,「小游戏」可以让用户无需下载即可快速体验游戏。目前,小游戏只能在 6.6.1 版微信进行游玩,使用旧版本微信打开,会提示「需要更新微信」。iOS 已经可以直接在 App Store 更新新版。

在首发的小游戏中,与《纪念碑谷 2》合作发布的《纪念碑谷 2 × 给自己的成长语录》小游戏受到了大家的关注。

作为一直广受好评的《纪念碑谷》系列游戏,其简约极致之美让人爱不释手。

当然,《纪念碑谷 2》的小游戏是完全免费的。但是,目前它仅提供部分试玩体验,在你体验结束后,小游戏会提醒你去下载 App,以享受完整的游戏体验。这算不算是小游戏对 App 的一种引流呢?

众所周知,《纪念碑谷 2》的「好看」和「烧脑」是它受广大玩家喜爱的重要因素,然而也正是精致的画面和独特的玩法,使得这个游戏的开发异常的复杂。

那么,在《纪念碑谷 2 × 给自己的成长语录》这个容量不到 4 MB 的小游戏中,开发团队是如何绞尽脑汁、薅光头发做出来的呢?AppSo 的好基友知晓程序(微信号 zxcx0101)独家专访到了这个小游戏的开发团队。

小游戏,小而不陋

无尽回廊一般的关卡与玩法、颜色丰富的建筑设计,以及深邃而内涵的剧情故事,《纪念碑谷 2》这款游戏拥有所有艺术品一般的特质。

小游戏是否能达到原作的制作水准?带着质疑,我第一次打开了《纪念碑谷 2 × 给自己的成长语录》小游戏,屏幕上开始依次显示腾讯游戏和 ustwo 的 LOGO。

接下来,就是完整版《纪念碑谷 2》的第一关。

《纪念碑谷 2 × 给自己的成长语录》的玩法与完整版的《纪念碑谷 2》一模一样。玩家需要在游戏中操纵机关,并通过点击路径,引导主角萝尔和她的女儿,穿过艾舍尔式般奇妙而颜色丰富的建筑物。

既然叫做「小游戏」,《纪念碑谷 2 × 给自己的成长语录》当然不会完整地将《纪念碑谷 2》复刻下来。目前,你只能在《纪念碑谷 2 × 给自己的成长语录》小游戏中玩到《纪念碑谷 2》的第一关和第二关部分内容,但这是完全免费的。

虽然在小游戏中只能玩到「1.5 关」,但已经足以让我们感受《纪念碑谷》这款游戏的魅力。

令人惊诧的是,完全使用 JavaScript 和原生能力打造的《纪念碑谷 2 × 给自己的成长语录》小游戏,在手机上的效果如同 App 一般流畅和顺滑。

游玩结束之后,《纪念碑谷 2 × 给自己的成长语录》小游戏就会进入「分享我的旅程」页面。小游戏为你提供了 4 个在《纪念碑谷 2》中出现的 4 个场景。

这 4 个场景分别是「成长」、「分离」、「老友」、「蜕变」,点击其中一个场景,你可以将场景中的语句录制下来,然后发送给微信好友,对方就会收到一张精美的卡片,也可以收听你录制的语音。

实际上,小游戏的这个功能更像是对 App 的一种延伸,让用户自身的体验不仅仅存在于游戏当中。通过小游戏,我们可以方便地把我们喜欢的游戏分享给好友。这是对游戏社交关系的一种补充:对用户而言,通过小游戏可以轻松地体验到游戏的魅力;对游戏团队而言,可以通过小游戏更高效地引导这些用户去下载游戏 App。

得益于腾讯极光游戏在国内独家代理了《纪念碑谷 2》的 Android 版,前期良好的合作关系,使得小游戏开发的展开十分顺畅。而负责国内《纪念碑谷 2》Android 版的项目 PM Icy 更是也投入到了小游戏的开发中来。

从左至右分别是:

  • Lenny Lin(林雨),web 前端开发高级工程师,隶属于腾讯互娱 TGideas 创意设计团队。
  • Malo Chen(陈哲浩),多媒体动画高级设计师,隶属于腾讯互娱 TGideas 创意设计团队。
  • Icy Hu(胡冰洁),高级游戏运营,隶属于极光游戏产品部 。

陈哲浩告诉知晓程序(微信号 zxcx0101),整个团队一共有 8 个人,成员分别负责开发、设计和产品。他坦言,在《纪念碑谷 2 × 给自己的成长语录》短短两个多月的开发里,遇到了不少的难题,与《纪念碑谷 2》的开发商 ustwo 之间也有不少令人啼笑皆非的对话,但最后还是成功地这个小游戏比较完美地呈现给大家了。

为了做这个小游戏,头发薅掉一半

打开 ustwo 发来的文件那会,我整个人都懵了。

《纪念碑谷 2 × 给自己的成长语录》的开发负责人林雨告诉知晓程序。林雨原本以为,在 ustwo 的帮助下,再去开发小游戏他们需要做的不过是一些移植、优化的工作。

结果那个文件里全是 Unity 的代码,一个模型都没有。于是,在看到那满屏代码的那一刻起,《纪念碑谷 2 × 给自己的成长语录》小游戏团队就踏上了漫漫的探索和建模之路。

众所周知,在《纪念碑谷》游戏中,玩家需要引领游戏主人公在等角投影、错视和不可能的几何物体组成的「纪念碑」中行走,以达到终点。

这种玩法在目前的市场上十分特殊和少见,同时也是复杂的。

林雨说到,由于在 ustwo 发来的文件中没有独立建模,一个个地筛选成本太大。为了在小游戏中还原这种复杂的玩法,林雨只能根据游戏里的截图,或者录制的视频,对照着一点点去计算、还原。

全是三角函数!当时天天就对着游戏视频一个个地算,头发都薅掉了一半。

林雨笑道。但解决了玩法问题之后,另一个问题又接踵而来:为了保证用户体验,微信对小游戏的首屏加载时间又严格的限制。在这么复杂的玩法之下,如何解决加载时长成为了林雨亟待解决的问题

前前后后一共做了 3 个引擎。做到最后一版的时候已经和官方的基本上差不多了,是按照官方的原理去写的。

林雨表示,虽然不能使用 Unity,但还是利用 WebGl 和 3D 硬件加速,想尽办法去优化,让这个游戏能够跟 App 媲美。

推翻重做,一切都为了最完美的呈现

与开发一样,负责《纪念碑谷 2 × 给自己的成长语录》小游戏设计的陈哲浩也遇到了相同的问题:没有现成的模型。他告诉知晓程序(微信号 zxcx0101):

除了 ustwo 提供的人物动态和大型贴图之外,其它的场景都是我们按照原游戏的视觉建筑表现重新搭建的。

其中,最令他头疼的就是如何保证在游戏的过程中空间不错位。

玩过《纪念碑谷 2》的朋友的都知道,游戏是在不断的升降、旋转中逐渐推进的。这就要求设计师在设计错位空间的时候必须精细准确,才不会产生空隙问题。

这是整个游戏最主要的一个核心。

陈哲浩说,在模型还原上要考虑如何跟左、右两边都能达成正确的逻辑关系,保证无论机关、人物怎么移动都不会产生错位。当时就这个问题和开发一起调试了很久。

尽管前期做了那么多准备,但在实际开发上还是遇到了问题。在花了一个多月的时间后,《纪念碑谷 2 × 给自己的成长语录》小游戏团队终于做了第一版,在运行第一关的时候,由于关卡比较简单,并没有出现太大的问题。

但是在进入到第二关之后,随着游戏中的转动和升降次数越来越多,空间之间的缝隙次倍叠加,建筑间出现的缝隙越来越大。

游戏开发商 ustwo 看到就这种情况后,特地写了一封邮件劝《纪念碑谷 2 × 给自己的成长语录》小游戏的开发团队:「写完第一关就算了,第二关实在太复杂了,是绝对不可能完成的。」面对 ustwo 的放弃,陈哲浩表示:

当时从来没想过放弃,觉得这个东西,我们团队是一定能够做出来的。

当时也知道是空间错位设计的时候没设计好,于是马上把第一版推翻了重做。

之后又花了一个多月的时间重做,才有了现在这个十分接近原生 App 的「无缝」版本。「Ustwo 看到之后都觉得不可思议,amazing!他没想到我们能够做出来,对最后一个版本已经很满意了。」《纪念碑谷 2 × 给自己的成长语录》小游戏的项目 PM Icy 告诉我们。

取舍!小游戏的断舍离

既是基于微信,自然少不了在《纪念碑谷 2 × 给自己的成长语录》中增加相应的社交元素。在小游戏里通关之后,你就可以选择一个对应的主题,录制心中想对他说的话,发送一张精致的小程序卡片给你的微信好友。这种微信好友间的相互连接,也与《纪念碑谷 2》中「陪伴」的主题不谋而合。

然而,「加」不难,难的是怎么「减」。

背景、音效、动态……原版游戏光脚步声就有 5 种!

陈哲浩告诉知晓程序(微信号 zxcx0101),由于小游戏目前暂时支持上传空间是 4 MB,同时还有对首屏加载时间的严格控制,开发中需要把所有的东西精简。

尽管希望把最好的效果展现给用户,伴随但大量精细的素材而来的是加载速度的下降,因此,《纪念碑谷 2 × 给自己的成长语录》团队只能不断的做减法,比如说,最后在小游戏中脚步声只保留了 1 种。

当然,小游戏这个形态才刚开始,还需要更多的时间去优化和增加更多功能。而《纪念碑谷 2 × 给自己的成长语录》团队也表示,会持续对小游戏进行优化和更新。

关注「知晓程序」公众号 ,在微信后台回复「兑换」,免费获取《纪念碑谷 2》App 兑换码。

登录,参与讨论前请先登录

评论在审核通过后将对所有人可见

正在加载中