C#程序员整理的Unity 3D笔记(十七):EasyTouch 4.X User & API documentation

What’s new in EasyTouch 4

· Unity UI integration.

UGui集成

· EasyTouchTrigger component, that allow you to call existing functions with out a line of code relative to an EasyTouch event.

EasyTouchTrigger组件,不用写一行代码就可以调用存在的方法

· New two finger gesture algorithm.

新的双手指手势算法

· The simulation of the second finger can be activated or not

第二手指模拟可以被激活或禁用

· 2 methods for two fingers auto selection Finger & Average

双手指有两个方法自动选择手指或者评价值

· The double tap is now configurable.

双击可以配置

· Gesture priority between tap & slips.

单击和滑动手势优先

· 4 new build in swipe direction UpLeft, UpRight, DownLeft , DownRight

在滑动方向上4个新设计:左上,左下,右上,右下

· Auto update picked object option

自动更新选择对象的选项

· tmpArray of touches is now cached to prevent garbage collector.

缓存中高级临时数组使用预防垃圾清理

· New inspector style

新检视面板的样式

features no longer supported

· EasyJoystick & EasyButton are no longer supported, they are replaced by Easy Touch Controls

EasyJoystick & EasyButton不在支持,被Easy Touch Controls代替。

· Reserved area are no longer supported, the new Unity UI is more flexible

保留区不在支持,新的UGUI更灵活。

· Message sending via the internal management system in Unity for javascript user has been replaced by the component EasyTouchTrigger.

Unity自带的消息机制被EasyTouchTrigger.组件代替。

What is EasyTouch

EasyTouch allow you to quickly and easily develop actions based on a touchscreen or a mouse gesture. All major gestures are recognized such as touch, tap, double tape, twist, pinch.. and much more.

EasyTouch允许您快速轻松地开发基于触摸屏或鼠标手势的行为。

EasyTouch allows automatic detection of all gameobjects with collider on layers that you can set. To allow easy handling of the various elements that make up your scene

在预先设置的层上,EasyTouch自动检测所有gameobjects的碰撞体。很容易处理组成你的场景的各种元素。

EasyTouch is written in C# , it notifies you of an action on the touch screen or with mouse by firing events. The events are sent by delegate system for C #, or you can use EasyTouchTrigger component is you are not familiar with events.

EasyTouch是用c#编写的,它通知你在触摸屏或鼠标的行为是通过触发事件。发送事件可以通过C#的委托,也可以通过EasyTouchTrigger组件中所不熟悉的事件。

Each event passes a parameter class, with all the informations about the current action (position, angle, picked object …)

每个事件传递一个参数类,包含当前行为的所有信息。

Quick start

· Import EasyTouch package

· Right click on hierarchy view => EasyTouch => Add EasyTouch

· Create a new C# script MyFirstTouch

· Add these methods

// Subscribe to events

void OnEnable(){

EasyTouch.On_TouchStart += On_TouchStart;

}

// Unsubscribe

void OnDisable(){

EasyTouch.On_TouchStart -= On_TouchStart;

}

// Unsubscribe

void OnDestroy(){

EasyTouch.On_TouchStart -= On_TouchStart;

}

// Touch start event

public void On_TouchStart(Gesture gesture){

Debug.Log( "Touch in " + gesture.position);

}

· Create an empty gameObject, and name it Receiver.

· Add MyFirstTouch script to the gameObject Receiver.

· Run it in editor, and click on the screen

Quick start with auto-selection

· Import EasyTouch package

· Right click on hierarchy view => EasyTouch => Add EasyTouch

· Create a new C# script

· Add these methods

// Subscribe to events

void OnEnable(){

EasyTouch.On_TouchStart += On_TouchStart;

}

// Unsubscribe

void OnDisable(){

EasyTouch.On_TouchStart -= On_TouchStart;

}

// Unsubscribe

void OnDestroy(){

EasyTouch.On_TouchStart -= On_TouchStart;

}

// At the touch beginning

public void On_TouchStart(Gesture gesture){

// chack that we have touched the sphere

if (gesture.pickedObject == gameObject)

gameObject.renderer.material.color = new Color( Random.Range(0.0f,1.0f), Random.Range(0.0f,1.0f), Random.Range(0.0f,1.0f));

}

· Create a sphere and assign it a simple diffuse material

· Add script on the sphere

· Run it in editor, and click on the screen

EasyTouchTrigger

