网易首页 > 网易号 > 正文 申请入驻

一群大佬猛肝30天,最后就做出个13kb的游戏?

0
分享至

有一个很魔性的网页过关游戏,正如你猜的那样,它的体积只有 13kb。

游戏里我们控制一只小蜘蛛,要从一个房间的入口一段走到出口,并进入到下一个房间。

这当中我们要躲避各种会旋转的陷阱,一旦不小心碰到陷阱,小蜘蛛就会没命。


随着关卡难度增加,各种奇怪的陷阱也层出不穷。

比如你走着走着会遇到突然出现的方块,要过关的话,只有记住方块出现和消失的规律,在一个完美的瞬间穿过去。


再比如这个全图都在变大变小的圆圈,因为看起来很容易让人眼花,所以你在移动的时候,一定要保持好距离。


别的不说,就这赛博风格和各式各样的陷阱,咱都不敢想,这个有 20 个关卡的游戏居然只有 13kb。

后来我们顺着游戏的名字在网上搜了一圈,才发现这个游戏原来是出自于一场叫 js13kGames 的大赛。


它的比赛规则很简单,用 JavaScript 开发一个 H5 游戏,时间期限为 1 个月。

不过有一个要求,你最终提供的游戏文件 zip 压缩包大小必须在 13kb 以内,而且你的游戏不可以使用任何挂载在服务器上的图片、文件等。

换句话说,这 13 kb 包含了游戏运行需要的全部文件。

尽管有了体积和时间的限制,但让人惊讶的是,不管是玩法和画面,这些网页游戏居然还挺丰富的。

比如 2020 年的冠军作品:Ninja vs.Evilcorp。

游戏里我们扮演一个忍者,需要从起点出发,通过跳跃、爬墙等方式来到电脑旁偷到资料。


每个关卡中,除了有监控,还有来回巡视的安保,一旦被他们视线扫到,我们就要重来。


光看看忍者屁股后面的幻影效果,还有跳跃时的白色尘土效果这些细节,你告诉我这只有 13kb?

还有这个叫 The Last Spartan( 最后的斯巴达人 ),游戏里我们在一块草原上进行砍杀,随着时间不断增加,敌人的数量和种类也会随之增多。


游戏里攻击招式也比较齐全。

除了普通攻击,我们可以使用 J + K 来突刺别人,或者是 J + Space 肉弹冲击,造成范围性伤害。


再来看看这个小车过河的游戏,它采用了和纪念碑谷类似的视觉错位。

这个 3D 画面下,小车被断桥挡住了去路,但如果切换到了 2D 画面,两个桥梁就很巧妙地连接上了。


随着难度增加,游戏也逐渐复杂起来,到后面不仅需要切换 2D 和 3D 画面,还需要移动视角才能过关。


看到这里大家一定好奇,这些游戏是怎么把体积控制在 13kb 以内的。

说起来你可能不信,除了有过人的编程技术,这些开发者还精通了五花八门的抠门学。

因为他们为了把游戏体积控制在 13kb ,把能抠的地方都抠过了。

往往一个游戏里,素材图片占据了很大的比重。

如果要单纯地减小这些图片体积,我们可以使用压图工具进行压缩。

比如一个原本 173kb 的图片,重复压缩四次后就只有 80kb ,如果再重复压缩下去,可能最后只有几 kb。


当然,这个方法未免有点效率太低。

有些开发者采用了另外一种方法:用光圈来代替原图

比如大赛里有一个 3D 迷宫博物馆的游戏,场景里放满了各种世界名画,有梵高也有蒙娜丽莎。


要展示一张蒙娜丽莎的画像,我们可以利用算法,让几十个光圈的无限组合,最后得到一张最接近的图片。


如果你摘掉眼镜拿远了看下图( 不近视的请尝试让眼睛失焦 ),就会发现右边的光圈看起来其实跟左边没啥区别了。


所以,在游戏里告诉玩家这是一张蒙娜丽莎的画像,我们不需要放上一张几百 kb 的图片。

利用这些光圈,只需要在代码中敲出个光圈位置、半径和颜色数据就行了。


当然了,就算你把素材压缩足够小,但要是素材数量太多,还是会超过 13kb 的限制。

比如上面的忍者游戏,你仔细观察会发现看似丰富的场景下,其实有很多重复的素材,有的最多也只是换了一种颜色。


