编译 | 苏宓
出品 | CSDN(ID:CSDNnews)
求职过程中,很多人将“精通 Excel、表格”列为一项技能,不过当论及使用它来做什么时,也许汇总数据、可视化分析、输出报告等只是“小儿科”做法,有开发者表示,它还有更为高端的玩法,比如用来开发游戏,这也许能为你的求职增加一个亮点。
日前,这名为 nolen 的开发者在 Google Sheet 中实践了一把:
nolen 介绍道,除了美观之外,这款游戏还具有“实时”性。详细来看,在电子表格游戏中,游戏会跟踪玩家完成任务的时间,并将这些时间与蓝色进度条的动画位置进行比较。右下角会显示系统对玩家的最终评价,分享玩家是提前、准时还是延迟完成了任务。
更为值得注意的是,这一切完全由 Google Sheets 公式搞定的,无需 Apps 脚本或其他技巧。这也打开了电子表格做游戏开发的新大门,不少网友惊呼:游戏开发还能这样玩!
试玩地址:https://docs.google.com/spreadsheets/d/1cY0YMKkQGrS_Xlsvv5e2-oZru9_nqORSRC2khOLMKkc/copy#gid=714573644 (打开 "GAME "表单,刷新浏览器标签,然后在第一个 gif 显示 "开始 "时勾选左上角的方框。然后尝试完成工作表中的任务,同时任务旁边会播放动画)。请注意,在打开这个链接时,系统会提示玩家复制 Apps 脚本。该脚本仅用于将游戏重置为起始状态,以便玩家可以重玩它。
接下来,不妨看看表格是如何被用来开发一款游戏的。
基础准备
nolen 表示,这款游戏依靠 3 种技巧来增强其交互性并使其实时运行:
使用循环引用的单元格,允许游戏开发者记录第一次执行的操作。
在单元格中嵌入图片,并通过公式将图片换入换出。
在非循环 gif 中添加多秒的"图片帧",使不相关的 gif 看起来相互关联。
如果你想查看表格游戏中的所有公式,可以打开"Game" 表单,向下滚动,然后点击复选框查看"公式区",可以查看到运用完整的公式列表。
循环单元格引用告诉我们时间
在游戏中,将鼠标移至任何 gif 上并离开,可使其停止播放。本节中的示例可在此下方链接中找到:https://docs.google.com/spreadsheets/d/1cY0YMKkQGrS_Xlsvv5e2-oZru9_nqORSRC2khOLMKkc/copy?usp=sharing
玩家主要通过点击复选框来完成游戏,而要了解一个操作(如选中复选框)是 "早"还是"晚",我们需要知道执行该操作的时间。这有点难。
下面是 nolen 一个初步的尝试:
不过,以上方法并不是特别有用。于是,nolen 发现,每当工作表中的另一个单元格发生变化时,依赖于 NOW 调用的单元格就会更新其值("强制重新计算 "复选框只是为了让我们在编辑工作表和强制更新时更清楚)。因此,我们只是记录当前时间,而不是在选中"开始"复选框时记录!
开发游戏中,我们想要的是"只有当我们还没有更新这个单元格时的当前时间"。
事实证明,nolen 通过表格公式完全可以做到这一点,只要启用迭代计算,这样就可以创建递归单元格。
通过让 A10 单元格中的公式依赖于自身,我们可以创建一个只更新一次的单元格。第一次检查 BEGIN 时,AND(A10=0,BEGIN) 为真(因为 A10 没有值,而 Google Sheets 会将对空单元格的循环引用解析为 0),因此我们将 A10 设置为当前时间。
然后我们就再也不更改它了!在这里,A10 被冻结为创建此游戏示例的时间。这很简单,但还不是非常有用。因为在 nolen 的设想中,希望这款游戏可以重玩,所以这就需要一些重置存储值的方法。
调用了上图显示的函数之后,这样就可以了!
现在我们有了一个单元格,它会在第一次选中 BEGIN 时更新,然后保持该值直到 BEGIN 取消选中。现在我们可以引入 RESET 来防止意外取消单元格的切换而抹去记录的时间,并提供一种一次性重置整个游戏的方法(因为所有单元格都可以引用同一个 RESET 单元格)。
这就是这个游戏最终用来记录时间的主要技术。它还可用于其他用途,例如,通过调用 RANDBETWEEN 来生成数学问题所需的随机数。
在单元格中嵌入图片
接下来,进入第二步。nolen 还大量使用在单元格中嵌入的图片。你可以通过 "插入"选项卡在单元格中嵌入图片,也可以通过公式 IMAGE("LINK") 热链接图片。这本身就很有趣(在单元格中嵌入图片很奇怪),但通过公式引用图片时就非常强大了,因为它可以动态地将图片换入换出。
没有 3d 眼镜我看不清
nolen 用它来玩 "找眼镜 "和创作"冰箱贴诗歌 "游戏。
对此,nolen 还表示,其还用这种技术调换 gif 来动态触发动画,但不幸的是,这行不通!嵌入单元格的 gif 只显示第一帧。这是一个巨大的遗憾,因为如果能即时交换动画 gif,那将是超级强大的。相反,gif 动画需要叠加在单元格顶部,并在工作表加载时自动播放。
链接不相关的 gif
因此,这款游戏中所有 gif 都会在工作表加载时播放,而且需要按顺序播放。
nolen 对此考虑过的一种方法是制作一个覆盖整个工作表的巨型 gif,但这听起来相当笨拙。
因此,nolen 为工作表生成了一系列 gif,并使用 convert(ImageMagick 工具套件的一部分)在每个 gif 中嵌入越来越多的"帧"(例如第一帧的重复),这样它们就会一个接一个地播放。
代码如下:
1#!/usr/bin/env bash
2
3_empty="bar-empty.png"
4empty_measure="$_empty $_empty $_empty $_empty"
5
6main() {
7 measures_of_silence="$1"; shift
8 target_file="bar-${measures_of_silence}beats.gif"
9 files=""
10
11 while (( "$measures_of_silence" > 0 ))
12 do
13 files="$empty_measure $files"
14 measures_of_silence=$((measures_of_silence-1))
15 done
16
17 files="$files bar1.png bar2.png bar3.png bar4.png"
18 convert -dispose previous -delay 25 -loop 1 $files $target_file
19}
20
21main "$@"
简而言之,「我们输入动画播放前需要等待的秒数,然后嵌入该秒数的第一帧(delay 以厘秒为单位;我们以每秒 4 帧的速度运行)。然后我们创建 gif,始终为 4 帧(动画始终持续一秒)。然后禁用循环(将循环次数设为 1),因为如果我们的起始动画一直播放,看起来会很奇怪」,nolen 在博客中写道。
将所有内容放在一起
开始游戏时,nolen 让玩家刷新标签页,这会可以使得所有 gif 重新加载。
然后,当页面中显示"GO"(开始)画面时,玩家会选中左上角的复选框,这个复选框的作用是用来记录一个开始时间,nolen 可以据此推导出工作表中其他动画的播放时间。
除此之外,nolen 还会关注其他一些早期任务的执行时间,并以此来更新他对动画播放时间的概念(以防玩家选中第一个复选框的时间过早或过晚)。
表格中的所有任务都使用相同的技巧来跟踪完成时间--游戏会将这些时间与硬编码的 "可执行此任务的范围 "进行比较,以决定玩家是提前、准时还是延迟。这样,再加上一张巨大的计算表,就能得出玩家游戏的评估结果。
表格的其余部分主要是花几个小时处理格式问题,使一切看起来都正确无误。还有一些其他技巧或很难用谷歌搜索到的东西,nolen 在博客也分享出来:
为了制作 "pops"(弹出窗口)部分,nolen 手动编写了 15 条条件格式化规则,以便每次选中一个单元格时都能显示一个新单元格。
为了使代码更容易阅读,nolen 大量使用了单元格命名范围和命名函数。
迭代计算有时需要额外的页面编辑来强制更新所有值(老实说,这样做可能更省事!)。这就是为什么有 3 个复选框来显示最终的"报告"--只需要两个复选框就可以显示报告,但有 3 个复选框会鼓励用户打开或关闭所有 3 个复选框,而且第 3 个复选框应该总是强制刷新到 "正确"的状态。
在没有应用程序脚本的情况下,nolen 表示,无法做到的一件事就是重置游戏状态!因此他在测试过程中添加了一个脚本,并在最终游戏中保留了它。虽然这让游戏表不那么纯粹了,但他认为这是值得的。
以上便是他在制作表格游戏中的所有过程,不知你是否学“废”(hui)了?
对此,有同为游戏设计者的玩家评论道:
这简直是太酷了。我非常欣赏你对如何将其组合在一起的精彩记录。用重复帧的技巧让 gif "按顺序"播放非常有趣和聪明,我从来没有想到过!
表格游戏地址:https://t.co/oW9jtOfWr3
更多游戏介绍详见:https://eieio.games/nonsense/game-10-realtime-gsheet/
领取专属 10元无门槛券
私享最新 技术干货