3.5 JavaScript腳本綜合案例

上面的章節(jié)對 Unity 的基本語法進(jìn)行了系統(tǒng)化的介紹，如果讀者還是不太了解，在此將用下面的一個簡單球轉(zhuǎn)球走案例來進(jìn)行說明。本案例基本初衷就是運(yùn)用基本的方法完成對球運(yùn)動狀態(tài)的控制，以及對球的紋理進(jìn)行更新操作。

本案例基本上運(yùn)用 OnGUI 方法、Start 方法和 Update 方法，向量的運(yùn)用，實(shí)例化的應(yīng)用， PlayerPrefs 類的運(yùn)用與處理，對 Android 設(shè)備各個鍵的控制，整體場景的搭建和燈光的控制以及3D拾取技術(shù)的應(yīng)用，通過這些的相互配合，使案例才能順利運(yùn)行，最終的運(yùn)行效果如圖3-1、圖3-2和圖3-3所示。

▲圖3-1 最終運(yùn)行效果圖 1

▲圖3-2 最終運(yùn)行效果圖 2

▲圖3-3 最終運(yùn)行效果圖 3

3.5.1 球轉(zhuǎn)場景實(shí)現(xiàn)

在本場景中具體的設(shè)計目的就是實(shí)現(xiàn)球的轉(zhuǎn)動，為了在視覺上呈現(xiàn)出不同的效果，進(jìn)而設(shè)計了6個具有不同紋理貼圖的球體，并且都具有一定的自轉(zhuǎn)效果，當(dāng)選中某個球時，球轉(zhuǎn)速加快，變得與眾不同，在此默認(rèn)第一個球為選中狀態(tài)，并將此時選中的球的紋理記錄了下來。

1．場景搭建的具體過程

（1）在開發(fā)前首先要對案例開發(fā)需要的資源進(jìn)行收集，主要需要的資源如表3-12所示。

表3-12 球轉(zhuǎn)場景實(shí)現(xiàn)所需的資源

（2）在計算機(jī)的某個硬盤中新建一個文件夾Ball，新建的Ball文件夾中不能放任何其他文件，必須保證該文件夾為空，這里選擇的是F盤的根目錄，如圖3-4所示。

（3）單擊桌面上的Unity快捷方式，進(jìn)入Unity集成開發(fā)環(huán)境，單擊File→New Project，進(jìn)入到Project Wizard界面，如圖 3-5所示。

（4）在Project Wizard界面里，通過單擊Browse按鈕找到新建的Ball文件夾，然后單擊Create按鈕后，等待一會就會進(jìn)入Unity的開發(fā)界面，如圖3-6所示。

▲圖3-4 新建文件夾

▲圖3-5 NewProject

▲圖3-6 ProjectWizard

（5）單擊桌面上的Unity快捷方式，進(jìn)入Unity集成開發(fā)環(huán)境，單擊GameObject→Create Other→Cube菜單，在場景中創(chuàng)建Cube，在此改名為diban，并在屬性編輯器中設(shè)置具體的參數(shù)，如圖3-7所示。

（6）單擊GameObject→Create Other→Sphere菜單，在場景中創(chuàng)建一個球體，在此改名為Ball1，并在屬性編輯器中設(shè)置具體的參數(shù)，然后依次創(chuàng)建其他 5 個球體，命名為 Ball2～Ball6，擺放位置如圖 3-8所示。

▲圖3-7 創(chuàng)建的地板，并設(shè)置具體的屬性參數(shù)

▲圖3-8 創(chuàng)建的 6個球體

（7）導(dǎo)入所需的資源，并將相應(yīng)的紋理貼圖貼到對應(yīng)的游戲?qū)ο笊希唧w的導(dǎo)入過程就單擊Assets→Import New Asset...菜單，會立刻彈出一個 Import New Asset對話框，在對話框中選中需要的資源單擊“Import”按鈕即可完成導(dǎo)入；然后選中導(dǎo)入的紋理貼圖拖動到對應(yīng)的游戲?qū)ο笊霞纯蔀橛螒驅(qū)ο筇砑蛹y理，最終的效果圖如圖3-9所示。

