超详细的基础教程传送门:(持续更新中)

Unity UGUI之Canvas&EventSystem:http://blog.csdn.net/qq992817263/article/details/51753844

Unity UGUI基础之Text:http://blog.csdn.net/qq992817263/article/details/51753864

Unity UGUI基础之Image:http://blog.csdn.net/qq992817263/article/details/51754189

Unity UGUI基础之Button:http://blog.csdn.net/qq992817263/article/details/51754381

Unity UGUI基础之Toggle:http://blog.csdn.net/qq992817263/article/details/51754442

Unity UGUI基础之Slider、Scrollbar:http://blog.csdn.net/qq992817263/article/details/51754463

Unity UGUI基础之InputField:http://blog.csdn.net/qq992817263/article/details/51754493

Unity UGUI的教程好少,幸亏找到一个UGUI的Demo,看了几个例子,以下是一些简单的学习笔记:

1.导入UI图片资源

2.设置参数:

TextureType(纹理类型) 精灵 2D and UI

SpriteMode(精灵模式)  Single(单)

multiple(多)

PackingTag(打包标签)

PixelsPer Unit(像素单位)  100(基本上都是100)

Pivot(枢轴)     Center(中间)

Custom(自定义)

GenerateMip Maps                 产生MIP映射(Mip映射 (Mip-mapping):Mip-mapping的核心特征是当物体的景深方向位置发生变化时,Mip映射根据不同的远近来贴上不同大小的材质贴图,比如近处贴512x512的大材质,而在远端物体贴上较小256*256的贴图。这样不仅可以产生更好的视觉效果,同时也节约了系统资源。)

FilterMode(过滤模式)             Point(点)

Bilinear(双线性)

Trilinear(三线性)

3. Canvas(画布)      创建一个画布

CanvasScaler(Script)      Ui Scale Mode        ScaleWith Screen Size(根据屏幕大小进行缩放)

4.Panel(面板)          创建一个面板/背景

Stretch(拉伸)点击图标有很多方式选择

Image图片需要经过1 2步才能选择图片后面有RawImage可以直接添加纹理

5.Text(文本)

LineSpacing            行间距

HorizontalOverflow        Wrap受限制

Overflow不受限制

VerticalOverflow             Truncate受限制

Overflow不受限制

6. Slider(滑动条)

Background  
背景

FillArea           滑动遮盖的区域

HandleSlide Area
滑块

Transition         (过渡)                Color Tint(颜色色彩)

SpriteSwap(精灵互换)

Animation(动画)

这些都是控制滑块的

WholeNumbers              整数

7. Scrollbar(滚动条)                         参照滑动条

8. Toggle(选择框)

IsOn                 表示是否选择状态

Group               为None表示多选框,不受限制,不为None表示在一个组内为单选框。

9. ToggleGroup(选择框组)

与8选择框结合使用,选择框里的Group赋值这个选择框组的话,就代表他们在同一个组内。

创建一个Panel,改名为ToggleGroup,移除Iamge和CanvasRenderer,添加一个组件Toggle
Group

10. InputField(输入文本框)

11. ScrollView(滚动视图)

创建一个Panel,改名为ScrollView,添加一个ScrollRect组件,再添加一个Mask(遮罩)组件。

在ScrollView下创建一个Panel,改名为Content,移除移除Iamge和CanvasRenderer,将Rect
Transform,改为以下的这个,设置高度。

在Content下,添加RawImage,在RawImage中添加一张图片

创建一个Scrollbar,与ScrollView同级

在ScrollView上,将Content组件拖在ScrollRect的Content中,将Scrollbar拖在Scroll
Rect的Vectical Scrollbar中

12.图片拖拽,从一个方格中拖拽到另外一个方格

需要拖拽的图片,加DragMe组件

被拖拽的区域,加DropMe组件

ContainerImage                       容器的图像    拖拽在上面改变颜色

ReceivingImage                        接收图像        改变拖拽的图像

13.图片拖拽,在一个区域内拖拽图片

Iamge绑定Drag Panel组件,表示可拖拽的物体,Iamge上一层Panel表示可拖拽物体的背景,Iamge上一层Panel再上一层Panel,表示当前可拖拽的区域范围

1表示最上层的panel,表示当前可拖拽的区域,2、3表示可以拖拽的物体,3表示鼠标点击拖拽的区域

14.页面布局

VecticalLayout Group             纵向布局

HorizontalLayout  Group     横向布局

GridLayout  Groud                 网格布局

LayoutElement                          布局元素

这些都是控制加载这些组件下的子物体

15.需要实现类似NGUI的ITween功能,用Animation实现

