En este codelab, aprenderás a crear una galería virtual inspirada en el Vivero Virtual utilizando Roblox Studio. A lo largo de este ejercicio, importarás elementos como imágenes 2D, objetos 3D, texturas y un skybox (imagen 360°). El resultado final será un escenario interactivo en el que los usuarios podrán explorar tu galería. Aunque trabajaremos con varios elementos, deberás seleccionar al menos uno de ellos para personalizar, pero puedes experimentar con todos si lo deseas.

Para realizar proyectos en la plataforma Roblox, utilizaremos Roblox Studio, una poderosa herramienta de edición que nos permite crear escenarios interactivos en 3D. En Roblox Studio, contamos con una ventana de diseño donde podremos visualizar y manipular objetos en tiempo real, ajustando su posición, escala y rotación de manera intuitiva. Además, podremos personalizar y construir entornos más complejos al integrar scripts mediante el lenguaje de programación Lua, lo que nos permitirá añadir interacciones, animaciones y mecánicas avanzadas. Una vez que hayamos finalizado nuestro proyecto, Roblox Studio facilita la publicación directa en la plataforma, lo que hace posible que cualquier persona en Roblox pueda acceder y explorar nuestro escenario.

Ahora veremos cómo podremos crear un proyecto en Roblox Studio.

  1. En primer lugar abriremos nuestra aplicación de Roblox Studio la cual deberíamos tener previamente instalada.

  1. Al abrir el programa veremos una ventana como la siguiente donde deberemos iniciar sesión con nuestra cuenta de Roblox la cual ya hemos creado previamente.

  1. Una vez hayamos iniciado sesión nos aparecerá una pantalla principal con múltiples opciones. Aquí, buscaremos en la parte izquierda la que tiene por nombre "Plantillas" y la seleccionaremos.

  1. Gracias a esto aparecerán múltiples plantillas que Roblox Studio nos pondrá a disposición para usar como punto de partida para nuestro proyecto. Escogeremos la que tendrá por nombre "Baseplate" (plano base), que será el lienzo donde construiremos nuestra galería.

Este tipo de plantillas incluye, por defecto, un elemento llamado "Spawn Location", el cual es un punto de aparición predeterminado para los usuarios que ingresen a nuestro entorno. El Spawn Location garantiza que todos los visitantes aparezcan en un lugar específico dentro del escenario al iniciar, lo que nos permite controlar la ubicación inicial y guiar a los usuarios hacia las áreas de interés de la galería

  1. Una vez cargada la plantilla, nos aparecerá una ventana como la siguiente. Desde esta ventana será donde podremos editar nuestro metaveros y agregar los diferentes assets (imágenes, modelos 3d, videos, etc) y funcionalidades que queramos.

  1. El siguiente paso será darle a nuestro proyecto un nombre personalizado y lo guardaremos en nuestro dispositivo. Para poder hacer esto nos dirigiremos a la opción de "Archivo".

  1. Luego seleccionaremos "Guardar en un archivo como".

  1. Se nos abrirá una ventana de explorador de archivos. Escogeremos una carpeta en la cual querremos que nuestro proyecto quede guardado, seguido de esto renombraremos nuestro proyecto, en este caso usaremos el nombre "Galería Vivero Virtual" y por último daremoen la parte superior con un nombre como "Galería Vivero Virtual". Por último daremos click en "Guardar".

La temática de nuestro metaverso será una galería inspirada en el Vivero Virtual. Para construir esta galería, primero estableceremos una estructura principal que servirá como base para organizar y presentar el contenido. Esta estructura inicial será un modelo 3D que funcionará como el marco de la galería, brindando el espacio adecuado para exhibir los diferentes elementos. A partir de esta base, podremos agregar otros modelos 3D que aporten detalles específicos, incorporar imágenes y texturas relevantes, y realizar modificaciones que personalizan el espacio de acuerdo a la temática.

  1. Para esto descargaremos el modelo base desde este link: https://drive.google.com/file/d/1bPhON-GubtMKRCHGa4JSnF_T7vfCKb6R/view?usp=sharing

Al ingresar al link se nos abrirá una página desde la cual podremos descargar nuestro modelo base. Para esto daremos click en el botón que dice Descargar:

  1. Una vez hayamos descargado nuestro modelo base procederemos a importarlo en nuestro proyecto. Para esto nos dirigiremos al apartado de archivo en la parte superior y seleccionaremos la opción "Importar 3D".

  1. Aquí se nos abrirá una ventana de explorador de archivos desde donde buscaremos el modelo que acabamos de descargar. Lo seleccionaremos y daremos click en "Abrir".

  1. Se abrirá una ventana con la vista previa del modelo que estamos a punto de importar. Es importante tener en cuenta que, en algunos casos, puede aparecer una advertencia si el modelo seleccionado tiene una cantidad excesiva de polígonos. En estos casos, el programa aplicará automáticamente una diezmación de los polígonos, reduciendo la complejidad del modelo al importarlo, para optimizar su rendimiento dentro del entorno de Roblox.

