Introducción

En este artículo vemos cómo crear un material transparente en Unity y de esa forma que permita ver lo que hay detrás, un material que se puede aplicar a ventanas y otros objetos de cristal como copas o botellas. Además vemos cómo usar una imagen con alpha para aplicar la transparencia de acuerdo a la información en esa textura.

SUSCRÍBETE AL CANAL

Descargar paquete de Unity con texturas con transparencia

A continuación puedes descargar un paquete de Unity con todos los Assets que utilizo en el vídeo.

Elementos que se van a utilizar

Para mostrar cómo hacer objetos transparentes en Unity, voy a utilizar un cubo y una esfera que tendrán aplicados un material cada uno. En la figura 1 vemos los objetos en la jerarquía y en la figura 2 los materiales que he creado para ambos objetos.

*Fig. 1: Los objetos que vamos a utilizar como ejemplo.*

*Fig. 2: Los materiales que están aplicados en los objetos de la figura anterior.*

Colocaré la esfera por delante del cubo, esto permitirá saber si el material de la esfera es transparente.

*Fig. 3: Coloco la esfera por delante del cubo para mostrar la transparencia.*

Pasos para crear un material transparente en Unity

1. Seleccionamos el material que queremos hacer transparente para visualizar sus parámetros en el inspector. El material que estoy usando es el material Standard que se puede crear en Unity, en la figura 4 vemos sus parámetros en el inspector.

*Fig. 4: El inspector del material azul de la figura anterior, un material Standard.*

2. Cambiamos el modo de renderizado de opaco a transparente, como se observa en la figura 5.

*Fig. 5: Cambiamos el modo de renderizado a transparente.*

3. Modificamos el color Albedo del material según el color que queramos y disminuimos la componente alfa hasta lograr el nivel de transparencia deseado (figura 7).

*Fig. 6: Cambiamos el color del material.*

*Fig. 7: Disminuimos el alfa del color para lograr la transparencia.*

Resultados

En la figura 8 vemos el resultado, el material del objeto azul es transparente y permite ver lo que se encuentra por detrás.

*Fig. 8: El material ahora permite visualizar lo que se encuentra detrás.*

Si se quiere lograr un material similar al cristal se puede ajustar el parámetro «Smoothness», esto hará que el material sea más suave y se parezca más al vidrio.

*Fig. 9: Aumentamos el parámetro «Smoothness».*

*Fig. 10: El material ahora tiene un aspecto más parecido al cristal.*

Introducción

En este artículo te mostraré cómo hago para capturar el sonido de la PC utilizando Audacity, un Software libre que permite grabar y editar sonidos. Aquí tienes el link para descargar Audacity.

Poder grabar el audio de la computadora en mi caso me es muy útil porque me permite obtener fácilmente efectos de sonido, suelo buscar en YouTube: «efecto de sonido de …» y luego capturarlo rápidamente usando esta técnica. También es muy útil para grabar una conversación o una clase virtual.

En el siguiente vídeo se puede ver el proceso que utilizo para grabar el audio interno de la computadora con Audacity.

En la siguiente figura muestro un ejemplo de cómo puede estar configurado Audacity normalmente. Esta configuración se utiliza para capturar el audio del micrófono, pero para capturar el audio de la computadora debemos hacer algunos ajustes.

*Fig. 1: Ejemplo de configuración por defecto del programa Audacity.*

Pasos para grabar el sonido de la PC con Audacity

1. Seleccionar en el menú desplegable que se observa en la figura 2, la opción «Windows WASAPI».

*Fig. 2: Seleccionamos la opción «Windows WASAPI».*

2. Seleccionar el dispositivo de captura de audio, en mi caso el sonido de la computadora sale por el dispositivo «Speakers», figura 3.

*Fig. 3: Para el dispositivo de grabación se selecciona «Speakers».*

3. Cambiar el modo de grabación de «Mono» a «Stereo», esto es muy importante ya que estamos capturando el audio de la PC y es un audio que tiene dos pistas, izquierda y derecha, si lo dejamos en «Mono» NO VA A FUNCIONAR la grabación.

Con esto debería ser suficiente, para asegurarme de que funciona suelo hacer una prueba de grabación pulsando el ícono del parlante en la esquina inferior derecha y cambiando el volumen, windows emite un sonido para indicar el nivel de volumen, en la figura 5 se ve este sonido capturado.

Introducción

En este artículo vamos a ver cómo modificar el cielo de la escena en Blender. Para ello vamos a usar una textura HDR a modo de textura ambiental. Este tipo de texturas es muy útil cuando se quiere lograr una iluminación realista ya que al utilizar la textura para iluminar la escena, el modelo 3D recibe iluminación de distintos colores e intensidades dependiendo de la dirección y esto resalta su geometría, especialmente si se trata de objetos que reflejan el entorno.

En el siguiente vídeo muestro cómo configurar una textura HDRI en Blender para utilizarla como el cielo de la escena.

SUSCRÍBETE AL CANAL

Primer paso – Conseguir textura HDR para el Skybox

Para modificar el Skybox de la escena en Blender necesitaremos texturas especiales, una de las que se puede usar son las texturas HDR (High Dynamic Range), son texturas que tienen más información que las que comúnmente utilizamos y son útiles para iluminar escenas, ya que se puede incrementar o disminuir su intensidad y la textura responde apropiadamente.

Suelo descargar texturas de la página Poly Haven, tienen una galería bastante interesenta con este tipo de imágenes, las descargas son gratuitas y además se puede elegir entre calidades que van desde 1K a texturas 8K, como se puede ver en la figura 2.

Poly Haven

*Fig. 1: Primero se necesita conseguir una textura HDR, en la página hay distintas categorías y se pueden descargar en distintas resoluciones.*

*Fig. 2: En mi caso voy a descargar una textura en resolución 2K.*

Pasos para cambiar el Skybox en Blender

A continuación vamos a ver cómo modificar el cielo en Blender en dos simples pasos.

1. Ir a la pestaña «World Properties» y modificar el nodo del color, eligiendo la opción «Environment Texture», como se muestra en las figuras 3 y 4.

*Fig. 3: En la pestaña World Properties modificamos el nodo del color.*

*Fig. 4: Seleccionamos Environment Texture de la lista.*

2. Utilizando el botón «Open» que aparece, seleccionar la textura HDR para utilizar como cielo.

*Fig. 5: Usamos el botón Open para abrir el archivo con la textura HDR.*

*Fig. 6: Seleccionamos una textura HDR, al principio del artículo hay un link para descargar estas texturas.*

Resultados

Para ver cómo queda el cielo de la escena vamos al modo renderizado, presionando la tecla Z debería desplegarse las opciones que se observan en la figura 7, elegimos la opción «Rendered».

*Fig. 7: Entramos en el modo renderizado para visualizar la escena.*

*Fig. 8: Toda la escena está rodeada por la textura seleccionada.*

En la figura 8 vemos el resultado, toda la escena se encuentra rodeada por la textura HDR y la iluminación de la escena proviene en parte de esta textura. Esto lo podemos hacer más evidente si hacemos que el material refleje.

*Fig. 9: En el material del cubo disminuyo la rugosidad y lo hago metálico.*

Para eso seleccionamos el cubo, vamos a la pestaña material y le aumentamos al máximo el parámetro «Metallic» y disminuimos el parámetro «Roughness».

En la figura 10 vemos el resultado, ahora el cubo es metálico y de superficie suave, por lo tanto refleja la luz del entorno.

*Fig. 10: El entorno se refleja en el material debido a que la textura HDR se está utilizando para iluminar la escena.*

ESTE CONTENIDO ES POSIBLE GRACIAS AL APOYO DE LA COMUNIDAD
HAZ CLIC PARA SUSCRIBIRTE SIN COSTO AL CANAL

Introducción

