Sugerencia rápida incorporar una animación vectorial en 3D en un juego flash

En este tutorial, aprenderá cómo tomar un modelo 3D de Blender y usarlo en sus juegos Flash usando Swift3D.

Vista previa del resultado final

Echa un vistazo a la vista previa a continuación. Es como uno de esos juegos de conducción de automóviles que se ven en Internet: bueno, no, no exactamente. Este coche es 3D, o eso parece ser..

Visión general

Sorpresa. En realidad no hay 3D aquí. El coche es 2D vector art. El efecto tridimensional se logró mostrando diferentes fotogramas de una animación de giro del automóvil. En este Consejo rápido, veremos cómo tomar un modelo 3D, animarlo y exportarlo como arte vectorial para que pueda usarse en Flash. Para ello, utilizaremos una combinación de tres programas: Blender, Swift 3D y Flash..

Si no está familiarizado con Swift 3D, le sugiero que vea los tutoriales en video que se ofrecen en el sitio web oficial de Swift 3D, erain.com. Puedes acostumbrarte al programa en una tarde..


Paso 1: Exportando desde Blender

Comenzaremos con nuestro modelo en Blender. Se compone de varias partes, que en consecuencia he denominado Cuerpo, Ventanas, Neumáticos, etc ... y cada parte tiene un material asignado con un nombre correspondiente.

Para abrir el modelo en Swift 3D debe estar en formato .3ds. Para exportarlo como tal, selecciónelo (todas las partes), luego vaya Archivo> Exportar> 3D Studio y guárdalo en tu computadora.


Paso 2: Importando en Swift 3D

Abre Swift 3D. Para importar nuestro modelo recién exportado, vaya Archivo> Nuevo de 3DS. Encuentra el archivo y haz clic en Abrir.


Paso 3: Ajuste de materiales

Es posible que haya notado que los materiales no se ven exactamente igual en Swift 3D que en Blender. Ahora vamos a ver cómo podemos modificar estos materiales..

Digamos que queremos modificar el material del cuerpo del coche para hacerlo más brillante (y para que recoja los reflejos especulares). Primero, seleccione la malla del cuerpo en la ventana de jerarquía. En el Panel de propiedades, seleccione Material y haga doble clic en el icono de vista previa. Se abrirá una ventana con las propiedades del material Cuerpo. Para hacerlo más brillante, juegue con la Resaltar Resalte y el Tamaño del Resaltado (y presione Generar Vista Previa para ver los cambios). Cuando estés satisfecho con los resultados, haz clic en Aceptar.


Paso 4: Iluminación

Ahora necesitamos algo de iluminación para iluminar nuestra escena. En la ventana Galerías, en la pestaña Esquemas de iluminación, puede encontrar esquemas de iluminación prefabricados. Para esta demostración, usaré el esquema de iluminación "Predeterminado". Para aplicarlo, arrástrelo y suéltelo en la escena. Si lo desea, puede ajustarlo mediante el Esquema de iluminación Trackball.

Nota: El esquema de iluminación denominado "Predeterminado" en realidad no es el esquema de iluminación predeterminado!


Paso 5: Animación

Es hora de hacer girar nuestro auto. Al igual que con los esquemas de iluminación, puede encontrar animaciones prefabricadas en la pestaña Animaciones en la ventana Galerías. Usaremos la animación ER-Horiziontal Left. Una vez más, arrastre y suelte sobre el modelo.

Se creará una animación de hilatura sobre 20 cuadros. Si limpia la línea de tiempo, verá la animación en la ventana activa.


Paso 6: Cámara

Necesitamos una cámara a través de la cual podamos ver nuestro modelo. En la barra de herramientas principal, haga clic en el icono Crear cámara de destino. Coloque la cámara como se muestra en la imagen. Cambie una de las vistas a la vista de la cámara de destino y haga clic en ella para convertirla en la vista activa.


Paso 7: Exportar vista previa

Haga clic en el Editor de vista previa y exportación. Asegúrese de que el botón Vector esté seleccionado. Aquí, puedes jugar con la configuración de Relleno y Contorno. Estas son las configuraciones que usé.

Cuando hayas terminado, haz clic en Generar todos los cuadros. Reproduce la animación unas cuantas veces para asegurarte de que se vea como quieres. Debería verse similar a esto:


Paso 8: Extendiendo la animación

Para nuestros propósitos, 20 cuadros no son suficientes para una animación suave, por lo que necesitamos hacerlo más largo. Vuelve al editor de escenas. Selecciona el coche y haz clic en el botón Animar. Expandir la animación a 120 cuadros..


Paso 9: Exportación Final

Ingrese nuevamente al Editor de Vista previa y Exportación. Sin cambiar ninguna de las configuraciones anteriores, haga clic en Generar todos los marcos. Ve a ver una película o dos, y cuando vuelvas, la animación se reproducirá completamente. Para exportarlo, asegúrese de que el Tipo de archivo de destino en la pestaña General esté configurado en "Swift 3D Flash Importer", luego haga clic en "Exportar todos los marcos" y guarde el archivo .swft.

Su animación debe ser similar a esto:


Paso 10: Importando en Flash

Abre Flash. Para importar el archivo, vaya Archivo> Importar> Importar a biblioteca. Encuentra el archivo y ábrelo. Flash lo importará como un clip de película en la Biblioteca..

Nota: También puede seleccionar "Importar a escenario", que importará cada fotograma a la línea de tiempo principal. Si bien esto puede ser útil en algunos casos, generalmente es más conveniente que se importe como clip de película..


Paso 11: Sugerencias

Además de los pasos anteriores, aquí hay una breve lista de cosas que puede hacer para mejorar el resultado final:

  • Sombra proyectada: Para crear una sombra proyectada, cree un plano en el editor de escenas, amplíelo y colóquelo justo debajo del automóvil. Edite su material dándole una Resistencia de Resaltado de 0 (esto asegurará que no detectará los resaltados). Posteriormente, en Flash, elimine la capa Colores (estacionario). Te quedarás con una sombra proyectada.!
  • Windows: Para mejorar el material de las ventanas, puede hacerlo brillante (como en el paso 3) o reflexivo (si tiene algún tipo de fondo).
  • contorno: En Flash, puede crear un contorno grueso alrededor del automóvil. Esto le dará un aspecto caricaturesco y, lo que es más importante, hará que sea más fácil de ver cuando se reduce y se usa en un juego..
  • Además, es mucho más limpio que los contornos renderizados de Swift 3D.

Si sigues estas sugerencias, terminarás con algo similar a esto:


Conclusión

Hemos terminado Ahora que tiene la animación de giradiscos del automóvil, puede programarlo para crear un juego. Aquí hay un par de enlaces que pueden ayudarlo a hacerlo:

  • Construyendo un juego de conducción simple con ActionScript 3.0 por Stephan Cronin
  • Implementar un tanque en una misión en una zona de guerra isométrica por Konstantin Serov