NaN中的Tragicomedy行为：我们如何在JS上制作游戏并在Steam上发布它

您说：“看不到Eka，您的游戏没有进入前100名，因此并不安全。” 也是一样。 但是在Protolife发展的一年中，我们获得了一些经验，可以与潜在的未来igrodelov分享。 恐怕行业资深人士不会为自己找到任何有趣的东西。 但是，也许至少是发自内心的乐趣。

那是什么样的游戏？ 那我们是谁

我们是由三人组成的团队（ GRaAL ， A333 ， icxon ），按照命运的意愿被称为Volcanic Giraffe，没有任何意图。 我们在一起工作了很长时间，我们三个人参加了Ludum Dare （周末游戏写作比赛），并决定发布自己的一款名为Protolife的手工艺品。

简而言之：这是一种不寻常的塔防，您必须运行英雄光标并针对不断增长的红色生物质构建防御块。

从对条款草案的评论：
icxon ：您需要先写一些有关游戏玩法的文章。 然后是一些截图，其中辣根了解正在发生的事情

如果您更详细地绘画，那么游戏中会发生什么：

1. 有一组级别，每个级别都有我们的基础和化身-机器人制造商。
2. 该等级的一部分充满了红色的生长生物，喷出大量生物。
3. 当然，小怪们跑到了基地并试图粉碎它。 而且我们正在从塔楼上建立防御，而我们并没有为此付出努力。

“但是有什么异常之处？” -你问。 与大多数塔防的主要区别如下：

1. 我们直接通过按键来控制建筑机器人，即 您必须手动仓促这个级别，并有时间构建/修复所有内容。
2. 机器人可以做的就是建造和拆除蓝色方块。 一个这样的块没有任何用处，但是根据某种模式布置的几个块变成了有用的结构。 模板示例：
   

• 模式1：一把简单的枪
• 模式2：墙
• 模式3：防空炮。 在这里，您还必须使用黄色晶体，这些晶体已经开采得更加困难
• 模板4：机枪

游戏就这样了：我们运行，构建，获取答案，快速修复它。 获得游戏开发过程的直接可视化。

但是这样的游戏并不能马上解决。 早在2017年4月，在Ludum Dare 38，看起来像这样：

如果您不注意时间表的差异，那么似乎变化不大。 在LD版本中，已经有了一个游标生成器，从块构建塔，并与红色生物质对峙。 我们将其保留下来是因为它有效并且人们喜欢它。

但是实际上，除了每平方像素的石墨烯浓度外，引擎盖下还发生了很多变化。 在一年的路上，我们必须做出各种决定-游戏玩法，技术，组织甚至市场营销。 有些成功，有些没有。

我想介绍一下这样的决定。

我将立即预订-可能会有几篇文章，因为 如果您开始挖掘，将会产生很多材料。 在本文的结尾，您将进行简短的调查-哪些主题对您来说最有趣。 好吧，也可以链接到游戏本身。

一个无聊的创作故事。

我认为没有人真的对这款游戏的构思感兴趣，因此我将其删除。

选择一个完整的游戏

通常，一旦我们所有人都想到了三个人，是时候尝试制作一款成熟的游戏了。 通常在这个阶段，人们从脑海中汲取某种概念，这就是一个“梦想游戏”，并且正在为此而努力。 然后幸运地猜出了听众的意愿。

由于在Ludum Dare上有一个小的“作品集”，我们的任务有所简化。 我们看到了人们对不同游戏的反应，我们可以进行比较。 Protolife的反应最为出色，它以其独创性和有趣的游戏性而广受赞誉-这是图形的零级，只有4级！

此外，itch.io帮助我们做出了决定，并据此发布了自己的手工艺品。 事实证明，有些人去itch.io玩网络游戏。 他们中的一些人喜欢塔防游戏类型， 每天有 5-10个人进来（并且仍然进来！）玩这种古老的Protolife。
^{在Steam上发布游戏之前的来电统计信息}

可以说，这是我们的第一项市场研究。 我们考虑并决定，“非标准塔防”很可能会开火。 塔防并不多，许多类似于两滴水，我们可以在其中脱颖而出。

展望未来，我可以说战术取得了成功。

不请自来的提示1：更好，不要盲目行事。 理想的“梦想游戏”可能对任何人都是不必要的。 如果您不参加各种游戏，则勾勒出游戏玩法（！）原型并在您自己，朋友和熟人上进行测试总是很有意义的。

反委员会：如果您不怕有一半人会玩“梦想游戏”，那么谁在乎呢？ 做吧！ 也许是幸运的。

引擎：并非最佳解决方案

我们在Phaser.js引擎的Ludum Dare上制作了该版本。 我们非常了解Java，我们非常了解Javascript，网络游戏获得了更多反馈，这非常方便且易于学习-童话故事，而不是引擎。