He creado un nuevo Asset para Unity, se trata de una barra indicadora para el Canvas. Este Asset te servirá para mostrar valores en relación a un valor mínimo y máximo, por ejemplo puedes hacer una barra indicadora de vida, fuerza y magia, una barra de progreso, etc. He añadido varios parámetros y funcionalidades para que se pueda personalizar bastante, en este artículo veremos el contenido del paquete y un ejemplo de cómo hacer una barra indicadora de vida en Unity.

En el siguiente vídeo muestro cómo está compuesta la barra indicadora, los parámetros configurables en el inspector y cómo modificar su valor desde un Script:

SUSCRÍBETE AL CANAL

Descargar Asset – Barra indicadora lineal para Unity

A continuación puedes descargar el paquete de Unity para importar en tu proyecto, el paquete contiene los Assets de la barra indicadora. En la figura 1 se muestran los archivos que tiene el paquete al importarlo.

*Fig. 1: Archivos que contiene el paquete.*

En la escena «Indicators» ya viene montada la barra indicadora junto con un ejemplo de cómo utilizarla. En la figura 2.a vemos la jerarquía de la escena, el prefab de la barra indicadora (tercer elemento de la figura 1) debe ser añadido como hijo de un objeto Canvas, sino no se puede visualizar en pantalla.

El tamaño de la barra indicadora se puede ajustar seleccionando el GameObject que está resaltado en la figura 2.a y modificando los valores «Width» y «Height» en el inspector (figura 2.b). No es necesario modificar la escala.

*Fig. 2.a: El prefabricado debe colocarse como hijo de un objeto Canvas.*

*Fig. 2.b: Para ajustar el tamaño de la barra indicadora utilizar los campos Width y Height.*

En la figura 3 se ve la barra indicadora, al entrar en el modo juego y presionar las teclas A y D, debería verse cómo la barra disminuye e incrementa su valor respectivamente.

*Fig. 3: En la escena se encuentra montado el indicador para testear.*

Parámetros de personalización de la barra de vida para Unity

En el inspector del prefabricado de la barra indicadora se pueden ver algunos parámetros para personalizar su funcionamiento. Todos estos valores pueden ser configurados a través de Script, eso lo veremos en el ejemplo de más adelante. Por ahora vamos a ver qué función cumple cada uno de los parámetros.

El parámetro «Orientation» determina si la barra indicadora se va a rellenar horizontal o verticalmente. La variable booleana «reverse» permite invertir el sentido de llenado, izquierda a derecha o derecha a izquierda si la orientación es horizontal y de abajo a ariba o de arriba a abajo si la orientación es vertical.

El color «FillColor» es el color del relleno de la barra indicadora y es el único color que se mostrará, a menos que se marque la casilla «Use Two Colors», si esa casilla está marcada, la barra mostrará el «FillColor» cuando esté al máximo y el «EmptyColor» cuando esté al mínimo, interpolando el color para todos los valores intermedios.

Los valores «minValue» y «maxValue» determinan el rango de valores que indica la barra, esto dependerá de para qué la vayamos a utilizar.

*Fig. 4: En el inspector se puede preconfigurar la barra indicadora.*

El objeto «ValueIndicator» es la referencia de la imagen del relleno, no es necesario modificarlo, pero en caso de que te interese, el Script «LinearIndicator», teniendo en cuenta el valor que tiene que mostrar y el porcentaje que eso representa en función de los valores mínimo y máximo, modificará la escala del objeto «ValueIndicator» entre 0 y 1 para X si la orientación es horizontal y para Y si la orientación es vertical.

Cómo implementar una barra de vida en Unity

Para hacer una barra de vida utilizando este Asset, hay que entender cómo utilizarlo a través de código. La parte visual la configuramos desde el inspector, ahí podemos modificar colores, tamaños y demás, pero para usar esta barra indicadora vamos a necesitar un Script de Control.

Asumiendo que que se dispone de un Script que controla la vida del jugador, es decir que cuando le hacen daño disminuye su vida, cuando se cura su vida aumenta, vamos a ver cómo usar este Asset para indicar el nivel de salud.

Paso 1: Personalizar la apariencia de la barra de vida.

En este primer paso lo que hacemos es trabajar en la parte visual, es decir estando en Unity le damos el tamaño a la barra de vida, la posición, los colores, podemos cambiar el color de fondo, etc.

Paso 2: Declaración del objeto indicador para la barra de vida.

Dentro del Script donde vamos a utilizar la barra indicadora como barra de vida, lo primero que necesitamos es definir una referencia pública para el objeto «LinearIndicator», esto se hace en la línea 9 de la figura 5. En caso de necesitar más de una barra indicadora, por ejemplo para hacer una barra de vida y una barra de armadura, habrá que definir dos de estas referencias.

*Fig. 5: Definición de un objeto tipo LinearIndicator para poder utilizar el indicador lineal.*

Al definir la referencia como pública podremos verla en el inspector y asignar manualmente en ese espacio, el GameObject de la barra indicadora (en nuestro caso el que está resaltado en la figura 2.a), como vemos en el campo aparece la referencia del Script «LinearIndicator».

*Fig. 6: Asignar el objeto con el Script LinearIndicator en el espacio que aparece en el inspector.*

Paso 3: Configuración inicial de la barra de vida.

El Script «LinearIndicator» tiene definido varios campos y funciones públicas para configurarlo a través de código. En la figura 7 vemos varias instrucciones que permiten configurar la barra indicador.

La función «SetupIndicator» por ejemplo (línea 17 de la figura 7) permite establecer el rango de valores de la barra indicador, por ejemplo si la salud del jugador está entre 0 y 500, esos deberían ser los valores que se pasan como parámetro, de esa forma cuando el jugador tenga su vida en 500, la barra estará llena al 100%.

En la línea 18 vemos cómo cambiar la orientación de la barra indicadora, en la línea siguiente como cambiar la variable «reverse» que modificaba el sentido de llenado.

*Fig. 7: Ejemplo de configuración del indicador lineal por código.*

La línea 20 no es una instrucción de configuración sino es la instrucción para utilizar la barra indicador, esto lo vemos en el siguiente paso.

Paso 4: Utilización de la barra de vida.

Para escribir una valor en la barra de vida utilizamos la referencia que definimos y llamamos a la función «SetValue», pasando como parámetro el valor que queremos indicar. Podemos ver ejemplos de esto en la línea 20 de la figura 7 y en las líneas 32 y 40 de la figura 8.

Esta función se puede llamar en el momento en el que ocurre un evento que modifica el valor, por ejemplo cuando el jugador recibe daño, en ese momento refrescamos el valor de la barra de salud, o sino también se puede actualizar constantemente el valor. Dependiendo de cómo funcione nuestro juego.

*Fig. 8: Ejemplo de utilización del indicador lineal por código.*

Introducción

En este artículo vamos a ver cómo armar una tabla de valores para graficar cualquier función en el plano cartesiano, detallando todo lo que se necesita saber para el procedimiento y analizando un ejercicio de tabla de valores resuelto.

¿Qué se necesita para graficar funciones con tabla de valores?

Primero que nada tienes que tener en claro cuál es la expresión de la función que tienes que graficar, usualmente es una expresión del tipo «f(x)=…» o del tipo «y=…«. La función no es otra cosa que una expresión matemática que relaciona una variable independiente con una variable dependiente. Usualmente la variable independiente es x y la variable indepentiente es y, aunque le podemos asignar el nombre que queramos siempre que sepamos bien cual es cual.

Fig. 1: Expresión matemática de la función que se graficará con tabla de valores.

Necesitamos un dibujo del plano cartesiano, como el que se ve en la figura 2. Si se dispone de una hoja cuadriculada resulta mucho más simple.

Se trata de dos líneas perpendiculares, en las que trazamos marcas equiespaciadas que representan las coordenadas. El punto donde se cruzan ambos ejes se le conoce como origen y es el punto (0,0).

Fig. 2: Plano cartesiano con los cuadrantes identificados y una función cúbica graficada.

¿Cómo armar la tabla de valores para graficar funciones?