Para finalizar el proceso y confirmar la importación, haremos clic en el botón "Importar", lo que añadirá el modelo a nuestro proyecto, listo para ser posicionado y ajustado dentro de la galería.

  1. Listo, ahora tendremos nuestro modelo base importado.
  2. Como veremos el tamaño de nuestro modelo será bastante grande. Para reducir su tamaño y que este sea acorde a nuestro mundo cambiaremos la escala de nuestro modelo. Para esto nos dirigiremos a la subventana de Propiedades del Modelo. Allì buscaremos la casilla "scale" la cual tendrá un valor de 1 y la cambiaremos por un valor de 0.05.

Una vez que hayamos ajustado el tamaño de nuestro modelo, el siguiente paso será moverlo a la altura del suelo y colocarlo junto al punto "Spawn Location" para que el personaje se inicie justo al lado del modelo, facilitando su exploración al ingresar al entorno.

Para hacer esto, dirígete a la ventana de Propiedades del Modelo y busca la casilla llamada "Position". En esta sección, encontrarás los valores de posición en los ejes X, Y y Z. Cambia los valores actuales a 0, 0, 0, lo que colocará el modelo en la posición central de la escena (coordenadas 0 en X, 0 en Y y 0 en Z). Esto asegura que el modelo esté alineado con el suelo y posicionado adecuadamente para que sea visible y accesible desde el punto de aparición inicial.

  1. Listo, ya tendremos nuestro modelo en la posición que queremos. El siguiente paso a realizar es bloquear nuestro modelo para que no se vaya a mover a medida que alguien choque o colisione con el. Para poder hacer esto desde la sub ventana del explorador seleccionaremos el submodelo "Escena 03". Este se encontrara dentro de nuestro "modelo_base":

Al seleccionar el modelo, se abrirán nuevas opciones en la ventana de Propiedades. Una de las opciones importantes que veremos es la propiedad llamada "Anchored", que aparece como una casilla de verificación (checkbox). Es crucial activar esta casilla, ya que la propiedad "Anchored" fija el modelo en su lugar, evitando que se mueva o desplace debido a las colisiones con el personaje u otros elementos del entorno. De este modo, garantizamos que el modelo permanezca estable y en la ubicación deseada durante la interacción.

  1. Una vez que nuestro modelo esté fijado, el siguiente paso es revisar y ajustar su malla de colisión. Aunque el modelo incluye una malla de colisión por defecto, es recomendable modificarla para que se adapte de manera más precisa a la forma del modelo. Esto mejorará la precisión de las interacciones y las colisiones dentro del entorno.

Para ajustar la malla de colisión, dirígete nuevamente a la ventana de Propiedades y busca la sección llamada "Collision". En esta sección, verás una opción llamada "CollisionFidelity", la cual estará configurada en Default de forma predeterminada. Cambia este valor a PreciseConvexDecomposition, que permitirá que la malla de colisión se ajuste con mayor precisión a la forma del modelo, siguiendo sus contornos de manera detallada. Esta configuración asegura que las colisiones del modelo sean más realistas y exactas, lo cual es especialmente útil en entornos interactivos donde se requiere una precisión elevada en la detección de colisiones.

  1. Perfecto, nuestro modelo se encontrará fijado y con una malla de colisión correcta. Ahora deberemos hacer lo mismo para los otros dos submodelos: "Cuadros" y "Vivi". Por lo cual repetiremos los pasos 7 y 8 con estos.
  1. Ya podremos realizar una primera prueba de nuestro metaverso. para esto nos dirigiremos al botón en la parte superior con el nombre "Jugar".

Esto activará nuestro Simulador de juego, el cual inicializará nuestro avatar de Roblox en nuestra escena. Aquí podremos desplazarnos con las teclas W,X,Y,Z y podremos saltar con la barra espaciadora.
  1. Explorando nuestro modelo nos daremos cuenta que algunas zonas están muy oscuras. Para solucionar esto podremos importar una luz que venga por defecto en roblox. A continuación veremos cómo podemos hacer esto.

En la parte izquierda de nuestra pantalla encontraremos una Caja de Herramientas. Esta tendrá múltiples apartados, del cual seleccionaremos el primero con forma de bolsa, la cual será la tienda de modelos:

Allí nos dirigiremos al apartado de luz, donde encontraremos múltiples opciones de modelos de luces que podemos importar en nuestra escena.

Se nos abrirán múltiples opciones de luces. En este caso vamos a escoger Celling Light la cual es una lámpara que podremos acomodar en el techo del modelo. Para importarla simplemente daremos click sobre ella y el objeto 3D se creará en la escena.

  1. Ahora ya que tenemos nuestra lámpara en la escena deberemos ajustar su locación al techo de nuestro modelo. Para poder hacer esto tendremos que en primera medida seleccionar nuestra lámpara (Dar click sobre la lámpara en la escena). Después veremos como aparecen múltiples flechas alrededor de nuestra lámpara, estas indicarán el movimiento en x, y, z. En caso de que las flechas no salgan por defecto, deberemos seleccionar la opción Mover en la barra de herramientas.

Para moverla simplemente seleccionaremos la flecha de la dirección en la que queremos mover el modelo y lo arrastraremos con el mouse como se muestra a continuación:

Perfecto. Ya hemos aprendido cómo agregar modelos 3D a nuestro ambiente. Además, sabemos cómo ajustar tamaños y ajustar la locación de estos. Por otra parte, hemos podido agregar luces a nuestra escena para que se vea más iluminada.

En los siguientes pasos, vamos a agregar contenido multimedia personalizado a nuestro entorno. Para hacerlo de manera práctica y directa desde el editor de Roblox, es importante que nuestro proyecto esté conectado con Roblox, lo cual significa que debemos guardar nuestro juego en la plataforma. Esto permitirá que los recursos multimedia, como imágenes y texturas personalizadas, se carguen y almacenen en Roblox, facilitando su integración en el escenario.

  1. Para hacer esto simplemente debemos ir al apartado de "Archivo", allí veremos una opción que dice "Guardar en Roblox". Daremos click en esta

  1. Al hacer esto se nos abrirá una ventana de guardado. Aquí agregaremos el: Nombre y Descripción de nuestro proyecto. Además podremos seleccionar desde qué tipo de dispositivos se podrá acceder. Es muy importante que tengamos seleccionado las opciones de Computadora y RV.

Los otros valores presentes en esta ventana podemos dejar los que vienen por defecto.

Al finalizar de llenar estos datos podremos dar click en "Guardar"

Ya estará nuestra escena en Roblox. Es probable que se reinicie nuestro editor

Listo, ahora podremos seguir con los siguientes pasos de personalización.

El siguiente paso a aprender será como agregar una imágen a nuestra escena. Para esto seguiremos los siguientes pasos.

  1. Primero, insertamos una pieza en forma de bloque a nuestro proyecto. Para esto buscaremos en la barra de herramientas la opción Pieza y Bloque:

  1. Ahora ajustaremos su tamaño para que cubra la zona del modelo que dice Link a la web del vivero. Ya hemos aprendido una manera de ajustar el tamaño de un modelo, ahora lo haremos directamente desde la ventana de la escena. Para hacer esto seleccionaremos la opción escalar en la barra de herramientas y arrastraremos los puntos de las diferentes coordenadas buscando nuestro tamaño ideal.

Nota: Al igual que con el modelo anterior, es importante fijar esta pieza en su lugar para que no se desplace. Para ello, debemos activar la opción "Anchored" en la ventana de Propiedades de esta pieza. Esto garantizará que la pieza permanezca en su sitio, sin moverse accidentalmente debido a colisiones u otros factores en el entorno.

  1. Sobre este bloque alojaremos nuestra imágen. Podemos usar cualquier imagen que tengamos guardada en nuestro computador. Para este caso usaremos una imágen del Logo del Vivero Virtual.

Para poder cargar la imágen en roblox deberemos abrir el Gestor de Recursos.

Para abrir el Gestor de Recursos nos dirigiremos en la barra de Herramientas a la opción Vista, y daremos click en el siguiente símbolo .

  1. Al hacer eso se nos abrirá en la parte inferior izquierda de nuestras pantallas una ventana llamada Gestor de Recursos.

Aquí daremos click en el siguiente Botón el cual nos permitirá realizar una importación masiva.

  1. Al dar click en ese botón se nos abrirá la siguiente ventana de Gestor de Archivos. Aquì buscaremos y seleccionaremos la imágen que deseamos importar y seguido de esto daremos click en "Abrir"

Al hacer esto automáticamente cargará una ventana de importación que nos indicará cuando nuestra imágen ya haya sido cargada exitosamente. Una vez haya cargado podremos cerrarla.

  1. Perfecto, ahora que tenemos nuestra imagen cargada en Roblox, podemos agregarla a nuestro modelo. Para hacerlo, dirígete a la pieza que creaste anteriormente y selecciónala. A continuación, haz clic en el símbolo que aparece junto al nombre de la pieza () en el panel de Explorer; esto desplegará una lista de componentes que puedes agregar al objeto.

