使用Unity 5和JavaScript創建WebGL遊戲

使用Unity 5和JavaScript創建WebGL遊戲的簡易指南

核心要點:

• Unity 5的WebGL導出器簡化了將游戲發佈到網絡的過程，利用WebGL和asm.js直接在瀏覽器中渲染交互式3D圖形。
• 本教程指導您如何在Unity中使用JavaScript（UnityScript）創建一個簡單的遊戲，包括設置項目、創建在平台上彈跳的英雄角色以及添加第一人稱視角以實現沉浸式遊戲體驗。
• Unity中的腳本編寫允許動態的遊戲行為，例如程序化平台生成和使用鼠標輸入的響應式控件來影響遊戲中的英雄角色。
• 完成遊戲的關鍵步驟包括在遊戲菜單中添加帶有開始按鈕的用戶界面，以及配置構建設置以將項目導出為WebGL應用程序，使其可在支持WebGL的瀏覽器中播放。
• 本教程以添加分數、更多平台類型和附加輸入方法等進一步改進建議作為結尾，展示了Unity作為跨平台遊戲開發工具的多功能性。

本文由Nilson Jacques Collins、Marc Towler和Matt Burnett同行評審。感謝所有SitePoint的同行評審員，使SitePoint的內容達到最佳狀態!

Unity是一個跨平台遊戲引擎，用於為PC、遊戲機、移動設備和網站開發視頻遊戲。最新版本（Unity 5）附帶了一個WebGL導出器，這意味著開發人員可以輕鬆地將他們的遊戲發佈到網絡上。顧名思義，WebGL導出器利用了WebGL（一種用於渲染交互式3D計算機圖形的JavaScript API）和asm.js（Mozilla開發的JavaScript子集，被吹捧為“網絡的彙編語言”）。您可以在此處閱讀有關Unity和虛幻引擎的Asm.js和WebGL的更多信息。

在本教程中，我將向您展示如何開始使用Unity。我還將向您展示如何在Unity中使用JavaScript創建簡單的遊戲以及如何將您的遊戲導出到網絡。

您可以在此處查看完成的遊戲（您需要一個支持WebGL的桌面瀏覽器），或者您可以從我們的GitHub存儲庫下載遊戲文件和項目文件。

讓我們開始吧……

關於Unity中JavaScript的說明

當我們在Unity中談論JavaScript時，我們實際上是在談論UnityScript，它是一種類型的JS方言。 Unity本身經常提到這個JavaScript，然而，更憤世嫉俗的觀察者認為，“Unity使用JavaScript”是一種營銷策略。無論如何，我們應該明確UnityScript不符合任何ECMAScript規範——它也沒有嘗試這樣做。您可以在此處找到關於差異的良好概述。

安裝Unity

要開始本教程，我們需要運行Unity版本，可以從此處下載。 Unity有適用於Windows和Mac OS X的安裝程序。 Linux用戶可以通過Wine運行Unity，但您的結果可能會有所不同。

安裝完成後，我們就可以開始了！讓我們打開Unity並創建一個新的3D項目。

項目設置

Unity第一次打開後，我們應該花一點時間來了解主窗口：

1. 最左側的面板是層次結構，它概述了當前場景中的所有元素。場景就像遊戲的視圖，例如關卡或菜單。目前應該有一個主攝像機元素和一個定向光元素。
2. 中間是場景視圖，以圖標的形式說明了3D空間中的攝像機和燈光。
3. 在場景選項卡旁邊有一個遊戲選項卡，顯示遊戲本身，就像玩家所看到的那樣。這是為了在編輯器中測試遊戲而設計的。
4. 右側是檢查器面板，可以在其中修改元素設置。讓我們嘗試一下，在層次結構中點擊定向光。現在我們應該看到關於此燈光的許多信息，並且能夠使用陰影類型：無陰影關閉其陰影。
5. 底部是項目窗口，它顯示了開發遊戲所需的文件視圖。

現在我們熟悉了Unity的界面，在開始開發之前還有一件事要做：保存當前場景。 文件>保存場景打開一個保存場景對話框，該對話框指向名為Assets的文件夾。在Unity中組織文件的一種常見方法是使用子文件夾。因此，向Assets文件夾添加一個名為Scenes的新文件夾，並將場景保存在此文件夾中，名稱為Level.unity。

創建英雄

我們的遊戲將由一個英雄組成，從一個平台跳到另一個平台，跳得越來越高。如果它錯過了一個並墜入虛無，遊戲就會失敗。因此，讓我們從創建英雄開始。因為玩家將從第一人稱視角觀看遊戲，所以英雄的外觀並不重要，我們可以使用標準球體幾何體。球體的優點是它可以在幾個步驟中創建，並且它適合我們跳躍所需的物理特性。通過點擊層次結構中的創建添加球體，並使用檢查器編輯以下屬性：

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

讓我們通過按下播放按鈕來測試我們所做的工作。我們應該在3D空間中看到一個球體，位於天際線前方。