EasyTouchTrigger is a new component that allow you to easily & quickly use EasyTouch.It can be used instead or in addition to the conventional method by C# event.

This component allows you to call functions on GameObjects according EasyTouch events without writing a line of code.

How does it work?

ETT allows you to define the object which will receive a gesture and the object on which you want to execute a function. You still have to specify the function name, and if necessary the parameter to send.

How to use ETT (Look at video on Youtube)

· Select the gameobject to interact with the touch screen, or one that will serve as a scheduler. You can add as many as you like EasyTouchTrigger.

选择gameobject与触摸屏交互,或者将作为调度器。您可以添加多个你喜欢的EasyTouchTrigger。

· Add ETT component with Add Component button => Event => EasyTouch Trigger

 

· The component is now active on your gameobject

· You can now add EasyTouch event by clicking on Add new event. A context menu will display all available events

EasyTouchTrigger Inspector

Enable + T rigger Name

Enables or disable this trigger

启用或禁用 触发器名称

Restricted to gameobject

对象限制

Enable The beginning of the gesture must be on the current gameobject to trigger the action.

启用:必须在当前对象上开始触发动作。

Disable

GameObject

Sets the selectable gameobject which will receive the start of the gesture to trigger the action.

选择一个开始触发动作的对象

Null The action will be triggered in all cases

NULL:在所有情况下都将触发的动作

Other receiver

Disable

The message will be sent to the gameobject current.

禁用:消息将发送给当前对象

Enable

Sets the gameobject which will receive the message

启用:设置可以接收消息的对象

Method name

The public function to call

调用方法的名称

Parameter to send

The property of the gesture class to send

以参数形式发送的手势的属性

EasyTouch Inspector

Enable EasyTouch

Enables or disables EasyTouch. No events will be fired if EasyTouch is disabled

启用或禁用EasyTouch。禁用时,所有事件不被触发。

Enable Unity Remote

Enabled this option if you want to test multi-finger on Unity Remote. (Don’t forget to remove this flag before your final build)

在Unity Remote上测试多个手指

GUI Compatibility

Allow you to setup the behaviour of EasyTouch with NGUI & Unity UI

Automatic selection

Allow you ti setup the auto-seleciton.

General gesture properties

Allow you to setup simple gesture

Two fingers gesture properties

Allow you to setup two finger gesture

Second finger simulation

Allow you to setup the second finger simulation

GUI Compatibility

Enable Uniyt UI detection

Enables or disables detection of selectable UI Element

启用或禁用可选择的UI元素的检测情况

Unity UI compatibility

UGUI兼容性

Enable EasyTouch doesn’t fire gesture events if touch is over a UIElement.

启用:如果触摸UIElement,EasyTouch不触发手势事件。

Disable EasyTouch fires gesture events, and set isOverUIElement to true for gesture class

禁用:触发手势事件,会设置gesture类中的isOverUIElement属性值为true。

Auto update picked Unity UI

Enable EasyTouch update UI data at each frame

启用EasyTouch每一帧更新UI数据

Enable NGUI Compatibility

Enable detection of NGUI object relative to NGUILAyers & Camera. EasyTouch doesn’t fire gesture event if touch is over NGUI Object.

触摸NGUI不触发任何事件

NGUI Layers

Layers mask for NGui object

所在层

Camera

All cameras for NGui detection

所用摄像机

Automatic selection

Enable auto-select

enables 3D object detection under the touch relative to the setting.

启用3D对象检测

pickable layers 3D

Layer mask for selectable objects.

检测3D对象的层

Auto update picked gameobject

EasyTouch update picked object at each frame

每一帧更新选择的对象

Enable 2D collider

Enable 2Dcollider detection

启用2D碰撞器检测

pickable 2D layers

Layer mask for selectable 2D objects.

检测2D对象的层

General gesture properties

Priority to

You can choose between giving priority to tap gesture or slips gesture.

优先级设置

Tap Stationary tolerance takes into account to detect a move from the current touch.

点击:Stationary tolerance设置的值为察觉屏幕上移动的值(小于这个值视为点击)

Slips Stationary tolerance doesn’t take into account to detect move. The motion is detect by Unity API (more reactive)

滑动:Stationary tolerance设置的值为不考虑移动的值(大于这个值视为移动)

Stationary tolerance

It’s a diameter in pixel in which the key is considered stationary for Tap priority

固定公差:像素直径内是点击

Long tap time

