UGUI学习笔记

这段时间学习了下Unity的新GUI系统——UGUI，个人感觉还是挺好使用的，相较于其他GUI插件而言，是自带的UI插件系统，无需自己另外导入。由于前面学习过NGUI所以，学习UGUI时上手较快。         学习路线：         1.认识基本控件         2.游戏开始案例学习         3.游戏菜单界面案例学习         4.角色面板和背包系统案例学习         5.关卡选择系统案例学习 做UI界面，个人感觉就是按照效果图拼图片 知识点笔记： 1.认识基本控件   上图所示就是UGUI里面的一些基本控件，所有的UI控件都需要放到一个Canvas上显示,UI上的一些监听事件放到了Event System上，所以当你找不到要使用的监听事件时可以using UnityEngine.EventSystems; 在脚本中我们获取UI里面的这些控件时需要using UnityEngine.UI;这些需要自己手动导入。 案例学习： 制作一个公告栏   用鼠标或者右边的滚动条可以滚动文本信息内容。 学习点： 1.如何做出有滚动功能的文本区域  如上图所示中，浅灰色区域是文本显示区域，所以我们使用一张Image当作文本显示区域，用其他控件如Empty GameObject也可以，在背景上再添加Text，Text的大小需要容纳所有的文字内容，否则会不显示大小之外的内容。     由于我们运行时是不能让超出显示区域的内容显示出来的，所以我们需要在当作显示区域的控件上挂载一个Mask，将超出的区域遮盖不显示。并在其上面添加Scroll Rect，并制定Scroll Rect的Content为文本Text控件，即可实现文本区域的滚动。     注意由于我们上面当作显示区域的Image有自己的背景如果不需要背景，可以选择Mask上面的Show Mask Graphic属性设为false。     要将滚动条和滚动区域联系起来的话我们只需将Scroll Rect的Scroll bar属性制定相对应的控件即可。 Scroll Rect的Horizontial和vertical分别可以指定滚动的方向。 2.Button的触发 在UGUI里面设置Button的触发非常的可视化操作   自带有On Click()只需要将触发指定好对应的控制函数即可，如果函数有参数的可以自己指定值，并且可以添加多个触发处理，点击上图中右下角的+即可。  其他的基本控件基本都有自己的On Click()或者On Value Change()方法，指定对应的触发函数即可。  游戏开始界面学习：   学习点： 1.快捷键使用： 在创建背景图片时，   按住shift和Alt就会出现可以选择平铺满整个界面的选项。 UI组件拉伸的快捷键：   一般2d的UI界面都是使用此操作模式，方面UI组件的拖拽 拉伸， 按住shift即可按比例对组件拉伸； 按住shift拉伸选定，再按住Alt即可以中心点按比例拉伸； 2.Anchor锚点学习   这个实际上是UGUI里面的锚点系统，即使用相对位置来适应屏幕的大小变化，因为发布出去之后，每个人手机屏幕大小不一所以需要使用锚点来适应不同屏幕大小。上图中的交点就是选定相对位置的点。 3.控件的叠放次序 在UGUI里面组件的叠放是按照组件的次序来叠放的，在排在后面的组件在最上层，最前面  组件在最下面。 其他内容就是用各种Image和Text，Button控件来拼UI。  游戏菜单界面学习：    1.Image属性的学习 simple,原属性 sliced,九宫格 在九宫格中，四角不会被拉伸，左右边上的只能上下拉伸，上下边上的只能左右拉伸，这样是防止在拉伸时图片边界变模糊 tiled,平铺的，按照原图片属性平铺控件区域  filled   填充的，可以选着显示图片的某一部分 2. 体力进度条制作 这里采用slider 和filled属性的Image制作， 原理就是两层一样大小的图片叠放到一起，底层的作为背景图片（图中的黑色） 用slider的Fill Rect属性指定填充的图片（绿色图片）Image设定为Filled属性，并指定好图片填充的方向（竖直，水平，旋转）。 3.技能冷却效果   原理：在做好技能图标之后，在最外层用一层暗灰色的图片遮盖，设置该图片是旋转方向填充，初始值为0，点击技能图标或者按下快捷键之后，设为填充为1，按照走过的时间占冷却时间的比例显示暗灰色图片的显示比例。 void Update () { if (Input.GetKeyDown (keyCode)) {//检测按键触发 isColdTime=true; } if (isColdTime) {//判断是否进入冷却计时 timer += Time.deltaTime; filledImage.fillAmount=(coldTime-timer)/coldTime;//设置填充比例 if(timer>coldTime){ filledImage.fillAmount=0; timer=0; isColdTime=false; } } }   角色面板和背包系统学习：    学习点： 1.背包切换功能学习： 此处用到的是Toggle切换： 当选定时是True，不选定时是false  实现原理： 将各个页面的面板触发放置到Toggle的true和false上面，   根据Toggle值得改变调用相对应面板的SetActive函数，控制显示和不显示。 将多个Toggle放置到一个Toggle Group里面，保证每次只能一个被选定。 这样就可以实现背包切换。 2.背包格的设定 采用了Grid Layout，Grid会按照设定的每个格子的大小对于其上面的子物体进行布局显示。 技巧：在制作类似背包格之类的东西时，将所有的组件放置到一个Empty GameObject上面，这样在Grid中格子进行大小调节时，拉伸的是  Empty G ameObject物体，而对于里面的组件比例不会产生影响。按照 Empty GameObject的大小作为一个个格子的大小空间进行布局，也就能够实现各个格子间的空隙效果。   关卡选择界面学习：   学习点： 关卡列表按照页数进行滑动： 依旧是采用scroll rect  算法思想;  图上的例子是分为四页，第一页horizontalNormalizedPosition坐标属性为0，最后一页为1，所以计算可得第二页在0.3333，第三页在0.6666。因此只需要在每次滑动之后检测滑动所处在的 horizontalNormalizedPosition 坐标和 那一个页面最为相近，然后设置慢慢滑动到该页面显示即可。 void IEndDragHandler.OnEndDrag (PointerEventData eventData)//拖拽检测事件 { int index = 0; float posTemp = scrollRect.horizontalNormalizedPosition; float offset = Mathf.Abs (posTemp - pageArray [index]);//默认初始拖拽完后为和第一界面最为相近 for (int i=1; i<pageArray.Length; i++) {//一次遍历，找出拖拽完成后最为相近的界面 float offsetTemp = Mathf.Abs (posTemp - pageArray [i]); if (offsetTemp < offset) { index = i; offset = offsetTemp; } } targetHorizontalPosition = pageArray [index];//设置滑动完成后的最终移动到的坐标 isDrag = false; toggleArray [index].isOn = true;//页面和下方对应的Toggle相对应 }   void Update () { if (!isDrag) {//滑动操作完毕 scrollRect.horizontalNormalizedPosition = Mathf.Lerp (scrollRect.horizontalNormalizedPosition, targetHorizontalPosition,                                                       Time.deltaTime * speed);//实现界面的缓缓滑动Mathf.Lerp 插入值 } }   点击下面的Toggle显示关卡界面和前面的背包实现功能类似，触发传递的是一个bool参数，为true时，设置最终要滑动到的页面坐标即可。  Polaris_Aspire ——爱生活，乐分享