Unity3D入门之JavaScript

刚刚接触Unity3D游戏引擎，这里做点学习笔记。下面是我建立的简单场景，左侧的Hierarchy（层次）视图里显示了场景中所有游戏对象，这些基本对象可以从Create下拉菜单里创建。当你点击某个对象，比如立方体Cube时，在右侧Inspector（监视）中可以看到Cube对象的详细信息，比如它的位置信息、表面材质信息，然后可以在其中修改。下方的Project视图中的Assets（资源）里显示了游戏中所有资源，这里注意与Hierarchy视图里对象的区别，我们的游戏脚本放在Assets里。刚开始学习Unity3D，我会反感那些脚本，总希望不需要写代码就能创建自己的游戏，但后来发现，在Unity3D中不写脚本是不可能的，脚本完全就是一切的逻辑。

要在Scene（场景）视图里创建物体，可以在左侧的Hierarchy视图里点击Create下拉菜单，选择创建即可，我这里创建了一个平面Plane、两个立方体Cube和MyCube、一个摄像机MainCamera、一个圆柱体Cylinder。在Scene中，按住ALT键，用鼠标就可以旋转整个场景；按住鼠标中键，可以拖动场景视图；用鼠标滚轮可以缩放视图。

要给场景中的物体上色，比如平面Plane，只需要点击对象Plane，然后在右侧Inspector中做些设置即可。那么如何改变物体表面的颜色了，是直接修改吗？不是，有点图像学基础的都知道，要改变表面颜色，实际要改变的是物体的表面材质，材质中可以包含各种复杂信息。要创建材质，可以在Assets视图中点击右键，选择Create->Material即可，然后在Inspector中修改Main Color属性即可。最后点击Plane对象，在右侧点击Materials里Element0最右边的小圈，选择想要的材质，也可以直接把Assets里的材质拖放到Element0上即可。

在Create里只能创建一些基本模型，下面学习用JavaScript脚本在场景中创建游戏界面元素，比如按钮、文本框、图片等。我看的书是《Unity3D游戏开发》，最开始讲的就是JavaScript，后面会讲C#作为脚本语言。下面是我自己的一个练习的截图。

界面有点乱，也懒得改了。最上面的是几个旋转视图的按钮，左边绿色的文字，接着是一幅图片、滑动条。下方是输入框、图片按钮。比较显眼的是3个窗口，窗口里的元素坐标都是相对的。我在代码中都有详细的注释，也不需要做什么说明了。要使用脚本，先在Assets里创建javaScript，打开编辑器复制我的代码。然后点击左侧的Main Camera对象，把脚本文件拖动到右侧中即可。可能会出现编译错误，无法运行，那是因为我没有提供材质、图片。点击Main Camera对象，点击右侧Inspector里的脚本文件，展开它的属性，会看到Image Texture、Button Texture这些变量，凡是在JavaScript里的public修饰的变量就会出现在这里，要给这些变量赋值才可以正常运行。

我这里需要赋值的是Image Texture、Button Texture、View Texture 0，这三个都是图片，从Assets里拖放三个图片赋给它们即可。下面还有一个My Skin变量，是Unity里的皮肤，比如决定按钮的颜色，可以被很多按钮使用，也是在Assets里直接创建即可。对于Unity3D里的GUI控件，简单的有Label（文本）、Button（按钮）、TextField（文本框）、ToolBar（工具栏）、Slider（滑块）、ScrollView（滚动显示区域）等。

群组视图（Group View控件）：将多个视图放在一个群组中，群组视图里的坐标都是相对的。修改群组视图坐标，里面所有元素坐标都会变化。

GUILayout：相对与GUI控件，GUILayout控件的创建不需要设定显示区域，不指定具体坐标，可以动态适应窗口。比如绘制一个按钮，如果用GUI控件，需要指定按钮的长度，如果按钮上的文字长度超出了按钮长度，超出部分便无法显示了。如果使用GUILayout，便可以动态自适应。

帧动画：在加载图片动画时，我使用了Resources.Load()这样的方法，注意需要在Assets里创建Resources目录，然后把动画资源放在其中。

