低门槛游戏制作工具漫谈（第一节） -- 任天堂《Game ...

尊重

云凤蝶中台应用使用带自由拖拽功能的 IDE 制作页面，内置了 Ant Design、AntV、TechUI 等 UI 资产，内建大量最佳实践等，让开发者快速开发出高质量中台应用。

《游戏制作工具漫谈》系列文章旨在借助调研游戏制作工具这一方式，为正在低代码领域奋战的诸位开发及产品们提供一条不一样的设计思路，系列文章会持续更新，敬请期待。
为什么会有这篇专题

这篇专题初看时，与低代码看似并无任何联系，但是深入分析后会发现，游戏制作工具与低代码平台之间诸多的共通之处。
低代码平台

• 愿景：希望每个人都能够拥有制作并开发软件的能力 / 降低软件制作与开发的门槛
  
• 目标人群：citizen developer
  
• 产物：开箱即用的资产 / 体验完整的应用 / 快速验证研发成果的原型
  

游戏制作工具

• 愿景：希望每个人都能够拥有制作并开发游戏的能力
  
• 目标人群：citizen developer（特指拥有游戏创作意愿的人）
  
• 产物：其他开发者可用的素材（本篇没有）/ 商业化游戏（本篇同样没有） / 游戏原型
  

可以发现，虽然最终的产物不同，但两者之间在愿景与目标人群上存在相当的共同点。因此本系列文章致力于为读者们提供一种全新的视角，以平台使用者的身份来比对这些游戏制作工具的优劣之处，从而启发我们日常的开发工作。
《Game Builder Garage》是一款什么样的工具

背景

首先，《Game Builder Garage》并非任天堂在低门槛游戏制作领域的第一次尝试，早在十多年前，任天堂就发布了《马里奥制造》这款游戏，用于让玩家利用既有的素材进行任意形式的关卡定制。马里奥制造凭借其丰富的关卡定制能力一举成为最受玩家欢迎的关卡设计工具之一。


《Game Builder Garage》也并非是任天堂从零开始做研发的产品，它的前身是三年前的 《Nintendo Labo》。任天堂在这款面向青少年教育领域的游戏中开放了定制程序逻辑的能力，用户能够通过拖拽连线节点的方式调用主机自身的硬件，实现各种各样新奇的小玩具，如下图所示：


因此我们可以看到，任天堂在低门槛游戏制作领域并非新晋成员，相反的，任天堂甚至能够算这个领域中的资深玩家。
工具简介

《Game Builder Garage》将整款游戏分为了两个部分 — 导航课堂与自由编程。


导航课堂会准备七款小游戏，每堂课后都会有对应的小测验。这些小测验会提前准备一些固定的场景，通关场景需要用户灵活运用课上所学习到的知识点，以这种方式让使用者加深学习过程中的记忆。


同时，课程所准备的七款游戏也具备合理的难度曲线。由 2d 固定视角演化至 2d 横版卷轴跳跃，最终再演变为今天最为常见的 3d 视角动作游戏。同样的，每堂课结束后都会颁发对应的证书，完成全部七堂课后会颁发一张整体的证书作为奖励。




自由编程是用于管控游戏成品的管理器，用户可以在这里进行游戏分享 / 发布，亦或者通过分享代码游玩体验其他用户发布在线上的游戏作品（借助分享代码而不是统一的游戏市场推荐机制的原因，或许是任天堂在马里奥制造时期因为玩家发布了政治不正确的作品引起诸多风波所导致的）。








用户通过分享代码访问线上的作品是无法直接进行编辑的，如需进行编辑，需要将对方的作品复制一份（fork）进行修改。

点击进入游戏作品后，我们可以通过 “+” 在游戏运行时与编辑态间来回进行切换，这样的能力在对游戏进行 debug 时非常有用。

同样的，用户发布在线上的游戏也可以通过 “+” 切换至编辑态，这也是游戏开发者故意设计的一环（开发逻辑代码），目的在于激起用户对游戏制作与设计背后实现的好奇心。




到这里为止，我们大体介绍了整个工具的主体结构，接下来让我们在设计器与导航指南两个点上详细展开。
设计器

首先，为了让大家快速了解 Game Builder Garage 的设计器，我准备了一个 mini demo。demo 的制作过程会涉及到设计器的基本操作方式，从而为大家提供一个粗略的第一印象。

制作一个极简化版本的超级马里奥
https://www.zhihu.com/video/1396616737282945024