除了上面这些素材图片要处理,游戏里的文字也是让参赛者头大的一个问题。

要在游戏里显示文字,就需要调用字体库。

尽管一个通用字体库只有十几 kb,但这明显不适合用在 13kb 大小的游戏上。

所以有聪明的开发者想到做像素字体。

首先他创立一个对象,这个对象由 3x5 个空白格子组成,每个格子里可以填入 true( 真 )或者 false( 假 )。


当填入 true 的时候,格子就会被涂上一个黑色的像素。

那如果填入 false,这个格子就会被跳过,留下空白。

那么要把这个对象涂成一个字母 A,我们可以按照下面的方式填入 true 和 false。


这个填入方式对应的代码也就是:


多 1 个字母就会多占 1 个字节,为了把体积缩到最小,我们可以用 1 来代替 true,把 false 删掉。

所以优化后的代码如下。


这样一来,原本在游戏里显示一个字母 A 需要调用十几 kb 字库,现在只需要十几个字节了。

解决了文字和图片的问题,开发者还需要把代码压缩得尽可能小。

通常做一个游戏都需要借助游戏引擎或者框架,来减少一些工作量。

但常见的游戏框架肯定不适合做 13kb 的游戏。

好在这游戏已经举办了不少年,有一些早期参赛选手自己做了一些游戏微框架,并提供给后来的参赛者。

比如有人做出了一个非常轻量级的游戏框架 Kontra.js。

如果要在游戏中做出一个不断循环的元素,原本可能需要敲下几十行的代码,但通过Kontra.js 只需要几行代码就能实现。


光是这种方式缩减代码还不够。

在编程中有一类工具叫混淆器,它在保证不破坏原功能的前提上,把源代码混淆成让人难以理解的格式,来保护源代码。

怎么混淆呢?

比如把变量和函数用单字母代替、删除代码之间的空格、将多行代码挤到一行等等。


大家有没有注意到,它的混淆方式中包含了 “ 缩减中间变量和函数 ”,“ 去掉空格 ” 。

巧了,这就意外地让混淆后的代码相比之前缩小了 25% 左右。

所以,这个主要用来保护源代码的工具也被大家用来缩减代码体积。

除此之外,还有人建议编写代码时尽量少用一些层级目录( 少用一些分类文件夹 )。

虽然这样编写时会比较乱,但至少在游戏文件最终打包的时候,压缩率会高一点。

这个我们特意还做了测试验证了一下:

把 3 个文件直接放在一个文件夹内,压缩得到 A.zip。

把同样的 3 个文件分别放到 3 个小文件夹内,然后把这 3 个小文件夹放到一个大文件夹内,再压缩得到 B.zip。

经过对比发现,虽然文件一模一样,但是A.zip确实小了几百个字节。


不仅是压缩上抠细节,这些选手还会对压缩包再压缩。

用什么软件都有讲究,比如有人就建议使用 advzip,因为它相对其他的压缩软件能够缩小 1kb 。

看到这些开发者个个跟抠门学大师一样的操作,其实咱也能理解他们。

毕竟你要把一个游戏做得既有趣,又得控制在 13kb 以内,这就好比用电锯剪鼻毛,每一步都得小心翼翼。

但恰恰在这些压力下,开发者会绞尽脑汁去优化自己的代码,去挖掘自己的脑洞。

所以反而意外的让他们做出了这些比较好玩的,有创意的游戏。

这也让我想到了另外一个例子:《 超级马里奥 》。

你可能从未想过,这个多达 32 个关卡的过关游戏,它只有 40kb。

我们曾经出过一期视频告诉大家是怎么做到的,这里再稍微讲讲。

和上面讲到 13kb 游戏素材重复利用一样,马里奥也是有一套素材包。

我们只需要在需要用到素材的时候,把他拖放过去。


当然了,这些素材包也要能省就省。

比如游戏里的草垛,其实就是白云的上半部分换个颜色罢了。


再比如马里奥一整套的动作,是由 21 张图像(准确说法为 Sprite)组成的。


但 21 张图片占用空间太多,所以开发者把每张马里奥图片都切成了 4 份,去掉相同的部分。


这样剩下的素材依然可以通过组合,来完整马里奥所有的动作。

如果你仔细观察,就会发现花朵和星星都是对称的。

