UGUI detallado de Unity

UGUI

Resumen de los seis componentes básicos

Adjunto al objeto Canvas:

Lienzo

Los componentes de lienzo se utilizan principalmente para representar controles de interfaz de usuario.

Escalador de lona

El componente adaptativo de resolución de lienzo se utiliza principalmente para la adaptación de resolución.

emisor de rayos gráfico

El componente de interacción de eventos de rayos se utiliza principalmente para controlar la correlación de respuesta de rayos.

RectTransform

El componente de control de anclaje de la posición del objeto de la interfaz de usuario se utiliza principalmente para controlar la posición y la alineación de los objetos de la interfaz de usuario.

Adjunto al objeto EventSystem:

Sistema de eventos

Los fundamentos de la respuesta a eventos de la interfaz de usuario

Módulo de entrada independiente

El sistema de respuesta de eventos de entrada del jugador y los componentes del módulo de entrada independiente se utilizan principalmente para monitorear las operaciones del jugador.

Componente lienzo lienzo

El componente Canvas es la base para que se muestren todos los elementos de la interfaz de usuario en UGUI. Es el principal responsable de representar todos sus propios subobjetos de interfaz de usuario. Si el objeto de control de la interfaz de usuario no es un objeto secundario de Canvas, el espacio no se representará. Podemos modificar el modo de renderizado modificando los parámetros en el componente Canvas.

Vale la pena señalar que se permiten múltiples objetos Canvas en la escena de Unity, y los parámetros como el modo de renderizado de diferentes lienzos, el método de adaptación de resolución, etc. se pueden administrar por separado. Si no hay un requisito especial, un lienzo suele ser suficiente.

Lo más importante en el componente Canvas es el modo de renderizado (modo de renderizado).Todas las demás propiedades en el componente Canvas cambiarán de acuerdo con el modo de renderizado.

Superposición de espacio de pantalla

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-amwgMW6t-1623203782686)(img\image-20210531102733612.png)]

Modo de anulación del sistema de coordenadas de pantalla. La interfaz de usuario en este modo siempre está frente a todos los objetos en la misma cámara, a menos que usemos dos cámaras diferentes para administrar la interfaz de usuario y la representación de objetos del juego por separado.

Pixel Perfect: ya sea para habilitar el píxel perfecto, habilitarlo mejorará el efecto del mapa de la interfaz de usuario, pero consumirá más rendimiento.

Orden de clasificación: valor de clasificación del lienzo, un lienzo con un valor mayor sobrescribirá un lienzo con un valor menor.

Pantalla de destino: la pantalla de salida de destino, el valor predeterminado es Display1.

Cámara de espacio de pantalla

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-Fzxvfyzq-1623203782689)(img\image-20210531102846153.png)]

Modo de cámara del sistema de coordenadas de pantalla. GameObjects puede estar frente a la interfaz de usuario en la misma cámara. Sin embargo, al usar este modo, generalmente usamos dos cámaras diferentes para administrar la interfaz de usuario y la representación de objetos del juego por separado.

Pixel Perfect: Igual que arriba, píxel perfecto.

Renderizar cámara: renderiza los elementos de la cámara. Simplemente arrastre y suelte el objeto de la cámara responsable de representar la interfaz de usuario. Si este elemento no está vinculado, Unity se renderizará en modo de superposición.

Distancia del plano: la distancia en el eje z desde el plano de la interfaz de usuario hasta la cámara de la interfaz de usuario. Bajo la misma cámara, podemos cambiar la secuencia de los objetos del juego y los objetos de la interfaz de usuario ajustando este valor.

Capa de clasificación: Capa de clasificación del lienzo.

Ordenar en capa: el valor de clasificación en la capa Canvas.

Espacio mundial

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-FaFR9nLI-1623203782691)(img\image-20210531102857880.png)]

Modo de sistema de coordenadas mundial. En este modo, la interfaz de usuario se verá como un objeto de juego en 3D, que es adecuado para la interfaz de usuario de realidad virtual y realidad aumentada.

Cámara de eventos: haga clic en la cámara de eventos. Si no está vinculada, no se puede interactuar con la interfaz de usuario en este modo.

Capa de clasificación: Capa de clasificación del lienzo.

Ordenar en capa: el valor de clasificación en la capa Canvas.

Componente de controlador de escala de lienzo CanvasScaler

Preparación preescolar:

1. Ver la resolución actual del dispositivo: puede verla en la ventana del juego en modo editor.
   1. 
   2. [Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-HBIcMp2M-1623203782693)(img\image-20210531102942589.png)]
2. Resolución de referencia: La resolución que aparece en uno de los modos, que participará en el cálculo de la adaptación de resolución.
   1. 
   2. [Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-NLpOZKvw-1623203782694)(img\image-20210531103025909.png)]
3. Ancho y alto del lienzo y factor de zoom: parámetros que se pueden cambiar mediante la adaptación de la resolución, donde la resolución de pantalla actual es igual a Ancho y alto del lienzo * factor de zoom.
   1. 
   2. [Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-PfKtxUZV-1623203782696)(img\image-20210531103058656.png)]
4. Autoadaptación del tamaño de la resolución: la autoadaptación de la resolución es un factor de escala obtenido al calcular la resolución de la pantalla y la resolución de referencia a través de un algoritmo determinado, y este factor de escala afectará el tamaño de todos los controles de la interfaz de usuario.

Tamaño de píxel constante modo de píxel constante

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-6ITdHj7O-1623203782697)(img\image-20210531150558307.png)]

El modo de píxel constante significa que el control de la interfaz de usuario en este modo no será autoadaptativo, sino que siempre mantendrá el tamaño de píxel de la interfaz de usuario. El efecto final que vemos también se ve afectado por el parámetro Factor de escala, pero este parámetro no afecta el tamaño. del propio píxel de la interfaz de usuario, pero afecta al lienzo del lienzo.

Factor de escala: factor de escala, todos los elementos de la interfaz de usuario en el lienzo se escalan según este factor, que es equivalente a la propiedad Scale en RectTransform del lienzo de control.

Píxeles de referencia por unidad: píxel de referencia de la unidad, lo que significa cuántos píxeles corresponden a una unidad en Unity (la unidad predeterminada es 100 píxeles), y la configuración del parámetro Píxeles por unidad en la configuración de la imagen participará en el cálculo junto con este parámetro.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-jEDSkUOp-1623203782699)(img\image-20210531151133515.png)]

La fórmula de cálculo del tamaño de píxel original de la interfaz de usuario en el modo Tamaño de píxel constante: Tamaño original de la interfaz de usuario = píxeles de imagen / (píxeles por unidad / píxeles de referencia por unidad). El tamaño original de la interfaz de usuario aquí se refiere al tamaño de la interfaz de usuario después de presionar el tamaño nativo establecido en el componente Imagen. Se verá afectado por el factor de escala.

[Falló la transferencia de imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-mdG6Al6S-1623203782701)(img\image-20210531152008549.png)]

Cabe señalar que Scale Factor solo controla el tamaño de la interfaz de usuario que vemos macroscópicamente y no participa en el cálculo de los píxeles originales de la interfaz de usuario.

Escalar con modo de escalado de tamaño de pantalla

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-GqjjoQNb-1623203782702)(img\image-20210531152347623.png)]

El modo de escala es el modo más utilizado cuando desarrollamos juegos. En este modo, el tamaño de la interfaz de usuario se escalará de acuerdo con el tamaño de la pantalla y la interfaz de usuario se escalará a medida que cambie el tamaño de la pantalla.