為了使英雄墜落，它必須增加重量。因此，我們需要通過點擊檢查器中的相應按鈕並選擇剛體來向球體添加一個組件。並且由於我們不希望英雄旋轉，因此我們將通過打開約束並在旋轉行中選擇所有軸來凍結剛體組件中的英雄。再次播放場景時，我們應該能夠觀看英雄墜落。

為了拯救英雄免於無休止的墜落，我們將創建一個用作平台的扁平盒子。為此，我們必須添加一個立方體並設置Scale.Y值為0.1。重新播放場景確認英雄安全地降落在平台上，儘管我必須承認它看起來並不自然。那麼我們如何讓英雄反彈呢？通過添加一些物理材質。

使英雄反彈

首先，我們需要為球體創建一個新的物理材質以使其具有彈性。為此，在Assets文件夾中創建一個名為Materials的新文件夾，然後在此處創建一個新的物理材質。讓我們將其命名為Bouncy_Sphere。我們需要在檢查器中調整的值是：

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

如果我們將此材質添加到球體碰撞器，這將使球體上下彈跳，但始終達到相同的高度。為了使球體每次彈跳都跳得越來越高，我們還必須向平台添加一些物理材質。為此，我們創建另一個名為Bouncy_Platform的材質，並將它的值更改為：

<code>动态摩擦：10
静态摩擦：10
弹性：1
摩擦组合：最大
弹跳组合：最大</code>

為了在此處實現一致性，我們還應該通過在層次結構中雙擊它來將立方體元素重命名為Platform。當我們現在啟動遊戲時，我們可以注意到球體每次跳得越來越高。

我們還將創建一個名為Platform的新標準材質，以使平台具有某種顏色。創建此材質後，使用#C8FF00作為反照率顏色（反照率是Unity UI中的標籤），然後將此材質拖放到平台元素上。它現在應該是黃色的。

添加第一人稱視角

要添加第一人稱視角，我們將攝像機（在層次結構中）拖放到球體上。這將使攝像機成為英雄的子元素，並導致攝像機在移動時跟隨球體。攝像機的屬性也必須調整為：

<code>动态摩擦：0.9
静态摩擦：0.9
弹性：1
摩擦组合：平均
弹跳组合：相乘</code>

我們還將創建一個聚光燈作為球體的第二個子元素。這將使玩家了解英雄當前的跳躍高度。將聚光燈的值調整為：

<code>位置 { X: 0, Y: 1, Z: 0 }
旋转 { X: 90, Y: 0, Z: 0 }
缩放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除标志：纯色
背景：#000
视野：80.3</code>

(後續步驟由於篇幅限制，將簡略描述，保留核心邏輯和關鍵代碼片段)

編程控制器、程序化創建平台、添加遊戲菜單、添加開始遊戲按鈕、將項目發佈為WebGL瀏覽器遊戲等步驟，請參考原文檔。 由於篇幅限制，這裡不再贅述。 關鍵在於理解Unity的腳本系統、遊戲對像管理、物理引擎和UI系統等核心概念，並結合教程中的代碼示例進行實踐。

常見問題解答 (FAQ)

(常見問題解答部分也因篇幅限製而簡化，保留核心問題和簡要答案)

如何優化我的WebGL遊戲以獲得更好的性能？

減少繪製調用次數、使用更少的材質和組合網格、使用細節級別 (LOD)、壓縮紋理和音頻文件、使用Unity的探查器來識別和修復性能瓶頸。

我可以將WebGL用於移動遊戲開發嗎？

可以，但WebGL遊戲可能比原生應用程序更消耗資源，需要仔細優化。

如何調試我的WebGL遊戲？

可以使用瀏覽器工具（如Chrome的開發者工具或Firefox的Web控制台）進行調試。

如何向我的WebGL遊戲添加多人遊戲功能？

需要後端服務器來管理玩家之間的通信，可以使用Unity的內置網絡系統UNet或第三方解決方案（如Photon）。

如何獲利我的WebGL遊戲？

可以使用遊戲內廣告、應用內購買或免費增值模式。

如何改進我的WebGL遊戲的圖形？

可以使用高質量紋理、高級照明技術和著色器。

如何使我的WebGL遊戲響應不同的屏幕尺寸？

使用Unity的UI系統創建靈活且可縮放的用戶界面，並使用Screen類獲取玩家屏幕尺寸信息並相應地調整遊戲。

如何向我的WebGL遊戲添加音效和音樂？

使用Unity的音頻系統，導入音頻文件並使用AudioSource和AudioClip類控製播放，還可以使用Audio Mixer 創建複雜的音景。

如何保護我的WebGL遊戲免受作弊？

可以實施服務器端驗證遊戲數據、混淆JavaScript代碼和使用安全通信協議等措施。

如何發布後更新我的WebGL遊戲？

重新編譯遊戲並在Unity中進行更改，然後將新的構建上傳到服務器。

希望這個簡化的版本對您有所幫助！ 請記住，理解Unity引擎的核心概念和實踐經驗對於成功開發WebGL遊戲至關重要。

以上是使用Unity 5和JavaScript創建WebGL遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章！