其实游戏开发者只存储了半只花和星星,只是在显示它们的时候,把它们复制了一下再放出来罢了。


你看,虽然限制非常严苛,但这并不妨碍开发者们做出影响了几代人的《 超级马里奥 》。

这样的例子还不少。

比如早期因为机器性能问题,根本做不出 3D 游戏,那怎么表现出 3D 效果呢。

在上世纪 80 年代就有开发者想出利用平行投影,通过倾斜视角来展示游戏画面,从而产生立体效果。

1982 年世嘉出品的《 Zaxxon 》:


这类游戏也被称为等距游戏,这种方式也被各种 RPG 和战略类游戏所采用。

还有开发者想到利用视差滚动的效果,让 2D 画面更有立体感。

那么,什么是视差滚动?

我们坐车的时候向窗外看,会感觉远处的山脉移动速度慢,近处的稻田和建筑物移动速度快。

那游戏里也可以把远处的背景速度拉慢,距离镜头较近的物品速度拉快,模仿人类视觉效果,营造立体感。‍

1981 年推出的《 Jump Bug 》就采用了视差滚动效果,仔细看近处的大楼要比远处的白云移动速度快很多。


这个方式后来经常被用在横版闯关游戏里,甚至还有一些网站为了提高逼格,也用上了这 种视觉效果。

所以尽管当时各项硬性条件不足,但是开发者还是发挥了他们最大的能力,给我们做出了一代又一代经典的游戏。

虽说现在随着科技高速发展,开发者们做游戏很少有这样那样的条件限制。

但是通过这样一个 13kb 的比赛,我们发现如今依然有人可以在这种严苛的限制下,做出优质的游戏。

可以看到只要尽力了,困难永远都不能限制到他们,办法也总比困难多嘛。

当然在某种层面上,这个道理也适用于所有人。

参考文献

[1]https : //github.com/PaulBGD/PixelFont
[2]How to Minify Your HTML5 Game for the Js13kGames Competition
[3]js13kGames Resources
[4]Top 10 games from the JS13K 2020 competition
[5]Create a 13 kB JavaScript game in 30 days with js13kGames
vernissage js13k game post-mortem
[6]Mona Lisa approximated with 150 circles through hill climbing genetic algorithm
[7]Arcade Game : Jump Bug ( 1981 Rock-ola )
[8]Parallax scrolling- wikipediea

撰文:刺猬

编辑:面线

美编:焕妍

本文经授权转载自差评(ID:chaping321),如需二次转载请联系原作者。欢迎转发到朋友圈。


特别声明:以上内容(如有图片或视频亦包括在内)为自媒体平台“网易号”用户上传并发布,本平台仅提供信息存储服务。

Notice: The content above (including the pictures and videos if any) is uploaded and posted by a user of NetEase Hao, which is a social media platform and only provides information storage services.

相关推荐
热点推荐
奥运会没有国家敢举办,奥委会要求中国再举办一次,中国的回应内容亮了

奥运会没有国家敢举办,奥委会要求中国再举办一次,中国的回应内容亮了

要闻每日关注
2021-11-28 11:22:09
网友:哀牢山事件更多细节披露,却让事情显得愈发离奇!

网友:哀牢山事件更多细节披露,却让事情显得愈发离奇!

你是谁
2021-11-27 13:14:46
都怪威少!詹姆斯:威斯布鲁克第4节比赛的失误导致我们输掉了比赛,下场比赛我还会继续出手三分

都怪威少!詹姆斯:威斯布鲁克第4节比赛的失误导致我们输掉了比赛,下场比赛我还会继续出手三分

热血篮球资讯
2021-11-28 09:56:15
老公菜场买回来的,看着有点奇怪,有人认识吗?怎么烧好吃?

老公菜场买回来的,看着有点奇怪,有人认识吗?怎么烧好吃?

你倒是笑啊
2021-11-27 11:10:44
“谭校长”事件第三波证据,疑似女主露脸?

“谭校长”事件第三波证据,疑似女主露脸?

南柯影视剪辑
2021-11-26 20:42:10
总统候选人惊人言论:取消给外国人的各种补助可节省200亿欧元!

总统候选人惊人言论:取消给外国人的各种补助可节省200亿欧元!

新欧洲
2021-11-27 23:06:47
德罗赞:这种风格和强度是季后赛水准 洛瑞就像我的亲兄弟

