ngui使用总结

1.1创建一个二维的界面

Anchor：用于定位的如上下左右等9个方位

Panel:是一个容器。包含ui小部件

2.添加部件

常见组件有：

2.1Label:文本组件， 需选择字体集

2.2Sprite：精灵，图片集  可通过Sprite,spriteName 设置图片  ，通过Depth来改变层级

2.3 Sliced Sprite：含有9个切片的sprite，创建固定边框的控件最佳选择

2.4 Tiled Sprite：一个sprite缩放填充真个区域

2.5 Filled Sprite:每个sprite都会有一个单独的参数来控制那些是可见的，常被用来做进度条或滚动条。

2.6 Simple Texture:简单的贴图材质，可以作为播放视频。

2.7 Button：按钮 选择图片集，进行一系列触发操作

UIButtonColor当鼠标悬停在按钮或者按下的颜色

UIButtonScale当鼠标悬停在按钮上时按钮放大。

UIButtonOffset当按下按钮时按钮像右下的位移。

UIButtonSound当按钮按下时播放声音。

UIButtonPlayAnimation：添加播放动画的目标动画（可以是物体，面板等）

UIButtonMessage：Target接收者， FunctionName  ，既点击该按钮触发target上指定      函数

UIButtonTween：按钮动画与UIButtonPlayAnimation很像，但是这个是激活target上的Tween脚本，使用这个脚本可以激活远距离的 TweenPosition, TweenColor, TweenRotation, TweenScale orTweenTransform 脚本  （注：ResetOnPlay设置为true。可以保持这个效果每次点击都存在）

2.8 ImageButton：图片按钮， 设置常规，悬浮状态，按下状态的图片  （Collider记得要触发）

2.9 CheckBox:复选框

1.点击蒙版用"X"，背景用"Dark"。

2.创建一个复选框后再选择Panel对象创建一个新GameObject。

3.添加更多的复选框到这个GameObject。

4.在这些复选框上选择Option项（为真表示默认选择）。

5.运行一下程序，点击复选框。看看效果。

因为选中了“Radio Button Root”参数之后你的复选框就会变成了单选按钮，并且他们通过同一个根目录放在了一组：就是那个你指定的Transform对象。  还可以附件一些其他事件处理功能，如UICheckboxControlledComponent 和 UICheckboxControlledObject。  可以用来由复选框状态来启用禁用指定的组件或者游戏对象。 你可以尝试着做3个复选框来控制红，绿，蓝三个控件的显示和隐藏

3.0 ProgressBar：进度条

3.1 Slider 滑块（水平，垂直）

3.2 Input 输入框  EventReceiver  和 FunctionName

3.3 Popup List 下拉列表框

3.4 Popup Menu 下拉菜单

3.5 ScrollBar 滚动条 （当内容很多是可以使用滚动条制作下拉效果)

屏幕自适应（大小与位置）

方法一：UIStrech

1. 创建一个新的UI，将Anchor里面的UIAnchor调整的合适的位置，注意最好将Anchor设置为Bottom。

2. 将Camera的Size调节到默认屏幕大小。比如UI是以960*0分辨率制作的，那么将Camera的Size调整到960。

3. 在Panel上面添加一个UIStretch，模式选择BasedOnWidth。完成之后你可以看到你的Panel的Scale被修改到了当前屏幕的X方向分辨率大小。

4. 将UI控件添加到Panel上，调整位置，在Panel下的所有控件都会以X方向为标准做等比缩放来适应屏幕大小。

5. 添加一张作为背景的图，将UISprite的anchor设置为Bottom，添加之后你可以看到这个sprite可以在不同的分辨率下自适应了。

为了将UIStrech挂在UIPanel上不出问题，所以z轴也缩放，则改变UIStrech的代码

if(style == Style.BasedOnWidth)

{

    localScale.x = relativeSize.x * screenWidth;

    localScale.y = relativeSize.y * screenWidth;

    localScale.z = localScale.x;

}

方法二：自己编写自适应脚本代码（当前屏幕为904*502）

if (ifchangePosition) {

            transform.localPosition = new Vector3 (transform.localPosition.x * Screen.width / 904, transform.localPosition.y * Screen.height / 502, transform.localPosition.z);

        }

        if (ifchangeScale) {

            transform.localScale = new Vector3 (transform.localScale.x * Screen.width / 904, transform.localScale.y * Screen.height / 502, transform.localScale.z);

        }

NGUI控件的位置控制

Anchor:即瞄点可以定位到9个固定位子的哪一个

Offset:既可以在这个定位区域中进行适当的偏移，offset的子物体可以存放组件

NGUI中动画的制作（NGUI ->Tween)

其中有颜色，位置，旋转，大小等的改变

NGUI中ScrollBar的使用

滑动条组件

滑动条所在的面板

填充的内容需要加上BoxCollider 和UIDragPanelContents脚本

填充内容的网格，添加脚本UIGrid

需要滑动的内容的面板，需要添加UIDraggablePanel脚本

根部空物体

Clipping需要设置为softClip。

面板位置，大小，羽化程度

设定沿那个方向滑动

设置每一个单元的大小

设置值从0-1，初始值从0开始

设置移动条的大小