Resolución de referencia: Resolución de referencia, la resolución es la resolución original de la imagen. Es la resolución estándar para la salida del artista. Todos los modos de coincidencia en el modo de escala se calcularán de forma adaptativa en función de la resolución de referencia.

Modo de coincidencia de pantalla: modo de coincidencia de pantalla, cuando la relación de aspecto de la resolución de pantalla actual no se adapta a la resolución de referencia, el modo de coincidencia para la adaptación del tamaño de la resolución.

Refercene Pixels Pre Unit: Píxeles de referencia de la unidad.

El modo de coincidencia de pantalla se divide en tres modos:

Expandir

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-emTPUQSR-1623203782704)(img\image-20210531161826763.png)]

En el modo de expansión, Unity expandirá el área del lienzo horizontal o verticalmente , y acercará y alejará el lienzo según el cambio de relación de aspecto, y puede haber bordes negros.

Nota aquí: en el modo de expansión, Unity expandirá el ancho y el alto del lienzo para que sea más alto que la resolución de referencia.

Fórmula de cálculo:

Factor de zoom = Mathf.Min(ancho de pantalla/ancho de resolución de referencia, alto de pantalla/alto de resolución de referencia);

Tamaño del lienzo = tamaño de la pantalla/factor de zoom.

Efecto de rendimiento:

Minimice los elementos de la interfaz de usuario en la mayor medida posible, conserve todos los detalles de los controles de la interfaz de usuario y puede dejar bordes negros.

Encoger

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-Y47gjLDr-1623203782706)(img\image-20210531161842385.png)]

En el modo de recorte (modo de reducción), Unity recortará el área del lienzo horizontal o verticalmente , ampliará o reducirá el lienzo según el cambio de la relación de aspecto, y la interfaz de usuario puede recortarse.

Tenga en cuenta aquí: en el modo de recorte, untiy recortará el ancho y la altura del lienzo para que sea más bajo que la resolución de referencia.

Fórmula de cálculo:

Factor de zoom = Mathf.Max(ancho de pantalla/ancho de resolución de referencia, alto de pantalla/alto de resolución de referencia);

Tamaño del lienzo = tamaño de la pantalla/factor de zoom.

Efecto de rendimiento:

Amplíe los elementos de la interfaz de usuario al máximo para que puedan llenar la pantalla y la interfaz de usuario se pueda recortar.

Coincidencia de ancho o alto

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-guAsknX5-1623203782707)(img\image-20210531161854103.png)]

Escale el área del lienzo con el ancho y el alto o el promedio de los dos como referencia .

Este modo será el modo de coincidencia de pantalla más común que usamos en el desarrollo de juegos. Se utiliza principalmente para juegos que solo tienen modo paisaje o modo retrato.

Fórmula de cálculo: La fórmula de cálculo aquí implica el concepto de logaritmo.

Efecto de rendimiento:

Juego de pantalla vertical: estableceremos Match value = 0

Establezca el ancho del lienzo en el ancho de resolución del valor de referencia y mantenga la proporción sin cambios. Cuanto más alta sea la pantalla, puede aparecer el borde negro. Los más pequeños pueden ser recortados.

Juego de pantalla horizontal: igualaremos el valor = 1

Establezca la altura del lienzo a la altura de la resolución de referencia y mantenga la proporción sin cambios. Cuanto más alta sea la pantalla, puede aparecer el borde negro. Los más pequeños pueden ser recortados.

Modo físico constante de tamaño físico constante

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-G3K0tI5y-1623203782708)(img\image-20210531165701876.png)]

Los elementos de la interfaz de usuario siempre mantienen el mismo tamaño físico, independientemente del tamaño y la resolución de la pantalla.

DPI (puntos por pulgada): el número de píxeles por pulgada de la imagen.

Unidad física: unidad física, el tipo de unidad física a utilizar.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-NZX0jchH-1623203782709)(img\image-20210531171952760.png)]

Su relación de conversión es:

Tipo de unidad	y relación de 1 pulgada (pulgada)
centímetros	2.54
Milímetros	25.4
Pulgadas	1
Puntos	72
pizzas	6

DPI de pantalla alternativa: DPI alternativo, utilice este valor cuando no se pueda encontrar ningún dispositivo DPI.

DPI predeterminado de Sprite: el DPI predeterminado de la imagen.

Refercene Pixels Pre Unit: Píxeles de referencia de la unidad.

Fórmula de cálculo:

Nuevo píxel de referencia de unidad = píxel de referencia de unidad * Unidad física / Sprite DPI predeterminado

Tamaño original de la imagen de la interfaz de usuario = tamaño de píxel de la imagen/(píxeles por unidad/píxel de referencia de la nueva unidad)

La diferencia entre el modo físico constante y el modo de píxel constante:

Cuando los tamaños de pantalla de los dos dispositivos son diferentes pero el DPI es el mismo, el modo físico constante puede garantizar que el tamaño de la imagen de la interfaz de usuario vista por las dos pantallas sea el mismo, pero la imagen de la interfaz de usuario en el modo de píxel constante será más grande y más pequeño.

Modo mundo 3D

Este modo no se puede activar manualmente. Cuando configuramos el modo de representación de Canvas en World Space, CanvasScaler forzará el cambio del modo adaptativo.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-197d2RZl-1623203782711)(img\image-20210531173505275.png)]

Píxeles dinámicos por unidad: la densidad de píxeles en el mapa de bits creado dinámicamente en la interfaz de usuario, cuanto mayor sea el valor, más clara será la interfaz de usuario.

Refercene Pixels Pre Unit: Píxeles de referencia de la unidad.

Raramente usamos este modo.

Gráfico Raycaster gráficos ray caster

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-on9MTaAa-1623203782712)(img\image-20210601100908396.png)]

Graphic Raycaster significa un raycaster gráfico, que es adecuado para emisores de rayos que detectan eventos de entrada de la interfaz de usuario. Su principal responsabilidad es detectar la interacción entre el reproductor y los elementos de la interfaz de usuario a través de rayos, y determinar si se hace clic en los elementos de la interfaz de usuario.

A diferencia de NGUI, la detección de eventos de UI de UGUI no depende de colisionadores.

Ignorar gráfico invertido: si se ignoran los gráficos invertidos.

Objetos de bloqueo: los rayos están bloqueados por esos tipos de colisionadores. Nota: este elemento no es válido en el modo de renderizado superpuesto.

Máscara de bloqueo: Los colisionadores bloquean los rayos en esos niveles. Nota: este elemento no es válido en el modo de renderizado superpuesto.

Módulo de entrada independiente EventSystem和

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-qgPiudOT-1623203782713)(img\image-20210601104604515.png)]

Sistema de eventos

Sistema de eventos significa el sistema de eventos, que se utiliza para administrar los eventos de entrada del jugador y distribuirlos a los controles de la interfaz de usuario. Todos los eventos de la interfaz de usuario se detectan a través de la consulta de sondeo en el componente EventSystem y se ejecutan en consecuencia. Es similar a una estación de transferencia. junto con muchos módulos. Sin él, no se responderá a todos los clics, arrastres, etc.

Primero seleccionado: el primer objeto de la interfaz de usuario seleccionado de forma predeterminada, este elemento se usa a menudo junto con los eventos de navegación de la interfaz de usuario.

Enviar eventos de navegación: ya sea para permitir eventos de navegación (mover/presionar/cancelar), el sistema de navegación lo explicará en detalle al explicar los componentes.

Umbral de arrastre: el umbral de la operación de arrastre (cuántos píxeles se mueven, el sistema juzgará que se está arrastrando ahora)

