uGUI练习(一) Anchor

一.练习步骤如果用过NGUI的Anchor,我们知道在2.x的版本有UIAnchor组件(下图左),3.x版本中,每个UIWidget有自带的Anchors(下图右) 而uGUI的Anchor用起来也一样很直观,简单易使用. 1.创建一个新场景,我们创建一个UI/Button ——>——> 2.创建完成后,观察Scene中的情况 3.Inspector截图,注意图中框选的部分,对于Anchor很有用. 4.在Scene里拖动Button(注意:拖动浅白色圆圈,而不是) 通过上面的拖动观察,我…

Unity ugui Anchor锚点自动适配画布中的相对位置

本随笔参考了以下博客,在此基础上进行优化和改进: https://blog.csdn.net/qq_39640124/article/details/88284191 ugui中的Anchor预设如下: 允许我们快速对齐父物体的一部分轴向顶点或边,但有时我们并不是要对齐这些,而是需要对齐特定位置的某个点,例如: 如上图,上面的作战结束之后的等级信息B它应该是对齐父物体面板的什么位置呢? 当然了,你可以简单的将它设置为对齐屏幕右侧中点或者右上,那么此时无论屏幕分辨率如何改变,它的锚点Pivot距离…

uGUI练习开篇

一.准备阶段 1.Unity 4.6 Beta b18或更高版本(注:目前泄露版的Unity5.0Beta 对UI的支持并没有4.6 Beta那么好) 2.了解 Unity 2D Sprite的基础知识及操作(包括Sprite Packer及Sprite ),可参考我之前的文章: Unity4.3 2D工具的简单使用教程 Unity4.3 Sprite Packer用法介绍 3.熟悉NGUI操作更佳,可参考http://game.ceeger.com/forum/index.php?m=spa…

U3D UGUI学习3 - RectTransform

总的来说整合了NGUI很多零散功能,比如NGUI2.X处理拉伸要额外套脚本,NGUI3.X开始引入新的锚点.再加上依赖BoxCollider使得整个HUD显示非常乱而UGUI很清晰明了,你也能看清楚拉伸怎么设置. 但也有一些误导性的设计以及不人性化的设计. 1.Anchor RectTransform相交于NGUI,其实稍显复杂.在NGUI 3.x里你要处理拉伸可以直接设置Anchor锚点模式,也可以挂全屏拉伸脚本. 并且,NGUI里你可以设置任何节点作为父节点,而UGUI里你只能设置上一级作…

【转】UGUI VS NGUI

原文:http://gad.qq.com/college/articledetail/7191053 注[1]:该比较是基于15年-16年期间使用NGUI(3.8.0版本)与UGUI(4.6.9版本)所得注[2]:仅对工作中经常接触到的功能做总结,如有疏漏,欢迎指正讨论渊源先来段小八卦,听说UGUI的主创人员是从NGUI招过去的,所以,UGUI中有很多概念,对于用过NGUI的童鞋来说,看起来都似曾相识. 先来个概念对比: NGUI UGUI 锚点 Anchor RectTransfor…

Unity3D之UGUI学习笔记（二）：Rect Transform与Anchor

Rect Transform 我们都知道,Unity3D中所有的GameObject都必须要携带一个Transform组件,且该组件无法移除,那么作为UI显示的GameObject则不是携带Transform而是使用Unity3D专门为UI组件设计的Rect Transform组件,如下: 另外说一下,Canvas Renderer也是UI组件必须携带的组件. 我们来看一下其为我们提供的功能: 位置位置是以像素为单位,其具体的值则以锚点为准,表示和锚点距离,其中x轴从左到右的数值越来越大,y轴…

UGUI Set Anchor And Pivot

我的环境 Unity 5.3.7p4 在运行时动态的设置UI元素的锚点和中心点. 设置Anchor 修改offsetMax不生效使用下面这段代码设置Anchor并不会生效,尽管他和你在属性面板看到的值是一样的. retRoot.offsetMin = Vector2(0,0) retRoot.offsetMax = Vector2(0,0) SetInsetAndSizeFromParentEdge 使用SetInsetAndSizeFromParentEdge函数来进行设定.此函数不受锚点和…

【Unity笔记】UGUI物体的Rect Transform组件（Pivot中心点，Anchor锚点）

