Alt-F4 #12 - 逆向工程蜘蛛  2020-11-06

作者 xthexder, TheKool, T-A-R, 编辑 Conor_, Therenas, nicgarner,
翻译 Ph.X

目录

在这期非常容易整除的第 12 期 Alt-F4 中,xthexder 介绍了一些关于页面底部的弹跳蜘蛛的技术幕后。然后,TheKool 给大家介绍了一些新手对产能插件及其用途的看法。最后,T-A-R 分享了一些关于即将到来的社区活动的信息,看起来很有趣。

在网页上创建蜘蛛机甲 xthexder

正如你所知道的,Alt-F4 网站的每个页面底部都有一个蜘蛛机甲,类似于异星工厂网站上的火箭。很多人可能都曾点击过它,希望有什么激动人心的事情发生,但失望的发现蜘蛛机甲只会原地跳动。现在,眼尖的读者可能已经注意到,随着 Alt-F4 #8 致异星工厂的一封情书的发布蜘蛛机甲学会了新戏法。如果你还没看到,不妨滚动到底部,点击你的小伙伴,让他跟你一起走吧!

当我们最初建立网站的时候,显然我们想让蜘蛛机甲做些事情,但我们在并没有时间去录制它的闲置动画以外的东西。录制蜘蛛机甲是很棘手的,因为我们需要在没有任何背景的情况下进行录制。最初我们使用 Klonan 的一个秘密 Mod 实现,它使用未记录在异星工厂 API 中函数来录制 Gif。由于蜘蛛机甲的运动是半随机的,所以录制一个循环就更加棘手了,因此除了空闲动画之外,任何其他的东西都需要一些额外的努力才能获得正确的效果。

最初的计划是让蜘蛛机甲爬上页面,和异星工厂官方网站上的火箭一样,成为回到顶部的按钮。这需要录制一个向上行走的动画,然后在我们将其向上移动时循环播放。然后,Dr.MagPie 想到了让蜘蛛机甲跟着遥控器在页面上走,就像游戏中一样。这远远超出了使用录像能够做到的范围,因为这需要太多的组合。

考虑到这是我们所知的社区,可能真会有一些疯狂的伙计会来挑战不可能…

Though knowing our community, there are probably some mad lads that would help with this just for the sake of it being a challenge….

— psihius(2020 年 10 月 3 日)

接受挑战

为网站创建一个能动的蜘蛛机甲无疑是一个挑战,但也是相当有趣的工作。psihius 的评论促使我开始动手,我认为这是一个教科书般的书呆子狙击案例。第一件事就是简单地画出一个蜘蛛机甲,使用原始的异星工厂精灵,使它们可以独立移动。我选择使用原始的 HTML 和 CSS 元素,希望浏览器能够借助 GPU 加速渲染。结果发现这有几个缺点,因为某些变化会触发整个页面布局的重新计算,无法发挥任何性能优势。不过,有了一个基本的蜘蛛机甲,我就可以开始在 JavaScript 中自由地进行动画方面的工作了。

这是大腿部分。它由三个精灵组成,完全使用 HTML 和 CSS(没有 JavaScript)来制作动画。

蜘蛛机甲静态默认姿势
一张粗糙的早期默认姿势蜘蛛机甲的截图。还没有动画,而且缺少膝盖。

当所有的腿都连接起来后,蜘蛛机甲是由 58 个独立的精灵组成的(每条腿有 7 个精灵,加上身体的 2 个)。所有这些元素都是用 CSS 变量来控制的,这些变量可以通过 JavaScript 来修改。我首先为每条腿设置了 4 个变量:大腿和小腿的长度,以及大腿角度和小腿角度。使用一些三角函数,我就可以计算出脚落在特定点所需的值。以鼠标为目标,第一个大难题出现了……膝盖要放在哪里?

在这第一个测试中,膝盖被固定在 90° 角。

我开始研究异星工厂中蜘蛛机甲移动的视频,试图确定如何使腿部运动看起来合理。Factorio Crab Rave 这个视频是非常有用,让我可以一帧一帧地跳来跳去,检查腿部运动。我经历了许多反复,尝试了不同的比例和公式,但没有一个完全匹配我们在游戏中看到的运动。然后我想到,我并没有从三维的角度思考。蜘蛛机甲的身体是悬停在地面之上的,而在异星工厂的等距投影中,这只是通过从 Z 轴(高)减去部分 Y 轴(南)来实现的。考虑到这一点,我再去看视频,发现蜘蛛机甲的膝盖比身体高出一个固定的高度(Z 轴),膝盖在 X 轴和 Y 轴上大约是身体和脚的一半。然后将这个 3D 位置投影到 2D 中,获得了近乎完美的复制了游戏中比例的效果。

此时已是三天后,而且是睡眠不足的三天。

