[Consejos de Unity] Utilice tres métodos para lograr el efecto de zoom al apuntar con miras

Comparación del efecto final

Insertar descripción de la imagen aquí

Prefacio

En muchos juegos de disparos, el efecto de zoom de la mira es una parte importante para mejorar la precisión de los disparos y la experiencia del juego. Como motor de desarrollo de juegos popular, Unity proporciona una variedad de métodos para lograr el efecto de zoom al apuntar con miras. Este artículo presentará tres métodos de implementación comunes y discutirá sus ventajas y desventajas respectivamente.

Primero, presentaremos cómo lograr un efecto de zoom ampliado ajustando el campo de visión de la cámara. En segundo lugar, discutiremos cómo usar Shader para lograr el efecto de ampliación de la vista y cómo usar Render Texture para simular el efecto de zoom. Cada método tiene sus escenarios de aplicación y aplicabilidad únicos. En este artículo, profundizaremos en los escenarios de implementación y uso específicos de estos tres métodos para ayudar a los desarrolladores a elegir el método de implementación adecuado según sus propias necesidades.

Ya sea que sea un principiante o un desarrollador experimentado, este artículo le proporcionará tutoriales completos y código de muestra para ayudarlo a comprender y utilizar mejor el efecto de zoom de ampliación de la vista en Unity. ¡Comencemos a explorar estas apasionantes tecnologías!

la primera manera

Ajustar el valor FOV de la cámara

public class RifleScopeZoom : MonoBehaviour
{
    
    
    [SerializeField] private Camera playerCamera;
    [SerializeField] private float zoomSpeed = 10f;
    [SerializeField] private float minFOV = 20f;
    [SerializeField] private float maxFOV = 60f;

    private void Update()
    {
    
    
        // 获取滚轮滑动的值
        float scrollValue = Input.GetAxis("Mouse ScrollWheel");
        
        // 根据滚轮滑动的值调整 FOV
        playerCamera.fieldOfView -= scrollValue * zoomSpeed;
        
        // 限制 FOV 的范围在最小值和最大值之间
        playerCamera.fieldOfView = Mathf.Clamp(playerCamera.fieldOfView, minFOV, maxFOV);
    }
}

Este es el primer método de implementación
Insertar descripción de la imagen aquí
. Como puedes ver, es muy simple. Lo único que hace es ajustar los parámetros principales de la cámara. La ventaja de este método es que tiene un buen rendimiento. No necesitas ningún Shader nuevo ni otra cámara, pero solo es necesario ajustar el campo de visión de la cámara. , pero la desventaja es que no se ve muy bien. Idealmente, solo querríamos ampliar el objeto visto por el telescopio, pero ahora se amplía la imagen completa.

Además, si su modelo de mira no es hueco y transparente, es posible que no pueda utilizar este método, como la mira de un rifle de francotirador. En mi ejemplo a continuación, solo puedo quitar la mira.
Insertar descripción de la imagen aquí

Método dos

Para el segundo método, necesitaremos usar Shader para ampliar la imagen detrás de un objeto.

1. Crear un entorno URP

Si no lo entiendes, puedes leer mi artículo anterior, que te enseña cómo configurar el entorno URP: Uso de Shader Graph para lograr el efecto de flexión del mundo de Animal Crossing: Friends

2. Colocación del recurso de canalización de renderizado universal

Dado que los nodos Profundidad de escena y Color de escena se utilizaron en el experimento para obtener la información del búfer de profundidad y del búfer de color, debe verificar la Textura de profundidad y la Textura opaca en el Activo de canalización de renderizado universal, de la siguiente manera.
Insertar descripción de la imagen aquí

3. Aquí creamos un nuevo ShaderGraph mate.

Insertar descripción de la imagen aquí

4. Configuración de la imagen principal

Dado que el espejo es transparente, debe establecer la propiedad Tipo de superficie en Transparente en la Configuración del gráfico del gráfico principal.
Insertar descripción de la imagen aquí

4. Crea un nuevo material y móntalo.

Para lograr este efecto coloqué una bola en el visor, la hice muy plana, simulé un efecto espejo y uní el material con el ShaderGraph frontal.
Insertar descripción de la imagen aquí

5. El siguiente es el diagrama de conexión de shaderGraph.

Insertar descripción de la imagen aquí
El nodo Color de escena se usa aquí para generar el color de la escena detrás del objeto, y luego los nodos Tilling y offset se usan para modificar el valor de Tilling para lograr la amplificación. Luego se usan las coordenadas de la pantalla del objeto. Este es el punto más complejo ObjectScreenPosition. Este parámetro debe ajustarse en consecuencia, el alcance se mueve y se modifica constantemente.