La tabla de valores de una función es una lista de dos columnas, en la primer columna se colocan valores a elección de la variable independiente y en la segunda columna hay que poner sus correspondientes valores de la variable dependiente, estos valores se calculan introducciendo los valores elegidos de la variable independiente en la expresión de la función y calculando el resultado.

Ejemplo

Procedemos a hacer el gráfico la función de la figura 1 con la tabla de valores. Comenzamos con el valor x = -2, lo introducimos en la expresión de la figura 1 y resolvemos la ecuación. En la siguiente imagen puedes ver este proceso detallado.

Fig. 4: Evaluación de una función de la figura 1 en el valor -2 de la variable independiente. Resolución.

Hemos encontrado que la función evaluada en x = -2 es igual a 13/2. Anotamos este valor en la columna de la derecha de la tabla de valores, junto al correspondiente valor de la variable independiente.

Fig. 5: Tabla de valores con el primer valor de la variable dependiente calculado.

Ahora lo que resta es repetir el mismo proceso para todos los demás valores escritos en la izquierda de la tabla de valores, recordemos que estos valores los elegimos nosotros mismos y dependiendo de la función a veces es conveniente elegir unos valores antes que otros, esto de todas formas se logra cuando ya se tienen conocimientos de la función a graficar y experiencia.

Si estás en un examen, es bueno mantener la prolijidad y el orden, esto no solo evitará que cometas errores sino que le facilitará la tarea de corregir al profesor. Los cálculos auxiliares como los de la figura 4 se pueden incluir a un costado o en una hoja aparte, probablemente tu profesor te diga qué hacer, pero si tienes dudas pregúntale, los cálculos auxiliares son una prueba del razonamiento que usaste para resolver el problema por lo que es bueno tenerlos a mano.

Fig. 6: Tabla de valores con todos los valores calculados a partir de la función de la figura 1.

Trazar el gráfico de funciones con tabla de valores

Una vez que hemos calculado todos los valores de la tabla, el paso siguiente es colocar esos valores en el plano cartesiano. La tabla de valores nos dá las coordenadas de los puntos que pertenecen a la función. Por ejemplo el primero es el punto (-2 , 13/2), es decir que X vale -2 y F(X) vale 13/2.

Observación: La F en F(X) es solo un nombre que se le dá a la función, se podría usar cualquier letra, G(X), H(X), etc. Incluso se suele utilizar la letra Y.

En la figura 7 vemos el gráfico de la función hecho a mano, primero coloqué todos los puntos que tenía en la tabla de valores y luego trazé una curva intentando conectar todos los puntos de manera suave. En la figura 8 vemos el gráfico de la misma función pero hecho con FooPlot, una herramienta para graficar funciones online.

Fig. 7: Gráfico de la función de la figura 1 en el plano cartesiano hecho con regla en base a la tabla de valores de la figura 6.

Fig. 8: Gráfico de la función de la figura 1 en el plano cartesiano hecho por computadora.

Conclusión

Hemos visto el proceso para graficar una función con tabla de valores. La idea es tener bien claro cuál es la función que tenemos que graficar y luego armar una tabla de dos columnas, en la primera colocamos algunos valores de la variable independiente, en general con 5 valores puede que sea suficiente, pero si ves que el gráfico no está del todo detallado puedes añadir más puntos.

En este caso la prolijidad y el orden es muy importante, para que tu profesor pueda corregirte sin problemas pero especialmente para ti, porque en estos ejercicios se suelen cometer muchos errores por distracción, para minimizarlos ayuda mucho ser ordenado y repasar los cálculos.

Introducción

He creado un prototipo en Unity para mostrar cómo detectar un objeto cuando entra dentro del Collider de otro objeto y aplicar acciones cuando eso ocurre.

Escena del prototipo que viene dentro del paquete de Unity

Paquete para descargar:

A continuación puedes descargar el paquete de Unity con este prototipo, la idea es que importes el archivo dentro de Unity y así podrás tener los assets que usamos y al abrir la escena verás montado algo similar a lo que se ve en la imagen más arriba.

Por favor lee atentamente lo que digo a continuación sobre el funcionamiento de este prototipo

He creado este prototipo para que entiendas cómo se puede ejecutar una acción cuando detectamos que un Collider entra dentro de otro Collider.

LA EXPLICACIÓN ESTÁ DIVIDIDA EN DOS PARTES, lo hice de esta manera porque así es como resuelvo cualquier problema usando el motor Unity, luego de analizar un problema y crear un plan para solucionarlo, hay que ocuparse de dos cosas, la primera es de los elementos de la escena en Unity, crear GameObjects, asignar componentes y configurar. La otra parte de la que hay que ocuparse es de las líneas de código que resuelvan el problema, pero esto no es posible si no tenemos en claro cuáles son los objetos de la escena que vamos a usar dentro de nuestros scripts.

Vídeo #1: Configuración de los Colliders en Unity

Para empezar vamos a analizar cómo hay que configurar las cosas en Unity para poder detectar que un objeto entra dentro de otro objeto. Es necesario configurar correctamente los Colliders de los objetos y agregar componentes Rigidbody para que un Collider sea capaz de funcionar como Trigger,

SI NO HACES ESTA PARTE BIEN DA IGUAL QUE ESCRIBAS BIEN LAS INTRUCCIONES DE CÓDIGO, SIMPLEMENTE NO VA A FUNCIONAR.

SUSCRÍBETE AL CANAL

Presta mucha atención al siguiente vídeo:

Vídeo #2: La función OnTriggerEnter

Una vez que nos aseguramos de configurar correctamente los objetos de la escena, ahora sí pasamos a la parte del código, en el siguiente vídeo se ve la función OnTriggerEnter que se ejecuta cuando un Collider es detectado por un Trigger, este concepto se puede usar para muchas cosas distintas, en este caso, cuando el personaje entra al trigger se enciende un objeto, se reproduce un sonido y aparece un enemigo en la escena:

Implementación

El principal objetivo de este prototipo es ayudar a entender cómo funciona el sistema de detección por Colliders en Unity, entender esto te ayudará a sacarle mayor ventaja de acuerdo a tus necesidades.

La mayoría de las acciones que ocurren en este prototipo consisten simplemente en activar y desactivar GameObjects de la escena y también componentes, por ejemplo el «enemigo» que cae del cielo cuando entramos en el Collider es simplemente un GameObject con un componente RigidBody asignado que se encontraba inactivo y, al momento de entrar el collider, pasa a estar activo, haciendo que este objeto caiga del cielo.

A continuación te dejo dos vídeos que explican cómo activar y desactivar GameObjects de la escena y cómo activar y desactivar componentes asignadas a GameObjects de la escena.

Cómo activar y desactivar GameObjects a través de código en Unity

Esto se puede usar para hacer que un objeto aparezca y desaparezca en Unity, en el siguiente vídeo se ven las instrucciones a ejecutar para activar y desactivar un GameObject en Unity

Cómo activar y desactivar Componentes a través de código en Unity

Esto es similar a lo anterior pero se busca activar y desactivar una componente en Unity, se puede usar para que un determinado comportamiento deje de ejecutarse.

Introducción

Aunque considero que estoy en constante aprendizaje en este tema, en los años que llevo haciendo páginas web y creando contenido he logrado reunir un tráfico de casi medio millón de personas por año, esto significa que más de cuarenta mil personas al mes acude a mis páginas, vídeos, descarga mis archivos, etc. Y uno de mis principales objetivos actualmente es llevar ese número a un millón de usuarios anuales.

En este artículo quiero compartir mi pensamiento sobre las ventajas y desventajas que conlleva tener un sitio web. Y también compartir un poco sobre cómo comencé y darte alguna recomendación que me hubiese venido bien en su momento. Quizás puedo ayudarte a despejar algunas dudas.

IMPORTANTE: Voy a hablar en general de la creación de un sitio web de contenido para atraer a miles de personas de manera orgánica.

