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

核心要點(diǎn):

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

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

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

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

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

讓我們開始吧……

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

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

安裝Unity

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

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

項(xiàng)目設(shè)置

Unity第一次打開后，我們應(yīng)該花一點(diǎn)時(shí)間來了解主窗口：

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

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

創(chuàng)建英雄

我們的游戲?qū)⒂梢粋€(gè)英雄組成，從一個(gè)平臺(tái)跳到另一個(gè)平臺(tái)，跳得越來越高。如果它錯(cuò)過了一個(gè)并墜入虛無，游戲就會(huì)失敗。因此，讓我們從創(chuàng)建英雄開始。因?yàn)橥婕覍牡谝蝗朔Q視角觀看游戲，所以英雄的外觀并不重要，我們可以使用標(biāo)準(zhǔn)球體幾何體。球體的優(yōu)點(diǎn)是它可以在幾個(gè)步驟中創(chuàng)建，并且它適合我們跳躍所需的物理特性。通過點(diǎn)擊層次結(jié)構(gòu)中的創(chuàng)建添加球體，并使用檢查器編輯以下屬性：

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

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

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

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

使英雄反彈

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

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

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

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

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

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

添加第一人稱視角

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

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

我們還將創(chuàng)建一個(gè)聚光燈作為球體的第二個(gè)子元素。這將使玩家了解英雄當(dā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 }
清除標(biāo)志：純色
背景：#000
視野：80.3</code>

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

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

常見問題解答 (FAQ)

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

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

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

我可以將WebGL用于移動(dòng)游戲開發(fā)嗎？

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

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

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

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

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

如何獲利我的WebGL游戲？

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

如何改進(jìn)我的WebGL游戲的圖形？

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

如何使我的WebGL游戲響應(yīng)不同的屏幕尺寸？

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

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

使用Unity的音頻系統(tǒng)，導(dǎo)入音頻文件并使用AudioSource和AudioClip類控制播放，還可以使用Audio Mixer 創(chuàng)建復(fù)雜的音景。

如何保護(hù)我的WebGL游戲免受作弊？

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

如何發(fā)布后更新我的WebGL游戲？

重新編譯游戲并在Unity中進(jìn)行更改，然后將新的構(gòu)建上傳到服務(wù)器。

希望這個(gè)簡(jiǎn)化的版本對(duì)您有所幫助！ 請(qǐng)記住，理解Unity引擎的核心概念和實(shí)踐經(jīng)驗(yàn)對(duì)于成功開發(fā)WebGL游戲至關(guān)重要。

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