刚体（Rigidbody）：在Unity中可以给对象添加这个属性，比如立方体，添加后的立方体可以和其它物体产生碰撞反应，变成了一个具有物理属性的物体，比如可以自由裸体运动。要添加这个属性，先选择对象，然后在菜单栏里选择Component->Physics->Rigidbody即可。

  1 #pragma strict
  2 
  3 var str1 : String;//外部字符串
  4 var imageTexture : Texture;//外部贴图
  5 var buttonTexture : Texture2D;//按纽图片
  6 var viewTexture0 : Texture2D;
  7 var TranslateSpeed = 20;//模型移动速度
  8 var RotateSpeed = 1000;//模型旋转速度
  9 
 10 private var username : String;//用户名
 11 private var password : String;//密码
 12 
 13 private var imageWidth : int;//图片宽度
 14 private var imageHeight : int;
 15 private var screenWidth : int;//屏幕宽度
 16 private var screenHeight : int;
 17 
 18 private var select : int;//工具栏选择按钮的ID
 19 private var barResource : String[];//工具栏按钮字符串
 20 
 21 var verticalValue : int = 0;//纵向滑动条数值
 22 var horizontalValue : float = 0.0f;//横向滑动条数值
 23 
 24 var scrollPosition : Vector2;//滚动条位置
 25 
 26 var mySkin : GUISkin;//自定义皮肤
 27 
 28 private var choose : boolean = false;//单选控件是否选中
 29 
 30 //默认窗口位置
 31 private var window0 : Rect = Rect(770,100,250,100);
 32 private var window1 : Rect = Rect(600,200,400,300);
 33 
 34 var winArrayList = new ArrayList();//用于存储窗口
 35 
 36 
 37 private var animUp : Object[];//动画数组
 38 private var animDown : Object[];
 39 private var animLeft : Object[];
 40 private var animRight : Object[];
 41 private var map : Texture2D;//地图贴图
 42 private var tex : Object[];//当前人物动画
 43 private var x : int = 400;//人物的x坐标
 44 private var y : int = 400;//人物的y坐标
 45 private var nowFrame : int;//帧序列
 46 private var mFrameCount : int;//帧总数
 47 private var fps : float = 10;//一秒多少帧
 48 private var time : float = 0;//限制帧的时间
 49 
 50 //程序开始函数，变量初始化
 51 function Start () {
 52     screenWidth = Screen.width;
 53     screenHeight = Screen.height;
 54     imageWidth = imageTexture.width;
 55     imageHeight = imageTexture.height;
 56     str1 = "点击click";
 57     username = "";
 58     password = "";
 59     select = 0;
 60     barResource = ["Toolbar1","Toolbar2","Toolbar3"];
 61     scrollPosition[0] = 50;
 62     scrollPosition[1] = 50;
 63     
 64     //添加一个窗口
 65     winArrayList.Add(Rect(winArrayList.Count*100,400,150,100));
 66     
 67     //得到帧动画中的所有图片资源
 68     animUp = Resources.LoadAll("up");
 69     animDown = Resources.LoadAll("down");
 70     animLeft = Resources.LoadAll("left");
 71     animRight = Resources.LoadAll("right");
 72     tex = animUp;
 73 }
 74 
 75 //每一帧都要执行的更新
 76 function Update () {
 77 
 78 }
 79 
 80 //绘制GUI界面组件
 81 function OnGUI()
 82 {
 83     //设置GUI背景颜色
 84     GUI.backgroundColor = Color.red;
 85     //设置一个按钮，规定一个矩形区域
 86     if (GUI.Button(Rect(10,10,70,30), "向左旋转"))
 87     {
 88         //transform为当前绑定模型的变换对象，设置模型旋转
 89         //Time.deltaTime:表示完成最后一帧的时间，单位为秒
 90         transform.Rotate(Vector3.up * Time.deltaTime * (-RotateSpeed));
 91     }
 92     if (GUI.Button(Rect(170,10,70,30), "向右旋转"))
 93     {
 94         transform.Rotate(Vector3.up * Time.deltaTime * RotateSpeed);
 95     }
 96     if (GUI.Button(Rect(90,10,70,30), "向前移动"))
 97     {
 98         transform.Translate(Vector3.forward * Time.deltaTime * TranslateSpeed);
 99     }
100     if (GUI.Button(Rect(90,50,70,30), "向后移动"))
101     {
102         transform.Translate(Vector3.back * Time.deltaTime * TranslateSpeed);
103     }
104     if (GUI.Button(Rect(10,50,70,30), "向左移动"))
105     {
106         transform.Translate(Vector3.left * Time.deltaTime * TranslateSpeed);
107     }
108     if (GUI.Button(Rect(170,50,70,30), "向右移动"))
109     {
110         transform.Translate(Vector3.right * Time.deltaTime * TranslateSpeed);
111     }
112     
113     //显示文字信息Label
114     GUI.color = Color.green;
115     GUI.Label(Rect(250,10,200,30), "模型的位置" + transform.position);//设置一个文本框
116     GUI.Label(Rect(250,50,200,30), "模型的旋转" + transform.rotation);
117     GUI.Label(Rect(450,10,200,30), "屏幕宽度：" + screenWidth);
118     GUI.Label(Rect(450,50,200,30), "屏幕高度：" + screenHeight);
119     
120     //显示图片Label
121     GUI.color = Color.white;
122     GUI.Label(Rect(600,10,imageWidth,imageHeight), imageTexture);
123     
124     //显示图片按钮Button
125     GUI.backgroundColor = Color.white;
126     GUI.Button(Rect(250,90,buttonTexture.width,buttonTexture.height),buttonTexture);
127     
128     //显示文本框TextField
129     GUI.backgroundColor = Color.white;
130     username = GUI.TextField(Rect(0,90,100,30),username,15);
131     password = GUI.PasswordField(Rect(120,90,100,30),password,"?"[0],15);
132     
133     //显示工具栏Toolbar
134     select = GUI.Toolbar(Rect(0,140,barResource.Length * 100, 30),select,barResource);
135     switch(select)
136     {
137         case 0:
138             GUI.Label(Rect(10,180,200,30),"X");
139             break;
140         case 1:
141             GUI.Label(Rect(10,180,200,30),"Y");
142             break;
143         case 2:
144             GUI.Label(Rect(10,180,200,30),"Z");
145             break;
146         default:
147             break;
148     }
149     
150     //显示滑块Slider
151     verticalValue = GUI.VerticalSlider(Rect(750,10,30,100),verticalValue,99,0);
152     horizontalValue = GUI.HorizontalSlider(Rect(820,10,100,30),horizontalValue,0.0f,100.0f);
153     GUI.Label(Rect(780,20,18,100), "纵向进度" + verticalValue);
154     GUI.Label(Rect(820,30,100,20), "横向进度" + horizontalValue);
155     
156     //开始群组视图，将多个组件放在一个群组中，群组中组件坐标都是相对坐标；修改群组坐标，其中所有坐标都会改变
157     GUI.BeginGroup(new Rect(10,230,200,400));
158     GUI.DrawTexture(Rect(10,20,viewTexture0.width,viewTexture0.height),viewTexture0);
159     GUI.Label(Rect(10,70,100,40),"群组视图1");
160     GUI.Label(Rect(10,100,100,40),"按钮");
161     GUI.EndGroup();
162     
163     //注册窗口
164     GUI.Window(1001,window0,oneWindow,"第一个窗口");
165     GUI.Window(1002,window1,twoWindow,"GUILayout");
166     
167     //自定义皮肤
168     GUI.skin = mySkin;
169     GUI.Button(Rect(300,230,120,30),"自定义皮肤按钮");
170     GUI.Toggle(Rect(300,270,100,30),choose,"单项选择");
171     //自定义皮肤风格组件Custom Styles
172     GUI.Button(Rect(450,230,120,30), "Custom0Button", "Custom0");
173     GUI.Button(Rect(450,270,120,30), "Custom1Button", "Custom1");
174     
175     //遍历每个窗口，并加入视图
176     var count = winArrayList.Count;
177     for (var i = 0; i < count; i++)
178     {
179         winArrayList[i] = GUILayout.Window(i,winArrayList[i],AddWindow,"窗口ID:"+i);
180     }
181     
182     //绘制帧动画
183     DrawAnimation(tex, Rect(x,y,32,48));
184     GUI.BeginGroup(new Rect(400,120,200,400));
185     //点击按钮移动人物
186     if (GUILayout.RepeatButton("向上"))
187     {
188         y-=2;
189         tex = animUp;
190     }
191     if (GUILayout.RepeatButton("向下"))
192     {
193         y+=2;
194         tex = animDown;
195     }
196     if (GUILayout.RepeatButton("向左"))
197     {
198         x-=2;
199         tex = animLeft;
200     }
201     if (GUILayout.RepeatButton("向右"))
202     {
203         x+=2;
204         tex = animRight;
205     }
206     GUI.EndGroup();
207 }
208 
209 //窗口1
210 function oneWindow(windowID: int)
211 {
212     if (GUI.Button(Rect(10,50,80,30),"普通按钮"))
213     {
214         Debug.Log("窗口ID=" + windowID + "按钮被点击");
215     }
216     
217     //GUILayout界面布局
218     if (GUILayout.Button(str1))
219     {
220         str1 += str1;
221     }
222 }
223 
224 //窗口2 : GUILayout
225 function twoWindow(windowID : int)
226 {
227     //线性布局
228     GUILayout.BeginHorizontal();
229     GUILayout.Box("开始水平布局");
230     GUILayout.Button("按钮");
231     GUILayout.Label("文本框");
232     GUILayout.TextField("输入框");
233     GUILayout.EndHorizontal();
234     
235     GUILayout.BeginVertical();
236     GUILayout.Box("开始垂直布局");
237     GUILayout.Button("按钮");
238     GUILayout.TextArea("输入区域");
239     GUILayout.EndVertical();
240     
241     //控件偏移、对齐
242     GUILayout.BeginArea(Rect(0,150,200,60));//开始一个显示区域
243     GUILayout.BeginHorizontal();//外层横向布局
244     
245     GUILayout.BeginVertical();//嵌套一个纵向布局
246     GUILayout.Box("Test1");
247     GUILayout.Space(10);//两个Box控件中间偏移
248     GUILayout.Box("Test2");
249     GUILayout.EndVertical();//结束嵌套的纵向布局
250     
251     GUILayout.Space(40);//两个纵向布局间偏移
252     
253     GUILayout.BeginVertical();//嵌套一个纵向布局
254     GUILayout.Box("Test3");
255     GUILayout.FlexibleSpace();//设置对齐
256     GUILayout.Box("Test4");
257     GUILayout.EndVertical();//结束嵌套的纵向布局
258     
259     GUILayout.EndHorizontal();//结束外层横向布局
260     GUILayout.EndArea();//结束一个显示区域
261 }
262 
263 //添加新窗口
264 function AddWindow(windowID : int)
265 {
266     if (GUILayout.Button("添加新窗口"))
267     {
268         winArrayList.Add(Rect(winArrayList.Count*100,500,80,80));
269     }
270     if (GUILayout.Button("关闭当前窗口"))
271     {
272         winArrayList.RemoveAt(windowID);
273     }
274     GUI.DragWindow(Rect(0,0,Screen.width,Screen.height));
275 }
276 
277 //绘制帧动画
278 function DrawAnimation(tex : Object[], rect : Rect)
279 {
280     //绘制当前帧
281     GUI.DrawTexture(rect, tex[nowFrame], ScaleMode.StretchToFill, true, 0);
282     //计算限制帧时间
283     time += Time.deltaTime;
284     //超过限制帧则切换图片
285     if (time >= 1.0/fps)
286     {
287         nowFrame++;
288         time = 0;
289         if (nowFrame >= tex.Length)
290         {
291             nowFrame = 0;
292         }
293     }
294 }