The time required to detect a long tap

长按时间设置

Double tap time

The maximum time to detect a double tap

双击最大时间

Swipe tolerance

The detection threshold between different build in swipe direction

在不同构建之间的滑动方向的阀值

Two fingers gesture properties

2 Fingers gesture

Enables 2 fingers gesture

启用双手指模式

Pick method

Can choose between 2 methods for auto-selection

Finger the fingers must be over the object. 手指必须在对象。

Average It takes into account the average position to detect object它考虑了平均位置检测对象

Enable swipe & drag

Enable swipe or drag gesture

启用滑动和拖拽的手势

Enable Pinch

Enable pinch gesture

启用捏的手势

Min pinch length

The minimum threshold distance in pixel for detecting a pinch

最小捏的距离

Enable twist

Enable twist gesture

启用扭曲的手势

Min twist angle

The minimum threshold angle for detecting a twist

最小扭曲角度

Second finger simulation

Enable simulation

Enables second finger simulation

启用第二手指模拟

T exture

The picture to display

图片

T wist & pinch key / Swipe key

Key to activate the simulation

按键配置

Welcome to the EasyTouch Scripting Reference!

This section of the documentation contains details of the scripting API that EasyTouch provides. To use this information, you should be familiar with the basic theory and practice of scripting in Unity.

EasyTouch

Enumerations 枚举

GesturePriority

Gesture priority Tap, Slips

手势优先级

 

SwipeDirection

Build in swipe direction None, Left, Right, Up, Down, UpLeft, UpRight, DownLeft, DownRight, Other

滑动方向

 

TwoFingerPickMethod

2 fingers pick method Finger, Average

选择方式

 

Static functions

SetEnabled

Enables or disables EasyTouch.

GetEnabled

Return true is EasyTouch is enabled.

SetUICompatibily

Enables or disables Unity UI compatibility.

GetUIComptability

Return true is Unity UI compatibility is enabled.

SetAutoUpdateUI

Enables or disables auto-update picked UI element.

GetAutoUpdateUI

Return true if auto-update UI element is enabled.

SetEnableAutoSelect

Enables or disables auto selection.

GetEnableAutoSelect

Return true if auto-selection is enabled

SetAutoUpdatePickedObject

Enables or disable auto-update picked object.

GetAutoUpdatePickedObject

Return true if auto-update picked object is enabled.

Set3DPickableLayer

Set layer mask for selectable object.

Get3DPickableLayer

Return the layer mask for selectable object.

AddCamera

Add a camera for selectable object.

RemoveCamera

Remove a camera.

GetCamera

Return a camera.

SetEnable2DCollider

Enables or disables 2D collider detection.

GetEnable2DCollider

Return true if 2D collider detection is enabled.

Set2DPickableLayer

Set layer mask for 2d selectable object.

Get2DPickableLayer

Get layer mask for 2D selectable object.

SetGesturePriority

Set the gesture priority.

GetGesturePriority

Return the gesture priority.

SetStationaryTolerance

Set the stationary tolerance.

GetStationaryTolerance

Get the stationary tolerance

SetLongTapTime

Set the long tap time.

GetlongTapTime

Get the long tap time.

SetDoubleTapTime

Set the double tap time.

GetDoubleTapTime

Get the double tap time.

SetSwipeTolerance

Set the swipe tolerance

GetSwipeTolerance

Get the swipe tolerance

SetEnable2FingersGesture

Enables or disables 2 fingers gestures.

GetEnable2FingersGesture

Return true if 2 fingers gesture is enabled.

SetTwoFingerPickMethod

Set the 2 fingers selectable method.

GetTwoFingerPickMethod

Return the 2 fingers selectable method.

SetEnablePinch

Enables or disables pinch gesture.

GetEnablePinch

Return true if pinch gesture is enabled.

SetMinPinchLength

Set the min pinch detection length.

GetMinPinchLength

Return the min pinch detection lenght.

SetEnableTwist

Enables or disables twist gesture.

GetEnableTwist

Return true if twist gesture is enabled

SetMinTwistAngle

Set the min twist angle detection

GetMinTwistAngle

Get the min twist angle

GetSecondeFingerSimulation

Enables or disables second finger simulation.

SetSecondFingerSimulation

Return true if second finger simulation is enabled.

Events

Each event is firing with a parameter of type Gesture.

Single finger events

On_Cancel

Occurs when The system cancelled tracking for the touch.

