基于Unity3D的三維頁游的設(shè)計與實現(xiàn)*

張海程，李效偉，郭瑋瑋，張 萌，莊緒姣,車統(tǒng)統(tǒng)

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

基于Unity3D的三維頁游的設(shè)計與實現(xiàn)*

張海程，李效偉，郭瑋瑋，張 萌，莊緒姣,車統(tǒng)統(tǒng)

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

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

Unity3D引擎；三維模型；網(wǎng)頁游戲

0 引言

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

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

1 系統(tǒng)內(nèi)容及架構(gòu)

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

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

圖1 系統(tǒng)架構(gòu)圖

通過對系統(tǒng)架構(gòu)的分析，可將系統(tǒng)分為控制、碰撞檢測、數(shù)據(jù)、特效、聲音等模塊。

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

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

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

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

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

2 游戲在引擎中的實現(xiàn)

2.1 場景的設(shè)計與實現(xiàn)

Unity3D主要支持fbx格式的三維模型，系統(tǒng)通過3DsMax三維建模軟件進(jìn)行建模，用PhotoShop進(jìn)行貼圖等平面設(shè)計。

2.1.1 模型建立與導(dǎo)入

本系統(tǒng)共設(shè)有2個關(guān)卡，場景中有三維迷宮、賽車、寶藏、紅旗等模型。用3DsMax對模型建模后，利用其導(dǎo)出fbx格式，注意將貼圖一同導(dǎo)出。將導(dǎo)出的fbx文件放入Unity3D中的Assets目錄下，找到資源文件后將其設(shè)置為Prefabs(預(yù)置體)，預(yù)置體是可以重復(fù)使用的游戲?qū)ο螅械念A(yù)置實例都指向原始預(yù)置，修改預(yù)置后改動的內(nèi)容可應(yīng)用到相關(guān)實例上。最后，在Unity3D中搭建迷宮，并將其他模型放到游戲場景中的合適位置。

2.1.2 場景的顯示

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

圖2 系統(tǒng)場景設(shè)計圖

2.1.3 場景的漫游

Unity3D引擎內(nèi)置MonoDevelop編輯器，本系統(tǒng)所用語言是JavaScript和C#。為了實現(xiàn)控制賽車在場景中漫游的功能，需為賽車添加控制移動的JS腳本，并讓照相機隨賽車一起移動?？刂埔苿拥年P(guān)鍵代碼如下：

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 場景視角的轉(zhuǎn)換

對視角移動起主要影響作用的是鼠標(biāo)移動的快慢與相機上下左右旋轉(zhuǎn)的匹配程度、相機視角的角度控制以及相機的起始角度、方向靈敏度、上下最大視角與鼠標(biāo)移動快慢(增量)?？刂埔暯且苿拥年P(guān)鍵代碼如下：

void Update ()

{

//根據(jù)鼠標(biāo)移動的快慢(增量), 獲得相機左右上下旋轉(zhuǎn)的角度(處理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);

}

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

2.1.5 碰撞檢測

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

圖3 用戶界面顯示圖

2.2 圖形界面的實現(xiàn)

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

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

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");

//進(jìn)入游戲場景

}

2.3 寶藏收集功能的實現(xiàn)

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

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

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類型的粒子發(fā)射器和音頻分別賦給對應(yīng)變量，即完成特效的添加。

2.4 網(wǎng)頁版本的發(fā)布

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

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

3 結(jié)束語

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

[1] 馮科融,王和興,連加美，等.基于HTML5的3D多人網(wǎng)頁游戲?qū)崿F(xiàn)方案[J].微型機與應(yīng)用,2013,32(1):4-6.

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

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

[4] 陳小嵐,宋刊.基于Unity3D的多平臺網(wǎng)絡(luò)打字游戲的設(shè)計與實現(xiàn)[J].教育信息技術(shù),2015(1):111-113.

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

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

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

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

[9] 鄭磊,楊旭波,包子建.基于三維網(wǎng)頁技術(shù)的Unity3D教學(xué)管理系統(tǒng)的設(shè)計與實現(xiàn)[D].上海:上海交通大學(xué),2013.

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

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

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

[13] 李海,汪繼文.基于粒子系統(tǒng)的位置可控有聲煙花模擬[J].微型機與應(yīng)用,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年地方高校國家級大學(xué)生創(chuàng)新創(chuàng)業(yè)訓(xùn)練計劃項目(201512331024，201512331020)

TP391.9

A

1674-7720(2016)05-0049-03

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

2015-11-01)

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

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

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