Módulo de entrada independiente

Standalone Input Module es un módulo de entrada independiente de Unity. Su objetivo principal es procesar entradas de mouse/teclado/controlador/pantalla táctil. Los eventos de entrada se distribuyen a través de EventSystem. Depende del componente EventSystem. Ambos son indispensables. Raramente cambiamos cosas en el módulo de importación independiente.

Eje horizontal: el nombre de la tecla de acceso directo correspondiente al botón del eje horizontal (el nombre corresponde a InputManager)

Eje vertical: el nombre de la tecla de acceso directo correspondiente al botón del eje vertical (el nombre corresponde a InputManager)

Botón de envío: el nombre de la tecla de acceso directo correspondiente al botón de envío (el nombre corresponde a InputManager)

Botón Cancelar: cancela el nombre de la tecla de acceso directo correspondiente al botón (el nombre corresponde a InputManager)

Acciones de entrada por segundo: la cantidad de entradas de teclado/controlador permitidas por segundo

Retraso de repetición: el tiempo de retraso antes de que la tasa de repetición de las operaciones de entrada por segundo tenga efecto

ForceModule Active: si forzar que el módulo esté activo

Si desea que la interfaz de usuario de UGUI responda a los eventos, Graphic Raycaster, EventSystem y Standalone Input Module son indispensables.

RectTransform**

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-KDMeyER1-1623203782715)(img\image-20210601154902980.png)]

CanvasScaler controla la adaptación de la resolución de la interfaz de usuario, y la posición y el tamaño de la interfaz de usuario controlados por RectTransform son adaptables.

Heredado de Transform, RectTransform es un componente especialmente utilizado para manejar la posición y el tamaño de los elementos de la interfaz de usuario. Los componentes tradicionales de Transform solo se ocupan de la posición, el ángulo y la escala. Sobre esta base, RectTransform agrega correlación de rectángulo, trata los elementos de la interfaz de usuario como un rectángulo y agrega atributos como el punto central, el punto de anclaje, la longitud y el ancho, etc. El propósito es controlar más convenientemente su tamaño y posición en adaptación de resolución.

Pivotes y anclas

Pivote: punto de pivote, rango de valores 0~1, valor de escala.

[La transferencia de la imagen del enlace externo falló, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-IIn4ztjB-1623203782716)(img\image-20210601155946706.png)]

Anclajes: puntos de anclaje, el atributo del punto de anclaje en sí pertenece al objeto de IU seleccionado actualmente, pero el rango de representación del punto de anclaje se basa en el objeto principal del objeto actual.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-IKYYJkD8-1623203782718)(img\image-20210601160656355.png)]

En las propiedades de Anchors, hay dos parámetros que controlan el tamaño del punto de anclaje, a saber, Min y Max. Aquí, Min y Max no son tanto dos coordenadas, sino cuatro líneas aquí. Estamos separando las anclas aquí.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-FwRev5Ed-1623203782719)(img\image-20210601161223935.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-0AD9XT9n-1623203782720)(img\image-20210601161257781.png)]

Cuando lo configuramos como se muestra en la figura, encontramos que los puntos de anclaje estaban dispersos en las cuatro esquinas del objeto principal relativo. Aquí dibujamos cuatro líneas auxiliares para que todo quede claro.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-ReamHRHN-1623203782722)(img\image-20210601162053274.png)]

Estas cuatro líneas determinan la posición y el tamaño del punto de anclaje.Para no confundir el concepto, aquí llamamos a este punto de anclaje difuso marco de anclaje. Por supuesto, además de este punto de anclaje completamente disperso, también hay un punto de anclaje de línea, aquí nos referimos a este punto de anclaje como una línea de anclaje de una sola línea.

Configuración de ubicación de la interfaz de usuario

Cuando los anclajes son puntos de anclaje:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-iU4WIqLV-1623203782723)(img\image-20210601164524256.png)]

El contenido mostrado es Pos (x, y, z), ancho y alto respectivamente.

El Pos del objeto de la interfaz de usuario actual es el punto de pivote Pivot del objeto de la interfaz de usuario actual en relación con los anclajes.

Arrastramos y soltamos objetos de la interfaz de usuario en la vista Vista (tenga en cuenta que la interfaz de usuario se opera en la vista Vista, se recomienda encarecidamente la vista 2D):

[La transferencia de la imagen del enlace externo falló, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-U5glbHB0-1623203782724)(img\image-20210601165215335.png)]

Acerca de algunas configuraciones pequeñas cuando la vista Vista opera la interfaz de usuario (aquí se reemplaza arrastrando debido a la captura de pantalla):

El fondo oscuro aquí se debe a que apagué el renderizado de skybox.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-1eKO4F5R-1623203782725)(img\image-20210601165423643.png)]

El panel Inspector en este momento:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-h1woUqAP-1623203782726)(img\image-20210601165519034.png)]

Cuando las anclas son cajas de anclas:

[Falló la transferencia de imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-yEcdKaR6-1623203782727)(img\image-20210601165704736.png)]

El contenido mostrado se convierte en Izquierda, Arriba, Derecha, Abajo. ¿Qué significan estos? Recuerde que dijimos que las propiedades Min y Max de UGUIAnchors en realidad representan cuatro líneas rectas, y la izquierda, la parte superior, la derecha y la parte inferior aquí representan la distancia entre los cuatro lados del objeto UI y las cuatro líneas rectas de Anchors.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-eJE9UGdi-1623203782728)(img\image-20210601170044802.png)]

El panel Inspector en este momento:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-lnnTvzg1-1623203782729)(img\image-20210601170100978.png)]

Cuando los anclajes son líneas de anclaje:

Cuando los Anchors son líneas de anclaje, en realidad es una combinación de las dos situaciones anteriores. Por ejemplo, cuando nuestros Anchors se establecen como se muestra en la figura:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-XGReWfgX-1623203782730)(img\image-20210601170315886.png)]

En la vista Ver en este momento, podemos ver:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-flqWk10D-1623203782731)(img\image-20210601170459817.png)]

RectTransform en este momento:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-VcAOnM2O-1623203782732)(img\image-20210601170520738.png)]

No se introducirá aquí la situación de otras líneas de anclaje.

Configuración rápida del punto de anclaje del punto de pivote

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-bjiY0SlX-1623203782733)(img\image-20210601170959051.png)]

Habrá todos los puntos de anclaje que usamos comúnmente aquí. Podemos presionar la tecla Mayús mientras configuramos el punto de anclaje y establecer el punto de pivote al mismo tiempo, y también podemos presionar la tecla Alt al mismo tiempo para establecer la posición de el objeto de interfaz de usuario actual.

Imagen de los tres controles básicos de UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-FfMxk3MU-1623203782734)(img\image-20210602095236793.png)]

Image es el componente de imagen de UGUI. Es el componente clave para que UGUI muestre imágenes de sprites. Excepto en el caso de imágenes grandes, como imágenes de fondo, Image generalmente se usa para mostrar elementos de imagen en la interfaz de usuario.

Importar imágenes y configurar el formato de Sprite:

1. Primero seleccione la imagen que desea cambiar en el panel Proyecto:
   1. 
   2. [Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-JolOK1VT-1623203782734)(img\image-20210602095922139.png)]
2. Configúrelo así en el panel de inspección:
   1. 
   2. [Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-ctS8vyz9-1623203782735)(img\image-20210602095946367.png)]

Solo se pueden arrastrar sprites al componente Imagen.

parámetro:

Imagen de origen: origen de la imagen, el tipo de imagen debe ser un tipo de sprite.

