Cree una aplicación 3D Flight Simulator para iOS y Android - Creación de entornos

En esta serie de tutoriales, crearemos una aplicación de simulador de vuelo utilizando ShiVa3D Suite. Para construir esta aplicación, cubriremos todos los temas necesarios para crear juegos 3D, aplicaciones educativas y aplicaciones 3D novedosas. Este tutorial, parte 2 de la serie, cubrirá la creación de entornos y terrenos..

En la parte 1 de esta serie, presentamos la aplicación Simulador de vuelo llamada Simulador y explicamos el proceso de desarrollo que seguimos al crear el Simulador. También describimos el contenido del archivo de descarga que acompaña a esta serie y las maniobras de vuelo básicas simuladas en la aplicación. En este tutorial, comenzamos a describir cómo desarrollar el juego utilizando el Editor ShiVa. Nuestro enfoque principal será crear los componentes visuales de la aplicación..


También disponible en esta serie:

  1. Crear una aplicación de simulador de vuelo 3D para iOS y Android: descripción teórica
  2. Cree una aplicación 3D Flight Simulator para iOS y Android - Creación de entornos
  3. Crear una aplicación 3D Flight Simulator para iOS y Android - Programación de simulador
  4. Crear una aplicación 3D Flight Simulator para iOS y Android - Exportación de proyectos

Módulos Editor ShiVa

Primero démosle una introducción rápida a los diversos módulos disponibles en el Editor ShiVa. Tomamos prestada la mayor parte de esta información de la documentación de ayuda del Editor ShiVa..

Explorador de datos es un administrador de recursos para proporcionar acceso a varios elementos del juego, incluido el juego, escenas, AIModels, materiales, etc. Su interfaz de usuario presenta esos recursos en una estructura de carpetas jerárquica.

Editor de juegos es el módulo principal del editor que permite al desarrollador editar el recurso del juego. Por ejemplo, con el editor del juego, un desarrollador puede definir las escenas y el modelo AIM asociado con el juego..

Visor de escena permite al desarrollador visualizar las escenas en el juego y los modelos en esas escenas.

Explorador de escenas Es un módulo separado independiente del visor de escena. El desarrollador utilizará principalmente el explorador de escenas para buscar y administrar recursos en una escena..

Editor de ambiente se utiliza para editar los atributos visuales de una escena como el color, la iluminación y varios efectos visuales.

Editor de AIModel Permite al desarrollador editar AIModels. Con el editor de AIModel, puede definir variables, funciones, estados y controladores para un AIModel.

Editor de guiones Se utiliza para editar scripts de un AIModel..


Descripción paso a paso

Los pasos para crear el simulador se pueden organizar de la siguiente manera:

  • Crea un proyecto, un juego y una escena..
  • Crear un terreno.
  • Crea el cielo sobre el terreno..
  • Añade una fuente de luz para arrojar luz sobre el terreno..
  • Crea el código y las variables necesarias..
  • Agregue los botones de control a la pantalla. Estamos haciendo esto después de crear el código porque los botones deben estar conectados cuando se escribe el código.
  • Agregue una fuente, que es necesaria para mostrar cualquier mensaje de texto al usuario.
  • Finalmente, realizar una prueba unitaria del simulador..

Paso 1: Crea el juego y la escena

Inicie el Editor ShiVa. Desde el menú de la barra superior, seleccione Principal -> Proyectos -> Agregar. Introduzca una ruta de carpeta para almacenar su juego. (Elegimos D: \ ShProj \ Projects \ Flight_Simulator). Esto se muestra a continuación.


Cierre el diálogo presionando Cerrar.

En Data Explorer, resalte la carpeta Juegos y luego haga clic con el botón derecho en el menú Crear -> Juego.


Nombra el simulador del juego. presiona OK.


En el Explorador de datos, resalte la carpeta Escenas y en el menú del botón derecho Crear -> Escena.


Nombra la escena Scene1. presiona OK.


Abra el Editor de juegos y en el Explorador de datos, en la carpeta Juegos, haga doble clic en el simulador. En el Editor de juegos, deberías ver varias propiedades del juego Simulador.


En el Editor de juegos selecciona la pestaña Escenas. En el Explorador de datos, en la carpeta Escenas, seleccione Escena1, arrástrelo y suéltelo en la pestaña Escenas del Editor de juegos. Debería ver algo como esto:


En la pestaña Escenas del editor de juegos, haga doble clic en Scene1. Verá un signo de verificación verde debajo de la columna denominada Cargado.



Paso 2: crear el terreno