取消

On_TouchStart

Occurs when a finger touched the screen.

开始触摸

On_TouchDown

Occurs while as the touch is active.

按下

On_TouchUp

Occurs when a finger was lifted from the screen.

抬起

On_SimpleTap

Occurs when a finger was lifted from the screen

单击

On_DoubleTap

Occurs when the number of taps is equal to 2 in giving time.

双击

On_LongTapStart

Occurs when a finger is touching the screen, but hasn’t moved since the time required for the detection of a long tap.

长按开始

On_LongTap

Occurs while as the touch is active after a LongTapStart.

长按

On_LongTapEnd

Occurs when a finger was lifted from the screen after a long tap.

长按结束

On_DragStart

Occurs when a drag start. A drag is a swipe on a selectable object

拖拽开始

On_Drag

Occurs while as the drag is active.

拖拽

On_DragEnd

Occurs when a finger that raise the drag event , is lifted from the screen.

拖拽结束

On_SwipeStart

Occurs when swipe start.

滑动开始

On_Swipe

Occurs while as the swipe is active.

滑动

On_SwipeEnd

Occurs when a finger that raise the swipe event , is lifted from the screen.

滑动结束

Two finger events

On_TouchStart2Fingers

Like On_TouchStart but for a 2 fingers gesture.

On_TouchDown2Fingers

Like On_TouchDown but for a 2 fingers gesture.

On_TouchUp2Fingers

Like On_TouchUp but for a 2 fingers gesture.

On_SimpleTap2Fingers

Like On_SimpleTap but for a 2 fingers gesture.

On_DoubleTap2Fingers

Like On_DoubleTap but for a 2 fingers gesture.

On_LongTapStart2Fingers

Like On_LongTapStart but for a 2 fingers gesture

On_LongTap2Fingers

Like On_LongTap but for a 2 fingers gesture.

On_LongTapEnd2Fingers

Like On_LongTapEnd but for a 2 fingers gesture.

On_Twist

Occurs while a twist gesture.

On_TwistEnd

Occurs at twist gesture end.

On_Pinch

Occurs while as the pinch gesture is active.

On_PinchIn

Occurs while as the pinch in gesture is active.

On_PinchOut

Occurs while as the pinch out gesture is active.

On_PinchEnd

Occurs when the 2 fingers that raise the pinch event , are lifted from the screen.

On_DragStart2Fingers

Like On_DragStart but for a 2 fingers gesture.

On_Drag2Fingers

Like On_Drag but for a 2 fingers gesture.

On_DragEnd2Fingers

Like On_DragEnd but for a 2 fingers gesture.

On_SwipeStart2Fingers

Like On_SwipeStart but for a 2 fingers gesture.

On_Swipe2Fingers

Like On_Swipe but for a 2 fingers gesture.

On_SwipeEnd2Fingers

Like On_SwipeEnd but for a 2 fingers gesture.

Unity UI

On_OverUIElement

Occurs when the touch is over a UI element when Unity Ui compatibility is On

On_UIElementUp

Occurs when the touch is lifted from UI element when Unity Ui compatibility is On

Gesture

Each event is firing with a parameter of type Gesture. It contains all information about the current gesture.

Variables

fingerIndex

The index of the finger that fired the event, or -1 for a two fingers gesture

手指索引

touchCount

The number of active touches.

触摸个数

startPosition

The start position of the current gesture that fired the event.

起始位置

position

The current position of the current gesture that fired the event.

当前位置

deltaPosition

The delta position since last call.

流逝的位置增量

actionTime

The elapsed time in second since the begin of gesture.

自开始手势以来的运行时间(秒)

deltaTime

The delta time since last call.

流逝的时间

swipe

The swipe or drag direction.

滑动或者拖拽的方向

swipeLength

The swipe length in pixel.

滑动的像素距离

swipeVector

The swipe vector direction.

滑动的方向

deltaPinch

The delta pinch length in pixel since last call.

自上一次调用捏的长度增量

twistAngle

The delta angle of the twist since the last call.

扭曲的角度

twoFingerDistance

The distance in pixel between two finger for a two finger gesture.

连个手指之间的距离(像素)

pickedObject

The current picked gameObject.

选择的对象

pickedCamera

The picked camera.

选择的摄像机

isGuiCamera

Is the picked camera is flag as GUI

是否是GUI摄像机

isOverGui

Is the current touch is over an Unity UI.