Desventajas de tener tu propio sitio web

Comencemos con las desventajas ya que considero que es mejor terminar con un pensamiento positivo.

1. Dinero. Costos recurrentes de mantenimiento

Tener un sitio web propio produce gastos, hay que pagar el mantenimiento del dominio y el servidor como mínimo (hay más productos digitales que pueden ser de interés).

Estos gastos se pueden abonar por distintos períodos de tiempo, por ejemplo mensualmente, por 12 meses o más, dependiendo la empresa con la que contratemos los servicios. En general, cuanto mayor sea el período por el que paguemos, menor será el costo.

Como consejo te puedo ofrecer que no te apresures a pagar un servicio de hosting barato por un largo período de tiempo, ya que si tienes éxito (y lo tendrás si tienes algo que ofrecer, eres creativo y sobre todo te esfuerzas), tu negocio crecerá y necesitarás un paquete con mayores recursos para cubrir la demanda de tráfico.

2. Tiempo y esfuerzo

Si bien existen gestores de contenido y otras herramientas que nos facilitan mucho la creación de un sitio web, es necesario dedicar bastante tiempo para pensar ideas y crear el contenido que tendrá nuestro sitio web, puede que no dispongas del tiempo para hacerlo.

Algo que me habría venido bien saber desde el principio es lo siguiente, ¿alguna vez escuchaste la siguiente frase?: «lo subes a internet así lo ve todo el mundo». Déjame advertirte que es muy probable que cuando subas algo a internet no lo vaya a ver «todo el mundo», diría que todo lo contrario, especialmente cuando recién comienzas es probable que lo que hagas lo vean muy pocas personas o directamente nadie.

Esto no lo digo para desalentarte sino más bien todo lo contrario, anímate a crear mucho y hacer experimentos, si las cosas no funcionan se pueden modificar o eliminar. Si estás comenzando es muy probable que no tengas claro lo que quieres hacer o qué sería lo mejor para hacer, mi consejo aquí es que pienses en los intereses de las personas que quieres que vengan a ti, que hagas mucho y que seas constante. En el proceso irán surgiendo nuevas ideas y si utilizas herramientas para analizar tus resultados mucho mejor (por ejemplo Google Analytics o Google Search Console).

Ventajas de tener tu propio sitio web

1. Eres el dueño de lo que haces

Cuando publicas en plataformas como Facebook, Instagram o YouTube, te limitas a las herramientas que estas páginas te ofrecen y lo más importante estás generando contenido para ellos. Las redes sociales son importantes, pero considero que es más importante tener un sitio web propio relacionado a tu marca y utilizar las redes sociales para llevar gente a tu página web, las redes sociales en general no te van a facilitar esto ya que no les es favorable, pero con distintas estrategias puedes lograrlo.

2. Un puente para los negocios

Las páginas web generan visitas y las visitas en internet significan dinero. Si atraes más visitas tendrás más oportunidades de negocios y si además muestras anuncios publicitarios tu página generará dinero solo por el hecho de que las personas entran a verla.

En este punto es importante tener claro qué es lo que ofrecemos, qué tipo de persona nos interesa atraer a nuestro sitio web e intentar ponernos en sus zapatos y pensar qué preguntas se hacen aquellas personas.

3. Imagen de marca

Una página web proyecta una imagen al mundo y le dá peso a nuestras palabras.

Piensa en la cantidad de sitios web que hablan sobre creación de páginas web (cientos o incluso miles) y sin embargo estás aquí leyendo este artículo de mi página web.

Si consigues crear un contenido interesante en tu propio campo de aplicación y si además te diferencias de las demás páginas que están haciendo lo mismo, te garantizo que te pondrás por encima de ellas y las personas acudirán a ti en lugar de a las otras páginas.

4. Publicar tus productos

Aquí hablaremos en el caso particular de la creación de videojuegos con Unity, hacer juegos Unity WebGL y publicarlos para jugarlos desde tu propio sitio web o que se puedan descargar, pero considero que la idea es válido para cualquier producto que queramos ofrecer.

Existen distintas plataformas en donde puedes publicar tus juegos, por ejemplo Itch.io o Game Jolt y si bien estas páginas te facilitan el proceso de subir tus juegos e incluso conseguir que la gente los vea y se interese por ello. Considero que sería mucho mejor que las personas empiecen a ver tus productos en tu propio sitio web.

Imagínate que vendes un producto, puedes publicarlo este producto en Amazon o puedes venderlo en tu propia tienda. Amazon te dará difusión, hará que tus productos lleguen a potenciales compradores, pero las ventas que consigas en esa plataforma tendrás que compartir las ganancias. Si logras vender el producto en tu propia tienda la situación cambia a tu favor.

Con esto no trato de decirte que no deberías publicar el producto en otra plataforma, eso puedo ayudar bastante, pero también es bueno ir haciendo crecer tu propia página web, ya que es algo que te pertenece a ti. Al final puedes ganar de todos lados, tomemos por ejemplo el software «Substance 3D», se puede comprar desde la página web al que le pertenece el software pero también se puede comprar en Steam, Steam se lleva una comisión interesante por las ventas, pero en definitiva todo es ganancia.

Conclusión

Tener un sitio web propio puede ser bastante trabajoso, especialmente cuando recién se está empezando, sin embargo considero que vale la pena el esfuerzo, ya que un sitio web te dá libertad creativa para proyectar la imagen que deseas al mundo y permite que esas personas que están buscando lo que tu ofreces te encuentren y se puedan comunicar contigo.

Quisiera reiterar que cuando recién se está comenzando con un sitio web propio, no hay que preocuparse demasiado por cuál sería el mejor contenido posible que se pueda hacer, simplemente por el hecho de que al principio no se tiene idea.

Considero que es mejor ser proactivo, generar mucho contenido, experimentar, analizar los datos y comenzar a tomar decisiones en función de esa información. Con el tiempo se irá mejorando y encontrarás oportunidades que nunca te hubieses imaginado.

Introducción

En este artículo veremos una lista de términos y conceptos importantes que necesitas conocer si decides crear tu propio sitio web. No es necesario que te los memorices, simplemente que sepas un poco a qué hacen referencia porque empezaremos a utilizarlos con frecuencia.

Ten en cuenta que en esta serie voy a hablar de manera conceptual, sin entrar en detalles técnicos, para que cualquier persona, independientemente de su formación, pueda entenderlo.

Servidor – ¿Qué es y para qué sirve un servidor?

¿Has visto el mensaje de arriba antes? Mi servidor se encuentra en Hostinger.

Un servidor o host puedes pensarlo como si fuese un disco rígido o disco de estado sólido pero que se accede a través de internet. Ese disco, en lugar de estar conectado a tu computadora, se encuentra conectado a otra computadora en alguna parte del mundo y siempre está encendida.

Tu página web, archivos, imágenes, vídeos y juegos Unity compilados en WebGL se almacenarán en ese disco.

Se puede montar un servidor web utilizando tu propio ordenador, pero en esta serie no vamos a ver cómo hacerlo. En esta serie veremos cómo trabajar con el servidor que utilizo actualmente: Hostinger.

Si tienes pensado crear solo un sitio web te recomiendo empezar con el paquete «Single Shared Hosting» por 1 año. Si le pones esfuerzo, en ese tiempo puedes conseguir el tráfico suficiente para empezar a generarte oportunidades de negocios e incluso obtener ganancias por publicidad si así lo deseas. Esto te permitirá costear los gastos recurrentes de dominio y servidor y lograr que la página genere ingresos pasivos para que se mantenga a sí misma.

URL – ¿Qué es y para qué sirve una URL?

La URL es un nombre que se escribe en la barra del navegador y que conduce a un recurso en internet, mediante las URL podemos acceder a páginas web, artículos, vídeos, descargas, etc.

