js13kGames 2020:一个利用 WebXR 和 Web Monetization 的精简编码挑战

您听说过 js13kGames 比赛吗?这是一个针对 HTML5 游戏开发者的在线 代码高尔夫挑战。这场为期一个月的比赛自 2012 年以来每年都会举行;它从 8 月 13 日开始,一直持续到 9 月 13 日。有趣的部分是什么?我们将压缩包的大小限制在 13 千字节,其中包括所有源代码——从图形资产到 JavaScript 代码行。连续第二年,您将能够参加两个特殊类别:WebXRWeb Monetization

js13kGames 2020

WebXR 作品

WebXR 类别始于 2017 年,作为 A-Frame 引入。我们允许在 13k 大小限制之外使用 A-Frame 框架。您只需在 index.html 文件的 head 中链接到提供的 JavaScript 库即可使用它。

<!DOCTYPE HTML>
<html>
<head>
  <script src="https://js13kgames.com/webxr-src/aframe.js"></script>
  // ...
</head>
// ...

然后,在接下来的 2018 年,我们将 Babylon.js 添加到允许的库列表中。去年,我们将 Three.js 作为另一个库选项添加。

js13kGames 2020 WebXR

这让我们来到了 2020 年。令人惊讶的是,今年 WebXR 类别的最高奖项是一台 Magic Leap 设备,这要感谢 Mozilla 混合现实 团队。

添加 Web Monetization

Web Monetization 是最新的类别。去年,它是在 W3C 关于 Web 游戏的研讨会 后被 引入 的。讨论中确定了独立开发者面临的关键挑战,包括可发现性和货币化。然后,在 2019 年比赛结束后,一些使用 Web Monetization 的作品在伦敦的 MozFest 上展出。您可以玩这些游戏,并看到作者是如何实时获得报酬的。

几个月后,Enclave Games 获得了 网络资助,这意味着 js13kGames 2020 中的 Web Monetization 类别将再次出现。连续第二年,Coil 为所有参赛者提供免费的会员优惠券代码,因此任何提交作品或只是想玩的人都可以成为付费的 Web Monetization 用户。

js13kGames 2020 Web Monetization

实施细节

在您的作品中启用 Web Monetization API 就像 WebXR 实现一样简单。再次,您只需在 indexhead 中添加一个标签

<!DOCTYPE HTML>
<html>
<head>
  <meta name="monetization" content="your_payment_pointer">
  // ...
</head>
// ...

瞧,您的游戏已经可以使用 Web Monetization 了!现在您可以根据玩游戏的访客是否已货币化来为自己的作品添加额外的功能。

function startEventHandler(event){
  // user monetized, offer extra content
}
document.monetization.addEventListener('monetizationstart', startEventHandler);

该 API 允许您检测到这一点,并提供额外的功能,例如奖励积分、物品、秘密关卡等等。您可以发挥创意,添加可货币化的额外奖励。

向他人学习

去年,我们在 WebXR 类别中获得了 28 个作品,在 Web Monetization 中获得了 48 个作品,总共 245 个作品。一些作品被提交到两个类别。最好的部分?所有作品的源代码——所有年份,所有作品——都以可读格式存储在 GitHub 上的 js13kGames 仓库 中,因此您可以查看任何作品是如何构建的。

js13kGames 2019 posts

此外,请务必阅读 往年总结博文。参赛者分享了哪些地方做得很好,哪些地方可以改进。这是一个从他们的经验中学习的绝佳机会。

接受挑战

请记住:13 千字节的压缩包大小限制可能看起来很吓人,但只要采用正确的方法,就完全可以做到。如果您避免使用大型图像并尽可能 使用过程生成,应该没问题。此外,WebXR 库允许您比从头开始更快地使用组件构建场景。而且大多数这些作品甚至没有使用完分配的压缩文件空间!

就我个人而言,我希望今年看到更多 WebXR 和 Web Monetization 类别的作品。祝大家好运,别忘了享受乐趣!

关于 Andrzej Mazur

HTML5 游戏开发者,Enclave Games 独立工作室创始人,js13kGames 比赛创建者,以及 Gamedev.js Weekly 新闻稿发布者。热衷于新兴的开放式 Web 技术的技术演讲者,对 WebXR 和 Web Monetization 感到兴奋。

Andrzej Mazur 的更多文章…