是否在UGUI上

pickedUIElement

The current picked Unity UI.

选择的UGUI

Functions

GetTouchToWordlPoint

Transforms touch position from screen space into world space.

获取触摸点的世界坐标

GetSwipeOrDragAngle

Gets the swipe or drag angle.

获取滑动或拖拽的角度

NormalizedPosition

Gets the normalized position.

获取位置的标准化

GetCurrentPickedObject

Gets the real picked object under the touch

获取当前选择的对象

IsOverUIElement

Is the current touch is over an Unity UI.

当前触摸是否在UI上

IsOverRectTransform

Is the current touch is over a specific RectTransform. GetCurrentFirstPickedUIElement Gets the real picked Unity UI under the touch.

当前的触摸是否在RectTransform上

Gesture.fingerIndex

public int fingerIndex

Description

The index of the finger that fired the event, or -1 for a two fingers gesture. Useful for managing the multi- touches.

Gesture.touchCount

public int touchCount

Description

The number of active touches. Useful for managing the multi-touches.

Gesture.startPosition

public Vector2 startPosition

Description

The start position of the current gesture that fired the event, or the average position between the 2 touches for a two fingers gesture.

Gesture.position

public Vector2 position

Description

The current position of the current gesture that fired the event, or the average position between the 2 touches for a two fingers gesture.

Gesture.deltaPosition

public Vector2 deltaPosition

Description

The delta position since last call. EasyTouch computes is own delta to prevent difference between all mobile platform.

Gesture.actionTime

public float actionTime

Description

The elapsed time in second since the begin of gesture.

Gesture.deltaTime

public float deltaTime

Description

The delta time since last call.

Gesture.swipe

public EasyTouch.SwipeDirection swipe

Description

The swipe or drag direction. This value is calculated with the deltaPositon for current gesture, and between startPosition and current position for gesture end.

Gesture.swipeLength

public float swipeLength

Description

The swipe length in pixel. This value is computed for end gesture between startPosition and position.

Gesture.swipeVector

public Vector2 swipeVector

Description

The swipe vector direction.

Gesture.deltaPinch

public float deltaPinch

Description

The delta pinch length in pixel since last call.

This value is positive for On_PinchIn & On_PinchOut events

This value is positive for pinch out gesture, and negative for pinch in gesture for On_Pinch event.

Gesture.twistAngle

public float twistAngle

Description

The delta angle of the twist since the last call.

Negative value for clockwise. Positive value for anit-clockwise.

Gesture.twoFingerDistance

public float twoFingerDistance

Description

The distance in pixel between two finger for a two finger gesture.

Gesture.pickedObject

public GameObject pickedObject

Description

The current picked gameObject detected at the touch start, or the real object under the touch position if auto update is enabled.

Gesture.pickedCamera

public Camera pickedCamera

Description

The picked camera for find the picked object.

Gesture.isGuiCamera

public bool isGuiCamera

Description

Is the picked camera is flag as GUI

Gesture.isOverGUI

public bool isOverGui

Description

The current touch is over an Unity UI element detected at the touch start, or update in real time is auto- update is enabled.

This value is correct only when the Ui Compatibility Mode is disabled, otherwise it will always be equal to false.

Gesture.pickedUIElement

public GameObject pickedUIElement

Description

The current picked Unity UI element detected at the touch start, or update in real time is auto-update is enabled.

This value is correct only when the Ui Compatibility Mode is disabled, otherwise it will always be equal to Null.

Gesture.GetTouchToWorldPoint

public Vector3 GetTouchToWorldPoint(float z)

Description

Transforms the current touch position from screen space into world space. The z position is in world units from the camera.

public Vector3 GetTouchToWorldPoint(Vector3 position3D)

Description

Transforms the current touch position from screen space into world space.

position3D is a the destination world position, from that will be computed the length from the camera.

Gesture.GetSwipeOrDragAngle

public float GetSwipeOrDragAngle()

Description

Return the swipe or drag angle.

Gesture.NormalizedPosition

public Vector2 NormalizedPosition()

Description

Return the normalized position relative to screen.

Gesture.GetCurrentPickedObject

public GameObject GetCurrentPickedObject()

Description

Gets the real picked object. You don’t need to use the functions, if auto-update is enabled.

Gesture.IsOverUIElement

public bool IsOverUIElement()

Description

Return true if current touch is over an Unity UI element

Gesture.IsOverRectTransform