El elemento visual más importante en el simulador es el terreno porque, aparte del cielo, el terreno es lo que el usuario verá durante toda la simulación. ShiVa Editor nos permite crear terrenos sofisticados. Para los propósitos de esta serie, crearemos un terreno relativamente simple. Para obtener más información sobre las capacidades del terreno del Editor ShiVa, consulte el Capítulo 16 de Shiva's Shiva Book y este artículo sobre Creación de terreno.

Abre el editor de terreno. En el Explorador de datos, en la carpeta Escenas, haga doble clic en Escena1. En el menú del editor de terreno, seleccione Crear.


En Terrain Editor, seleccione el menú Crear..

  • Comprobar crear trozos vacíos
  • Recuento de trozos seleccionados: 32x32
  • Seleccione tamaño de trozo: 32x32
  • Seleccione el tamaño de la unidad: 4

presiona OK.


Hemos definido un cuadrado cuyos bordes son los límites del terreno. En cada lado, hay 32 trozos donde el tamaño del trozo es 128 (4 x 32). Con esas definiciones, cada lado del terreno es 4,096 (4 x 32 x 32) unidades.

Ahora, agregaremos irregularidades, es decir, colinas y huecos, al terreno. En el editor de terreno, seleccione la sección Chunks. Haga clic en la esquina superior izquierda del terreno (se muestra a continuación):


Mantenga presionado el botón del mouse y arrastre el cursor hasta la esquina inferior derecha para seleccionar todos los trozos como se muestra a continuación.


Mientras se seleccionan todos los trozos en el terreno, vaya a la sección Geometría en el Editor de Terreno y haga clic en el rectángulo a la izquierda que tiene una flecha hacia abajo azul.


En el menú desplegable, seleccione Ruido..


Sustituye los siguientes valores:

  • Operador: Reemplazar
  • Cantidad: 0,53
  • Bordes suaves: 0.50
  • Frecuencia: 0.008
  • Persistencia: 0.411
  • Octavas: 6
  • Amplitud: 44

presiona OK.


  • El valor del operador "Reemplazar" indica al Editor de terreno que la capa actual debe reemplazar la anterior. Debido a que solo tendremos una capa, esta variable realmente no tiene implicaciones significativas.
  • La cantidad es un número entre 0 y 1, y podría considerarse una especie de valor de opacidad. Tiene importancia cuando esta capa se combina con una capa anterior. Nuevamente, como solo hay una capa, esta variable no tiene una implicación significativa.
  • La variable Bordes blandos influye en la mezcla de los trozos en el límite de la selección con los trozos adyacentes. Debido a que hemos seleccionado todos los fragmentos y solo hay una capa, esta variable no debería tener importancia.
  • Las otras variables Frecuencia, Persistencia, Octavas y Amplitud, determinan la altura y la profundidad de las colinas y los huecos, determinando, respectivamente, la frecuencia con la que se repiten y la nitidez y la punta de los picos..

En este punto, hemos creado las irregularidades del terreno. Ahora solo falta añadir un poco de color..

Ahora, ve a la sección de Materiales en el Editor de Terreno. Marque las casillas de verificación "Recibir iluminación dinámica" y "Recibir sombras dinámicas". Asegúrese de que la cantidad de AO sea 0.00 y la distancia de AO sea 10.


Aún así, en la sección de Materiales, selecciona Ambiente. En el cuadro de diálogo Seleccionar color, introduzca:

  • Rojo: 38
  • Verde: 74
  • Azul: 56

Haga clic en Aceptar".


En la sección de Materiales, haga clic en Difundir y luego, en el cuadro de diálogo Seleccionar color, ingrese:

  • Rojo: 15
  • Verde: 77
  • Azul: 18

presiona OK.

En la sección de materiales, haga clic en Especular y, en el cuadro de diálogo Seleccionar color, ingrese:

  • Rojo: 16
  • Verde: 29
  • Azul: 22

presiona OK.

Finalmente, en la sección de Materiales, haga clic en el botón Producción..


Cuando se le pregunta "¿Realmente renderizar selección?" presiona Sí.


Ahora que se ha creado la superficie del terreno, en la sección Chunks de Terrain Editor debería ver algo como lo siguiente (aunque la altura mínima y máxima pueden variar ligeramente).



Paso 3: Crea el cielo

A continuación, necesitamos crear el cielo sobre el terreno. Esto se hará usando la función Skybox del Editor ShiVa. El Skybox tiene seis lados: frontal, superior, izquierdo, derecho, posterior e inferior. El terreno se encuentra en la parte inferior, y los ejes X, Y y Z globales apuntan hacia la derecha, la parte superior y los lados posteriores del Skybox, respectivamente. Para cada lado (excepto la parte inferior, porque está cubierto por el terreno), proporcionaremos una imagen de 512 píxeles x 512 píxeles para construir nuestro Skybox. (Vea abajo).


