零基础入门 11： 通过脚本设置UGUI Image

上一篇分享了UGUI Image在Unity编辑器下的相关使用。

这篇分享介绍下通过代码来创建和设置Image。

进入正题：

首先我们创建一个脚本，名为TestImage。

双击打开，默认脚本显示如下。

因为默认的脚本是没有引入UnityEngine库的。所以当我们新创建了一个脚本后，在脚本上方加入UnityEngine的引用。

加入这个引用以后，我们才可以自由的创建一个Image对象。

然后先介绍一下第一种方式，拿到Image对象的引用，来对它进行控制。

一、拿引用。

这句话听起来不是很容易懂，什么叫拿引用呢？

实际就是在编辑器里先创建好一个Image对象，然后通过脚本公开出一个Image，在编辑器将创建好的Image对象拖动到脚本上，进行关联。通过这样的方式，我们就拿到了在编辑器里创建的Image对象的引用了。从而进行控制。

如下图，我们先在脚本里创建一个Image，然后回到Unity里再创建一个Image。

回到Unity里创建一个Image

然后将脚本拖动到Canvas上，并且把Unity里创建的Image拖动到脚本上。完成关联。

这样，我们就把Unity里创建的Image和脚本里创建的Image进行了关联，现在我们回到脚本，就可以对Image进行设置了。

打开Start生命周期函数，我们对Image的一些设置将在这个生命周期函数里完成。

首先，我们用Image来点（.）一下，看看Image有多少属性可以设置。如下。

可以看出方法有很多，下面将罗列几个常用的设置。

因为是Image，所以图片肯定是第一个要设置的了。我们先做好准备工作，在Unity里创建一个名为Resources的文件夹，将名为IU的图片， 拖进去。

为什么要创建一个这样的目录呢？Resources是Unity的特殊资源目录，在该目录下的资源，可以通过代码的形式进行加载。

上一篇，我们介绍了在编辑器下，创建了Image，然后将Project窗口下的图片拖到Image组件上，现在我们要用代码动态加载IU这张贴图，然后把它赋值给我们的Image。

如下图，就是动态加载Resources目录下的图片，然后赋值给我们的Image。

Image.Sprite就是设置Image组件的图片。

Resources.Load<T（传入类型）>(Path（传入路径） );我们用Load的方法将Resources路径下的 IU加载下来，赋值给Image。

其中T是要加载的类型，是一种泛型的写法。用T来代表任一类型。

Path是资源的路径。

然后我们切回到Unity，非运行模式下代码是不运行的，我们运行项目，效果如下。可以看到，运行后，Image的图片就已经被加载上并且显示了出来。

接下来我们改变一下图片的颜色。代码如下。Unity提供了几种颜色可供设置，当然也可以通过自己设置RGB来设置图片的颜色。俩种方式如下图。

下面这种是自己设置RGB

Image.Color就是设置Image组件的颜色。

切回Unity查看运行效果。

我们通过new Color自定了颜色，那如果我想改变透明度呢？

很简单，后来再加一个0-1的float类型数值代表alpha透明度即可。如下。

然后切回Unity查看效果，以及图片的alpha值。透明度默认为256，所以我们输入0.5，透明度就变成了256/2 = 128。

接下来的这个属性，不仅仅属于图片，所有UGUI组件都可以通过这样的方式来修改。

那就是位置和大小。

先来说位置。

修改图片的位置和大小，我们是通过Image上的RectTransform组件来修改的。

Image上的RectTransform组件，任何一个Canvas下的对象都存在这个组件。相当于默认对象上的Transform。

如下图。

我们可以通过俩种方式来获取到这个RectTransform组件。

第一种直接.（点）出来

第二种是根据Image这个gameobject来获取组件。

这是一个新的知识点，就是GetComponent<T>，T仍然是泛型，代表你要获取的组件类型。

GetComponent是个函数，所以我们在后面接上（）来帮助我们继续使用RectTransform的内部方法。

我们通过RectTransform来改变UGUI组件的位置、大小以及缩放。

首先是位置

RectTransform.anchoredPosition是修改位置的方法。

如图可以看出，现在PosX和PosY分别都是0，那我们给图片修改下位置，将Y改为100

切回Unity

然后下面的几个方法，分别是对RectTransform进行修改。

图形展示如下

切回Unity，然后看下效果。

二、创建空的对象后增加Image组件

第二种方式和第一种的区别，只是创建的方式变化了。第一种方式里，我们通过在Unity创建一个Image，脚本里创建一个Image，然后将Unity里创建的拖到脚本上实现关联。

第二种方式，则是创建一个空的GameObject，然后放到Canvas下，动态增加Image组件。

接下来我们删除脚本内的Image创建位置，Unity的Image也删除掉。

因为Image的引用没了，为了不发生报错，所以我先将下面设置属性的代码临时注释掉。

然后回到Unity。Canvas上的脚本就没有Image了。

此时我们在Start方法里，创建一个空的GameObject，命名为Image。

然后将这个对象设置一个父节点，那就是我们的Canvas。下面这张图里，setParent是给我们的Image对象设置一个父节点。

括弧里面的是获取一个名为Canvas的对象。并且把Canvas设置成Image的父节点。

运行如下图。

接下来，我们为Image这个对象增加Image组件。

前面知道了GetComponent是获取组件，那么增加组件就是AddComponent

这就是第二种创建Image的方式。

然后我们把Image改名为m_testImg，然后把之前注释的代码恢复。运行查看效果。

如上图，修改后，我们发现，sprite和color变成了红色？

为什么会报错呢？

因为m_testImg是我们创建的GameObject。而.sprite是Image才有的功能，虽然我们为m_testImg这个对象增加了Image组件，但是这里这样用是错的，我们修改一下。

然后回到Unity里查看效果。动态创建了一个Image，然后设置他的一些属性。

好了，今天通过脚本控制Image组件到这就结束了。

See You