我们面临一个重要的问题：要更换发动机还是保留一切不变？

这个问题很复杂。 那时我们还没有人知道或研究任何其他引擎。 花时间学习是一件好事，但可能会失去所有的热情。 然后-采取什么？ Javascript是我们每个人唯一了解C ++ / Java / C＃引擎的语言，这意味着立即失去了一半的开发人员。 当时的Unity级别引擎对于“简单的2D游戏”而言似乎过于繁琐。

然后：已经有一个游戏。 仍然需要更新石墨烯，以完成级别-仅此而已。 工作几个月。 然后研究，改写...

通常，我们决定留在Phaser.js。 更糟糕的是-我们决定保持相同的代码基础，即 在Ludum Dare原型之上构建游戏。

来自对条款草案的评论
a333 ：对不起，我没有用拐杖代替艾菲尔铁塔的照片”

不请自来的提示＃2：千万不要那样做！ 对于原型的重用尤其如此。 卡纸上的代码总是快速而肮脏地编写，而不考虑将来的发展。 有一个拐杖，有一个拐杖，现在您了解到您正在立即编写遗留代码，并立即开始遭受它的困扰。 必须仔细阅读原型，然后将其刻录到/ dev / null并重新编写，只有已经足够完整的文件。

反建议：但是要考虑到心理学的特征。 碰巧，延迟几周就足以“降温”。 制作一款架构差的游戏总比不做任何事情都要好。

从对条款草案的评论：
A333 ：我非常倾向于这种选择。 据我所知，这是大多数游戏的完成方式，因为时间和保险丝起着关键作用。 如果您有机会在新引擎上彻底重写所有内容-很好，但是并非总是如此。 不要害怕写得又脏又臭，发布早期的原型，复制和粘贴代码片段，然后发布zabago ... *打击声和and吟声*

实际上，Phaser.js有什么问题？

• 您可能会猜到，该引擎是基于Web的。 知道如何在Steam上发布网页游戏吗？ 没错，请使用nw.js或Electron在Chrome中将其发布。 我认为不需要解释这种方法的缺点。
  
• javascript的性能当然不错，但是本机代码可以运行得更快，并且可以节省匹配项。
  
• 渲染控制能力很弱。 Phaser本身可以渲染所有内容，并且总体上可以很好地完成工作，但有时您想进入流程或自己在webGL上做一些事情。 Phase，Phaser仅允许将片段着色器应用于整个屏幕或应用于屏幕上的一些单独的精灵，并且要适度。 它根本不允许使用顶点着色器（实际上也不能使用顶点），并且使用它们进行游戏中的许多决策会容易得多。
  
• 屏幕上有大量精灵（活动对象）的问题。 而且，“大数目”是数千而不是数百万。 而且，“活动对象”甚至会变成没有动画的躺在石头上。 对于每次滴答，Phaser都会遍历所有对象并做自己的特殊Phaser魔术，从而消除游戏逻辑中的时间。
  

我们一路解决了许多问题，有些问题直到最后才解决。 没有其他引擎的经验就很难判断，但是在我看来，任何其他引擎都可以处理无数恶作剧的数千个游戏对象。 但是，我可能是错的。

风格之战

您还记得游戏原始版本的“原始设计”吗？


当然，它具有自己的魅力，但不适合用于严肃的产品。 是的，我们的艺术家刚刚出差回来，他闲着坐着什么？

他没有坐下来，做了一些可能的设计草图。 历史保留了两把样式的椅子，其中之一必须做出选择。

候选人1：简约设计。 实际上-相同的“像素”，只有更多同情。 一切都是明亮的，对比鲜明的。 它看起来不错，但可以说很坚固。 从某种意义上说，看起来像这样的游戏在手机或俄罗斯方块和打砖块之间的VKontakte上看起来不错。 但是快速又便宜。


候选人2：求实，出色，苛刻。 在这里，您已经可以看到某个故事，上下文。 出乎意料的是，对比度不仅在颜色上起作用，而且在形状上也起作用-我们的建筑物更加有序，而敌方的建筑物则呈圆形，不规则的形状。



这并不是说我们犹豫了很长时间。 我们想象了我们想玩哪个“屏幕快照”，而第一个候选人根本没有机会生存。 我们不知道该图会有什么，所有发生的事情，正在发生的事情-但我们选择了第二种方法。

当然，没有什么可比的，但是在我看来这是一个不错的选择。 是的，我们会更快地完成第一个选项，对性能和图形的要求会降低，甚至有可能将其移植到手机上。

但是我们想玩第二个选项。

因此，微生物和皮氏培养皿被遥远的星球，机器人和神秘的外来生物所取代。

不请自来的平庸建议3：做自己想做的事。

