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组件的屏幕自适应特性。

说明

自此只要将代码编写正确，将代码挂载到指定的游戏对象上，以及脚本中声明的资源与项目中的资源正确连接，本案例就能够正常的运行。