Jump to content

davidlopezdev

⭐ Héroe ⭐
  • Content Count

    27
  • Joined

  • Last visited

  • Days Won

    13

davidlopezdev last won the day on June 27

davidlopezdev had the most liked content!

Community Reputation

54 Excellent

About davidlopezdev

  • Rank
    Iniciado

Profile Information

  • Especialidad
    Coder

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Lo que me sorprende es que sigas en el foro después de escribir tantísimas faltas de ortografía en un solo mensaje. Ese "yebo" tiene que ser troll porque vaya tela... 😛 En lo demás yo no soy muy activo pero creo que los compañeros siempre intentan ayudar y la mayoría responden con un tono cordial y para nada despectivo. A veces las preguntas son tan básicas que generan un poco de "rechazo". No se si llamarlo así pero es lo que pienso. Si por ejemplo preguntas ¿Cómo se come una sopa? pues obviamente tienes que entender que no todo el mundo te quiera explicar amablemente la respuesta. (tienes que usar una cuchara, cogerla ... etc). Aunque yo soy de la opinión de que para responder mal, prefiero callarme y que otra persona (o yo en otro momento) lo haga. Puedes pensar que el ejemplo de pregunta es absurda, pero preguntar ¿Qué es una clase? es seguramente el capítulo 0 de C#. Ni siquiera es algo propio de Unity. La respuesta de @francoe1 por cierto es excelente, no puedo aportar nada a ese pedazo de mensaje. De todas formas debes mirarte cursos de C# porque me resulta increible que en ninguno de los que has hecho te quedase claro el concepto de clase. Un saludo y ánimo! espero que la explicación del compañero te ayuda a entenderlo de una vez 😛
  2. ¿Has probado a cambiar ese valor por inspector y te da los resultados esperados? Normalmente para poder ese efecto tendrás que añadirle un bevel o algo al texto para simular el efecto 3D. Por ejemplo, puedes poner el Thickness del Outline a 0.2 para probar (de esta forma lo he comprobado yo y tu codigo funciona sin problemas)
  3. Es una solución hacerlo por Colisiones. Si esta fallando tendrias que revisar el sistema que tienes montado porque algo no funciona como debería. Otra podría ser tirar un Raycast/BoxCast/CircleCast con lo que tendrías más precisión. Puedes obtener más información aqui: https://docs.unity3d.com/ScriptReference/Physics2D.html
  4. Hola chicos, comparto con vosotros una implementación de ruido perlin noise con fBm para todos aquellos que esteis interesados. Si necesitais generación procedural de contenido, con esto solamente necesitais llamar a una función. Además las plantillas de ruido se guardan como Scriptable Object. Os dejo imagenes de las demos que incluye con ejemplos de uso, dependiendo del caso: link: https://github.com/davilopez10/PerlinNoise_Unity3D Perlin Noise 1D Perlin Noise 2D Perlin Noise 3D
  5. Muy buena pinta! Enhorabuena tio! Le seguiré la pista, el rollo Limbo me encanta PD: esta calidad de proyecto ayuda mucho a la comunidad de Unity Spain, espero que tengas mucha suerte amigo! 😉
  6. En la anterior entrada hablé sobre trigonometría, repasando las razones trigonométricas y viendo el teorema de pitágoras. Si no lo recuerdas o has llegado nuevo aquí, míralo antes de continuar (enlace debajo). Trigonometría Vectores Matrices Funciones Introducción Si estás familiarizado con motores de videojuegos como Unity, conocerás el concepto de vector ya que se usa habitualmente. Pero ¿qué es realmente un Vector? Un vector básicamente es una flecha que apunta en una dirección y que tiene una longitud concreta: Esto sería un ejemplo de un vector y cualquier flecha apuntando en cualquier dirección sería otro ejemplo. Pero ¿cómo representamos esto? Para poder hacerlo tenemos que llevarnos nuestro vector a un sistema de coordenadas (x e y) y establecer el origen del vector en el centro del sistema. Por si no recuerdas que era un sistema de coordenadas, es una forma de visualizar un punto en el espacio. En este caso el espacio es 2D por lo que se representa con dos líneas, una horizontal (representado por el valor X) y otra vertical (representado por el valor Y) que se cruzan en un punto, llamado centro: Así quedaría nuestro vector anterior dentro de un espacio de coordenadas. Esto, por ejemplo, podría representar el movimiento de una nave en su proceso de despegue. Comienza en la posición (0,0) y sigue en la dirección del vector hasta llegar a su objetivo. Teniendo en cuenta que X es el valor horizontal e Y el valor vertical, el vector sería (2,1) Pero ¿qué podemos hacer con esto? Como has visto puedes representar movimientos con ellos, por ejemplo. Pero para ver de forma práctica su uso vamos a usar Unity3D. Cualquier versión te servirá para este propósito puesto que solo vamos a tocar código básico. En mi caso usaré la versión 2020.1. Si usas otro motor la teoría sigue siendo válida pero tendrás que buscar la forma de adaptarlo por tu cuenta. Unity internamente usa vectores para colocar un objeto dentro de la escena (realmente esto es incorrecto ya que usa una matriz, pero no nos adelantemos). Si vas al componente Transform (crea un gameobject nuevo si no tienes ninguno) te encontrarás con este Vector3 (un estructura propia de Unity) que contiene 3 valores: Estos son la posición en X,Y,Z. Pero ¿pero qué son estos valores? Pues al igual que la gráfica anterior nos indican que desde el centro del mundo hasta la posición de este objeto el vector es (0,0,0). Vamos a ver qué podemos hacer con esto. Para ello creamos un objeto de nombre Player y otro de nombre Target. Los colocamos en diferente posición y le asignamos diferentes iconos para poder diferenciarlos: Recuerda que puedes cambiar el icono en la siguiente pestaña: Una vez hecho esto vamos a crear un nuevo script de nombre Player y lo vamos a añadir al objecto Player. En este script vamos a añadir una variable Transform pública de nombre target y vamos arrastrar nuestro Target a través del inspector. Con esto tendremos acceso al vector de posición del Target desde nuestro Player. Ya tenemos acceso a los dos vectores de posición, el del personaje y el del objetivo. Sabiendo esto ¿cómo hacemos que el personaje se mueva hacia el objetivo usando vectores? Pues aquí llega la parte interesante ya que si restas el vector de posición del objetivo con el vector de posición del personaje, el resultado es el vector necesario para llevar el player al objetivo. Veámoslo gráficamente creando la siguiente función: Si pulsamos play al añadir este código, veremos cómo el personaje se mueve hasta la posición del objetivo. Vale parece que se mueve, pero quiero más. ¿Que tal si medimos la distancia que hay entre uno y otro antes de moverlo? Para esto vamos a recordar la trigonometría que aprendimos en la parte anterior. Magnitud La magnitud de un vector es la distancia que hay entre dos puntos. En nuestro caso sería la posición del personaje y nuestro objetivo. Para calcularla solo tenemos que aplicar la fórmula de la distancia. Esta fórmula es simplemente el teorema de pitágoras disfrazado, y lo vamos a ver en la siguiente imagen: Como puedes ver, nosotros lo que queremos calcular es la distancia (h) por lo que podemos convertirlo en un triángulo añadiendo X e Y. Ahora solo tenemos que usar pitágoras para despejar h. ¿Lo recuerdas? Vamos a resolverlo en código. Para ello vamos a crear una clase estática nueva llamada BasicMath donde vamos a ir añadiendo nuestras funciones matemáticas a partir de ahora. Seguiremos usando Mathf (Unity) o Math (System) para realizar las operaciones básicas que se salen del objetivo de este tutorial. Mencionar que todos los cálculos e igualdades que haremos aquí serán basados en 2 dimensiones. Una vez se han entendido correctamente los cálculos, solo hay añadir la componente z. Esta sería nuestra implementación del teorema de pitágoras. Para ver la distancia simplemente podemos añadir un log en nuestra función MoveToTarget: Si estás familiarizado con Unity ya sabrás que por defecto nos soluciona todos los problemas de vectores con su estructura Vector. Podemos acceder directamente a la magnitud de un vector desde dentro del mismo de la siguiente forma: Como puedes ver, ambos resultados son iguales, aunque nuestra implementación es menos óptima que la que usa internamente Unity. Por lo que esta clase BasicMath y todo lo que contenga es únicamente para uso educativo. La magnitud tiene un pequeño problema y es que hacer una raiz cuadrada es algo costoso a nivel computacional. Por eso habitualmente se usa el valor antes de pasar por la raiz cuadrada. Seguirás teniendo un valor que representa la distancia pero será más eficiente. Podemos crear esta implementación de la siguiente forma y equivale al SqrMagnitud de la clase Vector: Esto es genial, tenemos al personaje moviéndose al target y conocemos su distancia hasta él. Pero no queremos que el player avance directamente hacia el objetivo, sino que lo haga poco a poco a la velocidad que nosotros queramos. Para esto vamos a necesitar normalizar nuestro vector. Normalización Normalizar un vector es cambiar su longitud a 1, manteniendo su dirección. En nuestro caso de ejemplo, el vector “dir” que tenemos. Al cambiar su longitud a 1 podemos controlar la velocidad de movimiento mediante un valor multiplicador. ¿Cómo calculamos el vector normalizado (no confundir con el Vector normal)? Dividiendo el vector por su magnitud: Podemos implementar rápidamente esto en nuestra clase BasicMath: Podemos ver que equivale al valor normalized de la clase Vector: Una vez tenemos el valor normalizado, podemos multiplicarlo por un valor y hacer que el personaje se mueva en función del tiempo: Vamos a tener que pasar nuestra normalización a Vector3 ya que estamos trabajando en dos dimensiones y la posición añade la Z (aunque como este caso sea 0). Si modificamos el valor speed podremos hacer que el personaje cambie su velocidad al moverse a través del vector. Antes de continuar me gustaría darte otra forma de mover un vector de un punto a otro. Pero en lugar de basado en la velocidad, basado en un valor comprendido entre 0 y 1. Cuando el personaje está en su posición inicial, el valor es 0 y cuando llega a su objetivo es 1. Esto es llamado interpolación (Lerp). Interpolación Para interpolar un vector simplemente vamos a sumarle al vector inicial, el vector de dirección al objetivo por un valor t (comprendido en 0 y 1). Veámoslo en código: La primera línea limita la t entre 0 y 1. La segunda simplemente suma al vector de origen, el vector dirección multiplicado por t. Si la t es cero devolverá el valor “a” y si es 1 devolverá el valor “b”. Con el siguiente código podremos probar esta funcionalidad nueva: Tenemos que crear un valor t (el atributo Range nos ayudará a limitarlo entre 0 y 1) y un Vector3 que guarde la posición inicial. Esto es necesario porque si le pasamos la posición actual al Lerp los resultados se irán actualizando al ir moviéndose y el resultado no será el que buscamos. Comentamos la anterior MoveToTarget y añadimos la nueva en la función Update. De esta forma si pulsamos Play tendremos un valor t en el inspector que si vamos moviendo entre 0 y 1 hará que nuestro player se desplace más o menos cerca del target. Hay otros tipos de interpolación que veremos en el apartado de Funciones en próximas partes de este tutorial. Una vez tenemos esto, vamos a pasar con una de las operaciones con vectores más importante. Producto Escalar El producto escalar (dot) es una operación entre dos vectores que nos devuelve un valor. Este valor nos da información muy útil sobre estos dos vectores: Si este valor es cero: el ángulo entre los dos vectores es 90 grados por lo que son totalmente perpendiculares. Si este valor es negativo: el ángulo es mayor a 90 grados. Cuanto menor sea este valor, mayor será el ángulo. Si este valor es positivo: el ángulo es menor que 90 grados. Cuanto mayor sea este valor menor será el ángulo. Aquí puedes experimentar visualmente con estos conceptos: https://www.fisicalab.com/apartado/producto-escalar La fórmula del producto escalar, siendo “a” y “b” dos vectores, es la siguiente: dot = ax * bx + ay * by Ya conocido el concepto vamos a practicar con él. Primero lo añadimos la función a nuestro BasicMath. Ahora añadimos la función Dot de testeo con lo siguiente: Esto calculará el producto escalar entre el vector del personaje y el vector de dirección. Como ves hemos utilizado el transform.up en lugar de la posición. Este valor indica la dirección del vector hacia arriba teniendo como referencia el tranform. Ya conocerás estos vectores si estás habituado a trabajar con Unity. Podemos verlos mejor aquí: Si usamos estos vectores a la hora de calcular el producto escalar, los resultados serán en función a la dirección y no en función de la posición. El vector de posición no nos indica hacia donde está apuntando, sino su posición con respecto al centro del mundo. Una posición por ejemplo de (3,4,0) no nos es útil para calcular el producto escalar, sin embargo el vector.up (0,1,0) sí, ya que es una dirección en este caso hacia arriba. También hemos normalizado los dos vectores antes del dot para que sea más fácil trabajar con el resultado. Activamos esta función en Update, comentando lo demás (puedes dejar el MoveToTarget si quieres). Si damos Play podemos ir moviendo el target y ver como va cambiando el producto escalar. Pero ¿de qué sirve conocer este valor?. Pues anteriormente vimos que este valor nos da información muy relacionada con los ángulos. De hecho podemos calcular el ángulo entre dos vectores conociendo los productos escalares. Ángulo Para calcular el ángulo tenemos la siguiente fórmula,siendo “a” y “b” vectores: θ = arcocoseno (dot(a, b)) Vamos a añadir esto a nuestro BasicMath. Este resultado estará en radianes por lo que crearemos dos funciones, una en radianes y otra que convierta el resultado a grados. Hemos normalizado ambos vectores antes de hacer el Dot. De esta forma lo hará desde dentro y podremos pasarle el vector sin normalizar. El valor Rad2Deg es el factor de conversión de radianes a grados que es 180 . Esto es un valor constante: No es necesario que añadas tanta precisión, puedes coger los decimales que quieras para este fin. Creamos ahora nuestra función Angle en el Player (puedes sustituir la función Dot ya que no la volveremos a usar). Volvemos a usar el Vector.up y añadimos la función al Update para verla. Para visualizar mejor el ángulo, voy a añadir en el OnDrawGizmos el siguiente código. Esto crea dos líneas que simular el comportamiento de los vectores. Si damos al play podremos ver dos líneas que forman un triangulo, el angulo entre las dos es el que nos está mostrando por consola: Con este valor de ángulos podrías, por ejemplo, rotar al personaje para que siempre mire al target con la función transform.Rotate. Con esto llegamos al final de esta entrada sobre vectores. Ha sido algo básico pero que sirve como punto de partida si quieres profundizar por ti mismo. Como he comentado estos cálculos son teniendo en cuenta solo 2 dimensiones. Te animo a que realices los cálculos añadiendo a las fórmulas una dimensión más. Podéis encontrar el código del proyecto aquí Recuerdo que no soy matemático y que los cálculos que aquí he realizado pueden contener errores o no ser del todo precisos. Cualquier duda o anotación siéntete libre de contactar conmigo. Nos vemos en la siguiente entrada.
  7. Gran cambio si señor! Buen trabajo!
  8. No se si llego tarde pero el propio MonoBehaviour tiene funciones para controlar cuando pinchas o arrastras un objeto, en este caso 3D. Solo tienes que añadirle un collider y te ahorras tener que estar tirando un rayo en el Update y demás. OnMouseDown OnMouseDown is called when the user has pressed the mouse button while over the Collider. OnMouseDrag OnMouseDrag is called when the user has clicked on a Collider and is still holding down the mouse. OnMouseEnter Called when the mouse enters the Collider. OnMouseExit Called when the mouse is not any longer over the Collider. OnMouseOver Called every frame while the mouse is over the Collider. OnMouseUp OnMouseUp is called when the user has released the mouse button. OnMouseUpAsButton OnMouseUpAsButton is only called when the mouse is released over the same Collider as it was pressed. Si decides tirar un rayo, ya que es en el Update guarda en cache y usa Physics.RaycastNonAlloc
  9. Como te comenta el compañero puedes cambiarlo de la misma forma que en cualquier otro dispositivo. No se a lo que te refieres con automáticamente. En mi anterior empresa teníamos un controlador que cambiaba automáticamente la calidad en función de los frames a los que corría el dispositivo. Pero debes tener cuidado si lo hace automáticamente porque puede que de saltos de frames si se queda en el limite de cambio, llegando a resultar molesto. Si solo quieres que sea una configuración global antes de compilar, cámbialo a otro nivel y listo. En móvil también puedes cambiar el Resolution Scaling Fixed DPI Factor para reducir la calidad a lo bestia, pero cuidado con esto jaja. https://docs.unity3d.com/Manual/class-QualitySettings.html
  10. Cuando decidí dedicarme a crear videojuegos una de mis preocupaciones principales era mi escaso conocimiento matemático. Internet estaba lleno de mensajes asegurando que no es necesario saber matemáticas para crear videojuegos y aunque, pueda ser cierto en determinados casos, creo que aprender las nociones básicas te van a ayudar a saber lo que estás haciendo y sobre todo a construir mejores juegos. Como veréis no es necesario un conocimiento matemático avanzado para entender gran parte de los cálculos habituales. En esta serie de publicaciones voy a hablaros de algunos conceptos matemáticos básicos que se usan constantemente en videojuegos: Trigonometría Vectores Matrices Funciones Trigonometría La trigonometría, como su nombre indica (tri-tres; gono-ángulo; metría: medida), es la ciencia destinada al estudio de las medidas de los ángulos. Si por ejemplo quieres girar un personaje en tu juego necesitarás un ángulo de giro. Para poder medir un ángulo (o cualquier cosa en general) necesitamos una unidad de medida, vamos a ver las dos principales en el caso de los ángulos: Grado Cuando vas a comerte una pizza lo primero que haces (después de cocinarla claro) es partirla en diferentes trozos. Imagina que la cortamos en 8 trozos, siempre en 8 trozos porque nos encanta el tamaño de cada trozo. Si quisieras medir el ángulo de cada trozo podrías crear tu propia unidad de medida basada en tu especial devoción por los 8 trozos. Llamémosle pizzo a esta medida. Entonces si tu cortas tu pizza en 8 trozos, cada trozo tendría un ángulo de 1 pizzo. Podríamos pedir que se estableciera como medida oficial el pizzo pero me temo que ya tenemos una medida general que puedes usar en su lugar: el grado. Si en lugar de 8 trozos partimos la pizza en 4 trozos iguales y establecemos que cada trozo vale 90 grados, tendríamos la definición de grado. La definición es la siguiente: cada una de las partes que resultan en dividir en noventa partes un ángulo recto. Aquí podemos recordar los tipos de ángulos rápidamente. Radián Una vez hemos recordado la unidad familiar que es el grado, vamos a ver el radián que es el que usaremos de forma habitual. Pero antes de entrar en el radián, debemos conocer el número Pi. ¿Qué es Pi? El número Pi es uno de los más importante en las matemáticas. Su definición es la siguiente: Pi es la relación entre la longitud de una circunferencia y su diámetro. Pero ¿qué significa esto? Pues básicamente quiere decir que sí dibujamos una circunferencia de diámetro 1 y medimos su longitud, obtenemos Pi. Con esta imagen lo entenderás mucho mejor. Si pintamos el borde de una rueda de diámetro 1 y giramos mientras pintamos el suelo midiendo la longitud de la mancha de pintura, tenemos Pi, que es un valor constante (e infinito): 3.14159… De forma habitual se trabaja con radio = 1 en lugar de diámetro = 1. Por lo que la longitud de la circunferencia es este caso sería el doble de Pi (2 π). Como apunte este número es conocido como Tau y su valor es 6.28318… Pero, ¿qué relación tiene esto con un radián? Si seguimos con el ejemplo de la pizza anterior, imagina que te ha venido la inspiración y has cortado la pizza de tal forma que la longitud del arco de cada trozo que has partido mide exactamente 1. Vamos a verlo gráficamente: La pizza tiene radio = 1 y cortamos (no tendrías que cortarla realmente porque es minúscula pero bueno) un trozo cuya longitud de arco es exactamente 1 (arco azul en la imagen). Pues bien, el ángulo que se forma, nombrado “a” en la imagen, mediría exactamente 1 radián. ¿Que pasa si seguimos cortando trozos con longitud de arco 1? Pues tenemos que el ángulo que se forma con media circunferencia (“a” en la imagen) es π radianes. Y el de la la circunferencia completa sería 2π (Tau) radianes. Nota: los dibujos son solo explicativos, las distancias dibujadas no usan medidas reales. Seno, Coseno y Tangente Una vez conocemos el concepto de radián vamos a experimentar un poco con las circunferencias. ¿Qué pasaría si formamos un cuadrado cortando el eje x e y de la siguiente forma? ¿Como calculamos el valor de “x” y de “y”? ¿Que son x e y? Pues aunque resulte sorprendente esos valores son el seno y el coseno del ángulo “a”: La definición nos dice que el coseno de "a" es la abscisa de su punto asociado y el seno de a es la ordenada de dicho punto. Creo que es mucho más entendible con la imagen anterior. A medida que el ángulo cambia, sus valores en x e y modifican su valor. Aquí podemos verlo mejor: La tangente como ves es la recta que toca en un solo punto la circunferencia en función del ángulo. Teorema de Pitágoras En este punto vamos a hablar de otro término muy importante en matemáticas y que usaremos en los siguientes publicaciones, el Teorema de Pitágoras. Este teorema dice que dado un triángulo rectángulo, podemos relacionar su hipotenusa(h) con sus lados (x e y) de la siguiente forma: Despejando tendríamos: ¿Pero qué uso tiene esto? Pues en el siguiente episodio hablaremos de su uso con Vectores. Imagina que tienes un personaje en un escenario y quieres saber a cuánta distancia está un determinado enemigo. Deberás plantearlo con el teorema de pitágoras, donde la “h” es la distancia entre tu personaje y el enemigo. Tendrías que calcular la “x” e “y” para posteriormente poder despejar “h”. Pero vamos a verlo con un ejercicio simplificado: Imagina que tenemos el siguiente triángulo. Para calcular h haríamos lo siguiente: ¿Y si quiero conocer el ángulo? Para conocer el ángulo necesitamos profundizar nuestro conocimiento en las razones trigonométricas. Vamos a verlo siguiendo el mismo ejemplo: Para calcular θ vamos a necesitar calcular primero el seno del ángulo. Pero ¿cómo hacemos esto sin conocer el propio ángulo? Anteriormente vimos que: Esto es así siempre y cuando el radio (la hipotenusa) fuera 1. Pero ¿qué pasa si como en este caso la hipotenusa es 7.81? Solo tendremos que dividir la variable entre la hipotenusa de la siguiente forma: Vale ya sabemos calcular el seno sin tener el ángulo: Una vez tenemos el seno necesitamos conocer el concepto de función trigonométrica inversa. No os asustéis porque el concepto es muy simple. Necesitamos algo que multiplicado por el seno (que ya lo conocemos) nos de el ángulo. Veremos más a fondo este término cuando veamos las matrices. En este caso las función trigonométricas inversas las conocemos y son las siguientes: Nota: en español también se les llama cosecante (arco seno), secante (arco coseno) y cotangente (arcotangente) Ya conocemos cómo obtener el ángulo: Ya tenemos el valor en radianes del ángulo. Si necesitamos pasar de radianes a grados, podemos usar las siguientes fórmulas: Aquí podemos ver gráficamente las razones trigonométricas que hemos visto aquí: Espero que os sea de ayuda y perdonad si he cometido algún error o he explicado algo de forma muy torpe. No soy ni mucho menos un experto matemático, mi intención es que todos podáis acercaros y verlas un poco más fácil. Cualquier duda estaré encantado de ayudar. En la próxima parte veremos Vectores y pondremos en práctica todo lo aprendido aquí pero dentro de Unity. Hasta la próxima.
  11. Como dices, tienes razón en el punto 1, esto es muy útil sobre todo en eventos o debugs rapidos, en el resto de casos supone un sobrecoste de comprobación de nulidad. En el segundo caso es sobre todo útil para debugs que no serán compilados (de hecho en los ejemplos que pongo los uso de esta manera). Pero es bueno tu aporte, muchas gracias! :)
  12. En esta entrada vamos a aprender a crear nuestro primer shader Vertex/Fragment en Unity. Iremos paso a paso hasta terminar creando nuestra propia bandera con ondulación: Requisitos Para crear este proyecto podemos usar cualquier versión de Unity 2018/2019/2020 siempre y cuando a la hora de crear el proyecto usemos la plantilla de 3D (Built-in Render Pipeline) Antes de pasar al código, creo que es necesario que definamos qué es un shader y las partes que lo componen. ¿Que es un Shader? Un shader es un contenedor de instrucciones que se envían a la GPU para mostrar los elementos que tenemos en pantalla. Al igual que el script de un personaje contiene las instrucciones para que este se mueva o gire, el shader contiene información sobre el color o los vértices de un objeto. Al igual que para escribir comportamientos Unity usa C#, para escribir shaders Unity usa su lenguaje llamado Shaderlab. A su vez Shaderlab permite escribir fragmentos de código en CG (C for Graphics) que es donde realmente estará el código del shader en sí. El lenguaje CG fue desarrollado por Nvidia y Microsoft y es compatible tanto con OpenGL como con DirectX. Veremos más adelante en profundidad las partes que componen Shaderlab y CG. Tipos de Shaders En Unity tenemos dos opciones a la hora de crear un shader. Surface shaders: podemos definirlo como una "plantilla" creada por Unity para facilitarnos gran parte del trabajo aunque dando menos control sobre el resultado final. Vertex/Fragment shaders: el código que existe bajo la capa de Surface anterior. Tiene mayor complejidad pero ofrece mayor control sobre el resultado. En esta entrada nos centraremos en estos últimos, ya que el paso a Surface (o a ShaderGraph) es mucho más productiva si conocemos los conceptos del Vertex/Fragment. Fases del Pipeline Para conseguir mostrar un objeto de juego (3D) por pantalla (2D) se requiere de un proceso con varias fases. Ese proceso es llamado Rendering Pipeline. Para que sea más sencillo de entender, voy a resumir los pasos para centrarnos en los que nos interesa ahora. Básicamente tenemos dos funciones que podemos modificar: Vertex: En esta función podemos modificar datos relativos al mesh, principalmente la posición de los vértices, de ahí su nombre. Consta de una entrada de datos (como la posición de los vértices mencionada o las uvs) y produce una salida que será el input de la función fragment. Fragment: En esta función obtenemos los datos recibidos después de convertir las coordenadas del objeto en coordenadas de pantalla. Por ello todas las modificaciones aquí son a nivel de coordenadas de pantalla. Por ejemplo el color, su transparencia etc. Esta explicación es muy superficial y muy rápida, puedes encontrar más información aquí: https://en.wikipedia.org/wiki/Graphics_pipeline Una vez explicado esto, vamos a pasar a la parte práctica. Abrimos por fin Unity y creamos el proyecto con la plantilla de 3D que comentamos (Built-in Render Pipeline). Partes de un Shader en Unity Para empezar vamos a crear una nueva escena. La abrimos y creamos un nuevo Shader Unlit: Le ponemos de nombre FlagEffect por ejemplo y creamos un Material que lo use. Ahora crearemos un cubo en la escena y le colocamos las siguiente posición, rotación y escala: Creamos ahora un Plano, le arrastramos nuestro material y lo colocamos en: Si todo ha ido bien deberás tener algo así. Puedes ajustarlo tú a tu gusto (aunque ten cuidado al girarlo ya que podrías no tener el resultado esperado al final) Una vez creada nuestra bandera, vamos a abrir el shader FlagEffect. Vamos a borrar todo el contenido y vamos a ir conociendo sus partes poco a poco. Esta sería la estructura del shader con la que deberías empezar: Shader: La carpeta donde se registrará nuestro shader. Properties: Son las variables que podemos crear y ver a través del inspector del material. Cuando en un inspector ves una cajita para la textura, un botón para el color o un campo con un valor numérico aquí es donde se deben crear. La sintaxis es la siguiente: NombreVar ("TextoInspector",TipoVariable) = ValorPorDefecto Aquí podemos ver las diferentes propiedades que podemos crear en Unity: https://docs.unity3d.com/Manual/SL-Properties.html SubShader: El contenido del shader estará aquí dentro. Pass: Cada llamada de pintado que haremos. Cada una tendrá sus funciones Vertex y Fragment. Por defecto solo tendremos y necesitaremos una. Aquí es donde estará el código, acotado entre la pauta de inicio y de fin de CG que vemos en la imagen. Fallback: no es obligatorio aunque es recomendable. Si nuestro shader no es compatible con la plataforma en la que corra, se llamará a otro shader para evitar que se vea rosa. Pero para nuestras pruebas recomiendo borrar la línea. De esta forma si tenemos algún problema con nuestro shader podremos verlo directamente (de otra forma puede que llame al Fallback y no lo veamos rosa). Una vez tenemos la plantilla básica, vamos a añadir las funciones de Vertex y Fragment y los input/output necesarios. Vamos a empezar creando estos últimos. Como vimos anteriormente vamos a necesitar una entrada a la función Vertex y una salida de ella. También necesitamos una salida de la función fragment. Para esto usaremos struct de C (que se declaran igual que en C#). Ahora vamos a necesitar las funciones Vertex y Fragment. La primera tendrá como parámetro su input y devolverá el output. La Fragment tendrá como parámetro el output del vertex. Hasta aquí simplemente tenemos las funciones creadas con sus correspondientes inputs/ouputs configurados (aunque vacíos). Si vamos a Unity veremos nuestro material rosa y eso es debido a que el shader cree que nuestras funciones son diferentes a las Vertex/Fragment. Tenemos que decirle mediante un #pragma que la función de vertex se llama vert en nuestro código y que la función fragment se llama frag. Puedes ponerle otro nombre a las funciones sin problema, siempre que en esta conexión lo pongas bien: De esta forma ya no tendremos problemas con nuestro shader, salvo por el pequeño problema de que no se ve nada. Inputs y Outputs En este apartado vamos a rellenar nuestros structs de datos con la información que necesitamos en nuestras funciones de vert y frag. Dependiendo del shader que estemos creando vamos a necesitar más o menos datos dentro de los inputs. Por ejemplo si solamente queremos cambiar el color del objeto a rojo, no necesitamos datos de UV. Podemos ver todos los datos que podemos usar en cada función aquí: https://docs.unity3d.com/Manual/SL-VertexProgramInputs.html En nuestro caso vamos a necesitar para las ondulaciones de la bandera, la posición de los vértices y las coordenadas de uv del modelo. Para ello vamos a crear estas dos variables dentro de vertexInput y de vertexOutput. Lo que aparece después de los dos puntos es la semántica y es necesario para conectar los datos. En el artículo anterior de Unity explica esto más detenidamente* * Te darás cuenta de que Unity en el output usa SV_Position, que simplemente es un valor de sistema que lo hace más compatible con los sistemas actuales, para facilitar el entendimiento lo he obviado y he usado el POSITION Llegados a este punto voy a explicar rápidamente los tipos de variables que podemos usar dentro de CG. Como ves he usado fixed2 y fixed4. El número al final hace referencia a vectores de 2 y 4 datos. Sería algo similar a un Vector2 o un Vector4. El tipo fixed es el tipo de menos coste y de menor precisión. Estarás acostumbrado a ver float o int. Estos también pueden ser usados de la misma forma que fixed. Aquí puedes ver los tipos de datos: https://docs.unity3d.com/Manual/SL-DataTypesAndPrecision.html También puedes crear matrices siguiendo la misma lógica, la sintaxis sería “float4x4”,siendo los valores del final las filas y las columnas. Una vez tenemos el vertex con los datos, vamos a pasar al fragment. Este simplemente necesitará un valor, el color final del pixel. En este caso usaremos SV_Target que es el que Unity recomienda por defecto. Como he dicho tienes más información acerca de la semántica en los enlaces anteriores. Como normalmente el fragment solo tiene un valor de devolución, puedes optimizar y borrar el struct de output cambiando el frag de la siguiente manera. El resultado es el mismo que el anterior pero en menos pasos. Ahora vamos a rellenar nuestra función de vertex. Pero antes vamos a necesitar incluir funciones que Unity nos ofrece para facilitarnos el trabajo. Como hemos dicho antes, vamos a convertir la posicion 3D del objeto en posición de pantalla. Para esto vamos a usar una función de Unity llamada UnityObjectToClipPos. Esta función recibe la posición de los vértices y devuelve las posiciones en espacio de pantalla para después usarlas en la función fragment. Para poder usarla vamos a incluir esta línea debajo de los #pragma. El #include sigue la misma lógica que los using en C#, de esta forma podemos hacer uso de funciones que Unity tiene preparadas (como la que hemos comentado antes). Ahora en la función vertex vamos a igualar el output que devolveremos a lo que la función UnityObjectToClipPos nos devuelva. De esta forma convertiremos los vértices para el fragment. También vamos a igualar de momento las uv del input y del output, aunque las usaremos justo ahora. Procedemos ahora a mover por fin los vértices. Para esto vamos a necesitar conocer por un lado la variable interna _Time que posee Unity, similar a Time.deltaTime. Esta es un Vector4 con diferentes tipos de tiempo en cada una. Aquí podemos ver más información de esa y de otras variables internas de Unity: Por otro lado vamos a hacer uso de la función seno de CG para las ondulaciones. Creamos una nueva función en nuestro shader, de nombre flag que devuelva un fixed4. Además tendrá como parámetros la vertexPosition y las uv. Tened en cuenta que el shader compila de arriba hacia abajo, asique si escribís vuestra función al final y la usáis antes, dará error. Siempre tenéis que crear vuestras funciones antes de usarlas (a diferencia de C# por ejemplo). ahora dentro vamos a ir sumando a la vertexPosition el seno de _Time.y (el tiempo por defecto).Lo igualamos en la función vert al o.vertex quedando así: Estamos simplemente moviendo los vértices del input y asignándoles al output. Posteriormente convertimos con el UnityObjectToClipPos y seteamos las uv del input al output. Si probamos el efecto, vemos el movimiento pero no es lo que queremos. Esto es debido a que el seno en Time es constante por lo que siempre se mueve de forma uniforme. Vamos a añadir el valor de uv.x (valor de 0 a 1) y restarle el Time para conseguir el efecto que queremos. De esta forma funciona, pero vamos a necesitar ajustarlo. Para esto vamos a crear tres propiedades de tipo Range. Esto es similar al atributo Range de Unity para los valores numéricos en C#. Te permite mostrar un float en el inspector del material y moverlo con un slider entre dos valores. Ahora podrás ver las tres variables en el editor. Pero para poder usarlas tenemos que declararlas en CG con el mismo nombre que tengan en la propiedad (_Speed,_Frecuency, _Amplitude). Usaremos el tipo fixed. Estas variables las vamos a usar de la siguiente forma: Speed: va a multiplicar al _Time.y para acelerar y reducir la velocidad. Frecuency: va a multiplicar a la resta entre uv.x y la multiplicación del Time y la speed. Justo antes de hacer el seno. Amplitude: multiplica al valor una vez el seno se ha calculado. Estos son los tres cálculos básicos a la hora de modificar la ondulación. Grábalos en tu mente (o apuntalo mejor) porque los usarás muchas más veces en tu vida. Si todo ha ido bien, podrás ajustar los valores como quieras para mejorar la ondulación. Aquí puedes ver mi configuración: Solo nos quedan dos pasos para terminar. El primero es hacer que la bandera se pegue al poste y no ondule. Esto es muy fácil de conseguir teniendo las referencias de uv.x que, como dijimos van de 0 a 1. Solo tenemos que multiplicar el seno que tenemos por la uv.x. De esta forma anclamos la bandera, consiguiendo que la ondulación vaya de mayor a menor fuerza desde el poste (gracias al valor entre 0 y 1 de uv.x) Lo otro que nos queda es añadirle color. Aquí voy a poner dos opciones, la primera es la básica, añadir un color sin más. Si estás cansado y no quieres continuar es la opción que te recomiendo. Podrás volver otro día para ver la segunda opción. En la segunda opción usaré un lerp para darle a la bandera 3 colores diferentes en función de la Y de su UV. Añadir color básico Simplemente tendrás que añadir una propiedad _Color y una variable de CG para conectarla (al igual que la _Speed y los demás valores anteriores). En este caso el color tiene cuatro valores, así que usaremos fixed4. Y en la función frag devolvemos el color a pelo. Añadir color avanzado Si venimos del básico vamos a borrar la propiedad de color (o cambiarle el nombre) y crear otras tres diferentes. Estas se llamarán ColorTop, ColorMiddle, ColorBotton (o el nombre que tu quieras). Estos tres colores serán las tres franjas que tendrá la bandera. Ahora creamos una función nueva encima de frag con el nombre getPixelColor que devolverá un fixed4. Esta función analizará la posición de la uv en Y (la necesita como parámetro) y haciendo uso de la función lerp y step nos devuelve un color u otro. ¿Qué hacen realmente cada una de estas funciones? Puede ser complicado de leer tal y como está, pero solo necesitas saber lo que hace para entenderlo. La función lerp interpola entre dos valores con un valor t. Cuando t es 0 devuelve el primer valor y cuando es 1 devuelve el segundo valor, devolviendo valores intermedios. En nuestro caso no queremos valores intermedios, queremos una interpolación directa dado un valor de referencia. El valor de referencia será ⅓ ya que tenemos 3 franjas. La función step tiene dos parámetros, si el primero es mayor que el segundo, devuelve 1, si es menor devuelve 0. Esto unido al lerp hace que en valores superiores a 0.33 pero inferiores a 0.66 se coloree del color del centro. Y de igual forma en valores superiores e inferiores. Con esto hemos llegado al final de la entrada. Si tienes cualquier duda con esto déjamela en los comentarios. PD: Si queréis que la bandera se muestre en ambas caras, tendréis que cambiar un valor del Cull. Esto es fácil de hacer pero da para otra entrada junto a otros añadidos como el Blend el ZTest o el ZWrite. De momento para que te quede perfecto, solamente tendrás que añadir junto antes del Pass (o dentro del Pass antes de CGPROGRAM) la siguiente linea: Con Cull en Off no ocultará ninguna cara. Nos vemos en la próxima entrada.
  13. Introducción En esta ocasión vamos a crear una Carta con un efecto 3D similar a la que vemos en el gif anterior. Para ello vamos a partir de un proyecto donde tenemos preparados los assets necesarios. Este proyecto podemos descargarlo desde aquí: URL: https://drive.google.com/open?id=19J6lgCA-DH28lMu9dmntk1K5l3lPE66f Una vez descargado vamos a abrirlo desde el Unity Hub. Este proyecto está creado con la versión 2019.2.9f1 asique podría ser incompatible con versiones anteriores. Una vez abierto vamos a tener una escena llamada “Sample Scene” y una serie de carpetas con los modelos,sprites,prefabs… necesarios. Además contamos con los paquetes TextMeshPro y PostProcessing que usaremos a lo largo del tutorial. Puedes acceder en todo momento a los paquetes usados a través del Package Manager. Preparando el proyecto En primer lugar vamos a abrir la escena “Sample Scene” y vamos a arrastrar en ella el prefab “Hornet” dentro a la ventana de Hierarchy. Verás que aparece en rosa, eso es debido a que no tenemos aún ajustado el Render Pipeline. Vamos a empezar por ahí. Vamos a crear una carpeta Settings donde colocaremos aquellos ajustes globales del proyecto. Siéntete libre de elegir otro nombre, yo siempre soy malisimo poniéndolos. Una vez creada vamos crear una configuración pulsando click derecho y Create/Rendering/LightweightRenderPipeline/PipelineAsets. Elige el nombre que quieras y seleccionalo para verlo en la ventana de Inspector. Aquí tenemos los ajustes del Render Pipeline. La configuración es muy intuitiva y prácticamente todo hace lo que indica. En nuestro caso solamente vamos a activar el HDR y el antialiasing. Lo demás no lo tocaremos, aunque esto va de experimentar, así que “rómpelo” a tu gusto. Una vez creado vamos a añadirlo a nuestro proyecto, para ello vamos a irnos a ProjectSettings/Graphics y lo colocamos en el hueco de Scriptable Render Pipeline Settings. Hecho esto si volvemos a la escena podemos ver que el color rosa ha desaparecido. Aunque ahora se verán blanco. No te preocupes que ese será nuestro siguiente paso. También verás que hay una luz añadida dentro del prefab de Hornet. Está configurada por mi pero llegado el punto puedes quitarla o cambiarla como quieras. Creación de Shaders Vamos a darle color a nuestros objetos ahora. Como has podido ver todos los objetos están en blanco. Eso es porque nuestros shaders y materiales están por defecto. Para nuestro objetivo vamos a necesitar crear un shader con la herramienta Shader Graph. Esta ya viene por defecto en todos los proyectos que usen el Scriptable Render Pipeline nuevo. Para ello vamos a crear una nueva carpeta llamada Shaders y vamos a crear un nuevo Shader PBR (Create/Shader/PBR Graph). Puedes ponerle el nombre que quieras, en mi caso lo he llamado Standard_SG (ya he dicho que soy muy malo poniendo nombres). Vamos a seleccionarlo y abrirlo. No es el objetivo de este taller aprender a usar ShaderGraph, asique no voy a pararme en explicar el contenido, aunque como veréis es muy fácil e intuitivo lo que haremos. Crearemos las siguientes variables: Conectaremos al Albedo un Sampler de una textura y la multiplicaremos por un color. Cómo veis el shader es lo más simple posible. Haremos lo mismo en el canal de Emission para poder ajustar la emisión de algunos objetos posteriormente. Pulsamos en Save arriba a la izquierda y cerramos. Ya tenemos nuestro shader creado pero tenemos un problema que veremos a continuación. Stencil Buffers Para obtener el efecto que buscamos tenemos que conocer el concepto de Stencil Buffer. Con ellos podemos principalmente renderizar unas partes de un objeto y descartar otras. Aquí podemos obtener más información: https://docs.unity3d.com/Manual/SL-Stencil.html https://www.ronja-tutorials.com/2018/08/18/stencil-buffers.html El objetivo es mantener “invisible” un objeto y que cuando este se encuentre en la “visión” de otro objeto, se muestre. Vamos a necesitar por dos shaders: Uno que leerá del stencil buffer y se dibujará solo donde el búfer tenga un valor específico, en cualquier otro lugar se descartará. Por otro, un shader que permanerá siempre invisible y que solamente mostrará aquellos valores específicos que coincidan con el stencil buffer. Para el primer solo necesitamos añadir unas líneas, pero actualmente no es posible hacerlo a través del ShaderGraph. Por lo que vamos a realizar una transcripción del Shader Graph al código. Para esto vamos crear un nuevo Shader Unlit pero esta vez no será de ShaderGraph. Le ponemos de nombre Standard_StencilRead por ejemplo y lo abrimos. Mientras se abre vamos a volver al Shader Graph y vamos a realizar la copia del código del shader. Para ello nos vamos al PBR Master Node y con el botón derecho seleccionamos Copy Shader. Una vez copiado vamos a pegarlo en nuestro reciente nuevo shader unlit creado, sobreescribiendo todo lo que este tuviese. También deberás cambiar la primera línea y ponerle tu la dirección y el nombre que elegimos antes. En mi caso lo he guardado en MyShaders con el nombre Standard_StencilRead. Ahora tenemos el mismo shader de Shader Graph pero en código para poder modificarlo. Vamos a necesitar añadir una nueva propiedad que será el valor específico del stencil. Simplemente dentro de properties al final, debajo del Color añadimos lo siguiente: [IntRange] _Stencil ("Stencil Value", Range(0,255))= 0 Quedando de la siguiente manera: Por último vamos a necesitar añadir los ajustes del Stencil debajo de los Tags antes de los diferentes pases. Esto hará que sólo cuando tengamos el valor de referencia, el objeto se muestre. Podemos obtener más información sobre la sintaxis y el contenido en los enlaces que anteriores. Ya podemos guardar el shader y volver a Unity. Tenemos preparado nuestro primer Shader. Para el segundo simplemente creamos otro shader unlit de nombre StencilWrite por ejemplo. Este estará siempre invisible y servirá para mostrar los objetos que compartan valor de referencia. Abrimos el shader y lo modificamos de la siguiente forma: En properties añadimos el valor de Stencil como con el anterior y eliminamos cualquier otra propiedad (normalmente textura) ya que este shader queremos que se muestre totalmente invisible. Añadimos el Stencil y le decimos que esté siempre comparando y si en algún momento el valor de referencia es el mismo, lo reemplace. Ahora le decimos al buffer de profundidad que no se escriba (por ser un objeto que será invisible) y cambiamos el modo de Blend. Podemos obtener más y mejor información de esto aquí: https://docs.unity3d.com/Manual/SL-Blend.html También eliminamos todos los añadidos de Fogs por defecto de Unity y aquellas referencias a texturas que no nos interesan. Por último hacemos que la función frag devuelva siempre 0, ya que como hemos comentado esto se muestra siempre como invisible. Con esto tenemos todo listo para pasar al montaje de la carta. PD: Asegurate también de que lo tienes en la misma ruta que el anterior. Esto no es necesario, pero te facilitará encontrarlo más adelante. En mi caso al igual que antes, esta en la ruta MyShaders. Montaje de la carta Para empezar vamos a cambiar por fin el blanco de nuestra escena, para ello vamos a irnos a Materials/Hornet y seleccionando todo vamos a elegir nuestro Shader (en este caso el Standard_StencilRead) Ahora tendremos que arrastrar las texturas requeridas (Main Texture y Emission Texture) si procede y establecer el MainColor en blanco (tened cuidado que el alfa no este a 0) y el EmissionColor en negro. En el caso que no tengamos texturas (como en el caso del personaje Hornet) simplemente cambiale el MainColor a tu gusto. Puedes hacerlo similar al original o ponerle tu propia versión. Así quedaría el del grass_material por ejemplo: O el dress_material, que no tendría textura: Sigue estas pautas en los demás materiales. El stencil value lo cambiaremos más adelante, de momento necesitamos ver en pantalla todo y no solo cuando este a través de nuestro “marco”.. Una vez terminado debería de quedarte algo similar a esto: Ahora vamos a crear un nuevo objeto en la escena llamado Card y lo ponemos en la posición 0,0,0. Ahora buscamos el Sprite “cover” dentro de Sprites y lo arrastramos dentro de Card. Le damos el tamaño a nuestro gusto. Este será el envoltorio de la carta. Ahora vamos a crear un Quad dentro de Card. Le ponemos de nombre StencilMask y lo colocamos en la posición 0,0,0 también. Este será nuestro marco a través del que se verá nuestra Hornet. Para poder ajustarlo vamos a tener que configurar ya el valor de referencia del stencil así como crear un nuevo material StencilWrite para nuestro quad recién creado. Vamos a empezar por esto último, crearemos un nuevo material con el shader StencilWrite. Lo colocamos dentro de Materials para tenerlo ordenado. A este material le vamos a poner en el valor de Stencil el valor 2 por ejemplo. Es simplemente un valor referencia, mientras tanto el receptor como el emisor tengan el mismo, funcionará. Una vez configurado vamos a arrastrarlo al StencilMask (o cambiamos el material dentro de MeshRenderer) para colocarselo. Veréis que se ha vuelto invisible, eso es que funciona como debería. Por último vamos a irnos a los materiales StencilRead que configuramos anteriormente y vamos a ponerles el mismo valor de referencia al Stencil. Seleccionamos todos o uno a uno y en Stencil Value le colocamos 2. Ahora debería de volverse todo invisible en la escena quedando solo la carta en negro. Vamos a desactivar de momento la carta llamada “cover” (o el nombre que tu le hayas puesto) de la ventana de Hierarchy. No se ve nada pero no es un error. Ahora mismo todos los shaders tienen el mismo Render Queue por lo que nuestro efecto no está funcionando. Más información de esto aquí: https://docs.unity3d.com/Manual/SL-SubShaderTags.html Sabiendo esto solamente tendremos que asegurarnos que nuestro StencilWrite se renderice antes. Vamos a nuestro material y le restamos 1 al RenderQueue. Con esto ya deberiamos tener visible nuestro modelo únicamente cuando estemos viendolo a través de nuestro quad. Ahora volvemos a activar el cover para ajustar la carta y el hueco como queramos. Al activarlo verás que tapa la visión a través del quad. No te preocupes, simplemente ve a los ajustes del SpriteRenderer del cover y cambia el MaskInteraction a Visible Outside Mask. Ahora ajustamos el Quad hasta tener el tamaño que deseemos. Una vez confirmado podemos probar a girar en la escena alrededor de la carta para comprobar el efecto. Para organizar mejor la escena vamos a colocar el objeto Hornet dentro de Card y vamos a crear un prefab para tenerlo guardado. Gracias a los Nested Prefab ya podemos hacer prefabs dentro de prefabs, asique nos viene genial. Ahora solo nos falta añadirle algo de texto. Vamos a usar TextMeshPro para esto. Pulsamos botón derecho y creamos un nuevo texto en 3D. Vamos a empezar por el nombre de la carta, por lo que le ponemos de nombre al text “Name” por ejemplo. Vamos a escribir el texto del nombre en el apartado Text y vamos mover y escalar el objeto colocándolo donde más nos guste. En mi caso he decidido ponerlo arriba. Vereis que no se ve cuando lo colocamos en la zona de la carta. Eso es por el orden de renderizado que tienen. Vamos a abrir los ajustes extra del texto (extra settings) y vamos a subirle el orden in layer a 1. Con esto conseguimos verlo, pero existe un problema, que el texto aparece también por detrás. Esto lo solucionaremos más adelante ya que tendremos que añadir un script simple para que active el culling. Llegados a este punto me he dado cuenta de que la carta está colocada del revés y el nombre por la parte trasera se ve invertido. En nuestro caso podemos solucionarlo rápido ya por delante la carta no se ve afectada. Simplemente nos vamos al objeto “cover” y marcamos Flip X. De esta forma la parte de atrás estará perfecta. En el caso de que tuvieras una imagen diferente deberías tener cuidado ya que la carta es la misma tanto en la partal como en la dorsal. Todo se dará la vuelta. Si quieres tener un control más exacto, deberás tener una carta delantera y otra trasera, cada una con su ajustes (y quizás optimizada para no pintar dos cada cara). Vamos a guardar el avance, aplicamos el prefab y guardamos escena. Deberíamos tener algo similar en estos momentos: Vamos a crear ahora otro texto para colocarlo en la parte de debajo. Duplicamos el objeto Name con Control+D y cambiamos el nombre a Description. Movemos el objeto a nuestro gusto, en mi caso lo coloque en la parte de abajo, centrado. Puedes tocar los ajustes del TextMesh que son maravillosos, sobre todo si has trabajado con el deprecado Text. Si queremos podemos cambiar la fuente. Para ello simplemente tendrás que descargarla de internet (o obtenerla de otra forma) y meterla dentro de Unity. Una vez dentro no es simplemente arrastrarla. Para poder usarla en TextMesh necesitarás crear un atlas de la fuente. Pero es fácil de hacer, simplemente abre la ventana Font Asset Creator desde WIndows/TextMeshPro. Selecciona la fuente y pulsa Generate Font Atlas (si quieres cambiar algún otro ajuste puedes hacerlo, pero ten cuidado. Más información sobre esto aquí: http://digitalnativestudios.com/textmeshpro/docs/font/ ) Una vez generada simplemente guárdala donde quieras y luego colócala en el texto dentro de Main Settings: Una vez tengamos la descripción vamos a guardar el prefab y a colocar los Post Procesos. Para ello Vamos a ir a la cámara y vamos a asegurarnos que tiene añadido un Post Process Layer. Esto es imprescindible para poder continuar. También vamos a activar a antialiasing FXAA y vamos a crear un nuevo layer PostProcessing para posteriormente usarlo en el Volume. Ahora vamos a crear un nuevo objeto en la escena. Le vamos a añadir el componente Post Process Volume. Vamos a marcar IsGlobal porque solo tendremos este para toda la escena y vamos a seleccionar un profile. En nuestro caso no tenemos ninguno creado, asique le daremos a New. Ahora simplemente asegurate de que este objeto está en el Layer PostProcessing De otra forma no funcionará y no podremos ver ningún cambio. Una vez configurado podremos ir añadiendo efectos ya creados por Unity o crear los nuestros propios. En este caso vamos a usar dos creados, el Bloom y el Color Grading. Pulsamos en Add Effect y seleccionamos uno y después el otro. Aquí puedes sacar tu lado artístico y elegir la configuración que más te guste. En mi caso después de una serie de pruebas quedó así: En este punto deberías tener algo similar a esto. Si no es así asegúrate de que el material del lazo tiene un emission color bien configurado. Por último nos queda solucionar el error del texto por ambas caras. Para eso simplemente vamos a crear un script con el nombre CullingTextMeshPro o el que querais y vamos a dejar solo la función Awake con el siguiente código: De esta forma al darle al Play el texto automáticamente hará culling y no se renderiza por detrás. Estuve informándome sobre otras formas de hacer esto, pero las respuesta de Unity fueron que esta era la forma. Pero si conocéis otra forma contactad conmigo y lo actualizo. Espero que os haya gustado y hayáis aprendido cosas nuevas que al final es el objetivo esto. Cualquier duda contacta conmigo via twitter: https://twitter.com/_davidlopez29 o por aquí Hasta pronto!
  14. Si quieres profundizar, este tuto es muy completo. http://unity-dev.blogspot.com/2016/05/serializacion.html
UnitySpain © Todos los derechos reservados 2020
×
×
  • Create New...