
网管小贾 / sysadm.cc
已经进入元宇宙初年的人类,是否仍依然相信游戏依赖的是精美的制作和宏大的特效?
没错,既然提出了这个问题,正说明还是有不少人始终坚信,即使我们悄然进入了新的时代,但作为我们生活元素之一的游戏依托的并不是什么华丽的画面,而是人类的情感和思维的表达。
我们不得不承认,还是有不少人更相信真情实感才是游戏的内核,他们认为华丽的特效只是一时蒙蔽了众多游戏玩家的表象罢了。
而今说巧不巧的,游戏编程又流行上了所谓的“低代码”,也不知道是何种机缘与这样一个极简游戏引擎搭上了关系。
我所说的这个极简游戏引擎叫作 Bitsy 。
2016年在西雅图供职于微软的一名普通程序员 Adam Le Doux 平时在业余时间就喜欢制作一些创意小游戏。
当他在某些复杂系统上花费了大量时间却只收获了进展不大的结果后,深受打击的他可能一时想不开了,决定自己研制出一种小型极简的游戏制作引擎。
他也曾试图找过一些现成的游戏开发工具,发现它们并没有适合他理想中的样子。
因此,他利用业余时间,硬是用 JavaScript 自制了一款游戏编辑器:Bitsy 。
很显然,既然是跑 JS 代码的,那这款编辑器自然也可以工作在浏览器上。
作者 Adam 在介绍 Bitsy 时写道:它的目标是让你能够轻松制作游戏,无论你走到哪里,无论你与谁交谈,也无论你在何方。
为了让游戏制作变得简易,Adam 将编辑器设计成像素风格,完完全全80、90后小时候8位机的味道。
不过当你接触过后,甚至可能比你想像的还要简单,居然不用关注编程、屏幕分辨率、平台兼容以及后期处理等等。
是的,就是这么简单,就是这么方便!
还是前面的说过的那些话,Bitsy 制作游戏是情怀,是故事,重在内心情感的表达。
Bitsy,你好!
打开首页,我们看到了几张以卡片形式呈现在我们面前的导航和说明。
这种卡片形式被称为多米诺骨牌 domino ,是一种以空间卡片的排列组合方式来形成网站文章、思维导图或拼贴画等为最终表现形式的方法。

我想对于部分小伙伴来说,可能这种形式还是头一次见到,挺新颖的,在这里我们就做个简单的介绍。
导航卡片可以被拖动,并且我们可以通过点击卡片下方的表情图标来跳转到相应的链接内容。
比如,点击磁盘图标可跳转到 bitsy 的 github 开源项目主页。

又比如,点击游戏摇杆图标可以跳转到网站 itch.io ,那里有众多但不限于 bitsy 制作的小游戏。

还比如,点击小猫图标我们可以打开 bitsy 编辑器,随时随地就可以自己用 bitsy 来动手制作小游戏。

至于对话框、乌鸦等图标,则是关于 bitsy 作者的一些其他联系方式等信息。
在这个多米诺卡片站点中,我们完全可以使用快捷键来操作它。
- 方向键 – 在卡片之间移动
- QWEASD – 同方向键,在卡片之间移动
- Esc – 退出窗口
- Alt+s – 语音读取选定的卡片
- Alt+e – 编辑所选的卡片
- Ctrl+拖动 – 复制卡片
bitsy编辑器 v0经典版
点击心形图标,我们可以来到 bitsy 的经典编辑器。
我们先简单说说这个编辑器,后面还会有新版的介绍,之所以先说这个,是因为这个是最早期的版本,非常简单易懂。

在网页左侧我们可以看到关于编辑器的如下类似的简单说明。
嗨! bitsy 是一枚制作小游戏的小小编辑器。 它的目标是让你能够轻松制作游戏,无论你走到哪里,无论你与谁交谈,也无论你在何方。
你可以在画板 paint 面板中画上一些东西,然后将它们放到地图 map 面板你的世界之中。
你还可以为你的角色(又名精灵)编写对话框。
从 v0 这个版本号我们也可以看出,它目前是在 Chrome 浏览器中测试过,不保证其他浏览器能够工作正常。
了解一些关键词:
- map – 地图,即游戏世界
- avatar – 人物,玩家的角色
- tile – 砖块,背景单元
- sprite – 精灵,角色或物品等
这个 bitsy 编辑器大体分五个部分。
从左至右,从上到下,分别是 ~map~ 地图,~paint~ 画板,~colors~ 颜色,~title and share~ 命名并分享,~game data~ 游戏数据。

如果你想要尝试玩一玩你制作好的游戏,那么可以将地图从编辑模式 edit 切换为游戏模式 play 即可。
- 使用方向键随意移动
- 走到精灵面前与之交谈

