使用Unity 5和JavaScript創(chuàng)建WebGL遊戲的簡易指南

核心要點:

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

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

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

在本教程中，我將向您展示如何開始使用Unity。我還將向您展示如何在Unity中使用JavaScript創(chuàng)建簡單的遊戲以及如何將您的遊戲?qū)С龅骄W(wǎng)絡。

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

讓我們開始吧……

關(guān)於Unity中JavaScript的說明

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

安裝Unity

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

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

項目設置

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

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

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

創(chuàng)建英雄

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

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

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

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

為了拯救英雄免於無休止的墜落，我們將創(chuàng)建一個用作平臺的扁平盒子。為此，我們必須添加一個立方體並設置Scale.Y值為0.1。重新播放場景確認英雄安全地降落在平臺上，儘管我必須承認它看起來並不自然。那麼我們?nèi)绾巫層⑿鄯磸椖?？通過添加一些物理材質(zhì)。

使英雄反彈

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

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

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

<code>動態(tài)摩擦：10
靜態(tài)摩擦：10
彈性：1
摩擦組合：最大
彈跳組合：最大</code>

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

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

添加第一人稱視角

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

<code>動態(tài)摩擦：0.9
靜態(tài)摩擦：0.9
彈性：1
摩擦組合：平均
彈跳組合：相乘</code>

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

<code>位置 { X: 0, Y: 1, Z: 0 }
旋轉(zhuǎn) { X: 90, Y: 0, Z: 0 }
縮放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除標志：純色
背景：#000
視野：80.3</code>

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

編程控制器、程序化創(chuàng)建平臺、添加遊戲菜單、添加開始遊戲按鈕、將項目發(fā)佈為WebGL瀏覽器遊戲等步驟，請參考原文檔。 由於篇幅限制，這裡不再贅述。 關(guān)鍵在於理解Unity的腳本系統(tǒng)、遊戲?qū)ο窆芾?、物理引擎和UI系統(tǒng)等核心概念，並結(jié)合教程中的代碼示例進行實踐。

常見問題解答 (FAQ)

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

如何優(yōu)化我的WebGL遊戲以獲得更好的性能？

減少繪製調(diào)用次數(shù)、使用更少的材質(zhì)和組合網(wǎng)格、使用細節(jié)級別 (LOD)、壓縮紋理和音頻文件、使用Unity的探查器來識別和修復性能瓶頸。

我可以將WebGL用於移動遊戲開發(fā)嗎？

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

如何調(diào)試我的WebGL遊戲？

可以使用瀏覽器工具（如Chrome的開發(fā)者工具或Firefox的Web控制臺）進行調(diào)試。

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

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

如何獲利我的WebGL遊戲？

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

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

可以使用高質(zhì)量紋理、高級照明技術(shù)和著色器。

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

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

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

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

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

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

如何發(fā)布後更新我的WebGL遊戲？

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

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

以上是使用Unity 5和JavaScript創(chuàng)建WebGL遊戲的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！