其中各部分对齐方式:内容面板和scroll面板要大小差不多，而且ScrollBar的面板不能在内容面板内部

紫色表示：内容面板；橙色表示：UIGrid，青色表示：Item;最下面是scrollBar面板

2.鼠标屏幕点击物体使其改变状态

Ray ray = Camera.main.ScreenPointToRay(Input.mousePostion);   //有鼠标位置发射一条射线

RaycastHit hit;

If(Physics.Raycast(ray, hit))   //射线检测到碰撞体

{

    If(hit.collider,name ==...){  ...  }

}          

3.鼠标拖动物体旋转，移动，放大(缩小)

鼠标拖动物体移动

//将物体的世界坐标系转换为屏幕坐标系

Function OnMouseDown()

{

   Vector3 ScreenSpace = Camera.main.WorldToScreenPoint(transform.position);  

//1由于鼠标的坐标系是2维的，需要转化成3维的世界坐标系，2只有三维的情况下才能来计算鼠标位置与物体的距离，offset即是距离 

 Vector3 offset = tranfrom.position - Camera.main.ScreenToWorldPoint(new Vector3(Input.mousePosition.x, Input.mousePosition.y, ScreenSpace.z));

While(Input.GetMouseButton(0))  //循环重要，因为一直拖动

{

//得到现在鼠标的二维坐标位置

   Vector3 curScreenSpace = new Vector3(Input.mousePositon.x, Input.mousePositon.y,Screenspace.z);

将鼠标的二维位置转化成三维的位置，再加上鼠标的移动量

Vector3 curPosition = Camera.main.ScreenToWorldPoint(curScreenSpace)+offset;

Transtrom.position = curPositon;

}

鼠标拖动物体旋转

版本一：

//transform.rotation = Quaternion.Euler(y, x, 0);   //Quaternion:四元数，只要涉及到模型旋转的就要用到这儿工具类，及设置旋转的角度

Transform.eulerAngles : 旋转作为欧拉角度

Void OnMouseDown()

{

Camera camera = Camera.mainCamera;

If(camera)

{

 //一般指旋转物体的中心点或鼠标围绕某个旋转的中心

Vector3 ralativePoint = camera.WorldToScreenPoint(transform.position);

//鼠标操作时只用x.y轴。可以忽略z轴

relativePoint.z = 0;

//鼠标按下时的方向向量，作为拖拽起始参考向量, 鼠标与物体之间的距离

Vector3 relativeDirection = Input.mousePosition - relativePoint;

手势滑动时旋转方向：1：顺时针； -1：逆时针

Int flingDir = 1;

//最后倒数第二个方向的角度，用于比较最后旋转方向

Float last2Angle = 0;

//对象原始角度

Vector3 originAngles = transform.eulerAngles;

Quaternion originRotation = transform.ratation;

//旋转总角度

Float sumAngle = 0;

While(Input.GetMouseButton(0))

{

//当前旋转角度

Vector3 currentDirection = Input.mousePosition - relativePoint;

//0--180正角度，不适合拖拽旋转

//float currentAngle = Vector3.Angle(relativeDirection, currentDirection);

//有正负角度，可做鼠标跟随旋转角度

Float currentSignAngle = SignAngle(relativeDirection, currentDirection);

//离上次角度偏移量

Float offsetAngle = currentSignAngle - last2Angle;

flingDir = currentSignAngle - last2Angle > = 0? 1:-1;

//总计正方形旋转角度

If(offsetAngle > 0)

{

sumAngle+= offsetAngle;

}

Last2Angle = currentSignAngle;

Transform.eulerAngles = originAngles + originRotation*direction*currentSignAngle;

}

}

版本二：

Vectro2 angels = transform.eulerAngles;

X = angles.x;

Y = angles.y;

If(rigidbody)

{

rigidbody.freezeRotation = true;  //刚体是否旋转

}

Void Update()

{

  If(target && Input.GetMouseButton(0))

{

   X += Input.GetAxis(“Mouse X”)*xspeed*0.02f;    //得到x轴方向移动的大小

Y -= Input.GetAxis(“Mouse Y”)*yspeed*0.02f;   //得到y轴方向移动的大小

Y = ClampAngl(y, yminlimit, ymaxlimit);

Quaternion rotation = Quaternion.Euler(y, -x, 0);

Vector3 position = rotation*new Vector3(0.f, 0.f, -distance) + target.postion);

Transform.rotation = rotation;

Transforn.position = positionl

}

}

float ClampAngle(float angle,float min,float max)

    {

     if(angle < -360)

        {

            angle += 360;

        }

     if(angle > 360)

        {

            angle -= 360;

        }

        return Mathf.Clamp(angle,min,max);

    }

鼠标滑动放大缩小物体

Xscale = obj.transfor.localScale.x;

If(Input.GetAxis(“Mouse ScrollWheel”)>=0.1 || Input.GetAxis(“Mouse ScrollWheel”) <= -0.1)

{

 X += Input.GetAxis(“Mouse ScrollWheel”)*5000;

If(x < min) x = min;

If(x >= max) x = max;

obj.transform.localScale = Vector3(Xscale+x, Xscale+x, Xscale+x);