Utilizamos constantemente las URLs para navegar en internet. Un ejemplo de URL es: «https://youtube.com/c/GameDevTraum«, si colocas esa URL en tu navegador se abre la página de mi canal en YouTube (ya que estás ahí puedes suscribirte :D). Además con las URLs puedes crear enlaces hacia otros recursos, observa cómo el ejemplo de URL anterior se muestra en azul y si se hace clic sobre él, conduce a la página en cuestión.

Un sitio web puede tener múltiples URL, por ejemplo mi página web, al momento de redactar este artículo y sin contar los archivos, tiene más de 300 URLs.

Dominio – ¿Qué es un dominio web?

El dominio es la URL principal de tu página web, en mi caso el dominio es: «gamedevtraum.com», está compuesto por dos partes, el nombre en sí y la extensión, en mi caso el nombre es: «GameDevTraum» y la extensión «com», existen muchos tipos de extensiones, por ejemplo «.org», «.io», «.dev» y también extensiones que representan países, por ejemplo «.ar» en el caso de Argentina, «.es» para España y «.mx» para México.

Puedes elegir el nombre y la extensión que prefieras siempre y cuando no haya sido reservada por alguien más.

Dirección IP – ¿Qué es y para qué se usa una dirección IP?

La dirección IP es un conjunto de números ordenados que permite acceder a una computadora en internet o en una red. Este término no lo vamos a usar con mucha frecuencia pero de todas maneras decidí incluirlo a modo de curiosidad.

Prueba poner la siguiente dirección IP en la barra de tu navegador: «216.58.213.78«, a ver a dónde conduce!

Certificado SSL

En términos simples el certificado SSL hace que la transferencia de datos en tu página web esté protegida.

Los sitios que tienen certificado SSL se muestran en Google Chrome con un candado en la barra de dirección del navegador y su dominio es precedido por «https://». Mientras que un sitio que no tiene certificado SSL se muestra como «No seguro», a veces incluso son bloqueados por el navegador y su dominio es precedido por: «http://».

CMS – ¿Qué es un sistema de gestión de contenidos?

Un CMS o sistema de gestión de contenidos es una aplicación web que nos permite crear contenidos en nuestra página web de manera simple. El gestor de contenidos se encarga de resolver la parte difícil y nos permite enfocarnos en la parte creativa.

Con esto podremos hacer una página web con poco o ningún conocimiento de programación web.

Cliente FTP – ¿Qué es FTP y para qué sirve un cliente FTP?

Las siglas FTP significan «protocolo de transferencia de archivos» y un cliente FTP es un software que nos permite transferir archivos entre dos dispositivos conectados a través de internet o por red local.

En nuestro caso particular, cuando queramos subir archivos a nuestra página web (imágenes, vídeos, archivos comprimidos) o publicar nuestro juegos WebGL en Unity, vamos a necesitar un clientes FTP. En mi caso utilizo el cliente FileZilla (clic para ir a la descarga).

Conclusión

Hemos visto algunos conceptos básicos que necesitamos conocer para empezar a desarrollar nuestra página web. Lo mínimo que necesitamos para empezar es un nombre de dominio y un servidor web.

Introducción – ¿Qué es el Skybox en Unity?

El Skybox es como una imagen que rodea completamente una escena en Unity y permanece fija sin importar que tanto intentemos acercarnos. El propósito del Skybox es representar el horizonte lejano de la escena y es posible elegir una textura para hacerlo.

En este artículo veremos cómo cambiar el Skybox que viene por defecto en Unity. Esto nos permitirá personalizar el cielo de la escena para nuestro juego.

En el siguiente vídeo muestro cómo reemplazar el cielo por defecto de Unity

SUSCRÍBETE AL CANAL

Primer paso – Conseguir textura HDR para el Skybox

Para modificar el Skybox de la escena necesitaremos texturas especiales, una de las que se puede usar son las texturas HDR (High Dynamic Range), son texturas que tienen más información que las que comúnmente utilizamos y son útiles para iluminar escenas, ya que se puede incrementar o disminuir su intensidad y la textura responde apropiadamente.

Suelo descargar texturas de la página HDRI Haven, tienen una galería bastante interesenta con este tipo de imágenes, las descargas son gratuitas y además se puede elegir entre calidades que van desde 1K a texturas 8K, como se puede ver en la figura 2.

HDRI Haven

Pasos para cambiar el Skybox del cielo en Unity

Antes de mostrar el proceso completo voy a poner una lista de pasos para resumir el proceso, si ya tienes experiencia con Unity puede que te resulte útil.

1. Importar la textura HDR en Unity y en el inspector configurar su parámetro «Texture Shape» como «Cube».

2. Crear un material nuevo y configurar el tipo de Shader como Skybox > Cubemap.

3. Asignar la textura HDR al campo «Cubemap HDR» de nuestro material. Con esto ya tenemos preparado el Skybox para cambiarlo por el que viene por defecto.

4. Ir a la ventana Window > Rendering > Lighting, sección Environment y en el campo Skybox, seleccionar el material que hemos configurado en el paso anterior.

5. (Opcional) En caso de la textura no tenga buena calidad, modificar el formato de compresión o descargar una textura de mayor resolución.

Procedimiento detallado para cambiar el Skybox del cielo en Unity

Una vez que importamos la textura HDR en Unity vamos a crear un nuevo material, en la carpeta Assets, clic derecho, crear y luego seleccionamos material.

*Fig. 3: Creamos un material para hacer el Skybox.*

Le ponemos un nombre y luego lo seleccionamos para ver sus propiedades en el inspector.

*Fig. 4: Seleccionamos el material para ver sus parámetros en el inspector.*

En la cabecera del inspector, ubicamos el campo «Shader» que por defecto se encuentra configurado en «Standard» y lo cambiamos por el Shader tipo «Skybox > Cubemap», como se observa en las figuras 5 y 6.

*Fig. 5: Hacemos clic en la pestaña Shader para cambiar el tipo de Shader.*

*Fig. 6: Seleccionamos el Shader Cubemap dentro de la sección Skybox.*

Ahora el inspector para este material se va a ver mostrar con otros parámetros que antes, como vemos en la figura 7.

*Fig. 7: Así se ve el nuevo inspector del material.*

En principio nos interesa asignar nuestra textura HDR al campo «Cubemap HDR» pero primero tenemos que hacerle algunos ajustes a la imagen. Seleccionamos la textura HDR que hemos importado.

*Fig. 8: Seleccionamos la textura HDR que importamos previamente para ver sus parámetros en el inspector.*

El campo «Texture Shape» lo cambiamos a Cube y aplicamos los cambios

*Fig. 9: Cambiamos el tipo de textura a Cube para poder usarla en el Skybox Cubemap.*

*Fig. 10: Cuando terminamos de configurar la textura aplicamos los cambios.*

Esto nos permitirá usar la textura para el material Skybox, podemos arrastrar la textura directamente al campo o pulsar el botón «Select» y seleccionarla en la ventana emergente.

*Fig. 11: Ahora podemos arrastrar la textura al espacio Cubemap en el inspector del material.*

*Fig. 12: También se puede hacer clic en el botón select y seleccionarlo en la ventana emergente*

Si todo sale correctamente, deberías ver un resultado como el de la figura 13.

*Fig. 13: Con esto se tiene el Skybox preparado para utilizar.*

Ahora que tenemos el material Skybox configurado, vamos a aplicarlo a la escena. Para eso tenemos que abrir la pestaña «Lighting», en la figura 14 se ve dónde se encuentra esa ventana si no la tienes abierta.

*Fig. 14: Abrimos la ventana Lighting para cambiar el Skybox.*

Dentro de la ventana Lighting vamos a la sección «Environment» y en el primer campo llamado «Skybox Material» asignamos el material Skybox que hemos configurado anteriormente.

*Fig. 15: Dentro de la pestaña Lighting vamos a la sección Environment y seleccionamos el Skybox.*

*Fig. 16: Seleccionamos la textura HDR Cubemap que configuramos previamente.*

En la figura 17 se ve el primer resultado de hacer esto, la textura no se ve del todo bien debido al tipo de compresión.

