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

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. Java学习之参数传递详解

    Java中的参数传递问题: 基本类型:形式参数的改变对实际参数没有影响.在参数传递过程中,形参和实参占用了两个完全不同的内存空间. 引用类型:形式参数的改变直接影响实际参数.在参数传递的过程中,形参和 ...

  2. javascript之DOM对象

    document方法 document.createElement(Tag) :创建一个html标签对象 document.getElementById(ID) :获得指定ID值的对象 documen ...

  3. mysql数据库连接池使用(二)实现自己的数据库连接池

    上一个章节,我们讲了xml文件的解析框架XMLConfiguration的使用,不懂的可以参考 Apache Commons Configuration读取xml配置具体使用. 这个章节主要实现自己的 ...

  4. RecyclerView下拉刷新上拉加载(三)—对Adapter的封装

    RecyclerView下拉刷新上拉加载(一) http://blog.csdn.net/baiyuliang2013/article/details/51506036 RecyclerView下拉刷 ...

  5. Cocos2D iOS之旅:如何写一个敲地鼠游戏(四):创建TexturePacker自动脚本

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

  6. 如何在Cocos2D游戏中实现A*寻路算法(一)

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

  7. iOS中 常用的mac终端指令汇总 技术分享

    通常情况下,只有高端用户才会经常用到终端应用.这并不意味着命令行非常难学,有的时候命令行可以轻松.快速的解决问题.相信所有Mac用户都尝试过命令行,今天为大家带来9个非常实用的命令行操作.一些命令行需 ...

  8. Android开发-Listview中显示不同的视图布局

    1. 使用场景 在重写ListView的BaseAdapter时,我们常常在getView()方法中复用convertView,以提高性能.convertView在Item为单一的同种类型布局时,能够 ...

  9. 关于Class文件

    什么是Class文件 Java人对class文件肯定很熟悉了,它是Java源码编译后的产物.JVM运行时负责加载class文件,并根据class定义的执行逻辑运行.java为了将硬件底层的差异屏蔽掉, ...

  10. Bootstrap模板代码+页面自适应页面的案例代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...