Unity学习笔记 - uGUI

uGUI就是Unity原生自带的UI制作系统,unity 4.6之后才有的。据说比NGUI好用,毕竟是unity亲生的嘛~

学习目标:

1. UI图片的摆放与正常显示

2. 按钮  -  点击按钮动画;点击后界面跳转;点击后触发脚本中设定的功能

3. 窗口  -  窗口弹出/消失动画

4. 屏幕适配

5. 美术资源规划与性能优化


一. UI图片的摆放与正常显示


1. 创建UI图片

引自:http://blog.csdn.net/u012999985/article/details/50865335

点击菜单栏的GameObject标签——UI——Image

建立之后我们就能看到在左边的场景实体列表(Hierarchy)新生成了三个实体

Canvas:画布,相当于一个呈现界面UI素材的容器。

Canvas下的子实体Image:每个UI控件都是由美工设计的图片构成,这个就Image是放自己设计的图片的实体

EventSystem:监听UI相关的事件实体,用来支持点击触碰等。

Set Native Size 恢复图片原始尺寸

2. Canvas基本设置

Canvas - Render mode:Screen Space Camera

Canvas - Render Camera:Main Camera 

Canvas Scaler - UI Scale Mode:Scale with screen size


二、按钮

1. 点击按钮的动画

按钮会自带悬停、按下效果,在Button - Transition中可设置

ColorTink: 点击效果靠颜色与Alpha透明度来调节

SpriteSwap:不同状态使用不同图片

Animation:利用Unity的动画系统来制作按钮的动画效果

关于Animation:

点击auto generate animation,创建animation controller文件;

选中加动画的button,打开Animation窗口,点击刚才创建的controller,这时Animation窗口中就可以看到4个动画状态了;

点击Add property就可以加动画效果了(或者点击红色录制按钮)。

* Image - Raycast Target 要勾选点击才会有效

2. 点击后界面跳转

新建一个空的Game Object,比如叫Menu Ctrl

在Menu Ctrl上添加脚本MenuCtrl:

    public void LoadScene(string sceneName)

    {

        SceneManager.LoadScene(sceneName);

    }

On Click()下面点击加号新建事件

将Menu Ctrl拖入,选中函数MenuCtrl.LoadScene,并输入需要跳转到的场景名

三、弹出窗口


创建panel,添加animator组件;

选中panel,打开animation窗口,新建动画。


四、屏幕适配

1. 关于Anchor四叶草

参考:http://www.jianshu.com/p/5a11073e2b77

四叶草是Anchor,Button是子矩形,灰色面板是父矩形

Anchor四角和父矩形四角的距离为比例固定;

子矩形四角和Anchor四角的距离为绝对距离固定;

Anchor四角合拢即Anchor大小永远为0,则父矩形大小变化时,子矩形大小不变,仅位置移动;

Anchor四角分开则父矩形大小变化时,Anchor大小随之变化,子矩形大小也同样变化;

调整Anchor四角的位置可使子矩形随父矩形形变的幅度有所不同(总之是会有各种不同的效果,数学不好原理似懂非懂,反正试试就知道了)。

下图这种将Anchor合拢置于父矩形左上角,则子矩形大小不会变,相对于左上角的绝对距离不会变

现在只是知道uGUI屏幕适配的大概,有待进一步学习和尝试。


五. 美术资源规划与性能优化

这篇文章写的挺好:http://www.jianshu.com/p/061e67308e5f


补充资料:

遮罩效果(Mask

http://www.mamicode.com/info-detail-526038.html

Mask貌似比较废,少用为好。

动态创建uGUI(感觉会用的上):

Unity进阶技巧 - 动态创建UGUI


后记:因为unity不支持prefab嵌套,所以UI该怎么组织是个问题

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 220,639评论 6 513
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 94,093评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 167,079评论 0 357
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 59,329评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 68,343评论 6 397
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 52,047评论 1 308
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,645评论 3 421
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,565评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 46,095评论 1 319
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,201评论 3 340
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,338评论 1 352
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 36,014评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,701评论 3 332
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,194评论 0 23
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,320评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,685评论 3 375
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,345评论 2 358

推荐阅读更多精彩内容

  • 前言 项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中...
    Zui阅读 30,948评论 11 63
  • This article is a record of my journey to learn Game Deve...
    蔡子聪阅读 3,792评论 0 9
  • 背景和目的 本文的背景是《独立防线》(Killer)项目已进行到了一定阶段。虽然之前定下了UI制作规范,但中途也更...
    拥之则安H阅读 1,305评论 0 18
  • 111. [动画系统]如何将其他类型的动画转换成关键帧动画? 动画->点缓存->关键帧 112. [动画]Unit...
    胤醚貔貅阅读 13,043评论 3 90
  • 小云闭上眼睛,好像看到两位姑姑,还有故去的父亲,他们在恍惚中却清晰地闪现在眼前。小云睁开眼睛不见了他们,...
    田萍阅读 396评论 0 5