Color: El color de la imagen, este color se superpondrá con el color de la imagen en sí.

Material: material de imagen, generalmente no modificado.

Raycast Target: si es el objetivo de la detección de rayos, si no está marcado, no responderá a la detección de rayos.

Enmascarable: si se puede enmascarar

Tipo de imagen: tipo de imagen, los cuatro tipos de imagen se explicarán de manera similar a continuación.

Use Sprite Mesh: use la cuadrícula de sprites. Si está marcada, Unity nos ayudará a generar una cuadrícula de imágenes.

Conservar aspecto: asegura que las imágenes siempre mantengan sus dimensiones originales.

Establecer tamaño nativo: establezca la imagen en su tamaño de recurso original, que se verá afectado por la adaptación de la resolución UGUI.

tipo de imagen

Simple: Modo normal, amplía uniformemente toda la imagen.

Rebanado: modo de rebanado, estiramiento de 9 cuadrículas, solo se estira el área transversal central. Si desea usar este modo, primero debe usar Sprite Editor para dividir la imagen.

​ Pixels Per UnitMultiplier: Multiplicador de unidades de píxeles.

Centro de relleno: relleno del centro.

La versión de Unity anterior a 2019 está equipada con Sprite Editor de forma predeterminada, y la versión 2019 y posteriores deben ir al administrador de paquetes para importar este complemento primero .

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-zqiQU6qx-1623203782736)(img\image-20210602101824362.png)]

Busque 2D Sprite después de cargar y haga clic en instalar en la esquina inferior derecha

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-yMEwjB8p-1623203782738)(img\image-20210602101919155.png)]

En este punto, regrese al panel de inspección de la imagen y podrá usar el Editor de Sprite.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-8le2jjsK-1623203782738)(img\image-20210602102027435.png)]

La siguiente imagen muestra el panel del Editor de Sprites.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-Qyh3Chdk-1623203782739)(img\image-20210602102049793.png)]

Para cortar la imagen, podemos arrastrar las líneas verdes en los cuatro lados de la imagen, o configurar manualmente el valor del borde directamente en la ventana de Sprite en la esquina inferior derecha. Solo guárdalo.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-heJAZRwc-1623203782740)(img\image-20210602102727636.png)]

Mosaico: modo Mosaico, repitiendo la parte central mosaico.

Lleno: modo de relleno. Este modo se usa a menudo para hacer barras de sangre, barras de experiencia, enfriamiento de habilidades, etc.

Método de llenado: método de llenado.

Rellenar origen: Rellenar el origen.

Cantidad de relleno: Cantidad de relleno.

En el sentido de las agujas del reloj: en el sentido de las agujas del reloj.

Texto de los tres controles básicos de UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-UxpSSrgW-1623203782741)(img\image-20210602105222064.png)]

parámetro:

Texto: contenido de texto.

Fuente: Fuente.

Estilo de fuente: estilo de fuente.

Tamaño de fuente: tamaño de fuente.

Interlineado: interlineado.

Texto enriquecido: texto enriquecido.

Alineación: Alineación.

Alinear por geometría: use el rango de forma de la colección de glifos para la alineación horizontal en lugar de las medidas de glifo. Aquí está el algoritmo de alineación es diferente, no afecta

Desbordamiento horizontal: cómo tratar el texto que es demasiado ancho para caber dentro del rectángulo

Wrap: modo Wrap, salto de línea automático.

Desbordamiento: modo de desbordamiento: la fuente puede desbordar el cuadro rectangular.

Desbordamiento vertical:

Truncar: modo de truncamiento, la fuente siempre está dentro del marco rectangular y la parte sobrante se recorta.

Desbordamiento: modo de desbordamiento: la fuente puede desbordar el cuadro rectangular.

Mejor ajuste: el mejor ajuste, independientemente de la configuración del tamaño de fuente, muestra siempre completamente el contenido en el cuadro rectangular y ajusta automáticamente el tamaño de fuente.

​ MinSize: tamaño de fuente mínimo.

MaxSize: Tamaño máximo de fuente.

RawImage de los tres controles básicos de UGUI

[Error en la transferencia de imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-MVN7peb8-1623203782742)(img\image-20210602110508592.png)]

parámetro:

RawImage es el componente de imagen original, que es el componente clave que se usa para mostrar cualquier textura en UGUI. La diferencia entre este y Image es que, por lo general, RawImage se usa para mostrar imágenes grandes (imágenes de fondo, imágenes que no necesitan ingresarse en el atlas, imágenes descargadas de Internet, etc.).

Textura: archivo de imagen.

UVRect: el desplazamiento y el tamaño de la imagen dentro del rectángulo de la interfaz de usuario. Después de cambiarlos, el efecto es similar al modo Mosaico en Imagen.

Botón de control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-mUkeLnrE-1623203782743)(img\image-20210602152504018.png)]

El botón es un componente de botón, que es un componente clave en UGUI para tratar con las interacciones relacionadas con el botón del jugador. El botón creado por defecto se compone de 2 objetos. El componente de botón del objeto principal se adjunta al objeto y un componente de imagen se monta como el imagen de fondo del botón al mismo tiempo. El objeto secundario es un texto de botón (opcional).

parámetro:

Interactuable: si este botón acepta entrada.

Transición: Efecto de transición, dividido en transición de color Tinte de color, transición de imagen de sprite Intercambio de sprite, transición de animación Animación.

Entre ellos, hay un atributo TargetGraphic en la transición de color, que indica la imagen que actualmente responde al efecto de transición, y el componente Imagen en el Botón se vinculará de manera predeterminada.

Transición de color es dar un color al botón en diferentes estados:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-wTGeSBHp-1623203782744)(img\image-20210602165324656.png)]

La transición de imagen de Sprite consiste en dar a un botón una imagen de Sprite en diferentes estados:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-wxKRTxel-1623203782745)(img\image-20210602165336224.png)]

La transición de animación consiste en animar botones en diferentes estados:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-S5yrraDZ-1623203782747)(img\image-20210602165416416.png)]

Auto Generar Animación: Genera automáticamente la máquina de estado de animación del botón, luego de presionar Unity nos permitirá guardar un archivo de máquina de estado de animación, esta máquina de estado ya está configurada, solo necesitamos asociar animaciones relacionadas.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-HrND7Aou-1623203782748)(img\image-20210602165556322.png)]

Multiplicador de color: Coeficiente de multiplicación de color.

Duración del desvanecimiento: tiempo de transición.

Navegación: Navegación. La función principal de la navegación de la interfaz de usuario es controlar la interfaz de usuario que queremos seleccionar cuando presionamos las teclas de flecha o wasd.Antes de usar la navegación, se recomienda establecer la propiedad Primera selección en el Sistema de eventos para usar juntos. Este efecto es bastante común en los juegos de consola.

Todo: Usa toda la navegación.

​ Horizontal: Navegación horizontal, cuando presiona ad o las teclas de flecha izquierda y derecha, saltará automáticamente a los componentes de la interfaz de usuario circundantes.

​ Vertical: Navegación vertical. Al presionar ws o las teclas de flecha hacia arriba y hacia abajo, saltará automáticamente a los componentes de la interfaz de usuario circundantes.

Automático: Navegación automática, incluida la navegación horizontal y la navegación vertical.

Explícito: Navegación personalizada.

Visualizar: Visualización de navegación.

Eventos de la interfaz de usuario:

OnClick(); sin parámetros ni valor de retorno, se llama una vez cuando el usuario presiona el botón y suelta el mouse dentro del rango del botón

Alternar el control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-Cyw37bv3-1623203782749)(img\image-20210603164615337.png)]

