使用Kontra创建一个小型Zen游戏
#javascript #gamedev #js13k #gamejam

注意:我忘了发布本文,此后将近两年过去了。该游戏是参加了2021年比赛的。

又一年过去了,随之而来的另一个JS13K game jam已经结束。如果您不熟悉此游戏果酱,那么挑战是创建一个适合13kb(zpipter)的网络游戏,包括代码和资产。今年的主题是“空间”,所以它使我想到了“维度”之类的东西。我对这个主题的解释是创建一个空的空间,其中一些代理会漫游和互动。

游戏概念

alt text

我对这个游戏有很多想法,但没有太多时间来实施它们。即使比赛持续了1个月,但工作也妨碍了,然后我也和家人一起离开了一段时间。我想一个基于代理的游戏,每个代理都是蚂蚁探索蚂蚁巢周围的区域。我设想了一个带有掠食者,食物和障碍的游戏地图。

我想关注的主要游戏机制是蚂蚁使用化学信号互相关注的能力 - 如果您想了解更多有关蚂蚁的信息,请观看these videos

基本上,每次蚂蚁移动时,她都会留下一条化学小径。其他蚂蚁也能够在这条小径上捡起。蚂蚁沿着一条小径越多,它们越强化它,并且蚂蚁往往越多。

在实施这些类似蚂蚁的行为时,我非常着迷地看着自己的作品四处走动并跟随我最终将整个游戏集中在观看蚂蚁的概念上,并创造了轻松的艺术体验。

算法

我来回思考如何更好地代表蚂蚁空间。我最初尝试使用正方形或六角形网格,蚂蚁会在谨慎的步骤中移动。化学径也只有在太空中的谨慎位置存在。使用网格的问题是否会使步道过于限制和丑陋,并且对蚂蚁进行动画会更加烦人。此外,保持三维阵列,以表示十六进制网格及其所有数据都非常丑陋,非常快。

我提出的解决方案是将实际的画布用作小径的数据存储。蚂蚁的位置由kontra(游戏引擎)和蚂蚁在每个更新上的画布上“绘制”蓝色小径。

alt text

每个蚂蚁都遵循一个非常基本的算法:

  • 如果前方的“蓝色”很高,请前进
  • 如果右侧的“蓝色”(如果高),请稍微转到右侧
  • 如果左侧的“蓝色”如果高,请稍微转到左侧
  • 其他,继续前进,有机会随机转向侧面。

顾名思义,像素的“蓝度”是像素的蓝色。蚂蚁在某个地方留下的小径越多,蓝色的蓝色和蓝色越高。在该实验的未来迭代中,蚂蚁会留下不同颜色的步道,意思是不同的东西。在天然中,蚂蚁留下不同的化学径,意思是“探索”或“我找到食物”。通过使用画布上每个像素的3个RGB通道作为单独的数据,理论上可以具有不同类型的重叠跟踪。

但是,就目前而言,我所有的蚂蚁都在探索,所以所有的步道都是蓝色的。

尽管如此,即使有了这种非常基本的算法,数十个蚂蚁的紧急行为已经很有趣。我玩了很多价值观,试图微调“蚂蚁艺术”的外观。最终版本使用以下值:

  • “轨道半径”设置为2像素
  • 在向前看或向前看时,蚂蚁在该方向上看起来大约4像素(“ look距”,两倍的“步道半径”)
  • 检查侧面时,蚂蚁在左右(“ lookout角”)
  • 看上去60度
  • 转向侧面时,蚂蚁只转30度(“监视角度”的一半)。

动画片

我想要的蚂蚁不仅仅是屏幕上的黑点,所以我试图学习how ants walk。本质上,他们一次走3条腿。

Alt Text

我使用Inkscape创建了蚂蚁的基本模型,然后将他们的腿移动一点。考虑到精灵的尺寸很小,我认为整个运动的8帧就足够了。使用kontra,实现精灵动画是微不足道的。您只需提供与每个动画相对应的弹簧尺寸,帧速率和帧,其余的发动机。

反对

Kontra是一个用于创建JavaScript游戏的轻量级库。这是我第一次在这场比赛中使用任何类型的游戏引擎,但我发现它对允许我快速原型游戏而不必担心基本知识非常有帮助。

kontra提供游戏循环,基于精灵的角色系统,事件,输入控件以及有用的公用事业,以检查精灵是否在碰撞并轻松移动它们。

有时文档有点缺乏,但是对于这样一个很小的库,实际上并不是什么问题。

下一步

也许是因为这是一个非常轻松的游戏,这是我第一次真正想继续进行该项目的开发。这是我有一些额外的想法。

方向感

我想改善蚂蚁的方向感。在现实世界中,蚂蚁似乎知道在哪个方向上的房屋在路上。我的蚂蚁只是无意识地沿着道路走。一种做到这一点的方法是使步道向前移动时的力量变得较弱,从而使蚂蚁返回家园与更远的倾向。

喂养蚂蚁

我希望蚂蚁有目的地探索空间。我想添加他们想带回家的食物。为此,我需要创建一条不同的步道,以供他们遵循,以表明食物的存在。

更聪明的探险家

自然界中的一些蚂蚁遵循一种有趣的探索算法:如果它们撞到许多蚂蚁,请更频繁地转动;如果他们不这样做,请遵循更直线。这种简单的策略使蚂蚁在没有地图的情况下可以更有效地覆盖更大的区域。他们自然会向外冒险。