（8）調(diào)整攝像機(jī)視角，使攝像機(jī)的視角正對場景中的游戲?qū)ο螅唧w的參數(shù)如圖3-10所示。

（9）為場景設(shè)計面板添加適當(dāng)?shù)钠叫泄夤庠春忘c(diǎn)光源，即單擊 GameObject→Create Other→Directional light菜單，創(chuàng)建平行光光源；單擊GameObject→Create Other→Point light菜單，創(chuàng)建點(diǎn)光源。并對光源的屬性做具體的設(shè)置，具體的設(shè)置結(jié)果如圖3-11和圖3-12所示。

▲圖3-9 游戲?qū)ο筇砑由霞y理貼圖的效果

▲圖3-10 攝像機(jī)的具體屬性參數(shù)的設(shè)置

▲圖3-11 平行光光源的具體屬性參數(shù)設(shè)置

▲圖3-12 點(diǎn)光源的具體屬性參數(shù)設(shè)置

2．球轉(zhuǎn)的實(shí)現(xiàn)以及GUI組件的應(yīng)用

（1）GUI 組件的應(yīng)用，即創(chuàng)建一個名字為“Start.js”的腳本，將此腳本掛載到攝像機(jī)上，即可實(shí)現(xiàn)GUI組件的應(yīng)用，腳本的代碼如下。

代碼位置：見隨書光盤中源代碼/第3章目錄下的Bal /Assets/Script / Start.js。

1　var quedingTexture:Texture;　　　　//聲明確定按鈕紋理貼圖

2　var tuichuTexture:Texture;　　　　//聲明退出按鈕紋理貼圖

3　var anlibiaotiTexture:Texture;　　　//聲明案例標(biāo)題紋理貼圖

4　var MyStyle:GUIStyle;　　　　　//聲明GUI組件顯示風(fēng)格

5　function Update () {　　　　　　//聲明Update方法

6　　　if (Application.platform == RuntimePlatform.Android) {//判斷運(yùn)行平臺是否為Android平臺

7　　　if (Input.GetKeyUp(KeyCode.Home) ) {　//判斷當(dāng)前按鍵是否為Android設(shè)備的Home鍵

8　　　　Application.Quit();　　　　//退出項目

9　　　}

10　　if (Input.GetKeyUp(KeyCode.Escape)) {//判斷當(dāng)前按鍵是否為Android設(shè)備的Escape鍵

11　　　　Application.Quit();　　　//退出項目

12　　} } }

13　function OnGUI(){　　　　　　　//聲明OnGUI方法

14　　var ratioScaleTempH=Screen.height/960.0; //為了進(jìn)行屏幕自適應(yīng)而聲明的縱向縮放比變量

15　　var ratioScaleTemp=Screen.width/540.0;　//為了進(jìn)行屏幕自適應(yīng)而聲明的橫向縮放比變量

16　　//在自定義的屏幕位置繪制案例標(biāo)題的紋理圖片

17　　GUI.DrawTexture(

18　　　　Rect(45*ratioScaleTemp,50*ratioScaleTempH,450*ratioScaleTemp,100*ratioScaleTempH),

19　　　　anlibiaotiTexture, ScaleMode.ScaleToFit, true, 450.0f/100.0f);

20　//在自定義的屏幕位置繪制一個確定按鈕，并判斷是否被按下

21　if(GUI.Button(Rect(70*ratioScaleTemp,800*ratioScaleTempH,150*ratioScaleTemp,80*ratioScaleTempH),

22　　　　quedingTexture,MyStyle)){

23　　　　Application.LoadLevel("Start");　　//若按下，跳轉(zhuǎn)到Start場景

24　　　　Destroy(this);　　　　　　//并銷毀這個按鈕

25　}

26　//在自定義的屏幕位置繪制一個退出按鈕，并判斷是否被按下

27　if (GUI.Button(Rect(320*ratioScaleTemp,800*ratioScaleTempH,150*ratioScaleTemp,80*ratioScaleTempH),

28　　　　tuichuTexture,MyStyle)){

29　　　　Application.Quit();　　　　　//若按下，退出項目

30　　} }