public bool IsOverRectTransform(RectTransform tr, Camera camera=null)

Description

Return true if current touch is a recttransform.

Gesture.GetCurrentFirstPickedUIElement

public GameObject GetCurrentFirstPickedUIElement()

Description

Gets the real picked Unity UI Element. You don’t need to use the functions, if auto-update is enabled.

C#程序员整理的Unity 3D笔记(十六):Unity 3D的UI-OnGUI、NGUI、UGUI们

UI对用户交互而言,非常重要,尤其类似Unity 3D这种重用户交互体验的游戏行业,更甚。

然刚开始学习,首先了解的是OnGUI–基于代码实现UI。这个我私下和朋友吐槽了不少:

OnGUI土的掉渣、绘制UI效率低下–Dock、Anchors等等很难调试,在C#下竟然用代码控制UI–真是疯了!

 

UI需要快速响应需求设计,要立竿见影达到效果:WYSWYD(所见即所得)才是正道嘛!

 

 

  • Unity 3D 原生的OnGUI

OnGUI is called for rendering and handling GUI events. 即只要继承MonoBehaviour ,则可使用OnGUI函数,如做一些DeBug输出调试,OnGUI还是很方便的。

image

  • 第三方UI控件套包—NGUI

    NGUI是第三方商业UI套包,目前最新版是

    Latest Version: 3.8.0 (February 9th, 2015) ,售价95美金。自打NGUI问世,就以第三方UI套件之王而傲立于世,对整个Unity 3D的UI生态圈具有举重若轻的作用,其脚本丰富,表现出色,如TDTK就支持NGUI绘制UI。

 

  • Unity 3D 4.6始原生的UGUI (Unity GUI)

升级到Unity 4.6后,一下子被新的UI系统镇住了—-UGUI不错:UGUI的使用简洁、符合Visual Studio 程序员的风格,布局采用Web从上往下的流式渲染,基于先后的顺序。

image

 

image

 

 

附录1–简述第三方的NGUI和Unity 3D 4.6原生的UGUI列表

Item

UGUI

NGUI

初次印象

命名简约

官方集成

使用便捷

玩转脚本

明间英雄

强大社区

按钮和滚动条

系统原生

clip_image002

Canvas
分三类–

1. screen-overloap【default】

2. screen-camera

3. word position

UI Root

默认添加了一个摄像机–必须有

 

添加一个Button,在UGUI很容易看到效果,但是NGUI下,需要设置一下position(可能是Unity 4.6的bug)

事件

EventSystem (TriggerType)

Set OnClick event

Add Collider component

Add Script component

Set OnClick event

Dock

image

Rect Transform

 

clip_image005

widget属性,pivot,depth和size

Anchors–高级可设置多个参照Transform

美化

动画由Animation、Animator结合完成

依靠贴图、Font、动画实现

美化

动画由NGUI自带的TWeen脚本完成

依靠贴图、Font、动画实现美化

显示文本

Text

Label

显示图片

Image

Sprite

快捷键

Ctrl + T工具栏,用于move、rotate、dock等。

右键菜单和自定义工具栏配合

总结

2014年后U3D的新手,直接上手学习UGUI吧。

 

UGUI的Empty GameObject比较方便

 

UGUI的组件思想好-Grid Layout、Text Effect

历史遗留产物,还会火几年.

2011~2014年是NGUI的黄金时期。

 

UGUI.drag drop 需要自己写,而NGUI提供了强大的脚本不用写代码即可完成类似事情

 

附录2:Unity UI设计的原则

 

为了提高效率,我们要做的就是减少drawCall的调用次数,减少batch的次数。

 

附录3:小道消息

 

Unity 4.6 开始支持UGUI,且从Unity 4.6.2开始支持IOS 64位,故猜测2015.2月起是UGUI的一个重要的里程碑—UGUI免费、开源、原生,这3个Tag的属性,没有道理不火。

NGUI的作者Michael “ArenMook” Lyashenko在2012.11~2013.12左右,去Unity 公司工作了约1年时间,即UGUI是基于NGUI做出来的–所谓“青出于蓝而胜于蓝”。另外,从tasharen官网看,其作者对NGUI的重心也有所转移.

 

参考博客:

C#程序员整理的Unity 3D笔记(十五):Unity 3D UI控件至尊–NGUI

C#程序员整理的Unity 3D笔记(十四):Unity 3D的UGUI小结