*Fig. 17: Primer resultado, el Skybox está aplicado pero la imagen tiene una cierta pérdida de calidad.*

Podemos seleccionarla y en el inspector cambiar la compresión a «RGB 16», «RGB 24» o «RGBA 32», esto traerá un aumento en la calidad pero también en el peso de la imagen. Se puede probar descargar distintas calidades de textura HDR y probar distintos formatos para encontrar un balance entre calidad y rendimiento.

*Fig. 18: Seleccionamos la textura HDR y modificamos el formato.*

En la figura 19 vemos el resultado final al que he llegado. Ahora que hemos cambiado el nuevo Skybox en la escena, podremos hacer Bakes de iluminación para conseguir mejores resultados.

*Fig. 19: La calidad ha mejorado pero así también el peso de la imagen.*

Introducción – ¿Por qué activar y desactivar GameObjects?

Los GameObjects son los objetos que podemos colocar en una escena en Unity, como mínimo tienen un componente Transform asignado, que permite conocer su posición, rotación y escala. A estos GameObjects se les puede ir añadiendo componentes y así ir dándole un comportamiento más específico. Por ejemplo, una Cámara en Unity es un GameObject simple al cual se le añade el componente «Camera» y el componente «AudioListener».

Cuando el GameObject está activo en la jerarquía y el juego está corriendo, Unity actualiza periódicamente cada uno de sus componentes y ejecuta algunas otras funciones, todo esto de manera automática. Si desactivamos el GameObject, tanto el GameObject como sus componentes no se actualizarán de manera automática y lograremos el efecto de que el GameObject «desaparezca» de la escena.

*Fig. 1: Un GameObject genérico en la jerarquía de una escena en Unity.*

Tengo 2 vídeos que te van a servir para activar y desactivar GameObjects en Unity

#1 – Cómo activar y desactivar GameObjects a través de código

En este primer vídeo hay que prestar especial atención al tema de la asignación de la referencia del GameObject que quieres activar o desactivar, porque no solo importa la instrucción para activar un objeto sino cuál de todos los objetos de la escena quieres activar, Unity no sabrá mágicamente a qué objeto te refieres, tienes que decírselo.

SUSCRÍBETE AL CANAL

#2 – Cómo activar y desactivar GameObject de manera intermitente a través de código

En este otro vídeo vemos cómo hacer que un GameObject se active y desactive de manera intermitente, por ejemplo cada 1 segundo. Esto permite por ejemplo hacer una luz parpadeante.

Cómo activar y desactivar manualmente objetos en Unity

Como se mencionó antes, todo GameObject consiste como mínimo de un componente Transform. Si seleccionamos el GameObject en la jerarquía, en el Inspector veremos esta componente Transform y además los elementos de la cabecera que se observan en las figuras 2 y 3.

*Fig. 2: Casilla de activación del GameObject, en este momento se encuentra activo.*

*Fig. 3: Casilla de activación del GameObject, en este momento se encuentra inactivo.*

*Fig. 4: El GameObject al estar inactivo se ve en gris en la jerarquía.*

La casilla sobre la que está colocado el cursor en ambas imágenes, es la casilla del estado del GameObject, si esta casilla está marcada, el GameObject está activo en la escena, si la casilla está desmarcada, el GameObject está inactivo en la escena y es como si no existiera. En la jerarquía, un objeto inactivo se ve como en la figura 4, en un tono más apagado.

Activar y Desactivar GameObject usando Script

Por supuesto podríamos sacarle más provecho a esto si pudiésemos activar y desactivar uno o más GameObjects a través de un Script, esto nos permitiría por ejemplo hacer aparecer enemigos cuando el jugador llega a cierta parte del mapa, hacer aparecer una pantalla final cuando el jugador pierde la partida y más.

Comencemos creando un Script y un GameObject nuevo en la jerarquía al cual asignarle el Script.

*Fig. 5: Creamos un nuevo Script para hacer la activación y desactivación del GameObject por código.*

*Fig. 6: Creamos un GameObject extra para asignar el Script que acabamos de crear.*

En la figura 7 se puede ver que el nuevo GameObject tiene asignado el Script que creamos. Esto se puede hacer arrastrando directamente el Script o utilizando el botón Add Component y buscando por nombre al Script.

*Fig. 7: Asignamos el Script al GameObject creado en el paso anterior.*

Para poder activar o desactivar el GameObject desde un Script necesitamos tener la referencia del GameObject que queremos activar o desactivar, así que dentro de nuestro Script vamos a definir un GameObject público, en este caso lo he llamado «gameObjectToDeactivate», intentando que el nombre refleje lo más posible la función que va a desempeñar.

*Fig. 8: Definimos una referencia pública para un GameObject y le ponemos un nombre representativo.*

Al definir la referencia pública, este objeto aparecerá en el inspector del GameObject que tiene asignado el Script, como vemos en la figura 9, esto nos permitirá asignar manualmente el objeto que queremos activar y desactivar, en nuestro caso el primer objeto que teníamos que se llamaba «GameObject», en la figura 10 se ve cómo se ha rellenado el campo con este objeto.

*Fig. 9: En el inspector nos aparece un campo en el que podemos colocar un objeto tipo GameObject.*

*Fig. 10: Tomamos el primer objeto y lo arrastramos al campo del inspector.*

Instrucción para activar o desactivar un GameObject en Unity

La función que nos permite cambiar el estado de Activación de un GameObject es «SetActive«, se trata de un método de programación que recibe como parámetro un valor booleano (verdadero o falso) y esta función se ejecuta sobre la referencia de un GameObject, en este caso usamos la referencia que hemos definido, como se observa, en las líneas 22 y 27 de la figura 11, estamos desactivando y activando el GameObject respectivamente.

En este ejemplo en particular lo que hacemos es chequear si se pulsan las teclas A y D para ejecutar las funciones, cuando el jugador pulsa la tecla A, se ejecuta la instrucción «SetActive(false)» que inhabilita el GameObject y si el jugador pulsa la tecla D, se ejecuta la instrucción «SetActive(true)» que habilita el GameObject.

*Fig. 11: En la función Update leemos las entradas de teclado y realizamos la activación y desactivación del GameObject.*

Ejecutar esas instrucciones es exactamente equivalente a marcar o desmarcar esa casilla en el inspector que vimos en las figuras 2 y 3.

Introducción – ¿Qué es el Origen en Blender?

El origen de un objeto en Blender es el punto en el espacio que representa a todo el objeto, por ejemplo si queremos decir la posición exacta en la cual se encuentra el objeto, usaremos la posición del origen. Además las «transformaciones» de un objeto, es decir su posición, rotación y escala se calcularán respecto de ese punto origen. El origen de un modelo 3D es un concepto que se usa a lo largo de distintos softwares de diseño, por ejemplo si exportamos nuestro modelo de Blender a Unity, el origen del modelo que se define en Blender va a ser el origen que tenga el objeto en Unity. Debido a estas razones es importante saber cambiar el origen en Blender y posicionarlo en donde resulte mas conveniente para cada objeto en particular y para la aplicación para la que fue hecho.

En el siguiente vídeo muestro cómo CAMBIAR LA POSICIÓN DEL ORIGEN de un objeto en Blender, cómo situarlo en el centro de un objeto y también cómo usar el cursor 3D para colocar el origen en cualquier punto del objeto que queramos.

SUSCRÍBETE AL CANAL

Cómo saber DÓNDE está el origen de un objeto en Blender

El origen de un objeto en Blender se representa con un punto amarillo, a continuación vemos un cubo, un toroide y un cilindro con sus respectivos orígenes.

*Fig. 1: Posición del origen en un cubo por defecto en Blender.*

*Fig. 2: Posición del origen en un toroide por defecto en Blender.*

*Fig. 3: Posición del origen en un cilindro por defecto en Blender.*

Modos de trabajo – Modo Objeto y Modo Edición

