基于Unity3D的三維頁游的設計與實現*

張海程，李效偉，郭瑋瑋，張 萌，莊緒姣,車統統

(山東女子學院 信息技術學院，山東 濟南 250300)

基于Unity3D的三維頁游的設計與實現*

張海程，李效偉，郭瑋瑋，張 萌，莊緒姣,車統統

(山東女子學院 信息技術學院，山東 濟南 250300)

Unity3D引擎能夠加速網頁三維游戲的開發。基于Unity 3D引擎，使用3Ds Max對三維迷宮、賽車、輪胎等模型建模，利用JavaScript進行腳本編程，通過添加碰撞體實現碰撞檢測，添加剛體實現重力等物理屬性。最后設計并實現了一個能夠滿足基本交互的網頁三維迷宮游戲，為系統專門設計計分、計時系統，記錄玩家的得分情況，增強尋寶樂趣。

Unity3D引擎；三維模型；網頁游戲

0 引言

隨著互聯網的發展，網頁游戲越來越受到人們的青睞。與其他游戲相比，網頁游戲具有跨平臺、免安裝等優勢，但是一般的網頁游戲具有游戲畫面質量低、用戶體驗差等缺點，像三維游戲[1]那樣達到立體與真實的畫面效果是網頁游戲設計師一直以來的追求。王峰[2]為了解決這一問題，與二維軟件Flash結合，制作出仿三維效果，雖然有很強的立體感，但是，制作精美游戲需要大量圖像文件，開發復雜。利用Unity3D引擎開發的網頁三維游戲能夠有效解決這些問題，并且其具有強大的3D渲染功能，能高度優化圖形渲染，大大提高游戲畫面效果，增強用戶體驗。

Unity3D是近年來興起的三維游戲開發引擎，具有優秀的可視化設計界面和易用的腳本編輯功能，能跨平臺發布，對移動設備支持良好，是十分優秀的專業游戲引擎[3]。陳小嵐等[4]針對打字游戲存在的競爭性不強、用戶體驗性差的缺點，基于Unity3D設計了一款多平臺網絡打字3D游戲，實現了3D效果和跨平臺競爭實戰。而文獻[5-7]有明顯的跨平臺困難、交互性差問題，這充分體現了Unity3D作為開發工具的優越性。伍傳敏[8]等基于Unity3D進行了FPS游戲的設計與開發，建立逼真的三維實體模型，增加了玩家瀏覽場景的真實感。鄭磊等[9]基于Unity3D進行了網頁三維游戲開發，對教育管理系統進行了實現，開發方便。由此可見，Unity3D引擎是一款極有發展前景的三維網頁游戲開發工具。

1 系統內容及架構

該系統實現對三維迷宮的漫游，并通過控制賽車的移動實現寶藏(輪胎)的收集。使用鍵盤中的W、S、A、D鍵控制賽車上、下、左、右移動；使用鼠標控制鏡頭視角的轉換；采用碰撞檢測技術，防止賽車穿墻而過，并且通過賽車和輪胎相撞實現收集寶藏的功能；對賽車添加剛體，實現重力等物理屬性；利用音頻組件，添加背景音樂和音樂特效，渲染游戲氣氛；利用粒子系統，設計寶藏收集瞬間的特效，增加玩家尋寶的沉浸感；利用計分、計時系統，記錄玩家的得分情況，增強尋寶樂趣。

系統通過游戲場景展示游戲功能，游戲場景中主要有賽車、地面、迷宮、輪胎等，系統架構如圖1所示。

圖1 系統架構圖

通過對系統架構的分析，可將系統分為控制、碰撞檢測、數據、特效、聲音等模塊。

(1)控制：對賽車的控制，使其在場景中漫游尋找寶藏；對相機角度的控制，使其以賽車為中心任意改變視角。

(2)碰撞檢測[10]：場景中各個物體之間都會有碰撞檢測，如賽車和迷宮之間、賽車和地面之間、賽車和輪胎之間等。

(3)數據：記錄收集寶藏的數量和闖關所用的時間，以及最后的總得分。

(4)特效：加入粒子特效，增強游戲的視覺效果。

(5)聲音：系統的背景音樂和收集寶藏時碰撞產生的音效。

2 游戲在引擎中的實現

2.1 場景的設計與實現

Unity3D主要支持fbx格式的三維模型，系統通過3DsMax三維建模軟件進行建模，用PhotoShop進行貼圖等平面設計。

2.1.1 模型建立與導入