● 第1-4行的主要功能為變量聲明，在開發(fā)環(huán)境下的屬性查看器中可以為各個參數(shù)指定資源或者取值。

● 第5-12行為實(shí)現(xiàn)了的Update方法的重寫，主要為了給Android設(shè)備的按鍵添加控制方法。

● 第13-30行為實(shí)現(xiàn)了的OnGUI方法的重寫，主要為了創(chuàng)建確定和退出按鈕，以及執(zhí)行跳

轉(zhuǎn)界面和退出項目的操作。

（2）球轉(zhuǎn)的實(shí)現(xiàn)，即創(chuàng)建了6個名字為“ballzizhuan1.js”～“ballzizhuan6.js”的腳本，分別掛載到Ball1~Ball6，腳本“ballzizhuan1.js”的代碼如下。

代碼位置：見隨書光盤中源代碼/第3章目錄下的Bal /Assets/Script / balzizhuan1.js。

1　publicstaticvarflag1:boolean=false;//聲明一個初始值為false的公共靜態(tài)Boolean變量flag1

2　function Update () {　　　　　　//聲明Update方法

3　　　if(flag1==false){　　　　　　//判斷變量flag1的值是否為false

4　　　　PlayerPrefs.SetString("wl","風(fēng)景1");//若為false，則記錄球的紋理貼圖名字

5　　　}

6　　　if(flag1){　　　　　　　　//若flag1的值為true

7　　　　this.transform.Rotate(-Time.deltaTime * 50,0,0);　//球按照時間自轉(zhuǎn)

8　　　}

9　　//如果腳本ballzizhuan2.js~ ballzizhuan6.js中聲明的flag變量都為true

10　　if(ballzizhuan2.flag2==true&&ballzizhuan3.flag3==true&&ballzizhuan4.flag4==true

11　&&ballzizhuan5.flag5==true&&ballzizhuan6.flag6==true){

12　　if(!flag1){　　　　　　　//判斷flag1是否為false

13　　this.transform.Rotate(-Time.deltaTime * 500,0,0);///球按照時間自轉(zhuǎn),此時為加速狀態(tài)

14　　} }

15　　else{

16　　　　flag1=true;　　　　　　　//否則將flag1的值置為true

17　　}

18　　for (var touch : Touch in Input.touches){　//對當(dāng)前觸控事件循環(huán)

19　　　　//聲明一條由屏幕觸控點(diǎn)發(fā)出垂直于屏幕的射線

20　　　　var ray = Camera.main.ScreenPointToRay(touch.position);

21　　　var hit : RaycastHit;　　　　　//聲明一個RaycastHit型變量hit

22　　　　if (Physics.Raycast (ray, hit)){　　//判斷此物理事件

23　　　if(hit.transform.root.transform==this.transform) {

24　　　　flag1=false;　　　　　　//變量 flag1置為false

25　　　　　PlayerPrefs.SetString("wl","風(fēng)景1");//記錄球的紋理貼圖名字

26　　} } } }

● 第1-17行的主要功能是為了控制球轉(zhuǎn)，并改變腳本ballzizhuan2.js～ballzizhuan6.js中聲明的flag變量的值，進(jìn)而控制其他的球。

● 第18-26行為3D拾取技術(shù)的運(yùn)用與處理，進(jìn)而對場景中的游戲?qū)ο筇砑邮叭」δ堋?/p>

說明

腳本ballzizhuan2.js～ballzizhuan6.js中的代碼與ballzizhuan1.js大體相同，在此就不列舉了，若果對此感興趣的讀者也可自己嘗試編寫或者參見本書自帶的光盤。并且3D拾取技術(shù)將在后面的章節(jié)進(jìn)行詳細(xì)介紹。

3.5.2 球走場景實(shí)現(xiàn)