画板中可以画三种东西,一是人物 avatar ,二是砖块 tile ,三是精灵 sprite 。
按钮 show/hide pixel grid 表示显示或是隐藏像素栅格。

颜色也分三种,背景 background 、砖块 tile 和精灵 sprite 。

给游戏起个漂亮的名字,然后点击 share game 按钮就可以将当前制作的游戏以 html 文件形式下载下来,之后可以通过邮件发送给你的伙伴们或放到网上。

至于最后的游戏数据 game data ,似乎就不是我们小白可以看懂的了,要知道这个是初版编辑器,我们暂且先用用前面几个吧。
bitsy v7.12最新编辑器
和前面介绍的 v0 编辑器基本上类似,众多功能都是大同小异,另外还有一些功能更新一些。

前面的地图 map 在这一版本中变成了房间 room ,似乎更贴近小游戏制作一些。
不过可不要认为只是换了个名字,相比 v0 版的地图,在这里房间可以有多个。
我们可以增加、复制或删除房间来制作多个游戏房间,这样游戏就会变得更加有趣和多样化。

画板 paint 也有些变化,除人物 avatar 、砖块 tile 和精灵 sprite 之外,还增加了物品 item 一项。
同样,它们的数量不再是单一的,而都可以存在多个。

颜色自然也如前面的画板一样,也可以设定多个不同的颜色或调色板。

最后,我们可以下载自己制作好的游戏,而且还可以上传之前制作好的游戏继续编辑或运行。

我们用 bitsy 来试着做一个属于自己的小游戏吧!
首先,将标题写上(由于中文会乱码,所以还是写英文吧)。
然后,再给房间起个名字。
最后,在画板中点击精灵,在小猫的对话框中写上自己的内容。

好了,就这么简单,我们来运行一下看看。

当我们调试OK后就可以将游戏以 html 文件格式下载下来,方便以后重新加载试玩。

bitsy 下载下来的是单个的 html 文件,将其用文本编辑器打开,我们会看到里面写有大量的 JS 代码。
有兴趣的小伙伴们倒可以研究一下它是怎么编写的。

Bitsy制作游戏深受好评
前面我们简简单单就做出了一个小游戏,还是挺方便的。
不过可能有的小伙伴会对此嗤之以鼻,这也叫游戏?
当然,我只是演示给大家看,我这可算不上什么游戏啊!
但是大家伙别忘了,游戏再小,只要它有内核、有东西,就一定会有大批粉丝拥护。
在 Bitsy 出现后的数年内,众多网友得知 Bitsy 后都被其深深吸引,在他们看来,能够有一款这样免费易上手的游戏制作工具帮助他们实现了童年时期就想实现的游戏制作梦。
这样的结果我们可以在独立游戏社区 itch.io 上看到,自2017年始至今,由 Bitsy 制作的独立游戏已上千名开发爱好者,同时这些开发爱好者们又贡献了超过4000多款游戏。

现在在 itch.io 上随便找就能找到用 bitsy 制作编写的小游戏,而且这些小游戏一点也不“小”,还是有不少佳作的。
比如一款名叫 Mistakes 的小游戏,网友评论很棒,情节充满诗意。

还有解谜类型的游戏。

还有冒险类型的游戏。

甚至也能搞3D画面,惊为天人啊!

还有更多游戏,海了去了,小伙伴们有兴趣的话可以到 itch.io 上体验一下,顺便也看看网友们的评论,说不定会让你对游戏制作有新的看法。
写在最后
时至今日 Bitsy 已经走了5个年头,在这5年中,如此简易、低门槛的游戏制作工具居然受到了受众们的喜爱甚至是热捧着实是作者 Adam 本人始料未及的。
鉴于开发者和玩家的众多期盼,Web 端开发工具似乎已无法满足人们的需求,Adam 接下来会在原有的基础上再开发出一套基于桌面系统的 Bitsy 模拟器。
有了这个 Bitsy 模拟器,开发者和玩家们就不用再依赖浏览器,并且还可以自由存取游戏数据文件。
我相信,广大80、90后的小伙伴们曾经拥有着一个童年梦想,就是在人生中能够制作一款真正属于自己的游戏。
现在好了,有了 Bitsy ,游戏制作的门槛降低了很多,至少我们可以将更多的思绪和情感投注到游戏内核制作上。
好了,在最后请各位小伙伴准备好你喜欢的浏览器,先跑一跑 Bitsy 制作的小游戏,来个崭新而有趣的体验吧!
网管小贾 / sysadm.cc
如若转载,请注明出处:https://www.daxuejiayuan.com/5313.html