本系統共設有2個關卡，場景中有三維迷宮、賽車、寶藏、紅旗等模型。用3DsMax對模型建模后，利用其導出fbx格式，注意將貼圖一同導出。將導出的fbx文件放入Unity3D中的Assets目錄下，找到資源文件后將其設置為Prefabs(預置體)，預置體是可以重復使用的游戲對象，所有的預置實例都指向原始預置，修改預置后改動的內容可應用到相關實例上。最后，在Unity3D中搭建迷宮，并將其他模型放到游戲場景中的合適位置。

2.1.2 場景的顯示

Unity3D內置渲染引擎，在場景中設置照相機和燈光(平行光、點光源等)，能將游戲中的場景顯示出來。場景設計圖如圖2所示。

圖2 系統場景設計圖

2.1.3 場景的漫游

Unity3D引擎內置MonoDevelop編輯器，本系統所用語言是JavaScript和C#。為了實現控制賽車在場景中漫游的功能，需為賽車添加控制移動的JS腳本，并讓照相機隨賽車一起移動。控制移動的關鍵代碼如下：

if(Input.GetKey(KeyCode.W))

{

this.transform.Translate(Vector3.forward*Time.

deltaTime*-MoveSpeed);

}

if(Input.GetKey(KeyCode.A))

{

this.transform.Translate(Vector3.left*Time.

deltaTime*-MoveSpeed);

}

2.1.4 場景視角的轉換

對視角移動起主要影響作用的是鼠標移動的快慢與相機上下左右旋轉的匹配程度、相機視角的角度控制以及相機的起始角度、方向靈敏度、上下最大視角與鼠標移動快慢(增量)。控制視角移動的關鍵代碼如下：

void Update ()

{

//根據鼠標移動的快慢(增量), 獲得相機左右上下旋轉的角度(處理X)

float rotationX = transform.localEulerAngles.y + Input.GetAxis("Mouse X") * sensitivityX;

rotationY += Input.GetAxis("Mouse Y") * sensitivityY;

rotationY = Mathf.Clamp (rotationY, minimumY, maximumY);

transform.localEulerAngles=new Vector3(-rotationY, rotationX, 0);

}

將代碼綁定到攝像機上，即可控制相機視角轉換，由于迷宮場景與相機一同移動，所以通過控制鼠標移動可以實現迷宮場景的視角轉換。

2.1.5 碰撞檢測

場景漫游過程中，為防止“穿墻而過”，需給每一個物體添加碰撞檢測組件。碰撞體分為不同類型，迷宮場景添加Mesh Collider，賽車、輪胎添加Box Collider。例如圖2(b)，為防止賽車從地板掉落，需給地面和賽車添加碰撞體。

圖3 用戶界面顯示圖

2.2 圖形界面的實現

圖形界面事關系統的友好度，在Unity3D中，用GUI類進行圖形界面的設計，其提供了許多界面的高級控件，如Label，Button等。界面所用的圖片由美工用PhotoShop制作完成。游戲界面如圖3所示。

圖3(a)是開始界面，設有開始和幫助按鈕，點擊開始按鈕進入游戲場景，點擊幫助按鈕會展示游戲規則和過關秘訣。圖3(b)是恭喜過關界面，會顯示獲得寶藏數、所用時間和獲得總分情況，并設有結束按鈕和下一關按鈕。系統還設有過關失敗界面，只包括結束按鈕，并顯示獲得寶藏數。界面的實現利用JS腳本進行編寫，變量放在Update中，開始界面關鍵代碼如下：

GUI.DrawTexture(Rect(0,0,Screen.width,Screen.height),startTexture);

GUI.skin.label.font = customFont;

if(GUI.Button(Rect(0.5*Screen.width-90,0.5*Screen.height+200,130,50),""))

{

Application.LoadLevel("scene");

//進入游戲場景

}

2.3 寶藏收集功能的實現

本模塊實現寶藏的收集功能，其功能都是通過賽車和輪胎的碰撞產生的，碰撞后會使輪胎消失、產生輪胎型號等信息，而且發出粒子特效和聲音特效。最后，添加計分和計時功能，碰撞一次分數加一，增強了玩家在游戲中的成就感和真實感。

粒子系統是由形狀簡單的眾多粒子形成的一個不規則的物體，這些粒子具有位置、大小、顏色、透明度、生命周期等屬性[11-13]。首先新建一個粒子發射器，設置好粒子的屬性，為了編程的方便，將其變為GameObject類型，即先將粒子發射器拖到Hierarchy面板，再拖放到Project面板中。用相同的思路，聲音特效的添加也是將音頻轉化成GameObject類型。關鍵代碼如下所示：

var explosionEnemy_bl:GameObject;

//定義音頻

var effect : GameObject;

//定義粒子特效

function OnCollisionStay(collisionInfo : Collision)