Unity UGUI的更多相关文章

  1. Unity UGUI —— 无限循环List

    还记得大学毕业刚工作的时候是做flash的开发,那时候看到别人写的各种各样的UI组件就非常佩服,后来自己也慢慢尝试着写,发现其实也就那么回事.UI的开发其实技术的成分相对来说不算多,但是一个好的UI是 ...

  2. Unity UGUI图文混排源码(三) -- 动态表情

    这里是根据图文混排源码(二)进一步修改的,其他链接也不贴了,就贴一个链接就好了,第一次看这文章的同学可以先去看看其他几篇文章 Unity UGUI图文混排源码(二):http://blog.csdn. ...

  3. Unity UGUI图文混排源码(二)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  4. Unity UGUI图文混排源码(一)

    Unity UGUI图文混排源码(一):http://blog.csdn.net/qq992817263/article/details/51112304 Unity UGUI图文混排源码(二):ht ...

  5. Unity UGUI实现图文混排

    目前在unity实现图文混排的好像都是通过自定义字体然后在文本获取字符的位置,用图片替换掉图片标签,这样对于支持英文来说,并没有什么影响.然后对于中文来说就是一个相当麻烦的事了,毕竟图文混排多用于游戏 ...

  6. Unity UGUI Layout自动排版组件用法介绍

    Unity UGUI布局组件 本文提供全流程,中文翻译. Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享 ...

  7. Curved UI - VR Ready Solution To Bend Warp Your Canvas 1.7,1.8,2.2,2.3 四种版本压缩包(Unity UGUI曲面插件),可以兼容VRTK

    Curved UI - VR Ready Solution To Bend Warp Your Canvas 1.7,1.8,2.2,2.3 四种版本压缩包(Unity UGUI曲面插件) 可以兼容V ...

  8. Unity UGUI鼠标穿透UI问题(Unity官方的解决方法)

    简述 最近在用UGUI的时候遇到了鼠标穿透的问题,就是说在UGUI和3D场景混合的情况下,点击UI区域同时也会 触发3D中物体的鼠标事件.比如下图中 这里给Cube加了一个鼠标点击改变颜色的代码,如下 ...

  9. Unity ugui屏幕适配与世界坐标到ugui屏幕坐标的转换

    我们知道,如今的移动端设备分辨率五花八门,而开发过程中往往只取一种分辨率作为设计参考,例如采用1920*1080分辨率作为参考分辨率. 选定了一种参考分辨率后,美术设计人员就会固定以这样的分辨率来设计 ...

随机推荐

  1. Cocos2D iOS之旅:如何写一个敲地鼠游戏(八):为动画建立属性列表

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请告诉我,如果觉得不错请多多支持点赞.谢谢! hopy ;) 免责申明:本博客提供的所有翻译文章原稿均来自互联网,仅供学习交流 ...

  2. Linux内核编译时会遇到的问题--缺少mkimage

    由于各大平台所带的内核不同,所以编译方式也不同,但方法都是大同小异. 但是,编译内核有时候会提示缺少mkimage这个命令,如何解决? 供应商提供内核的同时也会提供其它的一些,比如Uboot,root ...

  3. LiveBlox无需代码的开发工具--支持win macos ubuntu等开发环境--

    LiveBlox无需代码的开发工具-支持windows macos ubuntu. 强大 灵活 易于使用 视频简介:LiveBlox Develop Technology Without Coding ...

  4. C++对C的函数拓展 - 默认参数

    1 C++中可以在函数声明时为参数提供一个默认值, 当函数调用时没有指定这个参数的值,编译器会自动用默认值代替 void myPrint(int x = 3) { printf("x:%d& ...

  5. 新手学python(1):解析XML与系统调用

    最近需要做一个项目,完成一批音乐的格式转换.由于之前并未学习过python,所以想借此机会学一下.在介绍自己的学习过程之前,先把项目简要描述一下.目前在一台服务器a上有几十万首原始的MP3音乐文件,现 ...

  6. Web Service进阶(四)WebService注解

    @WebService 1.serviceName: 对外发布的服务名,指定 Web Service 的服务名称:wsdl:service.缺省值为 Java 类的简单名称 + Service.(字符 ...

  7. Android进阶(七)数据存储

    Android 数据存储 1访问资源文件 直接将文件保存在设备的内部存储. 默认情况下,保存到内部存储的文件为私有的,其他应用程序不能访问它们,当用户卸载应用程序时,所保存的文件也一并删除.  1.1 ...

  8. MySql下视图的创建

     (1).第一类:create view v as select * from table; (2).第二类:create view v as select id,name,age from ta ...

  9. Activity, Service,Task, Process and Thread之间的关系

    Activity, Service,Task, Process and Thread之间到底是什么关系呢? 首先我们来看下Task的定义,Google是这样定义Task的:a task is what ...

  10. TCP的ACK确认系列 — 快速确认

    主要内容:TCP的快速确认.TCP_QUICKACK选项的实现. 内核版本:3.15.2 我的博客:http://blog.csdn.net/zhangskd 快速确认模式 (1) 进入快速确认模式 ...