为了让蜘蛛机甲自己行走,我花了一些时间清理了初始的混乱代码,并从闲置动画开始。这是个很简单的东西,它只是把一个正弦波,赋值给身体离地的高度上。身体原本有一个独立的速度和位置,后来改成用每条腿的平均位置,以防止腿和身体不同步。这样一来就只剩下八个点来做动画和向目标“迈步”了。

真正的蜘蛛机甲最多可以同时有三条腿悬空,并且使用了一种目前未知的方法来确定步法顺序。在我最初的测试中,我使用了固定的步序,这很有效,但在所有方向上移动时并不好看。后来我过渡到按距离目标的距离来排序,并在最近的腿和最远的腿之间交替进行。这是我在第一个版本中用过的,不过对模式和时间做了一些小的调整,以试图复制游戏中的版本。

当一条腿开始迈步时,它会预测蜘蛛机甲下一步将在的位置。然后,它为腿部设定目标,再加上一点随机性以减少重复。每一帧,每个活动的腿都会向目标移动。到了周三晚上,我越来越接近一个行走的蜘蛛机甲,并决心准备好一些东西与周五的那期情书一起发出去。

第一个会走的蜘蛛机甲,Bug 和其他。

我在周四下午创建了 spidertron.alt-f4.blog,这样整个 Alt-F4 技术团队就可以测试蜘蛛机甲,并帮助寻找和修复 Bug。运动预测与帧率的计算方式导致了任何滞后(其中有很多滞后),使腿部传送到周围,造成非常混乱的运动。由于一些 CSS 的错误,腿部片段也有一个最小长度,在某些位置上,造成了进一步的故障运动。经过又一个深夜的编码,一些主要的 Bug 得到了修复,第一个公开版本在博客上上线了。

在接下来的几周里,更多的 Bug 得到了修复,比如腿部长度像素的舍入错误导致腿部在空闲时抖动,以及不同的显示器刷新率导致蜘蛛机甲的速度变化,产生腿部与身体的不同步。蜘蛛机甲还获得了一些其他的更新,比如它的橙色涂装,移动页面布局的修复,以及许多性能的提升。总的来说,我对这个结果非常满意。它甚至最终比原来的闲置 Gif 小了 150 KB,加上了所有的精灵、JavaScript 和 CSS 样式表的大小!

感谢 yay,Dr.MagPie,psihius,和其他 Alt-F4 技术员帮助我构建和测试蜘蛛机甲。对于那些感兴趣的人,源代码可以在 GitHub 上获得。希望大家能像我制作它一样玩得开心。(精灵不包含在 repo 中,它们是 Wube 的独家财产,征得授权后使用。)

复杂角:产能插件 TheKool

欢迎来到系列文章的第一篇,介绍那些乍一看很吓人,但事实上用起来并不难的游戏元素。本系列以关于插件的三部曲开始,用很短的时间依次关注三个选择中的每一个。以后,该系列可能会带着更多的话题回归。每篇文章都将试图回答三个简单的问题。它是什么?它能提供什么效果?它应该用在哪里?

前言:异星工厂中的复杂度偏见

在深入探讨具体细节之前,我想简单地谈谈为什么我们可能会对游戏中复杂的方面避而远之,而停留我们已知的舒适区。如果你曾经发现自己在看一些你不熟悉的东西时,告诉自己 “这看起来很复杂,还是坚持用我知道的东西,以后再想办法”,那么你就经历过复杂性偏见。

u/Quazarz_ 的科研河

复杂性偏见是一种心理倾向,认为事物比实际情况更复杂,特别是当我们不完全了解它们时。当涉及到项目时,这可能会表现为拖延,因为我们会回避一个我们预期会很漫长和困难的任务。当涉及到异星工厂时,这通常表现为我们喜欢坚持用我们熟知和理解的舒适的游戏机制,以避免学习新的机制,如信号网络或核电。然而,正如这项任务往往比预期的要容易得多,我希望向你展示,你一直在回避的游戏元素可能比你想象的要简单。

使用插件的实验室
或者你也可以在现有的设置中加入一些插件…

产能插件是什么?

如果你还不熟悉的话,插件是一种可以放置在建筑物中的物品,以改变建筑物的一些性能特征,如制作速度和能源使用。它们也可以放入插件效果分享塔中,将它们的效果传送给范围内的每一个建筑。插件非常强大,这就是为什么它们经常被用于大型建筑中,以减少达到某个目标所需的建筑数量。这往往意味着它们被看作是一种终局游戏的工具,例如在 LoneWolf 的巨型工厂思路文章中就可以看到。然而,它们可以更早地发挥威力。事实上,它们早在绿色科学阶段就可以使用,在科技树中紧随高级电路之后出现。

目前产能插件是游戏中机制最复杂的插件,因为它们有四种作用:增加污染、增加能耗、降低机器速度和增加产能。尽管听上去很复杂,但只有最后一个功能才是真正重要的。产能加成的工作方式和采矿产能加成一样:比如你有 10% 的产能加成,那么每一个周期都会给产能条增加 10% 的进度,当加成达到 100% 时,你就会得到一个免费的产品。没错,就是免费的。它甚至不需要任何资源,只是凭空出现。