{

Destroy (gameObject);

//碰撞后輪胎消失

Instantiate(explosionEnemy_bl,transform.position,transform.rotation);

//生成聲音

Instantiate(effect,transform.position,transform.

rotation);

//生成粒子特效

}

將生成的GameObject類型的粒子發射器和音頻分別賦給對應變量，即完成特效的添加。

2.4 網頁版本的發布

Unity3D引擎支持多平臺發布，可發布為Windows單機版、WindowsWeb版、Android、IOS等多個版本。系統通過Unity3D發布為網頁版，打開File →Build Settings，添加游戲場景，選中發布的版本。最后，點擊Build會生成一個包含html和unity3d格式的可執行文件的文件夾。點擊html格式的可執行文件，游戲可以在聯網的條件下用Unity Web Player插件在各種瀏覽器中打開。

網頁版發布后，發現UI界面與美工制作的圖片相比顯示不清晰，解決方法是將圖片類型改成Advance，然后去掉generate mip maps，并將Filter Mode改為Point。

3 結束語

本系統實現了三維頁游的開發。對游戲關卡、粒子系統、聲音系統、碰撞檢測、計分計時等功能進行了實現，三維游戲場景真實立體，帶給玩家一種美好的視覺體驗，系統運行流暢，達到設計要求。游戲的交互性方面還比較簡單，還需要在交互上做深入的研究。

[1] 馮科融,王和興,連加美，等.基于HTML5的3D多人網頁游戲實現方案[J].微型機與應用,2013,32(1):4-6.

[2] 王峰.基于二維網頁游戲的仿三維畫面研究[J].藝術教育,2013(4):132-133.

[3] 吳少軍.網頁游戲開發新趨勢與新技術漫談[J].當代教具理論與實踐,2012,4(6):175-176.

[4] 陳小嵐,宋刊.基于Unity3D的多平臺網絡打字游戲的設計與實現[J].教育信息技術,2015(1):111-113.

[5] 溫建華,高海峰.一種基于P2P的大規模在線游戲結構[J].計算機應用與軟件,2008,25(4):118-119.

[6] 張賜,吳健平.基于AE的校園房產三維GIS系統開發與研究[J].計算機技術與發展,2011,21(2):215-218.

[7] 李建微,陳新,黃週祥.可擴展的MMORPC游戲框架的設計與實現[J].計算機技術與發展,2012,22(2):1-5.

[8] 伍傳敏,張帥,邱錦明.基于Unity3D的FPS游戲與開發[J].三明學院學報,2012,29(2):35-40.

[9] 鄭磊,楊旭波,包子建.基于三維網頁技術的Unity3D教學管理系統的設計與實現[D].上海:上海交通大學,2013.

[10] 范昭煒,萬華根,高曙明.基于流的實時碰撞檢測算法[J].軟件學報,2004,15(10):1505-1514.

[11] 陳顯軍,李心穎,湛永松.GPU支持下基于粒子系統編輯器的特效技術研究[J].工程圖學學報,2011(6):77-81.

[12] 汪繼文,胡文平,金余峰.基于粒子系統的8字動態煙花仿真[J].計算機仿真,2010,27(10):211-214.

[13] 李海,汪繼文.基于粒子系統的位置可控有聲煙花模擬[J].微型機與應用,2013,32(9):32-34.

The design and implementation of web 3D games based on Unity3D

Zhang Haicheng,Li Xiaowei,Guo Weiwei,Zhang Meng,Zhuang Xujiao,Che Tongtong

(School of Information Technology, Shandong Women’s University, Jinan 250300, China)

The Unity3D engine can accelerate the development of 3D game of web pages. In this paper, we show the development of a Web 3D game based on Unity3D engine, building the of models 3D maze cars and tyres. We use JavaScript to realize programming, realize collision detection by adding collisions,realize gravity and other physical attributes by adding a rigid body.Finally,we have designed and implemented a 3D maze game of Web pages which can meet basic interactives. For this system ,we specially designed scoring and timing system, which can record player’s scores and enhance the fun of hunting treasure.

Unity3D engine; 3D model; Web games

2015年地方高校國家級大學生創新創業訓練計劃項目(201512331024，201512331020)

TP391.9

A

1674-7720(2016)05-0049-03

張海程,李效偉,郭瑋瑋，等.基于Unity3D的三維頁游的設計與實現[J].微型機與應用，2016,35(5)：49-51.

2015-11-01)

張海程(1994-)，女，本科在讀，主要研究方向：虛擬現實。

李效偉(1989-)，通訊作者，男，研究生，助教，主要研究方向：人機交互與虛擬現實。E-mail：xiaowei_li@hotmail.com。

郭瑋瑋(1995-)，女，本科在讀，主要研究方向：虛擬現實。