《電子技術(shù)應(yīng)用》
您所在的位置:首頁 > 嵌入式技術(shù) > 設(shè)計(jì)應(yīng)用 > 基于Unity3D的三維頁游的設(shè)計(jì)與實(shí)現(xiàn)
基于Unity3D的三維頁游的設(shè)計(jì)與實(shí)現(xiàn)
2016年微型機(jī)與應(yīng)用第05期
張海程,李效偉,郭瑋瑋,張萌,莊緒姣,車統(tǒng)統(tǒng)
(山東女子學(xué)院 信息技術(shù)學(xué)院,山東 濟(jì)南 250300)
摘要: Unity3D引擎能夠加速網(wǎng)頁三維游戲的開發(fā)。基于Unity 3D引擎,使用3Ds Max對三維迷宮、賽車、輪胎等模型建模,利用JavaScript進(jìn)行腳本編程,通過添加碰撞體實(shí)現(xiàn)碰撞檢測,添加剛體實(shí)現(xiàn)重力等物理屬性。最后設(shè)計(jì)并實(shí)現(xiàn)了一個(gè)能夠滿足基本交互的網(wǎng)頁三維迷宮游戲,為系統(tǒng)專門設(shè)計(jì)計(jì)分、計(jì)時(shí)系統(tǒng),記錄玩家的得分情況,增強(qiáng)尋寶樂趣。
Abstract:
Key words :

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

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

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

  關(guān)鍵詞:Unity3D引擎;三維模型;網(wǎng)頁游戲

0引言

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

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

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

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

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

  

001.jpg

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

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

 ?。?)碰撞檢測[10]:場景中各個(gè)物體之間都會(huì)有碰撞檢測,如賽車和迷宮之間、賽車和地面之間、賽車和輪胎之間等。

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

 ?。?)特效:加入粒子特效,增強(qiáng)游戲的視覺效果。

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

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

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

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

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

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

  2.1.2場景的顯示

  Unity3D內(nèi)置渲染引擎,在場景中設(shè)置照相機(jī)和燈光(平行光、點(diǎn)光源等),能將游戲中的場景顯示出來。場景設(shè)計(jì)圖如圖2所示?!?/p>

003.jpg

  2.1.3場景的漫游

  Unity3D引擎內(nèi)置MonoDevelop編輯器,本系統(tǒng)所用語言是JavaScript和C#。為了實(shí)現(xiàn)控制賽車在場景中漫游的功能,需為賽車添加控制移動(dòng)的JS腳本,并讓照相機(jī)隨賽車一起移動(dòng)??刂埔苿?dòng)的關(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)換

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

  void Update ()

  {

  //根據(jù)鼠標(biāo)移動(dòng)的快慢(增量), 獲得相機(jī)左右上下旋轉(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);

  }

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

  2.1.5碰撞檢測

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

003.jpg

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

  圖3(a)是開始界面,設(shè)有開始和幫助按鈕,點(diǎn)擊開始按鈕進(jìn)入游戲場景,點(diǎn)擊幫助按鈕會(huì)展示游戲規(guī)則和過關(guān)秘訣。圖3(b)是恭喜過關(guān)界面,會(huì)顯示獲得寶藏?cái)?shù)、所用時(shí)間和獲得總分情況,并設(shè)有結(jié)束按鈕和下一關(guān)按鈕。系統(tǒng)還設(shè)有過關(guān)失敗界面,只包括結(jié)束按鈕,并顯示獲得寶藏?cái)?shù)。界面的實(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寶藏收集功能的實(shí)現(xiàn)

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

  粒子系統(tǒng)是由形狀簡單的眾多粒子形成的一個(gè)不規(guī)則的物體,這些粒子具有位置、大小、顏色、透明度、生命周期等屬性[11-13]。首先新建一個(gè)粒子發(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引擎支持多平臺(tái)發(fā)布,可發(fā)布為Windows單機(jī)版、WindowsWeb版、Android、IOS等多個(gè)版本。系統(tǒng)通過Unity3D發(fā)布為網(wǎng)頁版,打開File →Build Settings,添加游戲場景,選中發(fā)布的版本。最后,點(diǎn)擊Build會(huì)生成一個(gè)包含html和unity3d格式的可執(zhí)行文件的文件夾。點(diǎn)擊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)實(shí)現(xiàn)了三維頁游的開發(fā)。對游戲關(guān)卡、粒子系統(tǒng)、聲音系統(tǒng)、碰撞檢測、計(jì)分計(jì)時(shí)等功能進(jìn)行了實(shí)現(xiàn),三維游戲場景真實(shí)立體,帶給玩家一種美好的視覺體驗(yàn),系統(tǒng)運(yùn)行流暢,達(dá)到設(shè)計(jì)要求。游戲的交互性方面還比較簡單,還需要在交互上做深入的研究。

參考文獻(xiàn)

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

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

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

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

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

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

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

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

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

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

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

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

 ?。?3] 李海,汪繼文.基于粒子系統(tǒng)的位置可控有聲煙花模擬[J].微型機(jī)與應(yīng)用,2013,32(9):3234.


此內(nèi)容為AET網(wǎng)站原創(chuàng),未經(jīng)授權(quán)禁止轉(zhuǎn)載。