3.5 JavaScript腳本綜合案例

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

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

▲圖3-1 最終運行效果圖 1

▲圖3-2 最終運行效果圖 2

▲圖3-3 最終運行效果圖 3

3.5.1 球轉場景實現

在本場景中具體的設計目的就是實現球的轉動，為了在視覺上呈現出不同的效果，進而設計了6個具有不同紋理貼圖的球體，并且都具有一定的自轉效果，當選中某個球時，球轉速加快，變得與眾不同，在此默認第一個球為選中狀態，并將此時選中的球的紋理記錄了下來。

1．場景搭建的具體過程

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

表3-12 球轉場景實現所需的資源

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

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

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

▲圖3-4 新建文件夾

▲圖3-5 NewProject

▲圖3-6 ProjectWizard

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

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

▲圖3-7 創建的地板，并設置具體的屬性參數

▲圖3-8 創建的 6個球體

（7）導入所需的資源，并將相應的紋理貼圖貼到對應的游戲對象上，具體的導入過程就單擊Assets→Import New Asset...菜單，會立刻彈出一個 Import New Asset對話框，在對話框中選中需要的資源單擊“Import”按鈕即可完成導入；然后選中導入的紋理貼圖拖動到對應的游戲對象上即可為游戲對象添加紋理，最終的效果圖如圖3-9所示。

（8）調整攝像機視角，使攝像機的視角正對場景中的游戲對象，具體的參數如圖3-10所示。

（9）為場景設計面板添加適當的平行光光源和點光源，即單擊 GameObject→Create Other→Directional light菜單，創建平行光光源；單擊GameObject→Create Other→Point light菜單，創建點光源。并對光源的屬性做具體的設置，具體的設置結果如圖3-11和圖3-12所示。

▲圖3-9 游戲對象添加上紋理貼圖的效果

▲圖3-10 攝像機的具體屬性參數的設置

▲圖3-11 平行光光源的具體屬性參數設置

▲圖3-12 點光源的具體屬性參數設置

2．球轉的實現以及GUI組件的應用

（1）GUI 組件的應用，即創建一個名字為“Start.js”的腳本，將此腳本掛載到攝像機上，即可實現GUI組件的應用，腳本的代碼如下。

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

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

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

3　var anlibiaotiTexture:Texture;　　　//聲明案例標題紋理貼圖

4　var MyStyle:GUIStyle;　　　　　//聲明GUI組件顯示風格

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

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

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

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

9　　　}

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

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

12　　} } }

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

14　　var ratioScaleTempH=Screen.height/960.0; //為了進行屏幕自適應而聲明的縱向縮放比變量

15　　var ratioScaleTemp=Screen.width/540.0;　//為了進行屏幕自適應而聲明的橫向縮放比變量

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

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");　　//若按下，跳轉到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行的主要功能為變量聲明，在開發環境下的屬性查看器中可以為各個參數指定資源或者取值。

● 第5-12行為實現了的Update方法的重寫，主要為了給Android設備的按鍵添加控制方法。

● 第13-30行為實現了的OnGUI方法的重寫，主要為了創建確定和退出按鈕，以及執行跳

轉界面和退出項目的操作。

（2）球轉的實現，即創建了6個名字為“ballzizhuan1.js”～“ballzizhuan6.js”的腳本，分別掛載到Ball1~Ball6，腳本“ballzizhuan1.js”的代碼如下。

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

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

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

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

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

5　　　}

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

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

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);///球按照時間自轉,此時為加速狀態

14　　} }

15　　else{

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

17　　}

18　　for (var touch : Touch in Input.touches){　//對當前觸控事件循環

19　　　　//聲明一條由屏幕觸控點發出垂直于屏幕的射線

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","風景1");//記錄球的紋理貼圖名字

26　　} } } }

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

● 第18-26行為3D拾取技術的運用與處理，進而對場景中的游戲對象添加拾取功能。

說明

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

3.5.2 球走場景實現

在本場景中具體的設計目的就是實現球的運動，首先在場景中搭建一個球走的平臺，然后通過腳本實例化一個球，并為球賦一個初速度，進而實現球的運動。

1．球走場景的搭建

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

表3-13 球轉場景實現所需的資源

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

▲圖3-13 創建的地板，并設置具體的屬性參數

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

（4）導入所需的資源，并將相應的紋理貼圖貼到對應的游戲對象上，具體的導入過程就單擊Assets→Import New Asset...菜單，會立刻彈出一個 Import New Asset對話框，在對話框中選中需要的資源單擊“Import”按鈕即可完成導入；然后選中導入的紋理貼圖拖動到對應的游戲對象上即可為游戲對象添加紋理，最終的效果如圖3-15所示。

▲圖3-14 創建的4個護欄以及在場景中的擺放位置

▲圖3-15 游戲對象添加上紋理貼圖的效果

（5）調整攝像機視角，使攝像機的視角正對場景中的游戲對象，具體的參數如圖3-16所示。

（6）為場景設計面板添加適當的平行光光源和點光源，即單擊 GameObject→Create Other→Directional light菜單，創建平行光光源；單擊GameObject→Create Other→Point light菜單，創建點光源；并對光源的屬性做具體的設置，具體的設置結果如圖3-17和圖3-18所示。

▲圖3-16 攝像機的具體屬性參數設置

▲圖3-17 平行光光源的具體屬性參數設置

▲圖3-18 點光源的具體屬性參數設置

2．球走的實現以及GUI組件的應用

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

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

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

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

（4）為剛創建的ball添加真實的游戲對象，即選中游戲組成列表中創建Sphere，拖動到項目資源列表中的ball上即可，此時這個ball就具有了與Sphere一樣的屬性。

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

代碼位置：見隨書光盤中源代碼/第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顯示風格

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

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

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) {//判斷運行平臺是否為Android平臺

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

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

16　　}

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

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

19　} } }

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

21　　var ratioScaleTempH=Screen.height/960.0; //為了進行屏幕自適應而聲明的縱向縮放比變量

22　　var ratioScaleTemp=Screen.width/540.0;　//為了進行屏幕自適應而聲明的橫向縮放比變量

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

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

25　fanhuiTexture,MyStyle)){

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

27　} }

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

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

● 第12-19行為實現了的Update方法的重寫，主要為了給Android設備的按鍵添加控制方法。

● 第20-27行為實現了的OnGUI方法的重寫，主要為了創建返回按鈕，執行跳轉界面的操作，以及聲明橫縱向縮放比變量，進而實現GUI組件的屏幕自適應特性。

說明

自此只要將代碼編寫正確，將代碼掛載到指定的游戲對象上，以及腳本中聲明的資源與項目中的資源正確連接，本案例就能夠正常的運行。