C#程序员整理的Unity 3D笔记(十五):Unity 3D UI控件至尊–NGUI

      目前,UGUI问世不过半年(其随着Unity 4.6发布问世),而市面上商用的产品,UI控件的至尊为NGUI:影响力和广度(可搜索公司招聘Unity 3D,常常能看到对NGUI关键词)。 NGUI虽然不是Unity 官方原生的,但以其强大的能力和友好的操作性,成为了事实上的王者—-无他,OnGUI太挫了。

 

通过导入自定义包,会出现如下的截图–这里我使用的是NGUI V3.6.8版本。

image

 

在其官方demo中,这个demo给我留下了非常酷的印象(右上角NGUI的logo,好像电影中维京人的帽子?):

image

 

NGUI代码的样例,极为丰富,反复临摹,可学很多东西,这里就不一一列举了,仅对学习进行小结。image

 

  • UI Root

NGUI的UI Root类似UGUI Canvas.Screen.Camera模型;UI Root是所有NGUI控件的根元素。

image

 

创建一个NGUI元素后,在UI Root下自动带一个Camera。

另外,NGUI是第三方的,故无法像UGUI一样在Hierarchy中通过快捷键添加UI元素:

image

可通过主菜单–NGUI添加组件

image

 

还可以在Scene中,通过右键菜单添加UI组件(右键菜单提供了添加脚本、Help跳转到官网tasharen的Tip功能,很棒。)

 

image

 

  • 原生的UI组件有2个:

常使用的UI组件有2个:Lable & Sprite,其他组件是组合这2个UI组件实现的。

image

 

更多的常用控件,是通过Prefab Tool提供的,如Button、Slider、CheckBox等。

image

 

在此基础上,你也可以自定义你的UI控件,保存为Prefab即可,然后拖入到NGUI的Prefab Toolbar中保存起来。

 

  • 交互

    NGUI中实现控件的交互有2个步骤,主要是用碰撞检测(Trigger)和脚本实现,使用起来方便的很—成熟、好用。

1 添加Box Collider
2 添加事件脚本( *.cs)实现

 

  NGUI默认提供了丰富了UI脚本,几乎囊括了能用到的所有脚本—可在此基础上,继续通过扩展代码完成您的需求。

image

  • 动画

类似交互功能,动画也是通过脚本组件实现的。 NGUI自带的Tween 有10个脚本

clip_image001

  • Dock:Anchors

image

制作复杂UI布局的时候,Anchors就显得尤为关键,故NGUI也提供了非常方便的Anchors功能—默认不开启,通过选择Type=Unifed可打开Anchors功能,设置Target对象,同时设置Left、Right、Right、Bottom、Top即可实现,相对比较方便。(默认的Target对象是该UI的父对象)

 

  • 图集(Atlas Maker):图片的批量压缩,提高性能。

Atlas 这个单词很诡异,以前没有见过,搜索了一下bing,发现很有趣:

image

 

使用Atlas Maker,主要目的是对批量图片进行压缩,成为一张图片,使用的时候通过offset可获得指定的图片。这个技术在GIS加载图片、Web加载图片中曾经用过。

