Unity_3 创建自己的UI界面

前言

这篇开始学习有关UI和C#的内容了。

UI界面的搭建

这里我们完成可以从UI界面进行运算的功能：A+B=?。

首先新建一个Canvas（布），之后的输入框和输出框都在这个Canvas上建立。

然后在Canvas中新建两个input Field，用来进行输入。

然后新建两个Text，用来表示+和结果Result，使界面更完整。根据自己的喜好调节颜色，位置和大小。

再建立一个点击按钮Button，只要一点击这个按钮，后面的TextResult就出结果，相当于=。
Note：这里可以调节字在框中的位置。

界面整体如图：

用代码将各部件连接，完成功能
首先创建一个空物体，我理解的是这些操作都要附着于一个物体上才可以。我给这个物体起名叫MainFuctions。

根据逻辑写好代码：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;   //

public class UI1 : MonoBehaviour {
	public InputField InputFieldA;
	public InputField InputFieldB; // 这是两个输入模块，需要code控制。
	public Text TextResult;		//这是输出答案的模块，需要code控制。
	void Start () {
	}

	//写一个计算的函数
	public void calculation(){
		//注意InputField模块下有个Text，是控制输入的文字的,默认为string类型。
		string A=InputFieldA.text;
		string B=InputFieldB.text;
		int C=int.Parse(A)+int.Parse(B);// 将string强制转换为int，再计算。
		TextResult.text = C.ToString();//将int强制转换为string。
		Debug.Log (TextResult.text);
	}
}

然后写好代码后将代码拖入物体：MainFuctions。
将代码和此物体关联起来，如果代码没有错误，那么右边会显示代码中所用到的组件。

将事实物体拖入代码中，使其对应。

设置鼠标控制的物体：物体名MainFuctions。以及方法。

此时便可以运行了，界面最后如图所示：

添加背景图片：
Note1：UI界面里，所有图片或者音乐使用的时候都需要转化为2D。

Note2：Canvas中有层次之分，如果在最下层，就让它在最上面。

将2D图片拖入并且设置为全屏即可。(按住ALT键选择图片模式)

效果图：

添加背景音乐并且设置按钮
首先把你要添加的背景音乐和声音图标都换成2D的（之前讲过了）。
首先设置一个控制音乐的按钮Button_Audio，点击它可以开关音乐（随便设置图片就可以）：

然后设置音源。
东西准备好了之后写代码：

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class UI1_1 : MonoBehaviour {
	public AudioSource JAY;  //你的音源名称
	public Image AudioImg;//用来设置音标图片。
	public bool isadudio = true;//每点击一次就会变换
	public Sprite[] audiosprite;//用来换图片。

	public void clickbun(){
		isadudio = !isadudio;
		if (isadudio ) {
			//打开音乐，换图片
			JAY.Play();
			AudioImg.sprite=audiosprite[0];
		} else {
			//关闭音乐，换图片
			JAY.Stop();
			AudioImg.sprite=audiosprite[1];
		}
	}
}

note：如果不想音乐每次都重头播放，改成暂停函数：.Pause();
将代码拖入物体，并且与事实对应：
Note：为什么audio img中拖入的是按钮button呢，因为这里要和button里面的图片对应。

将物体拖入Button_Audio，就可以完成了。