文章相关引用及参考：mozvr
本文来自Mozilla的Josh Marinacci
（映维网 2019年02月06日）在倡导新技术时，我总是尝试采用现实世界开发者的方式，而对于WebVR，开发一款游戏则是目前最好的方法之一。所以在假日季期间我制作了一款游戏《Jingle Smash》。下面我将概述我是如何将其开发出来。
1. ThreeJS
我是用ThreeJS编写了《Jingle Smas》，而我在所有demo中都有采用一些常见的模板。我选择直接使用ThreeJS而不是A-Frame的原因是，因为我知道我会添加自定义纹理，自定义几何和自定义控件方案。尽管你可以用A-Frame做到这一点，但我需要在ThreeJS level编写非常多的代码，这样我可以更轻松地处理middle man。
2. 物理
《Jingle Smash》是风格类似于“愤怒的小鸟”，你可以把一个物品扔向方块，击倒它们以摧毁目标。一旦摧毁了目标，你就可以进入下一个关卡。我从学校里掌握了足够的例子物理，足以帮助我编写一个简单的2D物理模拟器，但3D碰撞远远超出了我的水平。我需要一个物理引擎。
在进行了一番评估之后，我选择了Cannon.js，因为它是100％的Javascript，并且对UI没有要求。它只是计算空间中物体的位置，并允许你的代码负责单步调试。这使得它很容易与ThreeJS集成。它甚至提供了一个示例。
3. 图形
在之前的游戏中，我都是使用了一位美工创建的3D模型。对于《Jingle Smash》，我用代码开发了所有一切。背景，方块和装饰都采用了标准的或生成的几何。除了天空背景之外，所有纹理也都是用2D HTML Canvas生成，然后再转换为纹理。
我选择了纯粹生成的方法，因为这允许我轻松调整UV值以创建不同的效果和使用我想要的颜色。在以后的博文中，我将深入探讨它们的工作原理。以下是生成装饰纹理的快速示例：
4. 关卡编辑器
大多数方块游戏都是2D。玩家可以看到整个游戏板。但一旦你进入3D，方块就会遮盖背后的方块。这意味着关卡设计将完全不同。查看观看的唯一方法是实际跳转到VR。这意味着我真的需要一种提供玩家视觉的方法来编辑VR中的关卡。
为了完成这项工作，我在VR中构建了一个简单（丑陋）的关卡编辑器。这需要为编辑器控件构建一个小型2D UI工具包。得益于HTML画布，这个过程并不太难。
5. 下一步
我对《Jingle Smash》的效果非常满意。很多人都在Mozilla All-hands进行了体验，并表示自己玩得很开心。我进行了一定的性能优化，能够将游戏提升到大约50fps。但显然，我仍有更多的工作要做。
《Jingle Smash》证明我们可以开发出能在WebVR中运行的有趣游戏，并且加载速度非常快（网络良好的情况下，整款游戏的加载时间不到2秒）。你可以通过GitHub查看《Jingle Smash》的完整（但很混乱）代码。
文章《研发实践：Mozilla分享如何开发一款WebVR小游戏》首发于映维网.