6. Se agregó una nueva secuencia de comandos para controlar que ObjectScreenPosition se modifique continuamente a medida que se mueve el alcance.

Así que tengo otro script aquí, RifleScopeShaderScreenPos. Su función es convertir las coordenadas mundiales del objeto en coordenadas de pantalla y luego ingresarlas en el Shader, por lo que este Shader no ampliará todas las pantallas, solo ampliará las cosas en el alcance.

public class RifleScopeShaderScreenPos : MonoBehaviour
{
    
    
    // Shader 材质
    [SerializeField] private Material material;

    private void Update()
    {
    
    
        // 获取物体在屏幕上的像素坐标
        Vector2 screenPixels = Camera.main.WorldToScreenPoint(transform.position);
        // 将像素坐标转换为 0-1 的范围
        screenPixels = new Vector2(screenPixels.x / Screen.width, screenPixels.y / Screen.height);
        // 将物体的屏幕坐标传递给 Shader
        material.SetVector("_ObjectScreenPosition", screenPixels);
    }
}

6. Se agregó un nuevo script control_ZoomAmount para realizar el efecto de zoom de la rueda de desplazamiento.

public class RifleScopeZoomMaterial : MonoBehaviour
{
    
    
    [SerializeField] private float zoomSpeed = 10f;
    [SerializeField] private float min  = 0f;
    [SerializeField] private float max = 1f;
    [SerializeField] private Material zoomMaterial;

    private void Update()
    {
    
    
        // 获取滚轮滑动的值
        float scrollValue = Input.GetAxis("Mouse ScrollWheel");
        scrollValue = zoomMaterial.GetFloat("_ZoomAmount") + scrollValue;

        // 限制的范围在最小值和最大值之间
        scrollValue = Mathf.Clamp(scrollValue, min, max);
        
        zoomMaterial.SetFloat("_ZoomAmount", scrollValue);
    }
}

Insertar descripción de la imagen aquí
En comparación con el método anterior, la ventaja es que solo magnifica lo que ve la vista, por lo que las cosas fuera de la vista no cambiarán. Otra ventaja es que, en comparación con el siguiente método, este método no requiere demasiado rendimiento. Solo hay uno Shader y la cámara solo renderizan una vez. Por supuesto, hay desventajas. Un problema potencial es que cuando haces zoom, la imagen se verá así.
Insertar descripción de la imagen aquí
Cuando tu aumento no es muy alto, la imagen será pasable, pero cuando haces zoom en más grande, Cuanto más obtendrá una imagen de mosaico, esto está relacionado con la resolución de la imagen. El Shader simplemente amplía la imagen sin cambiar su resolución, por lo que cuanto más grande sea la imagen, más obvio será el mosaico. Si la relación de aumento no es Este es un buen método si es demasiado grande. También tiene el mismo problema que antes, es decir, si su modelo de telescopio no es hueco y transparente, este método puede no ser adecuado.

la tercera manera

Tenemos que usar la función de renderizar textura, que esencialmente renderiza la imagen de la cámara en una textura.

1. Se agregó una nueva cámara de renderizado.

Entonces necesitamos una nueva cámara, y luego arrastrarla hacia adelante, ahora puedes arrastrarla frente a la mira o directamente sobre el cañón, y luego acercarla bajando el campo de visión hacia abajo.
Insertar descripción de la imagen aquí

2. Crea una textura de renderizado

Creemos otra textura de renderizado. Aquí establecemos principalmente el tamaño. Esto depende principalmente de la resolución del reproductor y del tamaño de la vista en la pantalla. Aquí 1024*1024 es casi suficiente.

Insertar descripción de la imagen aquí
De esta manera, lo configuramos y dejamos que la cámara genere la imagen renderizada en esta textura.
Insertar descripción de la imagen aquí
De esta manera podemos ver que la imagen de la cámara se ha renderizado en esta textura.
Insertar descripción de la imagen aquí

3. Vincular textura de renderizado

A continuación, para mostrar la imagen en el osciloscopio, colocamos un Quad directamente dentro del osciloscopio. Sólo necesitamos arrastrar la textura renderizada para obtener la imagen del osciloscopio.
Insertar descripción de la imagen aquí
Esto tiene el efecto. Aquí está la imagen de la cámara ampliada.
Insertar descripción de la imagen aquí

4. Resuelva el problema del uso de moho en las lentes.

Todavía hay un pequeño problema, sin embargo, es que el cuádruple de mi puerta es cuadrado y el alcance es redondo, por lo que verán que está un poco a través del molde.
Insertar descripción de la imagen aquí
Una solución muy simple es simplemente hacer un recorte de transparencia
Insertar descripción de la imagen aquí
aquí. También es una prefabricación de recorte de transparencia, solo asegúrese de ir al panel de configuración y activar el clip Alpha.
Insertar descripción de la imagen aquí
Una vez que haya terminado, haga clic en AlphaClipMask aquí y seleccione una textura circular con un fondo transparente.
Insertar descripción de la imagen aquí
Cuando haya terminado, verá que el La textura fuera de la máscara ha sido recortada. Solo conserva el marco central.
Insertar descripción de la imagen aquí

