Sliding background en unity 2D

Básicamente, lo que queremos hacer, es que el fondo de nuestro juego sea una imagen que puede repetirse infinitamente a lo horizontal. Es decir, partiendo de esta imagen:

Queremos que nuestro juego dé la impresión de un fondo infinito a lo horizontal, algo así:

una opción, sería crear el mismo sprite una y otra vez, a lo horizontal, dependiendo de qué tan grande queremos que sea nuestro nivel… no me gusta esta opción, porque para que nuestro juego fuera rápido, tendríamos que aplicar culling (y aún no aprendemos eso en El Guild lol), además! con esta opción tendríamos que copiar y pegar a mano el sprite (o hacer un script que lo haga, pero los tutoriales que he visto, donde hacen esto, generan un montón de código! :S).

La otra opción (y la que veremos aquí), es la de: ponerle una imagen a un plano, y hacer que la imagen se “recorra”, mediante el Offset.X del standard shader en un material.

Para lo que no sirve…

Cuidado! esto debería usarse solo para el “fondo” del juego… si están haciendo un plataformer, como mario, lo que veremos aquí, es cómo hacer el fondo de mario, no las plataformas, ni el piso, ni las colisiones… eso es tema de otro tutorial XD (y la verdad, justo ahora, no estoy segura de cómo hacerlo lol).

¿Cómo hacerlo?

Primero, crearemos un nuevo proyecto en 2D… si tu proyecto está en 3D, no te preocupes! solo asegúrate que la cámara esté en Projection -> ortographic, y que en la escena, tengas activado ese botoncito “2D”.

Ahora, crearemos un plano. El plano será el recipiente de la imagen de fondo.

Para que el plano esté viendo hacia la cámara, le cambiamos su rotación

Ahora crearemos un material (recuerdan? esas bolitas a las que les poníamos colores, y luego, podíamos colorear cualquier cosa en nuestro juego).

Después, importaremos la imagen que vamos a poner en el fondo.

Una vez importada la imagen, la “arrastramos” a Albedo. (Recuerdan? en albedo, cambiabamos el color de la bolita… aahh… entonces ahora, en vez de darle un color sólido, le estamos dando una imagen!). También le asignamos este nuevo material a nuestro plano. (La imagen se ve estirada :S pero no se preocupen! lo arreglaremos en seguida!).

Antes de seguir, tenemos que decirle a unity que la imagen que importamos es un “tile” o “mosaico”… para eso, seleccionamos la imagen, y nos aseguramos que Wrap Mode esté en Repeat y Texture Type en Texture.

En el material que acabamos de crear, hay una opción llamada “Offset”, que indica qué tanto de la imagen debería estar recorrida hacia la izquierda… pruébalo tú mismo! es más fácil de lo que suena: Pon tu mouse sobre el label “X”, haz clic y arrástralo hacia la derecha o izquierda, y verás que la imagen del plano también se moverá!.

Arreglando la proporción de la imagen

la imagen ahorita está estirada, y fea DX para arreglar esto, he encontrado un pequeño truquito :)

Básicamente, en scale, le ponemos el tamaño real de la imagen en pixeles.

Para ver el tamaño de la imagen en pixeles, puedes abrirla con gimp!

ahora que ya sabemos el tamaño de nuestra imagen, nos vamos a unity, y ponemos estos valores en el scale!

Si la imagen queda muy grande (o muy pequeña), solo achícala (o agrándala) uniformemente. Lo que nos interesa, es la proporción original.

Y ahora, desde código!

Entonces, lo que queremos hacer, es mover ese Offset.X desde el código, para que cuando el personaje se mueva hacia la derecha, la imagen se mueva hacia la izquierda, y cuando nuestro personaje se mueva hacia la izquierda, la imagen se mueva hacia la derecha.

No meteremos al personaje en este tutorial! pero sí veremos cómo mover la imagen desde el código!

Primero, creamos un script para el plano.

y luego… programamos! XD

Necesitamos “acceder desde el código” al material del plano, para esto, necesitamos acceder al Renderer, que es el componente que se encarga de renderizar al plano. Este componente, tiene acceso al material del plano.

Inicializamos al renderer (2da línea roja de código).

Luego, en el update, le diremos al offset que se “deslice” hacia la derecha (para que nuestra imagen se deslie hacia la izquierda), esto lo hacemos en la línea azul de código.

Recuerdan el Time.deltaTime? bueno, básicamente, es un número float que dice cuánto tiempo tardó un frame en pintarse…. como distancia = velocidad * tiempo, entonces, para que el movimiento de la imagen sea más “coherente”, podemos multiplicarle a scrollingSpeed el Time.deltaTime. (trozo amarillo de código)

Y eso es todo! XD denle play, y la imagen se va a deslizar ^__^

Este sábado les prometí muchos tutoriales D: así que… aún les quedo debiendo:

• introducción al código
• Horneando normales en blender
• Mecanim
• ??? (por fa, recuérdenme si me olvido algo XD)

Intentaré subir tutoriales en texto (no quiero comerme sus megas @.@), y también algunos tutoriales en video, cuando las cosas no se puedan explicar bien en texto…

Nos vemos! (y perdón por lo del proyector :S intentaré arreglarlo antes del siguiente viernes)