反建议：如果您有3笔抵押贷款而没有其他工作，没有人会责怪您做一些卖得很好的东西，但您想用肥皂洗眼睛和手。

蹲伏的生物量，潜伏的蠕虫

我提到了颜色和形状的对比，如果您比较该草图和最终版本，则对比只会加剧。 比较-我们建筑物的正方形，圆形敌人的建筑物以及红色块的一般圆形度。


顺便说一句，就像游戏中几乎所有事物一样，红色逻辑块在游戏逻辑内部的某个位置以与积木相同的方式放入网格中。 但是她同时看起来很混乱，好像她没有被网捆绑。

我还有一个演示 ，其中调试了生物质的外观。 一切安排如下：有条件的“正方形”并尽可能密集地填充不同大小的圆圈。 以下是这种填充的示例。 在游戏本身中，填充更密集（因此可读性更差）。

圆圈之间有线-连接。 如果生物质需要生长成一些细胞，则选择与必需细胞相交的合适的圆，并沿这些线在其中生长。


这是运动的样子：

从对条款草案的评论：
icxon ：我第一次看到这个演示，哈哈

在游戏本身中，所有内容均以完全相同的方式工作，只是我们的美术师调整了所有大小，颜色和速度以使其看起来更好。


哦，我似乎忘记了要说出这样一个决定的确切来源，讨论的进行方式，候选人被赶走了……

但是，没有，我没有忘记。 没有。 最初，我们计划像LD版本一样做所有事情，即 平方增长。 就在一个晚上，我感到无聊，然后我草绘了该演示以进行练习。 伙计们去了。 他们做到了。

不请自来的提示4：计划，计划，但不要害怕尝试新的东西。 直觉可以告诉你一些好的决定。

反建议：如果您已经设置发布日期并与发布商签订了合同-也许您不应该尝试。

生物量动画

在上面的gif文件中，您可能会注意到生物质的闲置动画-即使在静止时，它也会剧烈呼吸，红色的芽似乎会打开和关闭。 在理想的世界中，这些精灵将是由艺术家精心绘制的动画，并以相同的图案排列成圆圈。 实际上，这些将是Phaser.js根本无法处理的数千个游戏对象。 这已经是一个经过验证的事实-在Ludum Dare的版本中，当生物量至少填满地图的一半时，我已经遇到过地狱般的刹车，那里甚至没有任何空闲的动画。

着色器可提供帮助，可以在GPU上旋转并且不占用处理器。 更好的是，如果此着色器非常简单-那么它将不会过多地加载视频卡。

着色器需要以某种方式告知要绘制的内容以及绘制方式。 将信息传输到着色器的方式有哪些：

• 着色器代码本身中的硬编码。 在我们的情况下，它不合适，但是通常有时考虑此选项也是有意义的。
  
• 通过统一变量（这些变量对于图像中的任何像素都是相同的）
  
• 通过变化的变量（在两个顶点之间插值的变量）
  
• 通过纹理（用颜色编码一些值）
  

方法3对我们可能有用，但是对于Phaser.js而言，它对我们不可用。 您不会通过制服太多（例如，所有圆的半径都不能放入制服的数组中-有限制）。 保留纹理。

诀窍是这样的：我首先用蓝色绘制一个状态（例如，闭合的芽）：


然后第二个状态（开放芽）为红色：


如果将它们加在一起，则会出现紫色混乱：


另一方面，着色器可以看到纹理，可以看到当前时间，并在一定时间段内向我们显示“蓝色”状态，然后是“红色”状态，在它们之间平滑地流动。 好吧，通过本身应用所需的调色板。 原来是这样的：

从对条款草案的评论：
a333 ：啊，这就是b *** i f *** a的工作原理
icxon ：很酷，因为我仍然不知道它是如何工作的

相同，但以矩形为例：

质地：

最终动画：

仅在纹理增长/折叠时更新纹理，其余时间仅用于gpu动画起作用。

玩家关怀

在开发过程中，我们尽量不要忘记第一次看到我们游戏的玩家。 它并不像看起来那样简单-不久后眼睛变得模糊，您开始考虑作为开发人员已经知道的一切。

我们了解这一点，因此在发布前8个月就进行了第一个beta测试-一旦我们准备好前10个级别和40-50％的内容。 该Beta测试提供了出色的关卡设计反馈，我将在下一次讨论。 同时，我们了解到自己对某些观点有很好的预测。

情况：有一个需要防御的玩家基地-摧毁基地会导致任务失败。玩家不会一直监视基地-他会观察他的机器人化身。而且，他一直在监视-游戏的节奏非常快，没有太多时间站起来思考。结果，我们那个测试人员有时没有注意到在后方的敌人轰炸了基地。

解决方案：首先，我们在经过半张地图的同心圆中显示对基座的损坏。