在本場景中具體的設(shè)計目的就是實(shí)現(xiàn)球的運(yùn)動，首先在場景中搭建一個球走的平臺，然后通過腳本實(shí)例化一個球，并為球賦一個初速度，進(jìn)而實(shí)現(xiàn)球的運(yùn)動。

1．球走場景的搭建

（1）在開發(fā)前首先要對案例開發(fā)需要的資源進(jìn)行收集，主要需要的資源如表3-13所示。

表3-13 球轉(zhuǎn)場景實(shí)現(xiàn)所需的資源

（2）單擊File→new Scene菜單，新建一個場景。單擊GameObject→Create Other→Cube菜單，在場景中創(chuàng)建Cube，在此改名為diban，并在屬性編輯器中設(shè)置具體的參數(shù)，如圖3-13所示。

▲圖3-13 創(chuàng)建的地板，并設(shè)置具體的屬性參數(shù)

（3）單擊GameObject→Create Other→Cube菜單，在場景中創(chuàng)建一個Cube，在此改名為hulan1，并在屬性編輯器中設(shè)置具體的參數(shù)，依次創(chuàng)建4個Cube，命名為hulan1～hulan4，擺放位置如圖3-14所示。

（4）導(dǎo)入所需的資源，并將相應(yīng)的紋理貼圖貼到對應(yīng)的游戲?qū)ο笊希唧w的導(dǎo)入過程就單擊Assets→Import New Asset...菜單，會立刻彈出一個 Import New Asset對話框，在對話框中選中需要的資源單擊“Import”按鈕即可完成導(dǎo)入；然后選中導(dǎo)入的紋理貼圖拖動到對應(yīng)的游戲?qū)ο笊霞纯蔀橛螒驅(qū)ο筇砑蛹y理，最終的效果如圖3-15所示。

▲圖3-14 創(chuàng)建的4個護(hù)欄以及在場景中的擺放位置

▲圖3-15 游戲?qū)ο筇砑由霞y理貼圖的效果

（5）調(diào)整攝像機(jī)視角，使攝像機(jī)的視角正對場景中的游戲?qū)ο螅唧w的參數(shù)如圖3-16所示。

（6）為場景設(shè)計面板添加適當(dāng)?shù)钠叫泄夤庠春忘c(diǎn)光源，即單擊 GameObject→Create Other→Directional light菜單，創(chuàng)建平行光光源；單擊GameObject→Create Other→Point light菜單，創(chuàng)建點(diǎn)光源；并對光源的屬性做具體的設(shè)置，具體的設(shè)置結(jié)果如圖3-17和圖3-18所示。

▲圖3-16 攝像機(jī)的具體屬性參數(shù)設(shè)置

▲圖3-17 平行光光源的具體屬性參數(shù)設(shè)置

▲圖3-18 點(diǎn)光源的具體屬性參數(shù)設(shè)置

2．球走的實(shí)現(xiàn)以及GUI組件的應(yīng)用

為了實(shí)現(xiàn)球的運(yùn)動，在此創(chuàng)建了一個名為“Init.js”的腳本，通過經(jīng)腳本在場景中的自定義位置實(shí)例化一個球，并給球附加一個初速度，進(jìn)而實(shí)現(xiàn)球的運(yùn)動。首先應(yīng)改在項目中創(chuàng)建一個預(yù)制件Prefab，創(chuàng)建過程如下。

（1）通過Unity集成開發(fā)環(huán)境中的菜單創(chuàng)建一個Prefab，即單擊Assets→Create→prefab菜單，即可在項目資源列表中創(chuàng)建一個Prefab，在此將名字改為ball。

（2）在場景創(chuàng)建一個球體，即單擊GameObject→Create Other→Sphere菜單，即可在游戲組成列表中創(chuàng)建一個Sphere。

（3）為創(chuàng)建的Sphere添加剛體屬性和球體碰撞者屬性，即先選中Sphere，再單擊Component→Physics→Rigidbody 菜單，即可為 Sphere 添加剛體屬性；若再單擊 Component→Physics→Sphere Collider菜單，即可為Sphere添加球體碰撞者屬性，如果已存在該屬性則可省略這步。