德罗赞:这种风格和强度是季后赛水准 洛瑞就像我的亲兄弟

直播吧
2021-11-28 13:11:08
警报响起!又一国首都发生暴乱,华人商铺被抢烧,民众围攻警察局

警报响起!又一国首都发生暴乱,华人商铺被抢烧,民众围攻警察局

前沿时刻
2021-11-28 10:19:32
世乒赛4强对阵出炉!国乒选手仅仅占据1个席位,2大世界冠军被淘汰

世乒赛4强对阵出炉!国乒选手仅仅占据1个席位,2大世界冠军被淘汰

国球热讯
2021-11-28 13:07:56
56岁大妈放言:我配得上任何男人,只和退休金1万以上的男人再婚

56岁大妈放言:我配得上任何男人,只和退休金1万以上的男人再婚

情绪树洞
2021-11-27 12:45:56
4-2!世乒赛最大黑马出炉!世界第77登上领奖台:跪地抱头+掩面

4-2!世乒赛最大黑马出炉!世界第77登上领奖台:跪地抱头+掩面

黑色柳丁
2021-11-28 08:55:28
我国高速为什么最高限速120km/h?多年的疑问终于清楚了

我国高速为什么最高限速120km/h?多年的疑问终于清楚了

滨州网
2021-11-23 17:11:07
女子出门忘关煤气,下班急忙赶回家,一推门才知救了自己一命

女子出门忘关煤气,下班急忙赶回家,一推门才知救了自己一命

小月生活
2021-11-27 11:56:52
张乃丹告了4年,把家搞得一贫如洗,直到现在有什么进展呢?

张乃丹告了4年,把家搞得一贫如洗,直到现在有什么进展呢?

迷糊蛇
2021-11-27 07:56:03
开心一刻:女老板深夜被劫色,清晨一脸兴奋的跟我说10多年了…

开心一刻:女老板深夜被劫色,清晨一脸兴奋的跟我说10多年了…

阿拉故事会社
2021-11-28 11:03:35
反驳司马南的,至今没有一个就司马南列举数据,拿出更权威的证据

反驳司马南的,至今没有一个就司马南列举数据,拿出更权威的证据

迷糊蛇
2021-11-28 11:27:17
“棚改”全取消?人民日报发声透露,“老房子拆迁”有了新动向

“棚改”全取消?人民日报发声透露,“老房子拆迁”有了新动向

日记不夜火
2021-11-27 16:15:23
3个月猎杀8头野猪被判刑,夫妻称“实在没办法,野猪把100多亩地吃得70亩都要绝收了”

3个月猎杀8头野猪被判刑,夫妻称“实在没办法,野猪把100多亩地吃得70亩都要绝收了”

每日经济新闻
2021-11-27 22:12:19
宇航员意外拍到一张照片,触目惊心似来自火星,人类真的该反思了

宇航员意外拍到一张照片,触目惊心似来自火星,人类真的该反思了

妈是个技术活
2021-11-27 11:12:19
越南“废除汉字”75年,就连写春联都改用字母,唯独一个字改不掉

越南“废除汉字”75年,就连写春联都改用字母,唯独一个字改不掉

一度历史观
2021-11-22 16:42:25
2021-11-28 18:06:44
果壳
果壳
科技有意思
19558文章数 4028704关注度
往期回顾 全部

游戏要闻

控制怪兽的幕后黑手!新作《怪兽指挥官》上架Steam

头条要闻

男子拒付车费称认识交警支队长wangwei 警方:他不认识

头条要闻

男子拒付车费称认识交警支队长wangwei 警方:他不认识

体育要闻

杰拉德英超2连胜 只落后曼联1分了

娱乐要闻

她的评论区全面翻车了

财经要闻

科技要闻

钟南山张文宏吴尊友对"奥密克戎"最新发声

汽车要闻

真香预警?日系豪车开启插电混动的大门

态度原创

健康
教育
房产
亲子
军事航空

上海新增3例本土确诊,3小区列为中风险

教育要闻

2022国考今开考:报考首破200万人 平均68人竞争1岗

房产要闻

华东第三次集中供地:门槛一再调低,市场持续降温

亲子要闻

“妈妈,为什么别人都开车你骑电动?”孩子的敏感问题怎么回答

军事要闻

张思南:澳防长言论是对中国人民的侮辱