{"id":1041,"date":"2014-05-28T19:37:24","date_gmt":"2014-05-28T17:37:24","guid":{"rendered":"http:\/\/www.edy.es\/dev\/?page_id=1041"},"modified":"2024-02-12T16:15:26","modified_gmt":"2024-02-12T15:15:26","slug":"ngui-manual-de-referencia","status":"publish","type":"page","link":"https:\/\/www.edy.es\/dev\/docs\/ngui-manual-de-referencia\/","title":{"rendered":"NGUI &#8211; Manual de Referencia"},"content":{"rendered":"<p><a href=\"http:\/\/www.tasharen.com\/?page_id=140\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-1059 size-full\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Logo.png\" alt=\"NGUI Logo\" width=\"255\" height=\"77\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Logo.png 255w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Logo-e1401297105344-150x45.png 150w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/><\/a> <a href=\"http:\/\/www.tasharen.com\/?page_id=140\">NGUI<\/a> es un potente complemento para <a href=\"http:\/\/unity3d.com\">Unity 3D<\/a>\u00a0desarrollado por <a href=\"http:\/\/www.tasharen.com\">Tasharen Entertainment<\/a> que permite crear interfaces de usuario (<em>UI<\/em>) de forma muy eficiente y flexible. Este manual en castellano recoge todo lo que hay que saber para\u00a0aprovechar toda la potencia de NGUI.<\/p>\n<p>Documentaci\u00f3n oficial en ingl\u00e9s:<\/p>\n<ul>\n<li><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6754.0\">\u00cdndice, videotutoriales, ejemplos, componentes&#8230;<\/a><\/li>\n<li><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?board=12.0\">Todos los componentes de NGUI<\/a><\/li>\n<li><a href=\"http:\/\/www.tasharen.com\/ngui\/docs\/annotated.html\">Lista de clases<\/a><\/li>\n<li><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=11.75\">Novedades de cada versi\u00f3n<\/a> (suscribirse al hilo para recibir notificaciones)<\/li>\n<\/ul>\n<p>En Unity cada componente de NGUI enlaza a su p\u00e1gina de ayuda desde el men\u00fa contextual &gt; Help.<\/p>\n<h1>Estructura\u00a0basica<\/h1>\n<p>Un interface de NGUI\u00a0est\u00e1 formado por un objeto <em>UI Root<\/em> conteniendo los componentes\u00a0<strong>UIRoot<\/strong> y <strong>UIPanel<\/strong>. La c\u00e1mara que muestra el interface\u00a0va en uno de los hijos (<em>Camera<\/em>) e incluye al componente\u00a0<strong>UICamera<\/strong>. Los dem\u00e1s hijos ser\u00e1n los componentes o <em>widgets<\/em>\u00a0que forman el interface (el\u00a0<em>Sprite<\/em> en la imagen). <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Base-Hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1060\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Base-Hierarchy.png\" alt=\"NGUI Base Hierarchy\" width=\"273\" height=\"134\" \/><\/a><\/p>\n<h3>UIRoot<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6710.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_root.html\">Referencia<\/a><\/p>\n<p>Ajusta\u00a0la escala del interface en funci\u00f3n del tama\u00f1o de la pantalla y el modo indicado.\u00a0Debe ser el componente ra\u00edz de la jerarqu\u00eda del interface.<\/p>\n<ul>\n<li><em>PixelPerfect<\/em> mantiene la relaci\u00f3n\u00a01 a 1: un pixel de interface corresponde siempre a un pixel de pantalla. <em>PixelPerfect<\/em>\u00a0se aplica\u00a0dentro de los l\u00edmites marcados (<em>Minimum Height<\/em>, <em>Maximum Height<\/em>). Fuera de los l\u00edmites los componentes\u00a0reciben escalado.<\/li>\n<li><em>FixedSize<\/em>\u00a0hace que el interface siempre tenga el mismo tama\u00f1o con independencia de la resoluci\u00f3n. Se\u00a0establece un tama\u00f1o de pantalla de referencia en pixels (<em>Manual Height<\/em>) y los componentes se escalar\u00e1n en la pantalla seg\u00fan ese tama\u00f1o. Por ejemplo, si se establece Manual Height = 1000 entonces un sprite de 500&#215;500 ocupar\u00e1 la mitad del alto de la pantalla.<\/li>\n<\/ul>\n<p>UIRoot establece una escala base\u00a0&#8220;manejable&#8221; para mostrar\u00a0los dem\u00e1s componentes, ya que \u00e9stos trabajan en escala 1:1 (1 pixel por unidad de longitud). No obstante,\u00a0tambi\u00e9n ser\u00eda\u00a0posible establecer esta\u00a0escala directamente y eliminar\u00a0este componente.<\/p>\n<h3>UIPanel<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6705.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_panel.html\">Referencia<\/a><\/p>\n<p>Componente que alberga y gestiona los controles (<em>widgets<\/em>) que se le a\u00f1adan como hijos\u00a0en la\u00a0jerarqu\u00eda. UIPanel es responsable de\u00a0generar la geometr\u00eda\u00a0y dibujar los componentes en pantalla (m\u00e1s o menos equivalente al <em>Renderer<\/em> de Unity).<\/p>\n<p>Cada panel tiene un valor de profundidad (<em>Depth<\/em>) para ser mostrado delante o detr\u00e1s de otros paneles.\u00a0Las interacciones\u00a0tambi\u00e9n se detectan seg\u00fan el\u00a0Depth de panel.\u00a0Es recomendable que no haya paneles compartiendo el mismo valor Depth. El valor de transparencia (<em>Alpha<\/em>) se aplica a todos los widgets en el panel. Con <em>Clipping<\/em> desactivado los componentes se pueden mostrar en cualquier parte de la pantalla. En este caso la vista Scene muestra el marco p\u00farpura con los botones de ajuste en gris (desactivados). Las\u00a0dimensiones se\u00a0establecen\u00a0autom\u00e1ticamente a la resoluci\u00f3n del marco de pantalla actual.<\/p>\n<div id=\"attachment_1050\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-no-clipping.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1050\" class=\"wp-image-1050 size-medium\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-no-clipping-300x193.png\" alt=\"UIPanel no clipping\" width=\"300\" height=\"193\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-no-clipping-300x193.png 300w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-no-clipping.png 529w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1050\" class=\"wp-caption-text\">Clipping desactivado<\/p><\/div>\n<p>Con <em>Clipping<\/em> activado se puede definir el \u00e1rea en el que los\u00a0componentes del panel son visibles. En este caso se pueden usar los botones de ajuste en la vista Scene para establecer la posici\u00f3n y dimensiones del panel. Tambi\u00e9n es posible definir una zona de suavizado antes de recortar los componentes que salen del panel. El cuadro interior en color m\u00e1s claro\u00a0muestra la zona en la que los componentes son 100% visibles, antes del\u00a0suavizado.<\/p>\n<div id=\"attachment_1051\" style=\"width: 310px\" class=\"wp-caption aligncenter\"><a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-clipping.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1051\" class=\"wp-image-1051 size-medium\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-clipping-300x192.png\" alt=\"UIPanel clipping\" width=\"300\" height=\"192\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-clipping-300x192.png 300w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIPanel-clipping.png 426w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><p id=\"caption-attachment-1051\" class=\"wp-caption-text\">Clipping activado<\/p><\/div>\n<ul>\n<li>Los paneles y\u00a0los widgets heredan del componente <strong>UIRect<\/strong>. Este componente ofrece toda la funcionalidad de posici\u00f3n, dimensiones y anclajes (<em>Anchors<\/em>).<\/li>\n<li>Es posible anidar paneles en la jerarqu\u00eda del interface.\u00a0Los paneles anidados hijos se combinan adecuadamente\u00a0seg\u00fan la configuraci\u00f3n de los paneles padre (<em>alpha<\/em>, <em>clipping<\/em>). Se pueden usar para establecer prioridades delante-detr\u00e1s en el dibujado de componentes.<\/li>\n<li>Con cada panel se a\u00f1ade un componente\u00a0<em>RigidBody<\/em> est\u00e1tico (<em>kinematic<\/em>)\u00a0porque es mucho m\u00e1s eficiente mover los componentes tipo\u00a0<em>Collider<\/em>\u00a0cuando\u00a0pertenecen a un\u00a0RigidBody.<\/li>\n<li>En el panel asociado a UIRoot los botones de redimensi\u00f3n no funcionar\u00e1n correctamente\u00a0por conflictos con la escala.<\/li>\n<\/ul>\n<h3>UICamera<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6711\">Descripci\u00f3n<\/a>\u00a0| <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_camera.html\">Referencia<\/a><\/p>\n<p>El nombre del componente denota que va asociado a una c\u00e1mara. Lo \u00fanico que hace es enviar los eventos NGUI a los objetos mostrados por la c\u00e1mara. No tiene que ser necesariamente un interface, sirve cualquier objeto con un <em>Collider<\/em> al que se quieran enviar eventos NGUI (<em>OnPress<\/em>, <em>OnClick<\/em>, <em>OnDrag<\/em>, etc).<\/p>\n<ul>\n<li>Requiere\u00a0que la opci\u00f3n &#8220;<em>Raycasts Hit Triggers<\/em>&#8221; est\u00e9 activada en Edit &gt; Project Settings &gt; Physics.<\/li>\n<li>En c\u00e1maras 3D\u00a0el plano <em>far<\/em> debe estar algunas unidades detr\u00e1s del componente m\u00e1s lejano para asegurar que los <em>Raycasts<\/em> llegan a toda la pantalla (la distancia m\u00e1xima se calcula como <em>far &#8211; near<\/em>).<\/li>\n<\/ul>\n<p>Detecci\u00f3n de objetos\u00a0(<em>Event Type<\/em>, <em>Event Mask<\/em>):<\/p>\n<ul>\n<li>2D \/ 3D: Determina si utiliza el raycast normal o el de Physics2D.<\/li>\n<li>UI: Detecta el objeto m\u00e1s cercano por orden de <em>UIPanel<\/em>\u00a0o\u00a0<em>widget<\/em>\u00a0(<em>Depth<\/em>).<\/li>\n<li>World: Detecta el objeto con el collider f\u00edsicamente m\u00e1s cercano a la c\u00e1mara.<\/li>\n<li>La m\u00e1scara limita la detecci\u00f3n a los objetos de las capas indicadas.<\/li>\n<\/ul>\n<p>Entradas:<\/p>\n<ul>\n<li><strong>Mouse<\/strong>: el rat\u00f3n normal. Los identificadores para los botones en <strong>UICamera.GetTouch<\/strong>\u00a0son -1 izquierdo, -2 derecho, -3 central.<\/li>\n<li><strong>Keyboard<\/strong>: el teclado. Se leen las direcciones horizontal-vertical de las flechas\/WSAD\u00a0y\u00a0la tecla TAB. Las teclas definidas para <em>Submit<\/em> y <em>Cancel<\/em> en <em>Axes and Keys<\/em>\u00a0no dependen de esta configuraci\u00f3n, ni tampoco los controles que leen el teclado independientemente (ej. UIInput).<\/li>\n<li><strong>Touch<\/strong>: los toques de dispositivos t\u00e1ctiles seg\u00fan la entrada est\u00e1ndard (<a href=\"http:\/\/docs.unity3d.com\/ScriptReference\/Input.GetTouch.html\">Input.GetTouch<\/a>). Los identificadores para <strong>UICamera.GetTouch<\/strong> son los <em>fingerID<\/em> de 0\u00a0en adelante, hasta el n\u00famero de toques simult\u00e1neos que se quiera monitorizar.<\/li>\n<li><strong>Controller<\/strong>: lee las direcciones horizontal-vertical de los ejes definidos en <em>Axes and Keys<\/em>. No registra\u00a0toques.<\/li>\n<\/ul>\n<p>Eventos:<\/p>\n<ul>\n<li><strong>OnHover (isOver)<\/strong>: el rat\u00f3n pasa sobre un collider.<\/li>\n<li><strong>OnPress (isDown)<\/strong>: se pulsa un bot\u00f3n del rat\u00f3n sobre el collider.<\/li>\n<li><strong>OnSelect (selected)<\/strong>: cuando un bot\u00f3n del rat\u00f3n se suelta sobre\u00a0el mismo objeto en que se puls\u00f3.<\/li>\n<li><strong>OnClick ()<\/strong>: mismas condiciones que OnSelected, pero adem\u00e1s el rat\u00f3n no se ha movido mucho. <em>UICamera.currentTouchID<\/em> indica qu\u00e9 bot\u00f3n se ha pulsado.<\/li>\n<li><strong>OnDoubleClick ()<\/strong>: dos clicks repetidos en menos de un cuarto de segundo.\u00a0<em>UICamera.currentTouchID<\/em> indica qu\u00e9 bot\u00f3n se ha pulsado.<\/li>\n<li><strong>OnDragStart ()<\/strong>: enviado al objeto &#8220;tocado&#8221; justo antes de comenzar las notificaciones OnDrag().<\/li>\n<li><strong>OnDrag (Vector2 delta)<\/strong>: enviado al objeto sobre el que se produce\u00a0el\u00a0arrastre. <em>delta<\/em>\u00a0indica\u00a0el desplazamiento en p\u00edxeles.<\/li>\n<li><strong>OnDragOver (draggedObject)<\/strong>: enviado a un objeto mientras otro est\u00e1 siendo arrastrado encima de su \u00e1rea.<\/li>\n<li><strong>OnDragOut (draggedObject)<\/strong>: enviado a un objeto cuando otro es arrastrado fuera de su \u00e1rea.<\/li>\n<li><strong>OnDragEnd ()<\/strong>: enviado al objeto arrastrado al finalizar el evento de arrastrar y soltar.<\/li>\n<li><strong>OnInput (text)<\/strong>: se env\u00eda al escribir texto (una vez se selecciona\u00a0un collider pulsando en \u00e9l).<\/li>\n<li><strong>OnTooltip (show)<\/strong>: enviado cuando el rat\u00f3n se mantiene sobre un collider sin moverse durante cierto tiempo.<\/li>\n<li><strong>OnScroll (float delta)<\/strong>: se env\u00eda al mover la rueda del rat\u00f3n.<\/li>\n<li><strong>OnKey (KeyCode key)<\/strong>: se env\u00eda con los eventos de teclado o controlador de entrada.<\/li>\n<\/ul>\n<p>Los eventos\u00a0son\u00a0aplicables a cualquier script, no s\u00f3lo componentes NGUI. Para recibir estos eventos en un script basta que el objeto tenga un <em>Collider<\/em> y el script implemente las\u00a0funciones deseadas, por ejemplo:<\/p>\n<pre>void OnPress (bool isPressed)\r\n    {\r\n    if (isPressed) Debug.Log(\"Estoy pulsado!\");\r\n    else Debug.Log(\"Ya no estoy pulsado\");\r\n    }<\/pre>\n<p>UICamera expone m\u00e9todos est\u00e1ticos que se pueden consultar dentro del\u00a0evento para obtener informaci\u00f3n detallada:<\/p>\n<ul>\n<li><strong>UICamera.current<\/strong>: la instancia UICamera que envi\u00f3\u00a0el evento.<\/li>\n<li><strong>UICamera.<a href=\"http:\/\/www.tasharen.com\/ngui\/docs\/class_u_i_camera_1_1_mouse_or_touch.html\">currentTouch<\/a><\/strong>: datos de la interacci\u00f3n que origin\u00f3 el evento.<\/li>\n<li><strong>UICamera.currentTouchID<\/strong>: identificador de toque o bot\u00f3n de rat\u00f3n para este evento. En rat\u00f3n, -1 es bot\u00f3n derecho, -2 bot\u00f3n izquierdo y -3 bot\u00f3n central.<\/li>\n<li><strong>UICamera.lastHit<\/strong>: \u00faltimo resultado <a href=\"http:\/\/docs.unity3d.com\/ScriptReference\/RaycastHit.html\">RaycastHit<\/a> antes de invocar el evento.<\/li>\n<li><strong>UICamera.selectedObject<\/strong>: objeto seleccionado mediante OnSelect. Puede usarse para cambiar manualmente la selecci\u00f3n entre los objetos del interface.<\/li>\n<\/ul>\n<p>Tambi\u00e9n expone m\u00e9todos est\u00e1ticos de utilidad :<\/p>\n<ul>\n<li><strong>UICamera.IsPressed(GameObject)<\/strong>:\u00a0comprueba si el objeto indicado est\u00e1 siendo presionado por cualquier entrada\u00a0(toque, bot\u00f3n, controlador).<\/li>\n<li><strong>UICamera.GetTouch(id)<\/strong>:\u00a0obtener datos de un toque o interacci\u00f3n. -1, -2, -3 son los botones del rat\u00f3n. De 0 en adelante son <em>fingerId<\/em>\u00a0de toques en pantalla t\u00e1ctil. Siempre se devuelve un objeto <a href=\"http:\/\/www.tasharen.com\/ngui\/docs\/class_u_i_camera_1_1_mouse_or_touch.html\">MouseOrTouch<\/a> v\u00e1lido. Para leer todos los toques activos se comprueban\u00a0tantos identificadores como toques simult\u00e1neos se quieran registrar.\u00a0Un toque est\u00e1 &#8220;activo&#8221; cuando MouseOrTouch.pressed != null.<\/li>\n<\/ul>\n<h1>Estructura avanzada<\/h1>\n<p>Interface que combina componentes\u00a02D, componentes\u00a03D, y elementos interactivos en la propia escena. NGUI demuestra esta soluci\u00f3n\u00a0en la escena de ejemplo &#8220;Example X &#8211; Character&#8221;.<\/p>\n<p><a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Advanced-Hierarchy.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1207\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Advanced-Hierarchy.png\" alt=\"NGUI Advanced Hierarchy\" width=\"270\" height=\"167\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<table>\n<thead>\n<tr>\n<th>Elemento en raiz<\/th>\n<th>Layer<\/th>\n<th>Componentes<\/th>\n<th>UIPanel<\/th>\n<th>Camera<\/th>\n<th>UICamera<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>2D UI<\/td>\n<td>2D<\/td>\n<td>UIPanel, UIRoot.<\/td>\n<td>depth 2<\/td>\n<td>Orthographic, Don&#8217;t Clear, Mask &#8220;2D&#8221;, depth 2<\/td>\n<td>Main UICamera, Events &#8220;3D UI&#8221;, Mask &#8220;2D&#8221;<\/td>\n<\/tr>\n<tr>\n<td>3D UI<\/td>\n<td>3D<\/td>\n<td>UIPanel<\/td>\n<td>depth 1<\/td>\n<td>Perspective, Don&#8217;t Clear, Mask &#8220;3D&#8221;, depth 1<\/td>\n<td>Events &#8220;3D UI&#8221;, Mask &#8220;3D&#8221;<\/td>\n<\/tr>\n<tr>\n<td>Scene<\/td>\n<td>Default<\/td>\n<td>UIPanel<\/td>\n<td>depth 0<\/td>\n<td>Perspective, Mask &#8220;no 2D, no 3D&#8221;, depth 0<\/td>\n<td>Events &#8220;3D UI&#8221;, Mask &#8220;no 2D, no 3D&#8221;<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>En este ejemplo\u00a0el interface 2D tiene prioridad sobre el 3D, y \u00e9ste a su vez tiene prioridad sobre la escena.<\/p>\n<h3>Detecci\u00f3n de elementos bajo el rat\u00f3n \/ toque<\/h3>\n<p>El proceso que sigue NGUI para\u00a0detectar el elemento tocado o bajo el rat\u00f3n es:<\/p>\n<ol>\n<li>Se recorren las c\u00e1maras por orden de\u00a0<em>Depth<\/em>. Cuando se ha detectado un elemento en una, no se comprueban\u00a0las dem\u00e1s c\u00e1maras.<\/li>\n<li>Desde cada c\u00e1mara\u00a0se\u00a0utiliza un <em>Raycast<\/em> para localizar los <em>colliders<\/em> en la posici\u00f3n del rat\u00f3n\/toque\u00a0coincidentes con <strong>Culling Mask<\/strong>\u00a0(Camera) y <strong>Event Mask<\/strong>\u00a0(UICamera). El collider que recibir\u00e1 los eventos se escoge seg\u00fan <strong>Event Type<\/strong> de\u00a0UICamera:<\/li>\n<\/ol>\n<ul>\n<li><strong>3D UI<\/strong>: Los widgets se ordenan por orden de Depth\u00a0combinado con el del UIPanel al que pertenecen. Los colliders aislados (sin widget) se consideran Depth 0. El collider con mayor valor depth resultante es el que recibe los eventos.<\/li>\n<li><strong>3D World<\/strong>: Se escoge el collider m\u00e1s cercano a la c\u00e1mara.<\/li>\n<\/ul>\n<p><strong>Nota:<\/strong>\u00a0NGUI fuerza la capa (<em>layer<\/em>) de los <em>widgets<\/em> a la misma\u00a0del panel del que dependen.<\/p>\n<h1>Interacci\u00f3n en NGUI<\/h1>\n<p>Los componentes interactivos exponen eventos que permiten invocar c\u00f3digo\u00a0cuando se producen. Se puede configurar en mismo componente\u00a0indicando\u00a0la funci\u00f3n del componente que se desea invocar. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Event-OnClick.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-1084\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Event-OnClick.png\" alt=\"NGUI Event OnClick\" width=\"318\" height=\"124\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Event-OnClick.png 318w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Event-OnClick-300x116.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a> Cada evento permite invocar uno o varios\u00a0m\u00e9todos p\u00fablicos de cualquier componente o script. Si el m\u00e9todo admite par\u00e1metros, \u00e9stos pueden ser cualquier propiedad p\u00fablica de cualquier componente o script. Del ejemplo de la imagen:<\/p>\n<pre>public void DoAction (bool isTrue)\r\n    {\r\n    Debug.Log(\"He sido pulsado! Valor: \" + isTrue);\r\n    }<\/pre>\n<p>Es necesario que el tipo de los par\u00e1metros de la funci\u00f3n invocada concuerde con el tipo de las propiedades indicadas, o se producir\u00e1\u00a0un error en ejecuci\u00f3n. Los componentes\u00a0de NGUI tienen varias funciones predefinidas que se pueden invocar, por ejemplo\u00a0<em>PlayForward<\/em> en los<em> tweens<\/em>.<\/p>\n<h4>Eventos por componente<\/h4>\n<ul>\n<li><strong>UIButton<\/strong>: OnClick<\/li>\n<li><strong>UIInput:<\/strong> OnChange, OnSubmit, onValidate*<\/li>\n<li><strong>UIPlayAnimation<\/strong>: OnFinished<\/li>\n<li><strong>UIPlayTween<\/strong>: OnFinished<\/li>\n<li><strong>UIPopupList<\/strong>: OnChange<\/li>\n<li><strong>UIProgressBar, UISlider, UIScrollBar<\/strong>: OnChange,\u00a0onDragFinished*<\/li>\n<li><strong>UIToggle<\/strong>: OnChange<\/li>\n<li><strong>UITweener<\/strong>: OnFinished<\/li>\n<\/ul>\n<p style=\"padding-left: 30px;\">*\u00a0Accesible desde c\u00f3digo, es un delegado normal de C# (<em>delegate<\/em>).<\/p>\n<p>Se puede notificar\u00a0cualquier otro evento adem\u00e1s de los predefinidos de cada componente a\u00f1adiendo\u00a0un componente UIEventTrigger<strong>:<\/strong><\/p>\n<ul>\n<li><strong>UIEventTrigger<\/strong>: OnClick, OnDoubleClick, OnPress, OnRelease, OnSelect, OnDeselect, OnHoverOver, OnHoverOut, OnDragOver, OnDragOut.<\/li>\n<\/ul>\n<h4>Interacci\u00f3n desde c\u00f3digo<\/h4>\n<p>Con <strong>EventDelegate<\/strong> se a\u00f1aden notificaciones a los eventos est\u00e1ndar que ofrecen los\u00a0componentes:<\/p>\n<pre>void OnButtonClicked ()\r\n    {\r\n    \/\/  ... acci\u00f3n al pulsar bot\u00f3n ...\r\n    }<\/pre>\n<pre>EventDelegate.Add(myButton.onClick, OnButtonClicked);<\/pre>\n<p>Con <strong>UIEventListener<\/strong> cualquier objeto con un Collider puede escuchar las notificaciones de NGUI. No es necesario que el objeto tenga un UIEventListener de antemano. Si no lo tiene se agrega en tiempo de ejecuci\u00f3n:<\/p>\n<pre>UIEventListener.Get(gameObject).onClick += MyClickFunction;<\/pre>\n<p>Cada componente est\u00e1ndar de NGUI tiene un campo est\u00e1tico\u00a0<em><strong>current <\/strong><\/em>que apunta al objeto\u00a0concreto\u00a0que gener\u00f3 el evento:<\/p>\n<ul>\n<li>UIButton.current<\/li>\n<li>UIEventTrigger.current<\/li>\n<li>UIInput.current<\/li>\n<li>UIPlayAnimation.current<\/li>\n<li>UIPlayTween.current<\/li>\n<li>UIPopupList.current<\/li>\n<li>UIProgressBar.current, UISlider.current, UIScrollBar.current<\/li>\n<li>UIToggle.current<\/li>\n<li>UITweener.current<\/li>\n<\/ul>\n<p><em>UICamera.current<\/em>\u00a0apunta al componente UICamera\u00a0que envi\u00f3 el evento, y adem\u00e1s el campo est\u00e1tico <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_camera_1_1_mouse_or_touch.html\"><em>UICamera.currentTouch<\/em><\/a>\u00a0contiene informaci\u00f3n detallada sobre la acci\u00f3n precisa que lo desencaden\u00f3: posici\u00f3n, delta, elemento actual, elemento anterior&#8230;<\/p>\n<p><strong><span style=\"text-decoration: underline;\">Nota importante<\/span><\/strong>: Los eventos <strong>OnFinished<\/strong> se lanzan despu\u00e9s de que una\u00a0acci\u00f3n diferida se ha completado (transici\u00f3n o animaci\u00f3n), y por tanto los campos est\u00e1ticos ya no reflejar\u00e1n los datos que generaron el evento. Ser\u00e1 necesario pasar la informaci\u00f3n necesaria como par\u00e1metro del evento.<\/p>\n<h1>Animaciones y efectos<\/h1>\n<h3>Transiciones\u00a0(Tweens)<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6760\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_tweener.html\">Referencia UITweener<\/a><\/p>\n<p>NGUI incluye varias transiciones o <em>tweens<\/em> para a\u00f1adir efectos visuales a los componentes del interface. Cada transici\u00f3n afecta a una o varias propiedades de los componentes (ancho, alto, transparencia, color&#8230;). <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITweener-UITweenColor.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1078\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITweener-UITweenColor.png\" alt=\"NGUI UITweener UITweenColor\" width=\"186\" height=\"195\" \/><\/a> Las transiciones a\u00f1adidas a un objeto est\u00e1n activadas por defecto: se lanzar\u00e1n al iniciar la ejecuci\u00f3n. Para evitarlo basta <strong>desactivar<\/strong> el componente en el objeto.<\/p>\n<p>Todas transiciones derivan de <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_tweener.html\"><strong>UITweener<\/strong><\/a> y comparten la misma funcionalidad:<\/p>\n<ul>\n<li>Campos <em><strong>From<\/strong><\/em> y <em><strong>To<\/strong> <\/em>representando los valores inicial y final.<\/li>\n<li><em><strong>Animation Curve<\/strong><\/em>: determina la interpolaci\u00f3n precisa entre From y To.<\/li>\n<li><strong><em>Duration<\/em><\/strong>: tiempo que llevar\u00e1 la transici\u00f3n, en segundos, con\u00a0<em><strong>Start Delay<\/strong><\/em>\u00a0de retardo antes de comenzar.<\/li>\n<li><strong>Tween Group<\/strong>: permite diferenciar varios componentes Tween en el mismo objeto y\u00a0lanzarlos de forma selectiva\u00a0seg\u00fan ID. Por defecto (valor 0) se lanzan todas las transiciones en el\u00a0objeto simult\u00e1neamente.<\/li>\n<\/ul>\n<p>Exponen el evento <em>OnFinished<\/em>, que se lanza\u00a0una vez completada la transici\u00f3n.<\/p>\n<h4>Transiciones en NGUI y componentes que admiten<\/h4>\n<ul>\n<li><strong>TweenAlpha<\/strong>: UIRect<\/li>\n<li><strong>TweenColor<\/strong>: UIWidget, Material, Light<\/li>\n<li><strong>TweenFOV<\/strong>: Camera<\/li>\n<li><strong>TweenHeight<\/strong>:\u00a0UIWidget, con\u00a0notificaci\u00f3n a UITable<\/li>\n<li><strong>TweenOrtoSize<\/strong>: Camera<\/li>\n<li><strong>TweenPosition<\/strong>: UIRect, Transform<\/li>\n<li><strong>TweenRotation<\/strong>: Transform<\/li>\n<li><strong>TweenScale<\/strong>: Transform, con notificaci\u00f3n a UITable<\/li>\n<li><strong>TweenTransform<\/strong>: Transform<\/li>\n<li><strong>TweenVolume<\/strong>: AudioSource<\/li>\n<li><strong>TweenWidth<\/strong>: UIWidget, con notificaci\u00f3n a UITable<\/li>\n<\/ul>\n<h4>Lanzar transiciones<\/h4>\n<ul>\n<li>Componente\u00a0<strong>UIPlayTween<\/strong> (Attach &gt; Play Tween Script) en cualquier elemento interactivo o collider.<\/li>\n<li>Invocando las funciones\u00a0<strong>Play(), Toggle(), PlayForward()<\/strong>\u00a0o <strong>PlayReverse()<\/strong> desde el c\u00f3digo o desde un evento (ej. desde OnFinished).<\/li>\n<li>Creando una transici\u00f3n sobre la marcha en c\u00f3digo mediante la funci\u00f3n <strong>Begin()<\/strong>, por ejemplo:\n<pre>TweenPosition.Begin(targetGameObject, duration, targetPosition)<\/pre>\n<\/li>\n<\/ul>\n<p>Se puede combinar la creaci\u00f3n por c\u00f3digo con la ejecuci\u00f3n al\u00a0terminar usando EventDelegate:<\/p>\n<pre>void OnTween1Complete ()\r\n    {\r\n    \/\/ ...se invoca al finalizar la transici\u00f3n...\r\n    }<\/pre>\n<pre>void MyButtonClicked ()\r\n    {\r\n    TweenScale tweenScale = TweenScale.Begin(gameObject, 0.2f, Vector3.one * 1.5f);\r\n    EventDelegate.Add(tweenScale.onFinished, OnTween1Complete);\r\n    }<\/pre>\n<h3>UIPlayTween<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6760\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_play_tween.html\">Referencia<\/a><\/p>\n<p>Lanza\u00a0una transici\u00f3n cuando se produce un evento. Requiere un Collider. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1081\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayTween.jpg\" alt=\"NGUI UIPlayTween\" width=\"231\" height=\"161\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayTween.jpg 307w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayTween-300x209.jpg 300w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/> Las transiciones se invocar\u00e1n\u00a0en el <em><strong>Target<\/strong><\/em>. Si hay m\u00e1s de una se lanzan todas, salvo\u00a0que se indique un grupo en <em><strong>Tween Group<\/strong><\/em>. <strong><em>Include Children<\/em><\/strong> las desencadena tambi\u00e9n en los objetos hijos de Target. <strong><em>Trigger condition<\/em><\/strong> indica el evento que lanza\u00a0la transici\u00f3n.<\/p>\n<p>Los eventos de ida y vuelta (<em>OnHover<\/em>, <em>OnPress<\/em>, <em>OnSelect<\/em>, <em>OnActivate<\/em>) lanzan la transici\u00f3n\u00a0en un sentido al &#8220;activarse&#8221; y en el otro al &#8220;desactivarse&#8221;. <strong><em>Play Direction<\/em><\/strong> invierte el sentido de la transici\u00f3n.<\/p>\n<p>Expone el evento\u00a0<em>OnFinished<\/em>, que se lanza\u00a0una vez completada la transici\u00f3n.<\/p>\n<h3>UIPlayAnimation<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6762.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_play_animation.html\">Referencia<\/a><\/p>\n<p>Lanza una animaci\u00f3n cuando se produce un evento. Es pr\u00e1cticamente id\u00e9ntico a UIPlayTween, pero lanza animaciones de Unity en lugar de transiciones de NGUI. Requiere un Collider. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayAnimation.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1117\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayAnimation.png\" alt=\"NGUI UIPlayAnimation\" width=\"232\" height=\"166\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayAnimation.png 330w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlayAnimation-300x214.png 300w\" sizes=\"auto, (max-width: 232px) 100vw, 232px\" \/><\/a> La forma simple de a\u00f1adir una animaci\u00f3n a un componente es\u00a0abrir el <a href=\"http:\/\/docs.unity3d.com\/Manual\/animeditor-UsingAnimationEditor.html\">editor de animaciones de Unity<\/a> (Ctrl-6), a\u00f1adir una curva y escoger los componentes y propiedades a animar. Grabar las animaciones con el editor, y luego referenciarlas desde UIPlayAnimation.<\/p>\n<p>Para reproducir animaciones desde c\u00f3digo se pueden usar las funciones <strong>ActiveAnimation.Play()<\/strong>, por ejemplo:<\/p>\n<pre>ActiveAnimation.Play(targetAnimation, AnimationOrTween.Direction.Forward);<\/pre>\n<h3>UIPlaySound<\/h3>\n<p>Reproduce un sonido cuando se produce un evento. Requiere un collider.\u00a0<a href=\"http:\/\/www.tasharen.com\/ngui\/docs\/class_u_i_play_sound.html\">Referencia<\/a> <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlaySound.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1118 \" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlaySound.png\" alt=\"NGUI UIPlaySound\" width=\"276\" height=\"89\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlaySound.png 345w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPlaySound-300x97.png 300w\" sizes=\"auto, (max-width: 276px) 100vw, 276px\" \/><\/a><\/p>\n<h1>Componentes\u00a0visuales<\/h1>\n<h3>UIRect<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=7013\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_rect.html\">Referencia<\/a>\u00a0| <a href=\"http:\/\/www.youtube.com\/watch?v=P8JTTE0JBXQ\">Video<\/a><\/p>\n<p>Los paneles y componentes\u00a0(<em>widgets<\/em>) heredan de UIRect. No se puede instanciar directamente, pero\u00a0implementa\u00a0toda la funcionalidad de posicionamiento, dimensi\u00f3n y anclajes (<em>Anchors<\/em>). Es muy recomendable ver el <a href=\"http:\/\/www.youtube.com\/watch?v=P8JTTE0JBXQ\">video<\/a> para entender c\u00f3mo funciona.<\/p>\n<h4>Anclajes (<em>Anchors<\/em>)<\/h4>\n<p>Cada elemento de NGUI tiene un \u00e1rea modificable cuyos l\u00edmites se \u00a0pueden anclar (<em>anchor<\/em>) a otros elementos\u00a0o incluso a objetos 3D\u00a0(<em>Target<\/em>). Con\u00a0<em>Unified<\/em> se indica un s\u00f3lo elemento, mientras que <em>Advanced<\/em> permite escoger un elemento para cada cara. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-1053 \" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Anchor-unified.jpg\" alt=\"NGUI Anchor unified\" width=\"434\" height=\"148\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Anchor-unified.jpg 560w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Anchor-unified-300x102.jpg 300w\" sizes=\"auto, (max-width: 434px) 100vw, 434px\" \/> Para establecer un anclaje, mueve el elemento a la posici\u00f3n y tama\u00f1o deseados, escoge el tipo de anclaje y arrastra en <em>Target<\/em> el elemento al que quieres anclarlo. Los valores del anclaje se rellenar\u00e1n autom\u00e1ticamente.<\/p>\n<p>Para que un elemento interior\u00a0se mantenga siempre &#8220;dentro&#8221; de otro, hazlo hijo de ese elemento y escoge la opci\u00f3n <em>Unified<\/em>.\u00a0El padre se escoger\u00e1 autom\u00e1ticamente como Target y se configurar\u00e1n\u00a0los valores iniciales para tu comodidad. Entonces puedes ajustarlo desde la vista Scene o modificando las opciones.<\/p>\n<p>Para cada cara se especifica un anclaje relativo al Target y un desplazamiento (<em>offset<\/em>) absoluto en pixels. El valor relativo puede ser uno de los predeterminados (<em>Left, Right, Center, Top, Bottom<\/em>) o una posici\u00f3n <em>Custom<\/em> cualquiera en el Target. El valor Custom es 0.0 para Left\/Bottom, 0.5 para Center y 1.0 para Right\/Top. La posici\u00f3n final de la cara es:<\/p>\n<p style=\"padding-left: 30px;\">Final position\u00a0= Target&#8217;s width or height * relative + absolute<\/p>\n<p><span style=\"text-decoration: underline;\"><strong>Nota<\/strong><\/span>: El sistema de anclajes es siempre exacto\u00a0con c\u00e1maras ortogr\u00e1ficas (2D).\u00a0Las c\u00e1maras con perspectiva aplican\u00a0los anclajes dependiendo de\u00a0la distancia Z de la c\u00e1mara al interface y el <em>aspect ratio<\/em> de la vista.<\/p>\n<h3>UIWidget<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6702.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_widget.html\">Referencia<\/a><\/p>\n<p>El componente visual m\u00e1s b\u00e1sico del que heredan todos los dem\u00e1s elementos visuales del interface. Es s\u00f3lo un rect\u00e1ngulo que se puede posicionar, dimensionar y anclar como se quiera. Tiene \u00e1rea pero es completamente invisible, por lo que es \u00fatil\u00a0para\u00a0contener a otros\u00a0componentes al\u00a0organizar la estructura del interface. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWidget.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1054\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWidget.jpg\" alt=\"NGUI UIWidget\" width=\"439\" height=\"163\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWidget.jpg 559w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWidget-300x111.jpg 300w\" sizes=\"auto, (max-width: 439px) 100vw, 439px\" \/><\/a><\/p>\n<ul>\n<li>Se puede mover, escalar y rotar con\u00a0los botones de ajuste azules. Matener Ctrl pulsado para\u00a0desactivar el ajuste autom\u00e1tico (<em>snapping<\/em>) a bordes y otros componentes.<\/li>\n<li>A\u00f1adirle un <em>Box Collider<\/em> para recibir los eventos de NGUI. Se mostrar\u00e1 una nueva opci\u00f3n para ajustar autom\u00e1ticamente el tama\u00f1o del collider al componente.<\/li>\n<li>El valor de profundidad <strong><em>Depth<\/em> <\/strong>determina el orden en que se recibir\u00e1n los eventos y, en los\u00a0componentes visuales, el orden de dibujado. En la vista de Scene, el men\u00fa contextual &#8220;Select&#8221; del componente muestra todos los elementos bajo el rat\u00f3n ordenados por Depth.<\/li>\n<li>La posici\u00f3n y rotaci\u00f3n del componente\u00a0(<em>transform.position, rotation<\/em>)\u00a0se establecen sobre\u00a0su <strong><em>Pivot<\/em> <\/strong>u origen. Para los componentes\u00a0hijos el origen de coordenadas (0,0) se localiza en el Pivot del padre.<\/li>\n<\/ul>\n<h3>UITexture<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6703.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_texture.html\">Referencia<\/a><\/p>\n<p>El elemento visible\u00a0m\u00e1s simple. Hereda toda la funcionalidad de UIWidget pero a\u00f1ade un elemento visual (textura) que se ajusta a las dimensiones del componente. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITexture.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1056\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITexture.jpg\" alt=\"NGUI UITexture\" width=\"451\" height=\"151\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITexture.jpg 726w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITexture-300x100.jpg 300w\" sizes=\"auto, (max-width: 451px) 100vw, 451px\" \/><\/a><\/p>\n<ul>\n<li>Se puede escoger una textura (<em>Texture<\/em>) o un Material. Si se especifican ambos\u00a0se usa esta textura en lugar de la que traiga el material. En vez de Material se puede indicar un Shader directamente.<\/li>\n<li>La opci\u00f3n &#8220;Make Pixel Perfect&#8221; del men\u00fa contextual ajusta el componente a las dimensiones originales de la textura.<\/li>\n<\/ul>\n<p>El interface entero se puede hacer con UITextures y despu\u00e9s\u00a0crear un <em>Atlas<\/em> con ellas\u00a0(m\u00e1s \u00f3ptimo). Para ello se selecciona el objeto ra\u00edz del interface antes de crear el atlas en el <em>Atlas Maker<\/em>. Todas las texturas se combinan en el atlas y los objetos UITexture se sustituyen por UISprite.<\/p>\n<h3>UISprite<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6704.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_sprite.html\">Referencia<\/a><\/p>\n<p>La piedra angular de los interfaces en NGUI. Muestra un <em>Sprite<\/em> extra\u00eddo de un Atlas e incorpora toda la funcionalidad de UIWidget. Para usar los sprites es necesario crear primero\u00a0un <em>Atlas<\/em> con el <em>Atlas Maker<\/em>. Un Atlas es un conjunto de sprites agrupados en la misma textura. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UISprite.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1057\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UISprite.jpg\" alt=\"NGUI UISprite\" width=\"411\" height=\"186\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UISprite.jpg 581w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UISprite-300x135.jpg 300w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/a><\/p>\n<ul>\n<li>El bot\u00f3n Edit\u00a0configura el sprite dentro del Atlas. Permite\u00a0establecer los bordes para el\u00a0tipo de sprite\u00a0<em>Sliced<\/em>.<\/li>\n<li>El tipo de sprite establece c\u00f3mo se utiliza \u00e9ste para rellenar el \u00e1rea de componente (Simple, Filled, Tiled, Sliced)<\/li>\n<li>La opci\u00f3n &#8220;Make Pixel Perfect&#8221; del men\u00fa contextual ajusta el componente a las dimensiones del sprite.<\/li>\n<\/ul>\n<p>Para\u00a0cambiar el sprite por\u00a0c\u00f3digo usar la propiedad <em>spriteName<\/em>:<\/p>\n<pre>UISprite sprite = GetComponent&lt;UISprite&gt;();\r\nsprite.spriteName = \"Un Sprite\";<\/pre>\n<p>El nombre del sprite debe existir en el Atlas.\u00a0Es sensible a may\u00fasculas\/min\u00fasculas.<\/p>\n<h3>UILabel<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6706.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_label.html\">Referencia<\/a><\/p>\n<p>Es un UIWidget que muestra texto. Este componente requiere una fuente de letra (<em>Font<\/em>). La fuente puede ser din\u00e1mica (cogiendo una fuente de Unity) o puede ser una fuente Bitmap (una fuente pre-generada dentro de un Atlas). <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UILabel.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1058\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UILabel.jpg\" alt=\"NGUI UILabel\" width=\"427\" height=\"263\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UILabel.jpg 780w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UILabel-300x184.jpg 300w\" sizes=\"auto, (max-width: 427px) 100vw, 427px\" \/><\/a><\/p>\n<ul>\n<li>El <em>Pivot<\/em> del widget\u00a0define la alineaci\u00f3n vertical del texto. <em>Alignment<\/em> define la alineaci\u00f3n horizontal.<\/li>\n<li>El tipo de fuente <em>Dynamic<\/em> permite indicar el tama\u00f1o de fuente directamente en el componente. Tambi\u00e9n permite escoger el material para mostrar la fuente.<\/li>\n<li>El texto puede recibir un efecto de sombra o borde, pero a costa de multiplicar\u00a0la geometr\u00eda (x2 en sombra, x5 en borde).<\/li>\n<\/ul>\n<p>La propiedad <em>Overflow<\/em> define qu\u00e9 ocurre cuando el texto se sale del \u00e1rea del widget:<\/p>\n<ul>\n<li><em>Shrink Content<\/em>: reduce el tama\u00f1o del texto\u00a0para que encaje\u00a0dentro del componente. La calidad es mejor\u00a0en fuentes din\u00e1micas con <em>Keep crisp<\/em> activado porque se reduce el tama\u00f1o de la fuente en lugar de escalar el texto.<\/li>\n<li><em>Clamp Content<\/em>: el texto que no entra se corta sin m\u00e1s.<\/li>\n<li><em>Resize Freely<\/em>: ajusta el tama\u00f1o del componente al texto que contenga. No ser\u00e1 posible redimensionar el componente manualmente.<\/li>\n<li><em>Resize Height<\/em>: ajusta el alto del componente al texto, pero conserva el ancho constante.<\/li>\n<\/ul>\n<p>Se pueden indicar c\u00f3digos de color y <em>BBCode<\/em> para a\u00f1adir decoraciones al texto:<\/p>\n<p style=\"padding-left: 30px;\">[ff9900]<span style=\"color: #ff9900;\">Texto coloreado<\/span>[-]\n[b]<strong>Negrita<\/strong>[\/b]\n[i]<em>Cursiva<\/em>[\/i]\n[s]<del>Tachado<\/del>[\/s]\n[url=mensaje o url]<a href=\"#\">Enlace clickable<\/a>[\/url]\n[sup]<sup>super\u00edndice<\/sup>[\/sup]\n[sub]<sub>sub\u00edndice<\/sub>[\/sub]\n<p>Para cambiar el texto por c\u00f3digo usar la propiedad <em>text<\/em>:<\/p>\n<pre>UILabel lbl = GetComponent&lt;UILabel&gt;();\r\nlbl.text = \"Hola Mundo!\";<\/pre>\n<p>Para\u00a0detectar los clicks en los enlaces en el texto (BBCode <em>url<\/em>) a\u00f1adir al objeto un Collider y un script implementando <em>OnClick<\/em>:<\/p>\n<pre>void OnClick ()\r\n    {\r\n    UILabel lbl = GetComponent&lt;UILabel&gt;();\r\n    string url = lbl.GetUrlAtPosition(UICamera.lastHit.point);\r\n    Debug.Log(\"Clicked on: \" + url);\r\n    }<\/pre>\n<h1>Componentes interactivos<\/h1>\n<h3>UIButton<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6708\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_button.html\">Referencia<\/a><\/p>\n<p>Componente simple que responde a\u00a0los eventos <em>hover<\/em>, <em>pressed<\/em> y <em>click<\/em>. , y puede cambiar el color de un sprite (<em>Target<\/em>) y\/o el propio sprite en base a esos eventos. Cualquier objeto\u00a0con un Collider puede actuar como bot\u00f3n, tanto en el interface como en la escena. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIButton.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1070\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIButton.jpg\" alt=\"NGUI UIButton\" width=\"374\" height=\"190\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIButton.jpg 620w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIButton-300x152.jpg 300w\" sizes=\"auto, (max-width: 374px) 100vw, 374px\" \/><\/a> Normalmente el Target ser\u00e1 un widget (sprite, label, texture), pero tambi\u00e9n puede ser una luz o incluso un <em>renderer<\/em>. Es buena idea poner UIButton en el mismo objeto que tiene el sprite de fondo del bot\u00f3n. Se puede usar ALT+SHIFT+C para crear un collider, y entonces activar &#8220;Box Collider&#8221; para que se ajuste autom\u00e1ticamente.<\/p>\n<p>Expone el evento\u00a0<em>OnClick<\/em>.<\/p>\n<p>NGUI ofrece complementos a UIButton que\u00a0incorporan efectos de desplazamiento, rotaci\u00f3n y escala (<strong>UIButtonOffset<\/strong>, <strong>UIButtonRotation<\/strong>, <strong>UIButtonScale<\/strong>) as\u00ed como la posibilidad de activar objetos remotos (<strong>UIButtonActivate<\/strong>).<\/p>\n<h3>UIToggle<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6709\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_toggle.html\">Referencia<\/a><\/p>\n<p>Componente gen\u00e9rico que tiene dos estados: encendido\u00a0y apagado (<em>on<\/em> \/ <em>off<\/em>). Permite crear checkboxes, pesta\u00f1as, botones de selecci\u00f3n, etc. \u00a0El componente en s\u00ed puede mostrar y ocultar un <em>Sprite<\/em>\u00a0en funci\u00f3n de su estado. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIToggle.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1069\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIToggle.jpg\" alt=\"NGUI UIToggle\" width=\"367\" height=\"161\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIToggle.jpg 474w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIToggle-300x131.jpg 300w\" sizes=\"auto, (max-width: 367px) 100vw, 367px\" \/><\/a> En su forma b\u00e1sica, un <em>toggle<\/em>\u00a0se compone de\u00a0dos sprites, fondo (padre) y marca (hijo). El componente UIToggle va en el fondo, con el collider, y la marca se referencia en el par\u00e1metro\u00a0<em>Sprite<\/em> de UIToggle. Para comportamientos\u00a0m\u00e1s espec\u00edficos (ej. cambios de color o de escala) debe a\u00f1adirse un componente UIPlayTween\u00a0respondiendo a <em>OnActivate<\/em>\u00a0junto con las transiciones (<em>Tweens<\/em>) correspondientes.<\/p>\n<p>Expone el evento <em>OnChange<\/em>.<\/p>\n<ul>\n<li>Se puede convertir en un grupo de selecci\u00f3n con un identificador de grupo (<em>Group<\/em>).<\/li>\n<li>Para hacer pesta\u00f1as, los sprites de fondo y marca son el mismo pero el de fondo siendo m\u00e1s oscuro (o el de marca m\u00e1s brillante).<\/li>\n<li>Para activar y desactivar objetos o componentes se pueden usar los scripts <strong>UIToggledObjects<\/strong> y <strong>UIToggledComponentes<\/strong>.<\/li>\n<\/ul>\n<h3>UIProgressBar<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6738.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_progress_bar.html\">Referencia<\/a><\/p>\n<p>Componente que implementa una barra de progreso. Su valor\u00a0se establece entre 0 y 1 con\u00a0la propiedad <strong><em>Value<\/em><\/strong>. No es interactivo en s\u00ed mismo, pero sus variantes\u00a0<em>UISlider<\/em> y\u00a0<em>UIScrollBar<\/em> s\u00ed implementan interacci\u00f3n. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIProgressBar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1108\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIProgressBar.png\" alt=\"NGUI UIProgressBar\" width=\"363\" height=\"138\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIProgressBar.png 584w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIProgressBar-300x114.png 300w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/a> Requiere al menos un widget <em>Foreground<\/em> o <em>Background<\/em> que delimite el \u00e1rea de la barra. Si se indican ambos se utiliza el <em>Foreground<\/em>. Se puede indicar un &#8220;mando&#8221;\u00a0o\u00a0<em>Thumb<\/em> opcional.<\/p>\n<ul>\n<li>El widget\u00a0<em>Foreground<\/em> se escala proporcionalmente al valor actual de la barra.<\/li>\n<li>El <em>Thumb<\/em> se sit\u00faa en la posici\u00f3n proporcional al valor actual de la barra. Puede ser cualquier Transform.<\/li>\n<li>El fondo <em>Background<\/em>\u00a0se escala al tama\u00f1o de la barra.<\/li>\n<\/ul>\n<p>Expone el evento <em>OnValueChange<\/em>.<\/p>\n<ul>\n<li>Para mostrar el valor o el porcentaje en un texto\u00a0(UILabel) se pueden invocar los m\u00e9todos <strong>UILabel.SetCurrentProgress<\/strong> o <strong>UILabel.SetCurrentPercent<\/strong> desde el evento <em>OnValueChange<\/em>.<\/li>\n<\/ul>\n<h3>UISlider<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6715.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_slider.html\">Referencia<\/a><\/p>\n<p>Es una barra de progreso que se puede tocar y arrastrar\u00a0para cambiar su valor. Requiere un <em>Collider<\/em> para recibir los eventos del usuario.\u00a0Por lo dem\u00e1s se muestra y funciona\u00a0exactamente igual que UIProgressBar.<\/p>\n<h3>UIScrollBar<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6733.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_scroll_bar.html\">Referencia<\/a><\/p>\n<p>Es un slider\u00a0cuyo recorrido depende del tama\u00f1o de la &#8220;zona visible&#8221; (<strong><em>Size<\/em><\/strong>). El widget <em>Foreground<\/em> se escala de acuerdo a ese tama\u00f1o, de forma que el valor entre 0 y 1 (<strong><em>Value<\/em><\/strong>) se refleja\u00a0por la posici\u00f3n del <em>Foreground<\/em>. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollBar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1109\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollBar.png\" alt=\"NGUI UIScrollBar\" width=\"351\" height=\"152\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollBar.png 554w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollBar-300x129.png 300w\" sizes=\"auto, (max-width: 351px) 100vw, 351px\" \/><\/a><\/p>\n<h3>UIPopupList<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6751.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_popup_list.html\">Referencia<\/a><\/p>\n<p>Componente que implementa una lista desplegable de opciones seleccionables. Se puede aplicar a cualquier Collider, generalmente junto con un UIButton. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPopupList.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1113\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPopupList.jpg\" alt=\"NGUI UIPopupList\" width=\"362\" height=\"285\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPopupList.jpg 681w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIPopupList-300x236.jpg 300w\" sizes=\"auto, (max-width: 362px) 100vw, 362px\" \/><\/a> El campo <strong><em>Options<\/em><\/strong> configura las opciones que se mostrar\u00e1n. La secci\u00f3n <strong><em>Atlas<\/em><\/strong> configura los sprites que se usar\u00e1n como fondo de la lista (<em>Background<\/em>) y como marco de la selecci\u00f3n (<em>Highlight<\/em>). La secci\u00f3n <strong><em>Font<\/em><\/strong> configura el texto para mostrar la lista de opciones. La propiedad <em><strong>value<\/strong><\/em>\u00a0contiene el texto de la opci\u00f3n seleccionada.<\/p>\n<p>El \u00edndice se puede obtener con items.IndexOf(value):<\/p>\n<pre>int selectedIndex = UIPopupList.current.items.IndexOf(UIPopupList.current.value);<\/pre>\n<p>Expone el evento <em>OnValueChange<\/em>.<\/p>\n<ul>\n<li>Para mostrar la selecci\u00f3n actual en un texto\u00a0(UILabel) se puede invocar el m\u00e9todo\u00a0<strong>UILabel.SetCurrentSelection<\/strong>\u00a0desde el evento\u00a0<em>OnValueChange<\/em>.<\/li>\n<li>Con\u00a0<em>Localized<\/em>\u00a0activado se indican las claves\u00a0<em>Key<\/em>\u00a0de traducci\u00f3n, que se sustituir\u00e1n autom\u00e1ticamente por los textos localizados.<\/li>\n<\/ul>\n<h1>Componentes organizativos<\/h1>\n<h3>UIScrollView<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6763\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_scroll_view.html\">Referencia<\/a><\/p>\n<p>Convierte un panel (UIPanel) en una vista desplazable. El recuadro naranja muestra la extensi\u00f3n actual del contenido del panel. <img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1071\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollView.jpg\" alt=\"NGUI UIScrollView\" width=\"376\" height=\"228\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollView.jpg 564w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIScrollView-300x181.jpg 300w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/p>\n<ol>\n<li>Seleccionar el panel y escoger &#8220;Attach &gt; Scroll View&#8221; del men\u00fa contextual.<\/li>\n<li>A\u00f1adir componentes <strong>UIDragScrollView<\/strong> a todos los <em>colliders<\/em> que se quieran usar para desplazar el panel. Seleccionar cada collider y escoger &#8220;Attach &gt; Drag Scroll view&#8221; del men\u00fa contextual. Si hay varios colliders (ej. componentes\u00a0interactivos) todos deben tener su componente UIDragScrollView para que puedan mover el panel.<\/li>\n<\/ol>\n<p>Se pueden especificar barras de desplazamiento (UIScrollBar) horizontal y\/o vertical. Las barras de desplazamiento deben estar fuera del panel UIScrollView\u00a0(no deben ser hijos de \u00e9ste): <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIScrollView-con-scrollbar.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1073\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UIScrollView-con-scrollbar.png\" alt=\"UIScrollView con scrollbar\" width=\"203\" height=\"93\" \/><\/a> <strong>Nota:<\/strong> a\u00f1adir elementos a la vista\u00a0en tiempo de ejecuci\u00f3n requiere llamar a <strong>UIScrollView.UpdateScrollbars<\/strong> para que las barras se actualicen apropiadamente. Al desplazar la vista se puede centrar autom\u00e1ticamente en cada elemento. Para ello se agrupan\u00a0\u00e9stos bajo un padre com\u00fan con el componente\u00a0<strong>UICenterOnChild<\/strong>: <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UISCrollView-con-UICenterOnChild.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1074\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/UISCrollView-con-UICenterOnChild.png\" alt=\"UISCrollView con UICenterOnChild\" width=\"194\" height=\"120\" \/><\/a> Para crear paneles de desplazamiento\u00a0sin fin se utiliza\u00a0el componente <strong>UIWrapContent<\/strong>: <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWrapContent.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1072\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWrapContent.jpg\" alt=\"NGUI UIWrapContent\" width=\"353\" height=\"103\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWrapContent.jpg 534w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIWrapContent-300x87.jpg 300w\" sizes=\"auto, (max-width: 353px) 100vw, 353px\" \/><\/a><\/p>\n<h3>UIGrid<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6756\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_grid.html\">Referencia<\/a><\/p>\n<p>Organiza los widgets\u00a0hijos\u00a0en una cuadr\u00edcula de posiciones de tama\u00f1o fijo. Funciona en el editor (comando &#8220;Execute&#8221; del men\u00fa contextual) y en ejecuci\u00f3n. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIGrid.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1075\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIGrid.jpg\" alt=\"NGUI UIGrid\" width=\"436\" height=\"125\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIGrid.jpg 872w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIGrid-300x86.jpg 300w\" sizes=\"auto, (max-width: 436px) 100vw, 436px\" \/><\/a> Se le puede a\u00f1adir el componente <strong>UICenterOnChild<\/strong>\u00a0cuando se usa dentro de un <em>scroll view<\/em> para que \u00e9ste se centre en cada elemento autom\u00e1ticamente. Para organizar en posiciones de tama\u00f1o variable usar UITable.<\/p>\n<h3>UITable<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6758\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_table.html\">Referencia<\/a><\/p>\n<p>Organiza los widgets hijos en celdas de tama\u00f1o variable, similar a las celdas de una tabla HTML. Funciona en el editor (comando \u00a0&#8220;Execute&#8221; del men\u00fa contextual) y en ejecuci\u00f3n. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITable.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1076\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITable.jpg\" alt=\"NGUI UITable\" width=\"508\" height=\"100\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITable.jpg 1073w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITable-300x58.jpg 300w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UITable-1024x201.jpg 1024w\" sizes=\"auto, (max-width: 508px) 100vw, 508px\" \/><\/a> Una tabla siempre se extiende hacia la derecha el n\u00famero de columnas (<em>Columns<\/em>) indicado, entonces empezar\u00e1 una nueva l\u00ednea por encima o por debajo en funci\u00f3n de <em>Direction<\/em>.<\/p>\n<ul>\n<li>El orden por defecto ser\u00e1 el de la creaci\u00f3n de los objetos hijos, salvo que se indique otro orden.<\/li>\n<li>El <em>Pivot<\/em> de los hijos establece su\u00a0alineaci\u00f3n en las celdas de la tabla.<\/li>\n<li>Las transiciones\u00a0<strong>TweenScale<\/strong>, <strong>TweenWidth<\/strong> y <strong>TweenHeight<\/strong> en los hijos notifican a la tabla, de forma que los dem\u00e1s objetos se reposicionar\u00e1n din\u00e1micamente\u00a0seg\u00fan sea necesario.<\/li>\n<\/ul>\n<p>Para organizar en celdas de tama\u00f1o fijo usar UIGrid.<\/p>\n<h1>Componentes de entrada de texto y teclado<\/h1>\n<h3>UIInput<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=6752.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_input.html\">Referencia<\/a><\/p>\n<p>Implementa un cuadro de entrada donde se el usuario puede escribir texto. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIInput.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1121\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIInput.png\" alt=\"NGUI UIInput\" width=\"240\" height=\"200\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIInput.png 342w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIInput-300x250.png 300w\" sizes=\"auto, (max-width: 240px) 100vw, 240px\" \/><\/a> La forma m\u00e1s simple para un cuadro de entrada es un sprite o widget como fondo y un <strong>UIlabel<\/strong> hijo, que se referencia desde el campo <em><strong>Label<\/strong><\/em>. En el sprite\u00a0se a\u00f1aden el Collider y el UIInput.\u00a0El valor actual en la entrada se guarda en <strong>UIInput.value<\/strong>.<\/p>\n<p>Expone los eventos <em>OnChange<\/em>, <em>OnSubmit<\/em>.<\/p>\n<ul>\n<li><strong><em>Saved As<\/em><\/strong> guarda autom\u00e1ticamente el valor del campo en <a href=\"http:\/\/docs.unity3d.com\/ScriptReference\/PlayerPrefs.html\">PlayerPrefs<\/a> de Unity bajo la clave indicada.<\/li>\n<li><em><strong>Select On Tab<\/strong><\/em> indica el objeto al que se pasar\u00e1 la selecci\u00f3n cuando se pulse Tab. El cambio de\u00a0selecci\u00f3n tambi\u00e9n se puede forzar en el\u00a0c\u00f3digo, por ejemplo desde el evento OnSubmit:\n<pre>UICamera.selectedObject = UIInput.current.selectOnTab;<\/pre>\n<\/li>\n<li>El campo est\u00e1tico <em><strong>UIInput.selection<\/strong><\/em>\u00a0apunta al UIInput seleccionado, si hay alguno.<\/li>\n<li>Para leer el valor desde los eventos se utiliza <em><strong>UIInput.current.value<\/strong><\/em>.<\/li>\n<li>Se puede adjuntar un script <strong>UIKeyBinding<\/strong> para seleccionar la entrada si se pulsa una tecla. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIKeyBinding.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1122\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIKeyBinding.jpg\" alt=\"NGUI UIKeyBinding\" width=\"223\" height=\"60\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIKeyBinding.jpg 308w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-UIKeyBinding-300x80.jpg 300w\" sizes=\"auto, (max-width: 223px) 100vw, 223px\" \/><\/a><\/li>\n<\/ul>\n<p>Configuraci\u00f3n aplicable al\u00a0<strong>UILabel<\/strong>:<\/p>\n<ul>\n<li><em><strong>Max Lines<\/strong> = 1<\/em> limita la entrada a una sola l\u00ednea<\/li>\n<li>El texto (<em><strong>text<\/strong><\/em>) ser\u00e1 el\u00a0<em>placeholder<\/em> que se muestre cuando no hay entrada (ej. &#8220;escribe nombre aqu\u00ed&#8221;).<\/li>\n<li>Normalmente la propiedad <strong><em>Overflow<\/em><\/strong> se deja en <strong><em>Clamp Content<\/em><\/strong> para que el texto se desplace correctamente cuando el usuario escribe m\u00e1s all\u00e1 del ancho de la entrada.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><em>(pr\u00f3ximamente)<\/em> UIKeyBinding, UIKeyNavigation<\/p>\n<h1>Contenidos\u00a0y enlace de datos<\/h1>\n<h3>Localizaci\u00f3n \/ Multi-idioma<\/h3>\n<p><a href=\"http:\/\/www.tasharen.com\/forum\/index.php?topic=8092.0\">Descripci\u00f3n<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_u_i_localize.html\">Referencia UILocalize<\/a> | <a href=\"http:\/\/tasharen.com\/ngui\/docs\/class_localization.html\">Referencia Localization<\/a><\/p>\n<p>Para configurar m\u00faltiples idiomas basta crear un fichero CSV con todos los textos, y a\u00f1adir el componente <strong>UILocalize<\/strong> a los textos\u00a0y sprites que deben ser localizados. <a href=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Localization.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter  wp-image-1082\" src=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Localization.jpg\" alt=\"NGUI Localization\" width=\"524\" height=\"221\" srcset=\"https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Localization.jpg 762w, https:\/\/www.edy.es\/dev\/wp-content\/uploads\/2014\/05\/NGUI-Localization-300x126.jpg 300w\" sizes=\"auto, (max-width: 524px) 100vw, 524px\" \/><\/a><\/p>\n<ul>\n<li>La primera columna es para las claves (<strong><em>keys<\/em><\/strong>) que se usar\u00e1n en el campo <strong>Key<\/strong> del componente UILocalize.<\/li>\n<li>Las dem\u00e1s columnas son una por cada idioma, y contienen los textos localizados a\u00a0cada uno.<\/li>\n<li>La <strong>primera fila<\/strong> contiene KEY<sup>1<\/sup> en la primera celda y los nombres de los idiomas<sup>2,3<\/sup> en las dem\u00e1s.<\/li>\n<\/ul>\n<p>El fichero debe llamarse <strong>Localization.csv<\/strong> y debe estar en una carpeta <strong>Resources<\/strong> dentro del proyecto. Para localizar cualquier texto o sprite, a\u00f1adirle el componente <strong>UILocalize<\/strong> e indicar la clave (<strong>Key<\/strong>) definida en el fichero CSV. El campo Key de UILocalize tiene autocompletado, de forma que basta comenzar a escribir la clave para obtener una lista de las claves disponibles. La secci\u00f3n Preview muestra los valores correspondientes a la clave seleccionada.<\/p>\n<p>Se puede cambiar el idioma en la aplicaci\u00f3n a\u00f1adiendo un\u00a0componente <strong>LanguageSelection<\/strong> a una lista desplegable (UIPopupList) o bien desde c\u00f3digo, indicando el nombre del idioma definido en la primera fila del CSV:<\/p>\n<pre>Localization.language = \"Spanish\";<\/pre>\n<p>Tambi\u00e9n es posible utilizar el sistema de localizaci\u00f3n desde c\u00f3digo, indicando una\u00a0clave de la primera columna del CSV:<\/p>\n<pre>string localizedString =\u00a0Localization.Get(\"key\");<\/pre>\n<p>&nbsp;<\/p>\n<p><em>(pr\u00f3ximamente)<\/em> Data Binding, UISavedOption<\/p>\n","protected":false},"excerpt":{"rendered":"<p>NGUI es un potente complemento para Unity 3D\u00a0desarrollado por Tasharen Entertainment que permite crear interfaces de usuario (UI) de forma muy eficiente y flexible. Este manual en castellano recoge todo lo que hay que saber para\u00a0aprovechar toda la potencia de NGUI. Documentaci\u00f3n oficial en ingl\u00e9s: \u00cdndice, videotutoriales, ejemplos, componentes&#8230; Todos los componentes de NGUI Lista [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1059,"parent":228,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-c.php","meta":{"footnotes":""},"class_list":["post-1041","page","type-page","status-publish","has-post-thumbnail","hentry"],"jetpack_shortlink":"https:\/\/wp.me\/P1PjRF-gN","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/pages\/1041","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/comments?post=1041"}],"version-history":[{"count":70,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/pages\/1041\/revisions"}],"predecessor-version":[{"id":1211,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/pages\/1041\/revisions\/1211"}],"up":[{"embeddable":true,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/pages\/228"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/media\/1059"}],"wp:attachment":[{"href":"https:\/\/www.edy.es\/dev\/wp-json\/wp\/v2\/media?parent=1041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}