• 初始化空间节点，将空间节点切换至无，从而消除掉默认提供的平台
  
• 初始化一个立方体作为平台，关闭可移动、可损坏、可破坏，从而使平台悬浮在空中
  
• 初始化小人节点，放置摇杆节点与 b 按键节点，与小人的左右端口和跳跃端口相连
  
• 放置更多的立方体，组成一张地图
  
• 这时我们看到运行时的游戏画面并没有定位在小人上（玩过马里奥的都清楚，摄像机是跟随角色移动的），因此需要新建游戏画面节点
  
• 新建游戏画面节点，将游戏画面节点的连接端口与小人相连，这时画面会随着小人的位置变动而变动
  
• 如果游戏画面离小人过近，则需要将游戏画面节点放大，使得画面中能够承载更多的内容
  
• 在小人的位置新增位置传感器，连接端口与小人相连
  
• 新增比较节点与常数节点，常数节点设定为 -1，比较节点的输入端口 A 与位置传感器相连，比较节点的输入端口 B 与常数节点相连。（这代表着判断小人的 y 坐标是否小于 -1，即是否掉落下去）
  
• 新增计时节点，比较节点的出参与计时节点的入参相连，计时节点设定为 1
  
• 新增重置游戏节点，计时节点的输出与它的输入端口相连（即如果小人的 y 轴高度低于 -1 的话，延时 1s 后重置整个游戏）
  

至此，一款最简单的马里奥游戏就已经完成了，我们可以在这之上扩展各种各样的机制，诸如游戏开始时播放 bgm、掉落时播放特有音效与动画、设计可以被击杀的敌人、为敌人进行编程制作行动路线等，上述的所有内容，仅需要一个人，在熟悉设计器的基础之上独立完成即可。
Hint

简单熟悉画布后，我们再来了解一下整套工具在画布与运行时方面所作出的一些规则限制及约定：

• 为了方便用户操作整张画布，设计器提供了无极缩放能力
  
• 用户可在画布中同时操作逻辑节点与渲染节点，逻辑节点最终不会呈现在运行时中
  

注意编辑器中的摇杆与按钮节点



尽管逻辑节点在游戏画面中，运行时实际渲染的时候并未渲染它们

• 画布可以切换为俯视（xy）视角与平视（xz）视角。任天堂将三维世界下的布局分拆为了两部分 -- 俯视与平视，这样能够实现在平面画布上进行 3d 布局。如果用户希望进行构筑三维世界游戏的话，需要在两者间频繁切换以调整 xyz 坐标，当然也可以在属性面板中进行切换。
  

以下图中的电视节点为例，俯视图（xy）视角中，它被放在了墙角，平视图（xz）视角中，它被放在了地板上，最终运行时中，电视就被放在了靠墙的窗户下。

• 画布中的每个节点均可以互相重叠，这个特性在三维世界游戏中更为明显（每次在画布中看到的仅仅是整个布局的横切与纵切，因此节点间重叠的概率极高）
  

举例：下图中的多个立方体节点组成了墙面上的窗户，平视（xz）视角下平铺排列的立方体，因为具备相同的 y 轴坐标，所以会在俯视图中叠在一起



俯视图



平视图



最终效果

• 节点根据各自不同的特性被分输入、中间、输出、物体四个部分。举个例子，输入包含了所有仅存在输入信号的节点，诸如摇杆、按下某个按钮、物体破坏时、游戏开始时。而中间则是同时具备输入信号与输出信号的节点，诸如 AND、比较、四则运算之类。同理也可以轻松推理出输出与物体分类所代表的节点，不做赘述。
  

• 用户通过在节点间连线以构筑节点与节点间的通讯关系，比如物体破坏时的输出信号，与重新开始游戏的输入端口连接在一起，这样就可以达成 — 当物体被破坏时，重新开始整场游戏（如果加上传送节点，将小人节点传送到最后一次失败的位置，就变成了游戏中很常见的存档点模式）
  

https://www.zhihu.com/video/1396620138372800512

• 如果节点逻辑过于复杂，设计器准备了无线输入与无线输出节点，供开发者简化连线。举个例子，一个关卡末尾的位置传感器，在检测到人的时候需要触发被放在关卡开头的重置比分逻辑，如果没有无线输入 / 输出节点，需要连一条长长的线，试想一下，如果这类场景足够多，我们可以很轻松的写出蛛网一般的逻辑
  