Alternar es un control clave en UGUI para crear cuadros de selección única y cuadros de selección múltiple. El valor predeterminado es un cuadro de selección múltiple. Si desea crear un cuadro de selección única, debemos usarlo con el componente ToggleGroup.

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-ZckGm1g5-1623203782749)(img\image-20210603165234426.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-lOMkCXEU-1623203782750)(img\image-20210603165356980.png)]

parámetro:

Los parámetros repetidos con Button no se volverán a introducir.

IsOn: Si el Toggle actual está marcado.

Toggle Transition: El efecto de transición entre Toggle seleccionado y no seleccionado.

Gráfico: La imagen que aparece cuando se selecciona el enlace.

Grupo: asociado con ToggleGroup, si varios Toggles están asociados con un ToggleGroup, estos Toggles se convierten en una sola selección.

Eventos de la interfaz de usuario:

OnValueChanged(Boolean); El parámetro bool no tiene valor de retorno y se llama una vez cuando cambia el valor de Toggle.

Alternar grupo

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-I6lSp7Qp-1623203782752)(img\image-20210603171716993.png)]

parámetro:

Permitir apagar: No se puede seleccionar si permitir uno de los grupos de radio.

InputField de control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-qvxJ6Lzu-1623203782754)(img\image-20210603172053851.png)]

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-HSKlZs49-1623203782755)(img\image-20210603172141977.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-wzV25eF9-1623203782757)(img\image-20210603172435949.png)]

parámetro:

Componente de texto: un componente de texto utilizado para asociar y mostrar contenido de entrada.

Texto: Introduzca el contenido del cuadro.

Límite de caracteres: la longitud máxima de caracteres que se permite introducir. 0 significa que no hay límite máximo.

Tipo de contenido: Restricción del tipo de carácter de entrada.

• Estándar: modo estándar, puede ingresar cualquier carácter.
• Autocorrección: modo de autocorrección, que rastrea palabras desconocidas y sugiere candidatos de reemplazo adecuados para el usuario.
• Número entero: Modo entero, los usuarios solo pueden ingresar números enteros.
• Número decimal: modo de número decimal.
• Alfanumérico: Modo alfanumérico, solo se pueden ingresar letras y números.
• Nombre: modo de nombre, pone en mayúscula automáticamente la primera letra de cada palabra.
• Dirección de correo electrónico: modo de dirección de correo electrónico, que permite ingresar como máximo un abuelo y una cadena de números compuesta por el símbolo @.
• Contraseña: modo de contraseña, utilice "*" para ocultar los caracteres de entrada y permitir la entrada de símbolos.
• Pin: modo pin, use "*" para ocultar los caracteres de entrada y solo permita la entrada de números enteros.
• Personalizado: modo personalizado.

Tipo de línea: tipo de línea

• Línea única: modo de línea única
• Envío multilínea: Bifurcación automática en modo multilínea. No se pueden utilizar ramas de retorno de carro.
• Nueva línea de varias líneas: modo de varias líneas, puede usar el retorno de carro a la sucursal.

PlaceHolder: se utiliza para asociar controles de texto que muestran el contenido inicial.

Caret Blink Rate: Frecuencia de parpadeo del cursor.

Ancho de intercalación: ancho del cursor.

Color de intercalación personalizado: personaliza el color del cursor.

Color de selección: el color de fondo de la selección por lotes.

Ocultar entrada móvil: oculta el teclado en la pantalla del dispositivo móvil, solo para IOS.

Solo lectura: solo lectura, no se puede modificar.

Eventos de la interfaz de usuario:

OnValueChanged(string); el parámetro de cadena no tiene valor de retorno y se llama una vez cuando cambia el contenido de texto del cuadro InputField.

OnEndEdit(string); El parámetro de cadena no tiene valor de retorno y se llama una vez cuando InputField está fuera de foco.

Control deslizante de control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-Wc6QdTqM-1623203782758)(img\image-20210603224148680.png)]

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-wI1mhPdb-1623203782759)(img\image-20210603224757644.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-oB6GmRZf-1623203782760)(img\image-20210603224954331.png)]

parámetro:

Fill Rect: un componente de la barra de progreso para el llenado.

Handle Rect: un componente deslizante para deslizar.

Dirección: Dirección de deslizamiento, al cambiar la dirección, la orientación del componente también cambiará. Este cambio no se hace cambiando la rotación.

• De izquierda a derecha: De izquierda a derecha.
• De derecha a izquierda: de derecha a izquierda
• De abajo hacia arriba: de abajo hacia arriba
• De arriba a abajo: De arriba a abajo.

Valor mínimo: el valor mínimo del control deslizante.

Valor máximo: el valor máximo del control deslizante.

Números enteros: si restringir los cambios a números enteros.

Valor: el valor actual del control deslizante.

Eventos de la interfaz de usuario:

OnValueChanged(Single); el parámetro float no tiene valor de retorno y se llama una vez cuando cambia el valor del componente Slider.

ScrollBar de control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y subirla directamente (img-lcupi6uJ-1623203782761)(img\image-20210603230420183.png)]

El componente ScrollBar generalmente no se usa solo, sino junto con ScrollView.

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-Oiow1MNs-1623203782762)(img\image-20210603230547272.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-L1JScNw0-1623203782763)(img\image-20210603230811637.png)]

parámetro:

Handle Rect: un componente deslizante para deslizar.

Dirección: Dirección de deslizamiento, al cambiar la dirección, la orientación del componente también cambiará. Este cambio no se hace cambiando la rotación.

• De izquierda a derecha: De izquierda a derecha.
• De derecha a izquierda: De derecha a izquierda.
• De abajo hacia arriba: de abajo hacia arriba.
• De arriba a abajo: De arriba a abajo.

Valor: el valor actual de ScrollBar

Tamaño: la proporción del control deslizante en la barra de desplazamiento

Número de pasos: divide el movimiento del control deslizante en pasos.

Eventos de la interfaz de usuario:

OnValueChanged(Single); el parámetro float no tiene valor de retorno y se llama una vez cuando cambia el valor del componente Slider.

ScrollView del control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-886yoEE0-1623203782765)(img\image-20210604090906831.png)]

ScrollView se compone de ScrollRect y ScrollBar, que es un componente clave en UGUI para manejar las interacciones relacionadas con la vista de desplazamiento.

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-Wl2aocaw-1623203782765)(img\image-20210604091812428.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-l8Xcp1Qo-1623203782766)(img\image-20210604091935638.png)]

Dos de las barras de desplazamiento son opcionales y se pueden eliminar o utilizar.

parámetro:

Contenido: el objeto principal que controla el contenido que muestra la vista de desplazamiento, su tamaño y hasta dónde se puede arrastrar la vista de desplazamiento.

Horizontal: Habilita el desplazamiento horizontal.

Vertical: Habilita el desplazamiento vertical.

Tipo de movimiento: el tipo de movimiento del elemento de vista de desplazamiento, siempre que controle el efecto de retroalimentación cuando el jugador arrastra.

• Sin restricciones: sin restricciones, arrastre libremente, generalmente no se usa.
• Elástico: el efecto de rebote, al rodar por el borde, rebotará hasta el límite.
  • Elasticidad: coeficiente de rebote, cuanto mayor sea el valor, más lento será el rebote.
• Sujetado: Efecto sujeto, siempre limitado en rango, sin efecto rebote.

Inercia: Moviendo la inercia, si está activada, simularemos un cierto efecto de inercia después de arrastrar y soltar el mouse.