De esta lista, selecciona "Decal".

  1. Una vez que hayamos agregado el componente "Decal", podremos seleccionar la imagen que subimos previamente para aplicarla en la pieza. Para hacerlo, con el componente "Decal" aún seleccionado, dirígete a la sección "Appearance" (Aspecto) en la ventana de Propiedades y busca la opción llamada "Texture".

Haz clic en esta opción ( En el cuadro de la derecha) para desplegar las imágenes disponibles, y selecciona la que cargaste anteriormente. Esto aplicará la imagen como una textura en la superficie de la pieza, personalizando aún más el escenario.

  1. Listo, nuestra imágen ahora debería verse sobre nuestra pieza.

Nota: En algunos casos, puede que la imagen no sea visible de inmediato. Esto puede suceder si la imagen se está mostrando en una de las caras laterales o traseras de la pieza. Para corregir esto, dirígete al apartado "Face" en la ventana de Propiedades del componente "Decal" y selecciona diferentes opciones hasta que la imagen aparezca en la cara frontal de la pieza. Esto asegurará que la imagen sea visible desde el ángulo deseado en el escenario.

Lo último que aprenderemos será cómo agregar una imagen 360° como skybox en nuestro metaverso. Un skybox es una textura o imagen que se coloca alrededor de todo el entorno virtual para crear la ilusión de un horizonte.

Para agregar un Skybox en Roblox, primero debemos entender el formato de imagen que necesitamos. Una imagen 360° puede venir en múltiples formatos, pero Roblox utiliza un formato específico llamado CubeMap. En un CubeMap, la imagen 360° se divide en seis partes, cada una representando una cara de un cubo: superior, inferior, frontal, trasera, izquierda y derecha. Este formato permite que la imagen rodee el entorno en todas las direcciones, creando un efecto envolvente.

Dado que la mayoría de las imágenes 360° vienen en formatos panorámicos o equirectangulares, es necesario convertirlas en seis imágenes separadas para usarlas como CubeMap. Para simplificar este proceso, en este tutorial te proporcionaremos las imágenes ya divididas; solo necesitarás descargarlas y cargarlas en Roblox Studio para completar el skybox.

  1. Descarga las imágenes de nuestro Skybox en el siguiente link: https://drive.google.com/drive/folders/1WTmzip9f6U_2rzmtYXzLg1IaoRwkfVdD?usp=sharing

Aquí, descargamos TODAS las imágenes presentes en la carpeta. Recordemos que cada una representa una cara de nuestro CubeMap.

  1. Una vez tengamos nuestras imágenes descargadas procederemos a importarlas en nuestro proyecto. Recordemos lo aprendido en el anterior paso de este tutorial en los puntos 3,4 y 5.

Nota: En este caso la carga se demorará un poco más que cuando solo agregamos una imágen a nuestro proyecto. Debemos esperar a que todas las imágenes se hayan cargado en el proyecto. Esto lo sabremos porque todas tendrán este símbolo de confirmación al lado:

  1. Ahora que tenemos las imágenes de nuestro Skybox cargadas, el siguiente paso es agregarlas al entorno. Para hacerlo, abre el Explorador y localiza el componente llamado "Lighting". Expande este componente para ver sus elementos internos. Entre los múltiples componentes, encontrarás uno llamado "Sky". Selecciona este componente, ya que será donde asignaremos nuestras imágenes para crear el efecto envolvente del Skybox.

  1. En el panel Properties de Sky, verás varias opciones para cargar imágenes que formarán el skybox. Estas opciones incluyen:

Como habrás notado, cada una de las imágenes que descargaste está etiquetada con el nombre de la cara correspondiente. Ahora, lo que haremos es hacer clic en cada una de estas propiedades dentro del componente "Sky" y asignar la imagen correspondiente. Selecciona cada propiedad, carga la imagen adecuada y repite este proceso hasta completar todas las caras del Skybox.

  1. Listo, ya tendremos nuestro metaverso con un SkyBox personalizado

Perfecto! Si has llegado hasta aquí y has seguido todos los pasos de este tutorial ya habrás creado tu metaverso de Roblox. Felicitaciones! Más adelante te enseñaremos cómo puedes publicarlo para ingresar con tus amigos.

¡Felicidades! Has completado el codelab sobre Creación de un Metaverso en Roblox. Ahora habrás creado un mundo, agregado contenido multimedia como imágenes, importado modelos 3D y customizado tu propio Skybox a partir de una imágen 360.