奥东......NGUI 基础(一) Atlas UIWidget UIAnchor Tween

参考地址:

http://tasharen.com/ngui/docs/class_u_i_widget.html  

http://blog.csdn.net/u012091672/article/details/17141171

http://www.taikr.com/course/34                           

 Atlas

制作Atlas:

     点击NGUI--open--Atlas Maker--new--鼠标选中应该制作的图片集合--create--存放到具体的位置

              生成三个文件

                             1  一个图片,所有图片的集合(也是个图片)

             2  一个Prefab,上面挂载一个UIAtlas的脚本

           3   一个材质,Prefab中的UIAtlas脚本中指定的材质

操作Atlas:

             选中对应Atlas的Prefab--NGUI--open Atlas Maker

                 删除不要的图片:就会显示当前图集中对应的图片集(Sprites),每一张图片都有X

                    添加新的图片:选中新的图片,或者更新过的图片--Add/Update

                 

 

UIWidget

UIWidget是NGUI的基础组件。

简单来说,就是一个你可以放在屏幕任意位置的矩形框。widget会有一定的面积(如下图的白色框范围),但是在运行的时候(Game View)是完全不可见的,所以非常适合当做其他组件的容器(让所有的sprite或者label等以它进行各种对齐)

  • 把鼠标放到矩形框里面来移动它的位置
  • 拖动蓝色圆点进行缩放
  • 鼠标放在蓝色原点外面一些,就可以旋转widget。按住shift可以微调(windows上是ctrl),默认是Pivot是中心原点
  • 加入collider就可以让这个区域接受事件。可以在这个widget上定位其他widgets,具体查看UIAnchor
  • 在给widget加了box collider之后,widget的inspector上会有一个新的选项:Box Collider。默认是勾选的,它会自动调整使得collider的size和widget的尺寸一样(dimensions)
  • 增加UIWidget的快捷键是alt+shift+w
  • Aspect选项中有可以根据高,或者宽作为一个基准进行调控宽高的比例,这样的话,以高做为基准的时候,只能调整宽的大小

Anchor

Target:当选中UIRoot的作为Target的时候,可以用一张图片作为自适应,这样背景图片在任何别的分辨率都不会发生变化

Type: None,Unified,Advanced(还没有好的案例,暂且记下)

Left,Right 影响X    Bottom,Top 影响Y

Target's Center: 是以中线点(中心点在不同的屏幕中是变化的)

适用: 解决背景,左上,右上,中间,底部具体位置的适应......

         屏幕左上角图片(地图,或者关闭图标)的在不同的屏幕上分辨率大小改变的时候,如何不添加Anchor,就会出现丢失一部分的情况

         这是因为当建立一个Sprite的时候默认是以屏幕中心点作为自己Transform中的position中x,y,z值的依据,当屏幕大小变换的时候,因为相对于中心点的位置不变,而且Widget中的Size也没有发生变化,这样就会出现图片不完整的现象

案例1:关闭按钮(屏幕右上角)的Anchor

         下图的设置,既保证图片的大小不会变,而且保证了图片的相对位置不发生变化

    

 

案例2:底部居中Anchor

          默认情况下,设置一个Sprite的X为0的话,在X方向上,不论屏幕如何变化,X轴部分始终是位于中间部分的,Y轴部分会发生变化

          解决思路: 上下的话以底部为Anchor就能够解决Y轴部分的变化,左右以中间点为Anchor 

          

Tween

补件动画

使用:比如在Scene场景中点击Label,鼠标右键点击,这里其实是在Widget的基础上添加的看下图可知

 

Alpha,Position,Totaion,Scale,Transform比较常用,下面说的是Alpha的例子

From:开始点

To    :  结束点

PingPong: 就是从From 到To,然后再返回来,从To到From

Animation: 点击之后,双击现有的图形,可以改变渐变的规律

Tween Group: Ignore TimeScale 默认就好,没有用到过,用到再说 

 

 Tip1:交互的前提

1 有碰撞体

2 有对应的脚本触发事件

例如:当给一个Sprite添加一个Box Collider之后,选中Sprite中容易就会有以下效果

         Sprite的Widget颜色变为浅蓝色,而且Widget中多了一个选项叫做Collider

posted @ 2014-11-06 20:02  奥东  阅读(393)  评论(0编辑  收藏  举报