• Tasa de desaceleración: Tasa de desaceleración, 0~1, 0 significa que no hay inercia, 1 significa que no se detendrá.

Sensibilidad de desplazamiento: la sensibilidad de la rueda de desplazamiento o el panel táctil.

Ventana gráfica: el objeto de ventana gráfica de contenido de vista de desplazamiento asociado. El objeto de ventana gráfica utiliza una máscara para garantizar que el contenido más allá de la ventana gráfica sea invisible. Cuando queremos ajustar el tamaño de la ventana gráfica, a menudo ajustamos directamente el tamaño de ScrollView.

Barra de desplazamiento horizontal: la barra de desplazamiento horizontal asociada.

Visibilidad: modo para ocultar la barra de desplazamiento

• Permanente: las barras de desplazamiento siempre se muestran.
• Ocultar automáticamente: Oculta automáticamente la barra de desplazamiento, pero no amplía el alcance de la ventana gráfica, lo que hará que la ventana gráfica tenga límites cuando la barra de desplazamiento esté oculta.
• Ocultar y expandir automáticamente la ventana gráfica: oculta automáticamente las barras de desplazamiento y expande automáticamente la ventana gráfica.

Espaciado: el espacio entre la barra de desplazamiento y la ventana gráfica.

Barra de desplazamiento vertical: la barra de desplazamiento vertical asociada, los parámetros son los mismos que la barra de desplazamiento horizontal.

Eventos de la interfaz de usuario:

OnValueChanged(Vector2); el parámetro Vector2 no tiene valor de retorno y se llama una vez cada vez que el usuario se desplaza por la vista.

DropDown de control combinado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-thc0f2aO-1623203782768)(img\image-20210604094412435.png)]

DropDown es una lista desplegable, que es un componente clave en UGUI para manejar las interacciones relacionadas con las listas desplegables.

Jerarquía:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-FnTEJ25J-1623203782768)(img\image-20210604094812411.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-oDeOupvJ-1623203782770)(img\image-20210604094958001.png)]

parámetro:

Plantilla: objeto de lista desplegable asociado.

Texto del título: el componente de texto asociado con la selección actual. Tenga en cuenta que los componentes están asociados aquí, y UGUI usa estos componentes para cargar el texto y las imágenes en Opciones.

Imagen de título: el componente de imagen asociado con la selección actual. Tenga en cuenta que los componentes están asociados aquí.

Texto del elemento: el componente de texto asociado con la lista desplegable actual. Tenga en cuenta que los componentes están asociados aquí.

Imagen del elemento: el componente de imagen asociado con la lista desplegable actual. Tenga en cuenta que los componentes están asociados aquí.

Valor: el valor de índice de la opción actual.

Alpha Fade Speed: la velocidad de aparición y desaparición gradual de la ventana de la lista desplegable.

Opciones: Una lista de opciones que existen.

Eventos de la interfaz de usuario:

OnValueChanged(Int32); El parámetro int32 no tiene valor de retorno y se llama una vez cuando el jugador selecciona una opción nuevamente, lo que hace que el valor del índice cambie.

Producción del Atlas UGUI

El propósito de la producción de atlas es reducir DrawCall. DrawCall es el comando que la CPU notifica a la GPU para realizar un renderizado. Si hay demasiados DrawCalls, el juego puede congelarse. Fusionamos las imágenes pequeñas en una imagen grande dibujando un atlas y mejoramos el rendimiento al reducir DrawCall.

Para usar el empaquetado de sprites UGUI, necesitamos configurar Unity para que nos permita empaquetar, el valor predeterminado es desactivado.

Encuentre el elemento Sprite Packer a través de esta ruta: Editar -> Configuración del proyecto -> Editor

[Error en la transferencia de imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-SvHbdyc4-1623203782771)(img\image-20210604110927496.png)]

Deshabilitado: la configuración predeterminada, el atlas no se empaquetará.

Habilitado para compilaciones (Legacy Sprite Packer): Unity solo empaqueta el atlas durante la compilación y no empaqueta el atlas en el modo de edición.

Siempre habilitado (Legacy Sprite Packer): Unity empaqueta el atlas al compilar y empaqueta el atlas antes de ejecutarlo en el modo de edición.

<>Empaquetador de sprites heredado: en comparación con los dos modos siguientes, el modo de empaquetado tradicional tiene un parámetro Potencia de relleno que establece la distancia entre usted y el sprite. Este espacio se aplicará entre sprites, sprites y el borde del atlas entre ellos. Los números aquí representan 2 a la n-ésima potencia. La nueva opción calcula automáticamente el espaciado.

Habilitado para compilación: Unity solo empaqueta el atlas cuando se compila y no empaqueta el atlas en el modo de edición.

Siempre habilitado: Unity empaqueta el atlas al compilar y empaqueta el atlas antes de ejecutarlo en el modo de edición.

Producción de atlas de versión antigua:

Primero elegimos la opción con Legacy Sprite Packer, por ejemplo, elegimos Always Enabled (Legacy Sprite Packer). En este momento, cuando volvamos a la página de edición de imágenes, encontraremos que hay un cuadro de etiqueta de embalaje adicional.

[Error en la transferencia de imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-dIYg4IbX-1623203782772)(img\image-20210604155435049.png)]

Este es un parámetro muy importante de la versión anterior de empaquetado.La versión anterior del empaquetador empaquetará los sprites con la misma etiqueta juntos.

Echemos un vistazo al empaquetador antiguo: Ventana -> 2D -> Empaquetador de Sprite

Está vacío aquí.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-ndnhsd0I-1623203782773)(img\image-20210604155849715.png)]

En este momento, podemos regresar y agregar etiquetas a nuestras imágenes de sprites. Elegimos cuatro imágenes y completamos la etiqueta como "prueba".

Regrese al empacador y seleccione empaquetar en la esquina superior izquierda para ver el resultado del empaque.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-2gexA85T-1623203782774)(img\image-20210604155922969.png)]

Producción de la nueva versión del atlas:

La nueva versión de embalaje ya no requiere un empaquetador. Podemos crear directamente un atlas de sprites en el panel del proyecto y agregar las imágenes que queremos empaquetar a la lista. No es muy conveniente cuando se buscan imágenes.

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-lKjiZwXb-1623203782776)(img\image-20210604160153603.png)]

Interfaz avanzada de monitoreo de eventos UGUI UGUI

Los controles combinados brindan su propio monitoreo básico de eventos, pero si queremos implementar eventos de interfaz de usuario más complejos o queremos que los controles básicos también tengan monitoreo de eventos, debemos usar la interfaz de monitoreo de eventos proporcionada por UGUI.

Interfaz de eventos comunes

nombre de la interfaz	método de interfaz	descripción de la interfaz
IPointerEnterHandler	OnPointerIntro	Se llama cuando el ratón entra en el objeto.
IPointerExitHandler	OnPointerExit	Llamado cuando el mouse sale del objeto
IPointerDownHandler	OnPointerDown	Se llama cuando se presiona el puntero sobre el objeto.
IPointerUpHandler	OnPointerUp	Llamado cuando el mouse se levanta sobre un objeto
IPointerClickHandler	OnPointerClick	Se llama cuando se hace clic con el mouse en el objeto
IBeginDragHandler	UnBeginArrastrar	Llamado al objeto que se está arrastrando cuando comienza el arrastre
IDragHandler	al arrastrar	Llamado al objeto que se está arrastrando mientras se está arrastrando
IEndDragHandler	OnEndArrastrar	Llamado al objeto que se está arrastrando cuando se completa el arrastre

interfaz de eventos poco comunes

