零基础入门 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

本文分享自微信公众号 - 韩东吉的Unity杂货铺(DeveloperJimin)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-01-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏源码之家

WORD中一次性删除所有图片

42850
来自专栏Python小屋

Python数据可视化案例二:动态更新数据

在开发与数据监测和数据可视化有关的系统时,我们会需要根据最新的数据对图形进行更新。下面的代码模拟了这种情况,单击Start按钮时会更新数据并重新绘制图形使得曲线...

43980
来自专栏从零开始学自动化测试

Selenium2+python自动化33-文件上传(send_keys)

前言 文件上传是web页面上很常见的一个功能,自动化成功中操作起来却不是那么简单。 一般分两个场景:一种是input标签,这种可以用selenium提供的sen...

31490
来自专栏葡萄城控件技术团队

如何在施工物料管理Web系统中处理大量数据并显示

最近在开发施工物料管理系统,其中涉及大量的物料信息需要管理和汇总,数据量非常庞大。之前尝试自己通过将原始数据,加工处理建模,在后台代码中通过分组、转置再显示到 ...

246100
来自专栏机器学习AI算法工程

python + selenium + PhantomJS 获取腾讯应用宝APP评论

PhantomJS PhantomJS 是一个基于WebKit的服务器端JavaScript API,它无需浏览器的支持即可实现对Web的支持,且原生支持各种W...

39570
来自专栏老司机的简书

关于自定义modal的转场动画

然后在目标控制器中设置遵循UIViewControllerTransitionIngDelegate协议。

20830
来自专栏Angular&服务

Angular2 页面的生命周期

当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit之前。

13020
来自专栏挖坑填坑

Angular练习

1、安装node.js(其自带npm) 2、安装angular/cli 3、使用angular/cli构建项目参考这篇文章

13850
来自专栏无原型不设计

用好这6个新功能,让你的项目设计事半功倍

本文由Mockplus提供素材。 Mockplus3.2新功能发布有段时间了,新功能具体能给我们的设计带来什么呢?且听我一一道来: 格子 格子功能,可以...

35460
来自专栏王磊的博客

水印生成器第2版[原图质量水印可自定义设置]

简介:水印生成器,原理很简单,一时在网上没有找到打水印的网站,自己便做了一个,效果如下图,可自定义字体大小、字体类型以及颜色。 开发环境:vs 2010 [ne...

38890

扫码关注云+社区

领取腾讯云代金券