En Blender se puede trabajar en distintos modos, dos de ellos en particular son el modo objeto y el modo edición, con la tecla TAB podemos alternar entre ambos (si tenemos seleccionado al menos un objeto). En el modo objeto como su nombre lo indica trabajaremos con objetos, es decir no se tendrá en cuenta la geometría del mismo, sino sus transformaciones principales y aquí el origen es el punto clave que representa al objeto. Cuando movamos, rotemos o escalemos el objeto, lo estaremos haciendo en relación a su punto de origen.

*Fig. 4: En el modo objeto podremos mover al objeto sin cambiar la posición de su origen.*

En el modo objeto podemos conocer la posición exacta del punto origen en el panel de transformación (acceso rápido «N» si no está visible), como vemos en la figura 5, en la pestaña Item, podemos ver la localización del origen, su rotación y su escala y por supuesto introducir manualmente valores en estos campos.

*Fig. 5: La posición exacta del origen puede verse en la pestaña de transformación en Blender.*

En el modo Edición (figura 6), en cambio, nos metemos dentro del objeto y podemos ver y modificar su geometría, es decir sus vértices, aristas y caras. En este modo podemos crear nuevas caras y hacer todo tipo de transformaciones geométricas, pero lo importante aquí es que su punto de origen permanece fijo,

*Fig. 6: En el Modo Edición trabajamos con la geometría del objeto, es decir sus vértices, aristas y caras.*

En la figura 7 como se puede observar, todos los vértices del cilindro están seleccionados y se están moviendo ya que se ha pulsado la tecla «G», el punto de origen sin embargo permanece en su lugar, si lo comparamos con el cilindro de la figura 3.

*Fig. 7: Si movemos una o más partes del objeto en el modo edición, su origen permanecerá en el mismo punto.*

Cómo modificar el origen de un objeto en Blender usando el cursor 3D

Luego de entender qué es el origen del objeto 3D y para qué se utiliza, vamos a ver cómo modificar su posición al punto del espacio que queramos. Para ello vamos a auxiliarnos del Cursor 3D.

Primero vamos a ver cómo posicionar el Cursor 3D en donde queramos, para eso vamos a ver tres ejemplos, el primero es posicionar el Cursor 3D en el centro de una cara. Estando en el modo edición, seleccionamos una cara (con el modo caras, atajo «3» o seleccionando los vértices que la definen). Una vez que tenemos la cara seleccionada usamos el atajo ‘SHIFT+S» para abrir el menú SNAP, como vemos en la figura 8, este menú nos dá muchas opciones, pero la que nos interesa en este momento es la de mover el Cursor 3D a la selección actual, como tenemos la cara seleccionada, el resultado es que el cursor 3D se traslada al centro geométrico de la cara, como vemos en la figura 9.

*Fig. 8: Seleccionamos una cara del modelo y utilizando el atajo SHIFT+S accedemos al menú Snap, elegimos «Cursor a la Selección».*

*Fig. 9: El cursor 3D se ha movido al centro de la cara seleccionada.*

Si repetimos el proceso pero esta vez teniendo seleccionado un vértice solamente, vemos cómo el Cursor 3D se posiciona sobre el vértice, figura 11.

*Fig. 10: Seleccionamos un vértice del modelo y utilizando el atajo SHIFT+S accedemos al menú Snap, elegimos «Cursor a la Selección».*

*Fig. 11: El cursor 3D se ha movido al vértice seleccionado.*

Y si hacemos nuevamente el proceso pero esta vez teniendo una arista seleccionada (dos vértices), vemos cómo el Cursor 3D se mueve hacie el centro de la arista, figura 13.

*Fig. 12: Seleccionamos una arista del modelo y utilizando el atajo SHIFT+S accedemos al menú Snap, elegimos «Cursor a la Selección».*

*Fig. 13: El cursor 3D se ha movido al centro de la arista seleccionada.*

Utilizando alguna de estas opciones deberíamos ser capaces de posicionar el Cursor 3D en cualquier punto de interés del objeto en cuestión. Ahora lo que falta es mover el origen del objeto a la posición del cursor 3D, para ello debemos salir del Modo Edición y ENTRAR en el Modo Objeto. Damos clic derecho al objeto, vamos a la opción Set Origin y elegimos la opción «Origin to 3D Cursor», esto hará que el origen del objeto se traslade a la posición actual del Cursor 3D.

*Fig. 14: En el modo objeto, hacemos clic derecho sobre el modelo, luego «Setear Origen» y elegimos la opción «Origen al Cursor 3D».*

Como vemos en la figura 15, el punto amarillo que representa al origen se ha movido al centro de la arista donde estaba situado el Cursor 3D, a partir de ahora, las transformaciones que se hagan en el modo objeto se calcularán respecto de ese punto, como se observa en la figura 16, se hace una rotación restringida al eje X y el resultado es que el punto de origen permanece fijo y el resto del objeto gira en torno a él.

*Fig. 15: El origen del objeto ahora se ha trasladado a la posición del cursor 3D.*

*Fig. 16: Todas las transformaciones que se hagan en el modo objeto se calcularán respecto del punto de origen.*

Conclusión

El origen de un objeto es importante ya que define la posición del mismo en el mundo y las transformaciones que se hagan sobre él, en general se calcularán respecto del punto de origen.

Es posible modificar el origen de un objeto 3D y posicionarlo en donde sea más conveniente de acuerdo al objeto, por ejemplo si se trata de una hélice, es conveniente que el origen del objeto esté en el eje de rotación de la hélice, de esta forma, cuando rotemos la pieza, el resultado será una rotación natural para ese objeto.

ESTE CONTENIDO ES POSIBLE GRACIAS AL APOYO DE LA COMUNIDAD
HAZ CLIC PARA SUSCRIBIRTE SIN COSTO AL CANAL

Introducción

En este artículo puedes descargar el efecto de fundido en negro para Unity y ver detalles sobre su funcionamiento. Para usar este Asset en su proyecto solo tienes que arrastrar al Canvas el prefabricado que viene en el paquete de descarga y luego configurar los parámetros de acuerdo a tus necesidades, por defecto, al darle a play en Unity, verás que la pantalla se oscurece automáticamente.

Paquete de Unity para descargar

A continuación puedes descargar el paquete de Unity que contiene scripts, un prefabricado y una escena donde hay un ejemplo en el que se implementa el efecto de fundido en negro para Unity.

En el siguiente vídeo explico cómo utilizar efecto de fundido en negro en Unity (Efecto FADE IN/FADE OUT)

SUSCRÍBETE AL CANAL

Introducción

En el ejercicio 7 de la serie de problemas básicos de programación en lenguaje C# para resolver en Unity tenemos como entrada dos lados de un rectángulo y tenemos crear un algoritmo para que calcular el perímetro y el área del rectángulo para imprimir el resultado en pantalla.

Solución del ejercicio 7 en formato vídeo:

SUSCRÍBETE AL CANAL

Descripción del problema y estrategia para la resolución

El código del algoritmo que resuelve el problema planteado debe ir dentro de la función AlgoritmoEjercicio del Script correspondiente, en este caso el script Ejercicio7. La función AlgoritmoEjercicio será ejecutada al pulsar el botón «Ejecutar Algoritmo» que hay en pantalla.

Lo que tenemos que hacer es tomar las dos entradas ingresadas por el usuario y convertirlas a valores numéricos, de esta forma podremos hacer operaciones matemáticas entre ellas.

Una vez que tenemos los dos valores ingresados, calculamos primero el perímetro del rectángulo sumando el valor de los cuatro lados (tenemos el dato de dos de los lados, pero los otros dos restantes son iguales a estos valores debido a que se trata de un rectángulo). Luego calculamos el área multiplicando un lado por el otro.

Luego definimos una variable tipo string llamada «resultado», generamos el mensaje de respuesta concatenando textos junto con los valores del perímetro y área del rectángulo, por último escribimos este resultado en pantalla.