Pivot:自身中心点,图标是小蓝点.表示图片以哪个点来计算坐标值.默认在UI元素的几何中心点(0.5, 0,5). Anchor:锚点,图标是四个小三角形.表示该UI元素以父物体的哪个位置作为缩放参考,锚点不能选在父容器外面.父物体缩放时,影响到子物体的缩放,锚点4个点分开时,图片四个顶点距离锚点的距离,在伸缩时保持不变,控制锚点位置来控制缩放方式. PosX,PosY:自身中心点以锚点为原点的坐标值(依据锚点来设置位置的),必须锚点4个小三角合并在一个点上才出现该属性. Left,Right…

uGUI Anchor

Anchor定位:inspector面板的Rect Transform组件中PosX左边的方框图标就是设置锚点的,做界面自适应时可定位控件在视图中的位置,与NGUI类似.Anchor+Canvas的Canvas Scaler即可实现自适应屏幕分辨率,Canvas Scaler根据当前屏幕分辨率缩放UI,Anchor进行定位.…

Unity UGUI——Rect Transform包裹（Anchor Presets）

unity，set ugui rectTransform anchor by script

如果想用代码实现与下面面板相同的功能试验可知改变上面选项下面四个值也随之变化: 所以说明二者是一回事儿. 因此,只要通过代码修改RectTransform的anchorMax和anchorMin成员即可.…

UGUI

http://www.2fz1.com/post/unity-ugui-recttransform/ //this.transform.position 获取的是世界坐标,而 this.transform.localPosition 获取的本地坐标,localPosition不受 Anchor 影响//一般我们更常用的是 localPostion ,比如 UGUI中,posX, poxY, poxZ 就是通过 localPosition 设置和获取的.//这两个在新手很容易误用//此外,还有屏幕…

Unity3d uGUI适配

Cavas: 1.Render Model设置为:Screen Space- Camera.如果想在UI前面加特效我可以在创建一个摄像机(UIForward)深度大于这个UICamera就行了. 2.Canvas Scaler: (1)UI Scale Mode :设置Scale With Screen Size 表示以宽度为标准缩放: (2)Reference Resolution设置设计分辨率,美术出图根据这个设置出: (3)Screen Match Mode 选择 Expand 这个就是U…

Unity进阶技巧 - 动态创建UGUI

前言项目中有功能需要在代码中动态创建UGUI对象,但是在网上搜索了很久都没有找到类似的教程,最后终于在官方文档中找到了方法,趁着记忆犹新,写下动态创建UGUI的方法,供需要的朋友参考你将学到什么? 如何设置UI的缩放模式和尺寸如何添加UI动画效果如何使用Button的基本响应事件如何动态创建UGUI对象一.新建一个Test项目首先我们新建一个名为Test的项目来实践我们这次的内容,项目创建成功后,我们新建一个Button对象,如下图: 新建Button对象新的UGUI全部都基于一…

高大上的uGUI正式版发布了

uGUI发布啦本周期待已久的New UI System 发布了,因为这段时间项目是开发期,所以比较忙,也就没过多关注新UI了,趁着周六日有空,来瞅瞅这高大上的New UI System. PS:我也还没来得及深入学习新的UI系统,待项目上线后我要好好研究研究uGUI的源码. 记录一下 UI Project 示例教程 Asset Store:https://www.assetstore.unity3d.com/en/#!/content/25468 4.6下载地址:http://unity3d.…

uGUI VS NGUI

前言这篇日志的比较是根据自己掌握知识所写的,请各路大神多多指教. 引擎版本: Unity 4.6 beta 两者区别 1.uGUI的Canvas 有世界坐标和屏幕坐标 2.uGUI的Button属性面板的的OnClick 3.uGUI的Image可以使用 material 4.uGUI通过Mask来裁剪,而NGUI通过Panel的Clip 5.NGUI的渲染前后顺序是通过Widget的Depth,而uGUI渲染顺序根据Hierarchy的顺序,越下面渲染在顶层. 6.uGUI 不需要绑定Col…

uGUI练习(六) ScrollView

练习目标练习uGUI的滑动组件一.相关组件 ScrollRect Mask Grid Layout Group Scrollbar 二.步骤 1.创建一个Panel,命名为ScrollRect,添加 ScrollRect组件 2.在ScrollRect下创建一个子Panel,命名为Grid,添加Grid Layout Group 组件 3.在Grid下,创建一个Image,按Ctrl+D ,Copy出多个Image 4.在Scene视图,可以看到Image的排列(注意:排列成了两行) 5.让…

用uGUI开发自定义Toggle Slider控件