Para una apariencia perfecta, esas imágenes deben ser de modo que los bordes adyacentes de cualquiera de las dos imágenes se ajusten de manera inseparable, por ejemplo. El borde derecho de la imagen izquierda y el borde izquierdo de la imagen frontal. Para lograr ese efecto, es más fácil si crea esas imágenes desde una imagen panorámica y aplica una edición adicional según sea necesario. Mientras se ejecuta en el simulador, puede observar una imperfección debido a que el borde izquierdo de la imagen posterior no se mezcla con el borde derecho de la imagen derecha. Sin embargo, lo que tenemos debería ser suficiente para los propósitos de esta serie..

En el menú del Explorador de datos, seleccione Importar -> Textura.


En el cuadro de diálogo Importar textura, haga clic en '? 'junto al Archivo para importar y seleccionar los siguientes cinco archivos del archivo de código que acompaña a este tutorial:

  • back-crop.jpg
  • front-crop.jpg
  • left-crop.jpg
  • right-crop.jpg
  • top-crop.jpg

El diálogo Importar una textura se verá así:


Pulse el botón Importar para finalizar la importación. Ahora, en el Explorador de datos, si selecciona la carpeta Texturas, verá los archivos importados (resaltados a continuación):


Abra el Editor de ambiente y en el Explorador de datos, haga doble clic en Escena1 en la carpeta Escenas (si se le pide que guarde Escena1, elija "Sí").


El editor de ambiente se verá así:


En el Editor de ambiente, visualice la sección Cielo. Bajo Skybox, haga clic en la flecha al lado de Frente (-Z) y seleccione front_crop.


Del mismo modo, seleccione right_crop para Derecho (-X), back_crop para Atrás (+ Z), left_crop para Izquierda (+ X) y top_crop para Top (+ Y). Debes tener lo siguiente.



Paso 4: Añadir la fuente de luz

Ahora, agregaremos una fuente de luz a Scene1. En el Editor ShiVa, hay una fuente de luz dinámica predeterminada llamada DefaultDynamicLightSet, que es un Modelo incorporado (Nota: de la documentación del Editor ShiVa, la iluminación dinámica se utiliza para mover luces / objetos, con iluminación en tiempo real mientras que la luz estática utilizado para iluminación estática y sombras, en objetos estáticos. Para nuestros propósitos, hemos seleccionado una fuente de luz dinámica).

Muestre el Visor de escenas y el Explorador de datos de lado a lado. En el Explorador de datos, debajo de la carpeta Escenas, haga doble clic en Escena1 (si se le pide que guarde Escena1, elija "Sí").

Debería ver algo similar a la imagen de abajo en el Visor de escenas


En el Explorador de datos, abra la carpeta Modelos, que se encuentra directamente debajo de la carpeta Flight_Simulator de nivel superior. Seleccione DefaultDynamicLightSet, luego arrástrelo y suéltelo en el Visor de escenas.

En Data Explorer, vaya a la carpeta Escenas y haga doble clic en Escena1. Cuando se le pregunte si desea guardar Scene1, elija Sí. Ahora, trae el Explorador de Escenas. Debajo de la pestaña Objetos, debería ver el DefaultDynamicSet, así como un DefaultCamera.


En el Explorador de escenas, en la pestaña Modelos debe ver lo siguiente.



Paso 5: Crea el AIModel

Ahora, vamos a crear el AIModel para el juego. Esto se utilizará para almacenar el código y las variables para el simulador. En el Explorador de datos, haga clic con el botón derecho en la carpeta AIModels en la carpeta Recursos. En el menú, seleccione Crear -> AIModel.


Nombra el AIModel MainAI. presiona OK.


Ahora, tenemos que asociar MainAI con el juego del simulador. Muestra el Editor de juegos y el Explorador de datos de lado a lado. En el Explorador de datos, en la carpeta Juegos, haga doble clic en el Simulador. El simulador ahora está cargado en el editor de juegos. Abre la pestaña principal en el editor de juegos. Verás que la sección AI principal del usuario está vacía..


En el Explorador de datos, en la carpeta Recursos -> AIModels, seleccione MainAI, arrástrelo y suéltelo en la sección AIs principales del usuario en el Editor de juegos. Deberías ver lo siguiente.



Comentarios finales para la parte 2 de esta serie

En la parte 2, comenzamos a describir cómo desarrollar el juego utilizando el Editor ShiVa. Nuestro enfoque principal fue crear los componentes visuales de la aplicación. En la parte 3, continuaremos agregando el código y la unidad de prueba del producto final.