nombre de la interfaz	método de interfaz	descripción de la interfaz
IInitializePotentialDragHandler	OnInitializePotentialArrastrar	Llamado cuando se encuentra el destino de arrastre, se puede usar para inicializar el valor
DropHandler	OnDrop	Llamado al objeto de destino de arrastre
IScrollHandler	en desplazamiento	Se llama cuando se desplaza la rueda del ratón.
IUpdatSelectedHandlerIUpdatSelectedHandlerIUpdatSelectedHandler	OnUpdateSelected	Se llama al objeto seleccionado cada vez que se marca
ISelectHandler	Al seleccionar	Llamado cuando un objeto se selecciona
IDeselectHandler	OnDeseleccionar	Llamado cuando el objeto seleccionado está deseleccionado
IMoveHandler	En movimiento	Relacionado con la navegación, llamado cuando se produce un movimiento de navegación
ISubmitHandler	Al enviar	Relacionado con la navegación, se llama cuando se presiona Enviar
ICancelHandler	AlCancelar	Relacionado con la navegación, llamado cuando se presiona el botón Cancelar

Escribimos scripts para implementar estas interfaces y colgamos los scripts en los objetos a los que queremos responder.

Disparador de eventos avanzado UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-bbocKSP9-1623203782778)(img\image-20210606162708914.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-6b5iviqM-1623203782779)(img\image-20210606162737672.png)]

EventTrigger es la clase de gestión de la interfaz de eventos de la interfaz de usuario. Con EventTrigger, podemos guardar muchas cosas.

Para usar EventTrigger, primero debemos montar el componente EventTrigger en el objeto que queremos que responda al evento.

Después de montar el componente EventTrigger para este objeto, ya no necesitamos implementar ninguna interfaz de eventos para que los scripts de respuesta de eventos se monten en este objeto, todas las interfaces de eventos se han integrado en EventTrigger. Solo necesitamos que el objeto monte el EventTrigger.

Después de obtener el EventTrigger montado en el objeto, la forma estándar de registrar un evento usando EventTrigger es la siguiente:

//获得对象挂载的EventTrigger组件
_myEventTrigger = GetComponent<EventTrigger>();
//新建一个Entry类型的对象，EventTrigger中的triggers列表都是这个类型的，所以我们单独创建一个，这里不需要死记硬背，triggers需要什么我们就创建什么。
EventTrigger.Entry entry = new EventTrigger.Entry();
//为entry对象的eventID赋值，此处为枚举类型，里面包含所有的UGUI事件，名字看一眼就知道是什么接口的。
entry.eventID = EventTriggerType.PointerDown;
//callback回调函数添加
entry.callback.AddListener(OnPointerDown);
//最后我们将entry添加进triggers列表
_myEventTrigger.triggers.Add(entry);

Coordenadas de pantalla avanzadas de UGUI a coordenadas relativas de UI

Clase clave: RectTransformUtility

La clase pública RectTransformUtility es una clase auxiliar de RectTransform. Se utiliza principalmente para algunas conversiones de coordenadas y otras operaciones.

Método clave: RectTransformUtility.ScreenPointToLocalPointInRectangle();

parámetro:

1. en relación con el objeto principal.
2. punto de pantalla
3. Cámara encargada de la detección de imágenes.
4. Punto final.

A menudo se usa junto con eventos de arrastrar y soltar.

Máscara de máscara avanzada UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-o5kG1uNO-1623203782780)(img\image-20210606164517425.png)]

Máscara máscara, se utilizará un componente Máscara, este componente determinará el rango visualizable de acuerdo con el rango de píxeles visibles de la imagen del objeto montado, y al mismo tiempo enmascarará el resto. Se aplica a sus hijos. A menudo se usa para el corte de avatares de personajes y la creación de minimapas.

parámetro:

Mostrar gráfico de máscara: si mostrar la imagen de máscara del objeto principal.

Los modelos avanzados de UGUI y las partículas se muestran antes de la interfaz de usuario

Como dijimos antes, si queremos que nuestro modelo y efectos de partículas se muestren frente a la interfaz de usuario, podemos cambiar el modo de representación del lienzo al modo de cámara y usar una cámara de interfaz de usuario especial para representar la interfaz de usuario, y esta cámara también lleva a cabo la visualización en el El trabajo de renderizado del modelo frente a la interfaz de usuario. Para el efecto de partículas con este método, podemos configurar la capa de representación del efecto de partículas para garantizar que el efecto de partículas siempre se muestre frente a la interfaz de usuario:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-NXKubX6p-1623203782781)(img\image-20210606165234400.png)]

Para los objetos del juego, podemos hacer que los objetos del juego se representen antes que la interfaz de usuario ajustando la distancia del plano en el modo de cámara.

Pero además de este método si solo queremos renderizar un objeto del juego, como nuestro personaje en el panel de equipamiento, tenemos otra solución: usar Render Texture.

Primero, creemos una nueva textura de renderizado:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-LZi7PUmV-1623203782783)(img\image-20210606165758978.png)]

Cree una nueva cámara para nuestra escena dedicada a renderizar modelos en la interfaz de usuario:

Por esta razón, se recomienda agregar una capa de modelo adicional, de modo que esta cámara solo represente los objetos del juego de esta capa.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-F2c4k9ha-1623203782784)(img\image-20210606170415320.png)]

De esta forma, cuando colocamos el objeto debajo de la cámara Modelo, podemos generar la imagen en Render Texture.

Finalmente, dado que enviamos la imagen de la cámara a una textura, no veremos el cambio de agregar una cámara adicional a nuestra imagen actual del juego. Necesitamos finalmente adjuntar esta textura a la textura y renderizarla desde la cámara de la interfaz de usuario. Si hay un efecto similar a un pincel cuando cambiamos la posición del cubo, cambiamos las banderas claras de la cámara del modelo al modo monocromático o al modo skybox.

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-4RH19wIP-1623203782785)(img\image-20210606171259783.png)]

La desventaja de este modo es que puede requerir una cámara y un objeto para renderizar, lo que es una pérdida de rendimiento. Por lo tanto, cuando es necesario mostrar más de un elemento frente a la interfaz de usuario, no se recomienda este método.

Botón UGUI avanzado con forma especial

La aplicación de botones de formas extrañas no es común, pero se puede usar. Los botones con forma se refieren principalmente a imágenes no rectangulares con contornos irregulares como botones. Si queremos que responda con precisión, debemos convertirlos en botones con forma.

Hay dos opciones para hacer botones con formas especiales:

1. Empalme manual, mediante la adición de sub-objetos. Agregue una imagen de subobjeto transparente para el botón de forma especial que queremos manejar y use la entrega de eventos para lograrlo.
2. Establece el umbral de transparencia.

Para establecer el umbral, debemos establecer la imagen como legible y escribible:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-5ihGNbNG-1623203782787)(img\image-20210606175217499.png)]

Escribe el siguiente código:

using UnityEngine;
using UnityEngine.UI;

namespace UGUITest.button
{
    
    
    public class SpecialShapedButton : MonoBehaviour
    {
    
    
        private UnityEngine.UI.Image _buttonImage;
        private Button _button;
        private void Awake()
        {
    
    
            _buttonImage = GetComponent<UnityEngine.UI.Image>();
            _button = GetComponent<Button>();
            //该参数的含义是：指定一个像素必须具有的最小alpha值，以便能够认为射线命中了图片，也就是说低于此alpha值的区域不会被射线检测。
            _buttonImage.alphaHitTestMinimumThreshold = 0.1f;
        }
        
    }
}