而在这里，我们仅需要将位置传感器的输入连接进无线入口，同时在开头准备对应的无线出口即可。同样的，设计器还准备了注释节点供梳理代码。



没有无线输入（中间那根长长的线就是用来连接两个节点的）



有无线输入（相比上一张图清爽了很多）



注释节点（上图中标记为胜利的是判定胜利的处理逻辑，反之亦然）

导航课堂


现在来到了整个游戏另一个精髓的部分，即导航课堂。之前的流程中我们可以看到，如果逻辑复杂度上来的话，这套设计器实际上的上手门槛是很高的。那么任天堂是如何解决这个问题的呢？没错，是依靠极具趣味性的导航课堂。



故意引导用户犯错的机制

打开整个导航课堂的第一课，我们会看到一款平台跳跃游戏。


此时我们可以控制小人的左右方向，但是点击跳跃按键是没有任何反应的。

这个时候你很可能会以为游戏出现了 bug，但实际上这是引导课堂故意而为之的结果。很快的会有一个指引角色提示你进入编辑器，将 b 按键的输出节点与小人节点的跳跃端口相连。

此时我们再从编辑器切换至运行时进行调试，发现我们的小人能够进行正常的跳跃动作了。


https://www.zhihu.com/video/1396621846071160832

实际上，整个导航课堂的七堂课中，存在不少这样故意为之的场景。比如说课堂中有一款 2d  横向滚动卷轴的飞行射击游戏，当你按照课堂的指示，将常数节点、计数节点与游戏画面节点依次相连后会发现：摄像机的滚动速度过快，导致整个地图被很快的滚到结束位置了。


https://www.zhihu.com/video/1396622062576967680
这是开发横版卷轴射击游戏的常见错误，设计者将这种错误巧妙的结合进了课堂教学步骤中，让玩家明白导致这种错误的原因和结果，从而在之后的设计过程中能够自然而然的规避这类常规错误。
同样的，指导教程也会在你犯错之后紧接着讲解修复方法，这样，你就可以在学习开发知识的过程中同时学习到对于常见错误的 debug 方法。当用户完成七节课的时候，他们也会同时学习到各类常见游戏相应的 debug 方法。

用于加深印象的随堂测验

与我们以前熟悉的课堂相同，任天堂在每场游戏制作的末尾都会针对课上的知识点安排随堂测验。每场测验中用户可操作的节点与相对应的属性也是有限的，而用户的最终目标是拿到每场测验中被放在指定位置的苹果。


https://www.zhihu.com/video/1396622217086554112
这一点就非常有意思，它将我们日常习以为常的测验游戏化，将之设定为附带目标（即拿到苹果）的小游戏，鼓励用户动用自己课上学习到的知识去解决这些问题。与随堂考试相比，这类测验更具趣味性，也更容易吸引用户的注意力。

在所有课程都结束后，任天堂会在颁发证书后再开放 50 个随堂测验，供用户熟悉在七堂课中尚未使用过的近 50 多个小节点，同时鼓励用户跟随使用文档进一步熟悉整个设计器的使用流程，从而设计出玩法更加深入的游戏。
小结

游戏行业在过去二十年间的发展过程中，一直饱受开发资源贫瘠问题的困扰。以近几年火热的独立游戏为例，Fez 的开发由两名开发者耗时五年完成，期间一度因为缺乏资金而停滞。因此游戏行业在过去的近二十年间一直致力于生产一类工具，让更多的人能以低门槛参与到游戏内容的生产中，这与目前我们所在的低代码领域目标是相通的。或许，从另一个行业观察他们处理问题的方式，能够启发我们目前所涉足的这个领域。

游戏发布至今约两周时间，目前已经出现了不少玩家二次创作的产品，感兴趣的同学可以观看下列 b 站视频

系列预告

下一节，我们会探寻 Sony Entertainment 旗下 Media Molecule 工作室所发布的 《Dreams Universe》。它同样是一款面向所有人群的低门槛游戏制作工具，但它为开发者提供了更专业的工具及创作可能性。




参考文章



加入我们

云凤蝶目前正在做前端逻辑可视化编排方向相关的探索，欢迎各位有意向的同学投递简历。
未来已来，时不我待！
云凤蝶招聘前端、Java、PD、设计岗位，未来等你共创！
如果你感兴趣，欢迎联系 chenyu@antfin.com 或 shuai.shao@antfin.com