一.前言写完<Unity4.6新UI系统初探>后,我模仿手机上的UI分别用uGui和NGUI做了一个仅用作演示的ToggleSlider,我认为这个小小的控件已能体现自定义控件的开发过程.由于手头上没有mac版,暂时未能真机测试,PC上的效果如下: 二.制作过程完整工程托管于github,分为uGui和NGUI两个project.考虑到版权问题,工程里不含NGUI,同学们需自行将NGUI导进工程.NGUI需要Unity 4.5,uGui需要Unity 4.6. 三.功能点滑块可以拖动,从…

Unity4.6新UI系统初探(uGUI)

一.引言 Unity终于在即将到来的4.6版本内集成了所见即所得的UI解决方案(视频).事实上从近几个版本开始,Unity就在为这套系统做技术扩展,以保证最终能实现较理想的UI系统.本文试图通过初步的介绍和试用,让读者对这套系统有大体的了解,以便更进一步评估这套UI系统好不好用,适合用在什么项目.为了避免坑挖太深,更进一步的试用和评估我将在<用uGUI开发自定义Toggle Slider控件>中进行论述.为论述方便,下文将这套New UI System简称为uGUI,并且以X-UI指代现有第三…

转：UGUI与NGUI的区别与优缺点

1. NGUI与UGUI的区别 1) uGUI的Canvas 有世界坐标和屏幕坐标 2) uGUI的Image可以使用material 3) UGUI通过Mask来裁剪,而NGUI通过Panel的Clip 4) NGUI的渲染前后顺序是通过Widget的Depth,而UGUI渲染顺序根据Hierarchy的顺序,越下面渲染在顶层. 5) UGUI 不需要绑定Colliders,UI可以自动拦截事件 6) UGUI的Anchor是相对父对象,没有提供高级选项,个人感觉u…

UGUI表情系统&超链接解决方案

最近帮一个同事解决图文混排的问题,发现了一种犀利的UGUI表情系统的解决方案 https://blog.uwa4d.com/archives/Sparkle_UGUI.html 使用重新生成UGUI文字Mesh的方式来支持表情图片.在Shader中判断是否有第二个套UV传入来渲染表情,动态表情也在GPU端计算~ 可以合并DrawCall,支持UGUI的遮罩.自适应等等我在原作者的基础上扩展了一些改进,使其能支持超链接超链接的思路是先计算出超链接的顶点包围盒,监听到点击事件的时候,跟超链接包围…

Unity UGUI图文混排(五) -- 一张图集对应多个Text

继上一篇说的更新了一张图集对应多个Text的功能,为了节省资源嘛这里,但是也没有舍弃之前的一个Text一个图集,因为我感觉应该两个都有用,于是我重新写了一个脚本 1.其实大体跟前面的都没变,解析标签,获取表情的相关数据,这里只是将绘制图片的功能,移植到SpriteGraphic上,本地增加了一个刷新图片绘制信息的函数. 麻烦的是去找到SpriteGraphic绘制图片,也是因为这个感觉有很大的潜在问题,不过基本能用,具体看脚本 using UnityEngine; using UnityEng…

具体分析UGUI中RectTransform

一:RectTransform 组件 1.Transform 组件是所有的游戏物体必备的一个组件,且不可删除,不可隐藏.就算是一个空物体,也是具备 Transform 组件的. Unity3D4.6 版本开始,Unity 引擎内出现了一个自己的完整 UI 系统.在此之前,国内 90%以上的 Unity 项目,项目 UI 界面都是使用 NGUI 插件制作的.Unity 官方在推出 UGUI 系统后,针对 UI 游戏物体,创建了一个新的基础组件:RectTransform,这个组件是基于 Trans…

关于unity3dGUI（uGUI）的一些自适应的收获，在这里跟大家分享一下

假设大家要转载这篇文章,请注明出处.本人名字叫赖张殷,博客地址为http://my.csdn.net/?c=674f97f953e5dbfdba9fefaa3d1fcbe1 //2017年5月12日改动.添加链接原文链接:mod=viewthread&tid=103675&pid=1433481&page=1&extra=page%3D1#pid1433481">http://www.manew.com/forum.php? mod=viewthread&…

[UGUI]图文混排(二)：Text源码分析

UGUI源码: https://bitbucket.org/Unity-Technologies/ui/downloads/?tab=tags 首先下载一份UGUI源码,这里我下载的版本是5.3.2f1.然后找到Text.cs,里面有方法OnPopulateMesh,这个方法会修改文字的顶点.而图文混排,涉及到顶点数据的修改.因此,我们的重点就是对这个方法进行修改,这里给出一个最简单的重写版本,它和普通的text是一样的.Text的渲染过程是由TextGenerator产生顶点数据,配合字体产生…