Monte este script en el botón con forma especial. Cuando el juego se está ejecutando, encontraremos que no hay comentarios al hacer clic en la parte transparente de la imagen.

Componentes de diseño automático avanzado UGUI

Aunque RectTransform de UGUI es lo suficientemente conveniente para ayudarnos a lograr un diseño rápido, pero si queremos diseñar en cuadrícula una serie de las mismas imágenes, RectTransform de UGUI no es lo suficientemente conveniente, por lo que UGUI nos proporciona componentes de diseño automático.

Siempre que agreguemos componentes de diseño automático a una clase principal, la interfaz de usuario de la subclase de esta clase principal puede implementar el diseño automático. Entonces, ¿cómo se realiza el diseño automático de UGUI? Aquí vamos a hablar brevemente sobre los atributos de diseño.

Propiedades de diseño automático

En primer lugar, echemos un vistazo a cómo ver las propiedades de diseño de un control de IU Seleccione un control de IU y seleccione Propiedades de diseño en el panel Inspector como se muestra en la figura:

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-eyYuMKf7-1623203782788)(img\image-20210606214546616.png)]

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-H9pSlPJU-1623203782789)(img\image-20210606214736842.png)]

Los elementos de diseño para participar en el diseño automático deben contener atributos de diseño. Los atributos de diseño incluyen principalmente lo siguiente:

Ancho mínimo: el ancho mínimo que debe tener este elemento de diseño.

Altura mínima: la altura mínima que debe tener este elemento de diseño.

Ancho preferido: el ancho que debe tener este elemento de diseño antes de asignar espacio libre adicional.

Altura preferida: la altura que debe tener este elemento de diseño antes de asignar espacio libre adicional.

Ancho flexible: la cantidad relativa de ancho disponible adicional que este elemento de diseño debe llenar en relación con sus hermanos. El rango es 0~1

Altura flexible: la cantidad relativa de altura disponible adicional que este elemento de diseño debe llenar en relación con sus hermanos. El rango es 0~1

Estos valores son calculados automáticamente por Unity si no los configuramos manualmente. La existencia de estos atributos permite que nuestra UGUI logre un diseño automático.

Establecer propiedades de diseño manualmente:

[Error en la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-DOTzaWU7-1623203782790)(img\image-20210606232627162.png)]

Prioridad de diseño: prioridad de diseño.

Componentes de diseño automático

Componentes de diseño horizontal/vertical

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-lW2rr3kG-1623203782792)(img\image-20210606225905087.png)]

Los componentes de diseño automático horizontal y vertical colocarán a los niños uno al lado del otro o juntos verticalmente.

Aquí presentamos el Grupo de diseño horizontal, los parámetros del componente de diseño automático vertical son los mismos que los del componente de diseño automático horizontal.

parámetro

Relleno: la posición de desplazamiento de los bordes superior e inferior izquierdo y derecho.

Espaciado: el espaciado entre subobjetos.

ChildAlignment: la alineación de la cuadrícula de nueve cuadrados de los objetos secundarios.

Controlar el tamaño del niño: si se controla el ancho y el alto del objeto secundario. Cuando usamos este elemento, el ancho y la altura de nuestros objetos secundarios serán controlados por las propiedades de diseño y se adaptarán automáticamente. El más grande es Preferido y el más pequeño es Minmum.

Use Child Scale: si se debe considerar la escala de los subobjetos, marque esta opción y la escala de los subobjetos se considerará al calcular la posición.

Expansión forzada de niño: si se fuerza que el objeto secundario se expanda para llenar el espacio adicional disponible, verifique esto, la UGUI dividirá el rango de nuestro objeto principal actual por igual para todos los objetos secundarios, si hay suficiente espacio, habrá una brecha, si el espacio no es suficiente, tendrá poco efecto.

Componentes de diseño de cuadrícula

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo de enlace antirrobo, se recomienda guardar la imagen y cargarla directamente (img-yrpApheG-1623203782793)(img\image-20210606231945147.png)]

parámetro

Relleno: la posición de desplazamiento de los bordes superior e inferior izquierdo y derecho.

Tamaño de celda: el tamaño del subobjeto, tenga en cuenta que en el diseño automático de la cuadrícula, no podemos controlar el tamaño del subobjeto individualmente.

Espaciado: el espaciado entre subobjetos.

Esquina de inicio: en qué posición del objeto principal se inicia el diseño.

Eje de inicio: el eje que se llenará primero. Este elemento determina si nuestro diseño de cuadrícula es horizontal o vertical.

ChildAlignment: la alineación de la cuadrícula de nueve cuadrados de los objetos secundarios.

Restricción: restricciones de diseño

• Fiexible: Modo flexible, en este modo, la línea se ajustará automáticamente de acuerdo con el ancho y la altura reservados del objeto principal.
• Recuento de columnas fijo: Recuento de columnas fijo. En este modo, se ajustará de acuerdo con el número de columnas establecido.
• Recuento de filas fijo: Recuento de filas fijo. En este modo, las columnas se cambiarán de acuerdo con el número de filas establecido.

adaptador de contenido

[La transferencia de la imagen del enlace externo falló, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-8jIriKkb-1623203782795)(img\image-20210606233347919.png)]

El componente del adaptador de contenido se divide en dos parámetros: Ajuste horizontal y Ajuste vertical, y las opciones son las mismas. Aquí presentamos las mismas.

parámetro

Sin restricciones: no se estira según los elementos del diseño.

Tamaño mínimo: se estira de acuerdo con el ancho y la altura mínimos del elemento de diseño.

Tamaño preferido: se estira según el ancho y la altura preferidos de los elementos de diseño.

adaptador de relación de aspecto

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y subirla directamente (img-mXbuVvbU-1623203782796)(img\image-20210606233733410.png)]

Deje que los elementos de diseño ajusten su tamaño de acuerdo con una cierta proporción, de modo que los elementos de diseño se adapten dentro del objeto principal de acuerdo con el tamaño del objeto principal.

parámetro

Modo de aspecto: modo de adaptación

• Ninguno: no ajusta el rectángulo a la relación de aspecto.
• Controles de ancho Altura: ajusta automáticamente la altura de acuerdo con el ancho.
• Ancho de los controles de altura: ajusta automáticamente el ancho de acuerdo con la altura.
• Ajustar en principal: ajuste automáticamente el ancho, la altura, la posición y el punto de anclaje, adapte el rectángulo al rectángulo del elemento principal, manteniendo la relación de aspecto, y aparecerán bordes negros. El efecto de este elemento es mostrar siempre completamente el objeto hijo.
• Envolvente principal: ajuste automáticamente el ancho, la altura, la posición y el punto de anclaje para que el rectángulo cubra toda el área del elemento principal manteniendo la relación de aspecto y se produzca el recorte. El efecto de este elemento es garantizar siempre que el objeto principal está completamente lleno.

Relación de aspecto: relación de aspecto, la relación entre el ancho y el alto.

Grupo de Canvas avanzado de UGUI

[Falló la transferencia de la imagen del enlace externo, el sitio de origen puede tener un mecanismo anti-leeching, se recomienda guardar la imagen y cargarla directamente (img-1EFKr4ul-1623203782797)(img\image-20210606234454214.png)]

Agregar este componente al panel principal le permite controlar algunas propiedades generales. Este elemento se puede agregar no solo a Canvas, sino también a los controles de la interfaz de usuario.

parámetro

Alfa: control de transparencia general.

Interactuable: deshabilite la configuración para el inicio general.

Blocks Raycasts: configuración general de detección de rayos.

Ignorar grupos principales: si se ignora el rol del CanvasGroup principal.