Atlas Maker经过处理多个选择的图片后,最后产生了3个文件:

  • MyAtlas.png
  • MyAtlas.prefab
  • MyAtlas.mat

     

     

    其他tip:

    获取NGUI当前控件的设置值:volumn = UIProgressBar.current.value;

    NGUI控件添加父子关键:NGUITools.AddChild(sprite.gameObject, item.gameObject);

    NGUI一些不太好用的东西:

    • 多个Panel无法Move和对齐—panel没有边线,多个Panel不好控制。

    clip_image001[4]

     

    NGUI摆放组件,移动非常不爽:一个是Camera取消不了–Gizmos尝试不行;另外移动和缩放很容易搞错。

    clip_image001[10]

     

    • NGUI的Sprite的切图SlicedSprite九宫切图,是通过设置数字修改的

    clip_image001[6]

    widget属性,pivot,depth和size–NGUI的核心东东

    clip_image001[8]

    • Pivot:中心点–对齐用
    • Depth:多个控件渲染的顺序【数字越高,显示优先级越高; 使用起来有点坑–设置错误则显示不了啦】
    • Size、Aspect:大小和放大

     

    总结: 

    尽管我个人比较看好UGUI,要学就学新的,1年后UGUI就成熟了嘛!  但是为了看懂一些“参考代码”,NGUI也是有必要学习、学习的,  且NGUI有较丰富的第三方UI插件生态圈呢,如NGUI HUB, TKTR等。

    C#程序员整理的Unity 3D笔记(十四):Unity 3D的UGUI小结

    春节期间,学习了一下UGUI(Unity GUI),这个是Unity 4.6新增的功能,极大了弥补Unity GUI鸡肋:OnGUI.

    春节期间,学习了一下UGUI(Unity GUI)。

    UGUI是Unity 4.6新增的功能,极大了弥补Unity GUI鸡肋: OnGUI.

     

    学习UGUI最好的途径是系统的推理推理官方的UGUI的demo,如Drag And Drop、Menu 3D、Draggable Panel等,这些非常有嚼头,也可以学到很多东西。

     

    demo很关键:源码,学习的动力,其他都是浮云。

    image

     

    • UGUI原生的UI组件有9个

      image

     

    • EventSystem

    交互控件,默认只有一个事件,如Button自带一个OnClick事件,其他的事件,请通过EventTrigger添加。

    添加UGUI组件后,一般会自带一个事件,如Button.OnClick()

    clip_image001

    其他的事件,通过添加Event Trigger添加:

    clip_image002

    或者通过写脚本,实现17个 UGUI-EventSystem 接口来实现。

     

                  • IPointerEnterHandler – OnPointerEnter – Called when a pointer enters the object
                  • IPointerExitHandler – OnPointerExit – Called when a pointer exits the object
                    • IPointerDownHandler – OnPointerDown – Called when a pointer is pressed on the object
                    • IPointerUpHandler – OnPointerUp – Called when a pointer is released (called on the original the pressed object)
                • IPointerClickHandler – OnPointerClick – Called when a pointer is pressed and released on the same object
                • IInitializePotentialDragHandler – OnInitializePotentialDrag – Called when a drag target is found, can be used to initialise values
              • IBeginDragHandler – OnBeginDrag – Called on the drag object when dragging is about to begin
              • IDragHandler – OnDrag – Called on the drag object when a drag is happening
            • IEndDragHandler – OnEndDrag – Called on the drag object when a drag finishes
          • IDropHandler – OnDrop – Called on the object where a drag finishes
          • IScrollHandler – OnScroll – Called when a mouse wheel scrolls
        • IUpdateSelectedHandler – OnUpdateSelected – Called on the selected object each tick
      • ISelectHandler – OnSelect – Called when the object becomes the selected object
      • IDeselectHandler – OnDeselect – Called on the selected object becomes deselected
      • IMoveHandler – OnMove – Called when a move event occurs (left, right, up, down, ect)
    • ISubmitHandler – OnSubmit – Called when the submit button is pressed
    • ICancelHandler – OnCancel – Called when the cancel button is pressed

    已知问题,在4.6.0 Win 7 64位系统下,ISubmitHandler我添加到InputField上,点击回车不会触发。

     

    • Animation & Animator

    UGUI的UI动画,可以由Unity 的新、老动画配合完成。
    image

     

    新动画

    老动画

    *.controller

    *.anim

    Animator状态机

    Animation录制动画

    设置条件变量

    成对出现

    Animator.SetBool()

    Animation.Play()

    同GameObject

    同GameObject

    clip_image002

    clip_image004

     

    为了简化常用动画,可通过DOTween脚本和UGUI结合,轻松的实现动画。

    image

     

    • 3种Canvas的用途

     

    image

    1 Screen Space OverLay 默认模式–静态的

    2 Screen Space Camera NGUI默认效果,很酷UI,如ShowDialog等。

    3 World Space — 3D对象上用,ToolTip、血条、HUD。

     

     

    • Layout:Grid\H\V\Element

    image

    UGUI提供了4个Layout的组件,同时,结合Rect Transform的Anchors功能,方便设计复杂的UI嵌套。

    布局要多练习,其核心思想和Web、流式布局类似,为了考虑多种屏幕尺寸,复杂UI要按照Grid划分好网格,再填充UI元素。

     

    几个Tips:

    • Rect Transform Reset :rectT.anchoredPosition = Vector2.zero; //UGUI
    • 一个习惯,把UI的控制代码挂到**Control上独立的一个EmptyGameObject上,如_AudioControl image
    • 在Image中的九宫格,如果设置Image Type:Sliced后失效,请导出你的场景为UnityPacage,再新建工程导入,则可成功九宫格了。