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:

tiled-background.png

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

infinite-scrolling.png

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”.

02.jpg

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

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

04.jpg

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

05.jpg

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

06.jpg

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!).

07.jpg

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.

08.jpg

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á!.

09.jpg

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!

10.jpg

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

11.jpg

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.

12.jpg

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.

13.jpg

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)

14.jpg

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)

El Efecto Kefka

Tenía 12 años, y mi hermano acababa de encontrar un juego genial en esa lista interminable de ROMs de snes que teníamos en nuestra vieja pentium 3. En ese momento, un mundo de fantasías se creó en mi mente, y no podía dejar de pensar en ese fantástico universo: en el colegio, mientras comía, mientras me bañaba, mientras dormía!… se trataba de Final Fantasy 6!

Aunque la jugabilidad me parecía bastante aburrida, su historia y sus puzzles nos consumieron por completo, y pronto, todos los demás juegos perdieron su encanto, y pasábamos nuestros turnos de computadora, jugando FFVI, descubriendo secretos y leveleando a nuestros personajes.

No pasó mucho tiempo antes de que conocieramos a Kefka. Su primera aparición (en la traducción española), lo hace parecer un payaso, quejándose y lloriquéando porque tiene arena en sus botas, y aprovechando su poder para solucionar problemas triviales. Una música exageradamente pegajosa acompaña su primera aparición, junto con una risa “mwahahahahahaha”.

Kefka_Palazzo_(Final_Fantasy_VI)

Este maldito bastardo es Kefka

Esta música no es nada que haya escuchado antes, al igual que la risa, por lo que llamó instantáneamente mi atención la primera vez que escuché estos sonidos, lo que causó que se grabara en mi mente.

SPOILER ALERT

A medida que avanza el juego, conoces más a Kefka, y siempre que lo ves protagonizando sus hechos atroces, escuchas esa música, y esa risa. La historia avanza, y Kefka se muestra cada vez más degenerado, haciendo cosas horribles.

A medida que avanzo en la historia, cada vez que escucho esa música, siento miedo, y cada vez que escucho esa risa, siento ira y me hierve la sangre.

Muchas veces intenté explicar este efecto, cuando describo juegos, o cuando pienso en mecánicas, y ahora, en vista de que necesito un término para nombrar fácilmente a este “fenómeno”, le he nombrado “El Efecto Kefka”.

El efecto Kefka, es una mecánica que se da cuando el jugador asocia (ya sea consciente o inconscientemente) algún detalle (del entorno o de la jugabilidad) a un antagonista, o a alguna situación que lo pone en peligro, causándole cierto estrés en la vida real.

Es una de mis mecánicas favoritas! y es sumamente explotada en el género lovecraftian: “oh, miren! el cielo cambia de color cuando me paro en este lugar… oh, el mundo cambia si presiono un botón en este lugar, eso me ayuda a conseguir más monedas, qué genial!… OMG!! el mundo se hizo horrible esta vez que presioné ese botón en ese lugar… el mundo es lindo otra vez… el cielo cambió de color en este lugar… tengo miedo D:” – Eversion

El “efecto kefka” no se da cuando asocias la imagen de un enemigo con el mismo enemigo. Me refiero a algo del entorno, algo que tal vez no tenga mucha relación con el antagonista: algo parecido a lo que Hideo Kojima hace en MGS V con el cambio de velocidad y el silencio antes de que algo peligroso pase, y este sentimiento es constantemente reforzado con la jugabilidad (cuando un enemigo te descubre).

Bueno… solo quería definir esa mecánica, y compartir mis experiencias con ella XD hasta la próxima!