就像我在开场白中提到的那样，去年夏天，我开发了一款游戏，玩家尝试在时间用尽之前逃离程序生成的迷宫。 工作名称是Escape 。
对于我二月份的项目，我决定尝试为Escape开发一个简单的关卡编辑器。 当我还是个孩子的时候，我喜欢动手使用能够轻松创建游戏内容的工具（上面我并没有通过拨号邀请自己进入朋友的家，所以我可以下载最新版本的Doom关卡编辑器）
我希望Escape编辑器的进入门槛较低，所以我选择使其成为基于浏览器的应用程序。 由于我的日常工作是后端Web开发，所以这也是一次最终学习一些React的绝好机会！
目标
- 为Escape制作一个关卡编辑器，使其易于使用，以便有人可以在没有我的指导的情况下使用它
- 了解足够的React以将编辑器构建为浏览器应用程序
- 了解如何使用Unity的Web请求功能从Web服务中获取和加载已保存的级别
范围
该项目实际上分为三个应用程序，因此我为每个应用程序定义了单独的范围：
范围：编辑器
- 显示组成关卡的“地图”图块网格
- 显示带有不同图块，玩家开始，退出，敌人和物品的“选择器”部分。 单击此部分中的项目将项目标记为“已选择”
- 在编辑器中单击一个单元格，将当前所选内容放置在该单元格中
- 创建“删除敌人”选择
- 可编辑的地图尺寸
- 可编辑的时间限制
- 给当前地图一个唯一的名字
- 将地图保存到Web服务
- 显示已保存地图的列表。 能够从列表中加载保存的地图
- 一次只允许一个玩家的开始，退出和按键出现在地图上
- 基本验证：不允许用户在没有玩家开始，键和退出磁贴的情况下保存关卡
范围： 逃脱游戏客户端
- 重构Escape以使用保存的级别数据而不是程序生成的数据
- 在游戏启动时，提示用户在文本框中输入关卡名称
- 向Web服务发出HTTP请求以获取并加载请求的级别。 级别名称应在编辑器中定义
范围：Web服务
- 将级别数据存储在数据库中
- 展示支持级别数据的基本CRUD操作的API
回顾：进展顺利
总的来说，我对这个项目的结果感到非常满意。 我检查了范围内的每个项目（还有更多！），并实现了我的三个目标中的两个。 以下是一些要点：
学习React很快，我敢说很有趣
作为一名Web开发人员，我很ham愧地承认我最近的JavaScript经验是将近十年前抛弃了jQuery。 大约每隔10分钟就会弹出新的JavaScript框架，那时我从事后端工作，从那以后，我就很遗憾地落后于前端技术。
由于整个JS生态系统的发展速度似乎呈指数级增长，因此我担心仅弄清楚要使用哪个框架可能需要一个月的时间（我应该学习Backbone，对吗？还是Ember？Angular 1.0？2.0？React…？也许Vue。什么是Grunt？Gulp？Bower？NPM？Yarn？Webpack？Redux？A Thunk ??）
幸运的是，在对React进行了一些研究之后，我发现我的担忧被夸大了，原因有两个：
- 对于新手来说，create-react-app绝对是不可思议的。 它几乎涉及零设置，因此无需学习一百万新工具即可构建基本应用
- React对于初学者的文档很棒。 我通读了《主要概念》指南，然后阅读了《 React教程简介》。 敲掉这些东西之后，我已经觉得有能力一起砍东西
令人惊讶的是，我能够在一个周末完成基本的编辑器功能。 做得好，React团队！
Unity Web请求易于使用
Unity的文档提供了大量有关发出HTTP请求和解析JSON的信息。 所有这些最终都是很容易解释的，并且像React一样，我能够以比预期更快的速度进行开发。
这是我第一次使用静态类型的语言使用HTTP客户端。 Unity要求您编写一堆类来镜像JSON响应的格式。 如果JSON格式更改，则您的序列化类以及所有使用它们的代码也将更改。 kes！ 这促使我对API设计要格外小心，这从来都不是一件坏事。
超出范围
因为我高估了我花多少时间学习React和Unity HTTP，所以我最终花了一些额外的时间来开发其他功能：
基于浏览器的游戏客户端
按照最初的范围，播放级别需要下载桌面应用程序，从而带来非常笨拙的体验。 调整关卡并将其保存在浏览器中后，您必须重新启动桌面应用程序，然后手动键入关卡名称以查看所做的更改。 更糟糕的是，与朋友分享您的创作意味着他们必须下载游戏客户端并记住您的关卡名称。
幸运的是，ORC PUNK的Adriano告诉我项目中期，Unity可以导出到HTML5！ 这大大减少了编辑反馈循环中的摩擦，并使共享级别变得更加容易。
更好的是，事实证明Unity可以调用周围HTML中的全局JavaScript函数！ 这是一个巨大的发现，因为它使我能够在编辑器中添加“播放”按钮。 单击“播放”将简单地将游戏拉到新选项卡中并自动加载关卡。 由于级别名称存储在URL中，因此内容创建者只需发送链接即可轻松共享其级别。 我对这次经历感到非常高兴。
谷歌登录
为了防止用户之间相互交流，我希望用户在使用编辑器之前必须先登录。 我决定采用Google身份验证，以保持用户友好。
幸运的是，拼凑一些库来完成这项工作并不难。 最后，我将devise_token_auth和omniauth-google-oauth2 gem用于后端，并将react-google-oauth用于前端。 手工组装的数量超出了我的预期，但我仍然能够在几个晚上将一些东西拼凑在一起。 我认为UX的改进无疑证明了这一努力是合理的。
回顾：进展不顺利
我对为该项目提供动力的技术感到非常满意。 但是，在我认为他们真的“完成”之前，编辑者和游戏客户都需要更多的爱。
没有达到“用户友好的编辑器”目标
我觉得我没有实现使编辑器足够直观的目标，因此任何人都可以在没有一点帮助的情况下拿起并使用它。
有了一点CSS，UI不会太糟糕。 但是，如何使用一些重要功能还不够明显。 它不会警告您是否要覆盖已保存的级别，或者减小地图的大小可能会抹去您的部分工作。 甚至没有通知说保存级别成功。 将鼠标悬停在图块选择器上时，会显示一些工具提示，并且在保存关卡时会出现一些真正的基本验证。 但是，总的来说，这可能更加用户友好。
必须放弃“哨兵”
在游戏的过程生成版本中，“哨兵”敌人会在大厅巡逻并击杀您：
它们在完全随机的迷宫中表现出色，但是令人惊讶的是，将它们放置在精心计划的迷宫中很难，因为它们的起始方向和转向方向都是随机的。 我无法找到一种快速的方法来将它们添加到现有的编辑器中，而又不会使其变得更难使用，因此我从此版本中删除了它们。
希望我将来能找到一种添加它们的方法。 它们有点令人毛骨悚然，并给大气层增加了惊人的数量！
结果
您可以在这里看到我已经建立的内容。 因为用户界面的形状很粗糙，所以我认为这是一个正在进行的工作。 因此，它具有零保修。 但是这里有一些提示：
- 首先，编辑者可能需要30秒钟才能做出响应。 （后端托管在免费的Heroku层上，该层在长时间不活动后会进入睡眠状态）
- 当您单击“保存”时，它可能正在工作。 用户界面中没有任何指示保存成功的指示
- 单击“播放”将加载该关卡的最新保存版本，因此您必须先保存才可以查看关卡的最新更改
请享用！
下个月
三月将是一个忙碌的旅行月份（我来了狂欢节和PAX！），所以我要设定一个相对较小的范围。 我的计划是为我从事很长时间的平台游戏构想构建一个原型。 这将是了解Unity的2D功能（包括内置的Tilemap编辑器）的绝佳机会。 如果一切顺利，我希望在本月末完成2–4级演示。 敬请关注！