（4）為剛創(chuàng)建的ball添加真實(shí)的游戲?qū)ο螅催x中游戲組成列表中創(chuàng)建Sphere，拖動到項目資源列表中的ball上即可，此時這個ball就具有了與Sphere一樣的屬性。

再次就是通過編寫腳本“Init.js”，并將本腳本掛載到攝像機(jī)上，具體的腳本代碼如下所示。

代碼位置：見隨書光盤中源代碼/第3章目錄下的Bal /Assets/Script / Init.js。

1　var ballTemplete:Rigidbody;　　　　//聲明一個剛體變量ballTemplete

2　var ball :Rigidbody;　　　　　　//聲明一個剛體變量ball

3　var wltupian:String;　　　　　　//聲明一個字符型變量wltupian

4　var fanhuiTexture:Texture;　　　　//聲明返回按鈕紋理貼圖

5　var MyStyle:GUIStyle;　　　　　//聲明GUI顯示風(fēng)格

6　function Start(){　　　　　　//聲明Start方法

7　ball=Instantiate(ballTemplete, Vector3(0,0.7,4), ballTemplete.rotation);//在自定義位置實(shí)例化一個球

8　wltupian=PlayerPrefs.GetString("wl");//通過PlayerPrefs.GetString方法獲取球的紋理貼圖名稱

9　ball.renderer.material.mainTexture = Resources.Load(wltupian, Texture2D);//為球添加指定名字的紋理圖

10　ball.velocity= Vector3(-8,0,-15);　　//給球施加一個初速度

11　}

12　function Update () {　　　　　　//聲明Update方法

13　　if (Application.platform == RuntimePlatform.Android) {//判斷運(yùn)行平臺是否為Android平臺

14　　if (Input.GetKeyUp(KeyCode.Home) ) {//判斷當(dāng)前按鍵是否為Android設(shè)備的Home鍵

15　　Application.Quit();　　　　　//退出項目

16　　}

17　　if (Input.GetKeyUp(KeyCode.Escape)) {//判斷當(dāng)前按鍵是否為Android設(shè)備的Escape鍵

18　　　　Application.Quit();　　　//退出項目

19　} } }

20　function OnGUI(){　　　　　　　//聲明OnGUI方法

21　　var ratioScaleTempH=Screen.height/960.0; //為了進(jìn)行屏幕自適應(yīng)而聲明的縱向縮放比變量

22　　var ratioScaleTemp=Screen.width/540.0;　//為了進(jìn)行屏幕自適應(yīng)而聲明的橫向縮放比變量

23　//在自定義的屏幕位置繪制一個退出按鈕，并判斷是否被按下

24　if(GUI.Button(Rect(380*ratioScaleTemp,850*ratioScaleTempH,150*ratioScaleTemp,80*ratioScaleTempH),

25　fanhuiTexture,MyStyle)){

26　　　Application.LoadLevel("簡單球轉(zhuǎn)球動案例"); //若按下，跳轉(zhuǎn)到“簡單球轉(zhuǎn)球動案例”場景

27　} }

● 第1-5行的主要功能為變量聲明，在開發(fā)環(huán)境下的屬性查看器中可以為各個參數(shù)指定資源或者取值。

● 第6-11行實(shí)現(xiàn)了的Start方法的重寫，在場景中實(shí)例化了一個球，并為球添加了紋理貼圖以及賦予了初速度。

● 第12-19行為實(shí)現(xiàn)了的Update方法的重寫，主要為了給Android設(shè)備的按鍵添加控制方法。

● 第20-27行為實(shí)現(xiàn)了的OnGUI方法的重寫，主要為了創(chuàng)建返回按鈕，執(zhí)行跳轉(zhuǎn)界面的操作，以及聲明橫縱向縮放比變量，進(jìn)而實(shí)現(xiàn)GUI組件的屏幕自適應(yīng)特性。

說明

自此只要將代碼編寫正確，將代碼掛載到指定的游戲?qū)ο笊希约澳_本中聲明的資源與項目中的資源正確連接，本案例就能夠正常的運(yùn)行。