其次，如果基地遭到了严重破坏，那么基地会独立进行反击，扫除敌人，这是清晰可见的声音。这会引起玩家对问题的注意，并留出时间采取行动。


情况：在典型的塔防中，敌人遵循人迹罕至的道路。但是，并不总是能猜到这条路线。而且了解路线对于成功防御很重要：有些塔的射击非常近，而太近的塔将在下一波摧毁。

解决方案：杀死敌人后抽血。一段时间后，地面上会出现清晰的痕迹，您可以集中注意：


问题：但是，实际上，为什么人迹罕至？您知道如何实施A *吗？

答：实施了很多次:)我们诚实地试验了敌人的AI。我们有聪明的蠕虫在寻找路途，还有黏液在躲避子弹。变得不可能玩了。玩家无法建立有效的防御，也无法乐于观看其运作方式。游戏的乐趣直线下降。这并不意味着“聪明”的敌人是坏的。仅针对选定的机械师-当我们的建筑物静止时-这样的敌人不合适。对于“聪明的敌人”，您需要将机枪连接到机器人，或将腿连接到塔。这是一种完全不同的游戏，而不是人们在LD和itchio上喜欢的游戏。

从对条款草案的评论：
icxon：但是仍然有史莱姆。而且他们仍然躲避
GRaAL：想一想

^{它们确实是，但是它们比原始版本中的躲闪要好得多。}

情况：敌人拥有远程枪支（迫击炮），它们可能在玩家的视野范围之外。从一开始，几乎整个领域都隐藏在战争的迷雾之中，因此，敌人的炮弹可能不会被注意到-它们从黑暗中飞出并立即造成了破坏。如果玩家在相反的方向看那一刻，他可能不明白发生了什么。

解决方案：在战争迷雾之上可以看到飞行的弹丸。这使玩家有机会注意到威胁并采取行动。


谈到贝壳。让我们分心于游戏性UX问题。

碰撞处理

在LD版本的移动物体中，没有那么多-每时每刻有十二个子弹和十二个蠕虫。这在游戏中还不够。要感觉到挑战，您必须增加对手数量，同时为玩家提供快速射击武器以应对。因此，在游戏中，这种情况并不罕见：


对于所有游戏对象，都应考虑碰撞。项目符号崩溃成蠕虫，蠕虫崩溃成块，并且所有这些都在屏幕上-有时数百个。枪支应该在范围内选择目标。如果在LD版本中我们有能力遍历所有敌人以寻找合适的敌人，那么在这里它已经开始减速。

总的来说，这个问题有解决方案，我经常遇到有关该主题的文章（这里是其中之一）。由于我们在屏幕上有一个逻辑网格，并且大多数活动对象的大小不超过2x2游戏单元，因此我们决定使用此网格来确定碰撞。

每个单元格都有该单元格中的对象列表。有些静态对象（例如块或石头）在整个单元中仅占据一个单元，并且不会移动到任何地方。并且有动态的沿着网格移动，从一个单元“流动”到另一个单元。


因为 一个对象可以位于两个单元格的边界上的某个位置（尽管其中心显然仅位于一个单元格之内），然后，当考虑到碰撞时，将检查所有相邻单元格。 即我们以坐标为X，Y的项目符号为例，看看单元格（X，Y），（X + 1，Y），（X-1，Y），（X，Y + 1），（X，Y -1）。如果有子弹可以与之交互的对象，则将根据形状和大小为每个对象精确地计算出碰撞。

为了避免两次起床，使用同一网格按塔选择目标。创建后，塔将“订阅”到某些网格单元。如果可以射击的东西进入笼子，塔会收到通知（通常在射击后）。因此，如果一千个敌人明显爬出塔楼，那么塔楼就不会浪费时间计算与他们的距离。


如果地图很大，则网格中的单元也将变得很多，并且所有更新和检查将花费更长的时间。同样，如果有几个单元大小的建筑物/单元，问题就开始出现-对于它们，您必须检查周围的更多单元。

为了平整这些时刻，我们在细网格顶部放置了一个大小为16x16的大单元格。对于她而言，一切都被认为是相同的，并且用于快速筛选出物体周围几个像元的半径内没有任何东西且无法检查碰撞的情况。

承诺的链接和调查

原来这篇文章已经很长了，上帝禁止我将笔记本中的主题列表减少了四分之一。告诉我，您想在下一篇文章中听到什么？您可以投票几分。

好吧，如果突然有关于其完成方式或原因的任何具体问题，请在评论中写下。如果我们记得的话，我们会回答:)

游戏链接：

• Protolife：来自itch.io上Ludum Dare的版本（免费）。
  
• Protolife：在Steam上发布版本（付费，对不起）。
  

谢谢大家的关注。