5. Control de secuencia de comandos para lograr el efecto de acercamiento

El último paso es procesar el script. Todo lo que tenemos que hacer es ajustar el FOV de la cámara de textura de renderizado. Podemos reutilizar el código anterior. Recuerde cambiar la cámara a nuestra cámara de renderizado en lugar de la cámara principal.

public class RifleScopeZoom : MonoBehaviour
{
    
    
    [SerializeField] private Camera playerCamera;
    [SerializeField] private float zoomSpeed = 10f;
    [SerializeField] private float minFOV = 20f;
    [SerializeField] private float maxFOV = 60f;

    private void Update()
    {
    
    
        // 获取滚轮滑动的值
        float scrollValue = Input.GetAxis("Mouse ScrollWheel");
        
        // 根据滚轮滑动的值调整 FOV
        playerCamera.fieldOfView -= scrollValue * zoomSpeed;
        
        // 限制 FOV 的范围在最小值和最大值之间
        playerCamera.fieldOfView = Mathf.Clamp(playerCamera.fieldOfView, minFOV, maxFOV);
    }
}

Efecto
Insertar descripción de la imagen aquí
Puedo acercarme donde quiera, como puedes ver, no hay problema de mosaico en comparación con el método anterior, y este método tiene una característica interesante, es decir, la imagen en la mira cambia incluso cuando mi arma no está levantada
Insertar descripción de la imagen aquí
. La ventaja es que como estoy usando otra cámara, puedo hacer algunas cosas interesantes, como puedo usar diferentes 后处理efectos, puedo agregar un efecto de profundidad de campo en la cámara principal, y como la textura de renderizado está tan cerca de la cámara, No se ve borroso y todo lo que está afuera se ve borroso.
Insertar descripción de la imagen aquí

Insertar descripción de la imagen aquí
Personalmente hablando, esto se ve mejor. La imagen fuera del alcance está borrosa pero la imagen interior aún es clara. Si lo desea, puede mover el espejo hacia adelante para usar otros efectos de posprocesamiento. Puede darse cuenta 镜内热成像o 夜视效果la imagen fuera del espejo. sigue siendo normal.

Por supuesto, este método también tiene un gran problema, 缺点es decir 性能问题, este método utiliza una textura de renderizado para mostrar la imagen de la segunda cámara. En esencia, la imagen se renderiza dos veces. Si el juego que estás creando es en la PC, esto Puede que no sea un gran problema. Si se trata de un juego móvil, puede ser un gran problema. Si puede pagar el costo del rendimiento, este método es el mejor.

Resumir

Bien, has aprendido estos tres métodos de ampliación del alcance. El primer método es adecuado para aquellos que tienen 性能优先necesidades o quieren encontrar una manera de lograrlo. El segundo método y el último te darán resultados. Elige un método adecuado para usar en tu aplicación ¡en el proyecto!最简单稍优于第一
最好的瞄具
Insertar descripción de la imagen aquí

referencia

【Vídeo】https://www.youtube.com/watch?v=9g2VqJvWnQI

fin

¡Regalos de rosas, regala una fragancia! Si el contenido del artículo es útil para usted, no sea tacaño con sus 点赞评论和关注comentarios para que pueda recibirlos lo antes posible. Cada uno de sus comentarios 支持es la mayor motivación para seguir creando. Por supuesto, si encuentras 存在错误algo en el artículo 更好的解决方法, ¡no dudes en comentar y enviarme un mensaje privado!

Está bien, lo soy 向宇, https://xiangyu.blog.csdn.net

Un desarrollador que trabaja silenciosamente en una pequeña empresa recientemente comenzó a aprender Unity por sí mismo a través de sus pasatiempos. En su tiempo libre, graba y comparte mientras aprende. Estar sobre los hombros de gigantes, aprender de las experiencias de mis predecesores siempre me dará Me ayuda mucho ¡Ayuda e inspira! ¡PHP es trabajo, Unity es vida! Si encuentra algún problema, también puede comentar y enviarme un mensaje privado. Aunque es posible que no conozca algunos de los problemas, verificaré la información de todas las partes e intentaré dar las mejores sugerencias. Espero ayudar más. personas que quieran aprender a programar. , anímense unos a otros ~

Insertar descripción de la imagen aquí

Supongo que te gusta

Origin blog.csdn.net/qq_36303853/article/details/135039078
Recomendado
Clasificación