Solución del ejercicio

Los datos ingresados por el usuario estarán almacenados en las variable «dato1» y «dato2». Para convertir estas variables tipo string a variables numéricas usamos la siguiente instrucción:

float num1 = float.Parse(dato1);

De esta forma estamos definiendo una variable tipo float llamada num1 que se inicializa con el valor de la entrada convertido a float. Esto tenemos que hacerlo para ambos datos de entrada.

Es importante aclarar que si el string dato1 no tiene formato numérico (por ejemplo contiene letras), no se podrá hacer la conversión y tendremos un error en tiempo de ejecución. En este tipo de ejercicios se asume que la entrada ingresada por el usuario estará en el formato correcto. Otro punto importante es el separador para la parte decimal, en algunos paises se utiliza la coma para separar decimales, pero con esta instrucción tenemos que usar punto.

Ahora que hemos convertido los strings a floats podemos calcular el perímetro con la siguiente instrucción:

float perimetro = 2*num1 + 2*num2;

Es decir multiplicamos cada lado por 2 y sumamos todo, con esto tenemos la suma de todos los lados del rectángulo, osea su perímetro. El siguiente caso es calcular el área del rectángulo, esto lo hacemos con la siguiente instrucción:

float area= num1 * num2;

Ahora que tenemos calculado ambos datos vamos a elaborar el mensaje de respuesta concatenando un texto con estos resultados, esto lo hacemos por ejemplo con la siguiente instrucción:

string resultado = «El perímetro del rectángulo es: «+perimetro.ToString()+» y su área es: «+area.ToString();

Finalmente escribimos este resultado en el texto del Canvas en pantalla con la siguiente instrucción:

componenteTexto.text=resultado;

Introducción

En este artículo vamos a ver cómo resolver el error «GUIText is obsolete» en Unity, un error que comenzó a ocurrir hace varias versiones debido a que la clase de programación GUIText fue reemplazada por otra y aún quedan muchos paquetes de Unity que siguen utilizando la versión anterior.

Importante

Es un error muy simple de solucionar pero es importante que entiendas por qué ocurre y qué hay que hacer, ya que el error puede presentarse en infinidad de casos distintos así que tendrás que identificar cómo hacerlo en tu caso particular.

En el siguiente vídeo puedes ver cómo resuelvo este error que me aparece al importar el paquete Standard Assets.

Pasos para resolver el error «GUIText is obsolete»

1. Abrir todos los Scripts que contienen este error. Ayudarse con la información del error en la consola de Unity (al hacer clic sobre el error tendremos algo de información extra), la consola nos dirá el nombre del Script y la línea del error. Si hacemos doble clic en el error, se abrirá el Script en cuestión y se resaltará la línea del error.

Fig. 1: Así se ve el error «GUIText is obsolete» en la consola de Unity, notar cómo la consola informa el nombre del Script y la línea del error.

2. Hay que reemplazar el uso de los campos «GUIText» por la clase «UnityEngine.UI.Text». Es decir, donde veamos que se utiliza «GUIText» (respetando mayúsculas), borrarlo y escribir en su lugar «UnityEngine.UI.Text».

Fig. 2: El componente GUIText está obsoleto pero en la línea 11 se está utilizando, el resultado es un error en consola.

Fig. 3: Se reemplaza «GUIText» por «UnityEngine.UI.Text».

3. Guardar el Script y verificar en consola que el error desaparezca.

Opcional: El prefijo «UnityEngine.UI» puede incluirse en la cabecera del Script, de esa forma podremos referirnos al componente directamente como «Text». Ver líneas 3 y 12 en la figura 4.

Fig. 4: Implementación del namespace «UnityEngine.UI» y reemplazo de «GUIText» por «Text».

Circled

Sinópsis

Un personaje flotando en el cosmos sujeto a un corazón y que está atrapado en un bucle infinito de anillos que se cierran sobre él.

Cómo jugar

Muévete haciendo clicks en pantalla para evadir los anillos tanto como puedas. La mecánica click and drag (clic y arrastrar) no está implementada.

Desarrollado para la Game Jam Ludum Dare 47 con el tema "Stuck in a Loop" por:

ÁLVARO

PIXEL ART

GAMEDEVTRAUM

UNITY DEVELOPER

CHEMA

GAME DESIGN

Sobre el desarrollo de este juego

El 2 de Octubre del 2020 se celebró la game jam Ludum Dare 47, un evento en el que hay que hacer un juego en 72 horas basado en una temática elegida por sorteo. El tema de la jam fue «Stuck in a loop» que significa atrapado en un bucle. Participamos en un equipo de tres personas.

La mayor parte del evento estuve transmitiendo en vivo lo que iba haciendo en mi ordenador y también las conversaciones que fuimos teniendo para ponernos de acuerdo. Transmití un total aproximado de 32 horas y en el siguiente vídeo puedes ver todas esas horas de trabajo resumidas en 5 minutos.

40 horas de transmisión en directo resumidas en minutos

Brainstorming previo

Unos días antes de que empiece la jam nos reunimos a proponer ideas en base a las temáticas candidatas, eran tres rondas de votación con 16 temáticas cada una, tomamos la primera ronda y elegimos 4 temas al azar. Luego cada uno se tomó 5 minutos para pensar una idea con una mecánica simple. Casualmente el tema «Stuck in a loop» estaba entre nuestros elegidos así que para la jam ya teníamos una idea previa.

Arte

La estética general del juego está basada en el estilo Synthwave, con colores saturados y fuentes acordes a ese estilo.

Los sprites están hechos en estilo Pixel Art usando el software Aseprite.

Detalles técnicos

Este juego es un proyecto 2D desarrollado con el motor Unity.

Estructura de escenas

Este juego está montado en dos escenas, la primera escena es la del menú principal que cuenta con algunos botones, uno para empezar el juego, otro para la ventana de créditos en la que se ve información de los desarrolladores, tenemos otro botón para cerrar el juego y un botón para iniciar la partida.

Mecánicas

El personaje se controla pulsando en el lugar de la pantalla a donde se quiere mover el jugador. El personaje comienza a acelerar en esa dirección hasta llegar a una velocidad máxima y luego comienza a detenerse, esto hace que por cada pulso el personaje se mueva una distancia predecible.

Durante todo el juego se generan anillos concéntricos cada uno con el doble de escala que el anterior, hay distintos tipos de anillos que tienen una o más aberturas de salidas. Mientras el anillo está activo irá reduciendo su tamaño hasta hacerse minúsculo. El personaje debe desplazarse para poder escapar por las aberturas ya que, si es tocado por un anillo, el personaje muere.

Este es el primer juego al que le implementé un sistema de traducción el cual tiene un registro de cada texto que aparece en pantalla y arrays que contienen las traducciones para cada una, al pulsar el botón de cambio de idioma pasamos al siguiente idioma del sistema y este se encarga de actualizar cada uno de los textos en pantalla.

El juego está montando en dos escenas, la primer escena es la escena inicial del menú principal en la que también se puede ver la pantalla de créditos. Al pulsar el botón «Play» cambiamos a la escena del juego. Ya que en la escena del juego tenemos textos en pantalla, fue necesario pensar en un sistema para transferir datos entre escenas y así poder asignar el texto en el idioma apropiado.

En las versiones de Android y Windows el sprite del sol que aparece al fondo en la escena del juego cambia de tamaño dependiendo de la amplitud de la música, esto se hace leyendo un trozo de los bytes del clip de audio y promediándolos para sacar un valor que luego se relacionará a la escala del sprite. No es posible hacer esto en WebGL debido a que una de las funciones que nos permite analizar el clip de audio no se puede usar en WebGL. Una alternativa podría ser precalcular estos valores para cada canción y tenerlos organizados estos datos en listas para ir aplicándoselos a la escala del sprite.

En este juego se hace un guardado de datos usando PlayerPrefs para recordar cuál fue la puntuación máxima y actualizarla en caso de superarla.