研發實踐：Mozilla分享如何開發一款WebVR小遊戲

文章相關引用及參考：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小遊戲》首發於映維網.

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！