它们能提供什么效果?

产能插件虽然是机制上最复杂的插件,但在你应该如何使用它们这个问题上却有着最直接的答案。简单的说,他们减少了你的工厂需求的资源。如果你想获得比你投入的原料预期的更多产出(比如当你缺少一种或多种资源时),你就使用产能插件。这意味着它们的使用是如此的简单:为了获得最好的效果,能上产能插件的全都上。它们在这方面其实是独一无二的,因为它们是游戏中除了采矿产能研究之外,唯一一个无中生有的东西。

最早的应用很可能是在组装机 2 中装上两个产能 1 插件,这样可以获得 +8% 的产能加成,但代价是 -30% 的速度和大量额外的能耗和污染。后期的一种应用是在一台组装机 3 中加入 4 个产能 3 插件,它提供了 +40% 的产能和 -60% 的速度,同时还额外增加了大量的能耗和污染。希望你这时不再担心虫群了!从你的资源中多获得 40% 的产出绝对超值,如果你在任何地方使用它们,这种好处会一直累积到科技树上。在火箭发射井中有机会就一定要使用它们,你可以将矿石需求量降到原先的 15%!不相信的话自己去看看吧。

火箭发射井产能插件对比

如上所述,它们也会降低工作速度。如果你在工厂里想要严格按照比率建造,你需要在计算中同时考虑工作速度减慢和额外产出,因为这些会让你所有的比率都变得不一样。为了解决这个问题,我通常是让柯克·麦克唐纳的计算器(KirkMcDonald’s Calculator)来帮我计算。

它们应该用在哪里?

所以你决定使用产能插件。你应该把它们放在哪里?很明显的答案是“任何地方”,但有几种情况值得特别提及,即使你没有在其他地方使用它们。

  • 火箭发射井:如果你在你的火箭发射井里装上 4 个产能 3 插件,你只需要折合 70 个火箭零件的材料就能制造出你的火箭,而且你很可能根本不会注意到减速的效果。
  • 油井:如果你所在的地图没有足够多触手可及的油田,而且你正在努力抽取足够的原油,可以考虑在你的炼油厂和任何使用石油和塑料制品的东西中放置产能插件。它可能看起来不多,但它可以帮助进一步榨取那苦苦挣扎的资源。
  • 研究中心:你可以在研究中心里放置产能插件!免费的科研!它们甚至不会产生污染,你完全避免了最坏的缺点!还有什么不喜欢的呢?
  • 采矿机这是一个陷阱!别这么用!它不会和你的采矿产能研究相乘,只是相加,而研究给的产能更可观。你最好选择速度或者节能插件。

不过产能插件有几个特殊的注意事项。具体来说,它们只能用于中间产品,也就是那些在其他配方中使用的,并且不能作为建筑放置下来的产品。其次,它们不能放入插件效果分享塔中。如果可以的话,那就太强了!如果你一直没用过产能插件,强烈推荐你为火箭发射井或研究中心整几个,瞧瞧它们带来的效果。

谢谢你们的鱼 T-A-R

作为对 Comfy Factorio 的献礼,我想和大家分享一个邀请函,邀请大家参加后天(11 月 8 日,北京时间 2:00 AM)举行的另一个多人活动。欢迎大家来玩,或者干脆来看看,分享你的祝福。

倒计时已逾期

Comfy Factorio 是一个强调原创地图和“酷”体验的社区。Comfy 热门的场景有虫群之战、堡垒山,以及最近的传送时空机车。为了庆祝他们的第 3000 名 Discord 成员,Comfy 与 Alt-F4 #7 中提到的社区活动的主办方 Big Community Games 合作,举办一场大型多人鱼防游戏

让我们来看看我们要玩的地图,不出所料,它的形状是一条鱼。

鱼岛

在地图的中心,是一个满是鱼的市场。位于鱼尾部的外星虫群已经闻到了这种美味的味道,这意味着这些鱼需要被转移到一个更安全的地方。共同的目标是建造执行这一任务所需的火箭发射井。同时,必须不惜一切代价保护鱼儿不受来自东方的持续不断增长的攻击。

这张地图可以让一些参与者只需不停地捶打虫群,而其他人则可以专注于建设基地。无需任何 Mod。这两位主持者都已经表明他们知道如何举办一个聚会,所以我要说的只有“好好享受,挑条肥的!”

征稿

一如既往的,我们正在召集任何想要为 Alt-F4 做出贡献的人,无论是提交文章还是帮助翻译都可以。如果您有一些有趣的想法,并乐于与社区分享,这里就是一个好地方。如果您没有太大把握,我们会很乐意帮助您讨论内容创意和结构问题。如果您想参与其中,请加入 Discord 以免错过机会。