Videotutorial 3 De Verge3d. Presentación Guión,Activos Desde
Total Page：16
File Type：pdf, Size：1020Kb
Videotutorial 3 de verge3d. Presentación guión Este articulo surge como una necesidad adicional a la improvisación con que pienso realizar el resto de los videotutoriales para que sean lo mas naturales posibles. Realizarlos sin siquiera leer el guión redactado previamente, eso si le doy una mirada previa y a continuación me pongo a grabar. El guión pues es lo que pego a continuación con algún ajuste para que no quede sin sentido, al no mostrar ni capturas y precisar echar un vistazo a como salio el video al final. Sin duda cubre algún punto que seguramente se me paso por alto por tales motivos descritos. Ya hemos visto con anterioridad a este tutorial, como se originan los .gltf files de forma manual, al exportar desde blender cualquier malla. Ahora veremos como se crean automáticamente con la creación de cada proyecto en el app manager desde cualquier navegador web http://localhost:8668 Tal acceso precisa de una previa carga en memoria de la aplicación blender para cargar los scripts python(servidor web en el puerto predeterminado 8668). Comenzamos la Introducción a la programación visual: una vez dado el paso anterior creando un primer proyecto ya podemos abrir y usar en el navegador las fichas de puzzle para adicionar otras cargas de modelos o escenas (*.gltf files ) desde otros blend files adaptados a verge3d(para el caso de personajes ya se explica proceso en tutorial nº2) a la escena predeterminada del proyecto que llamaremos cubo. La escena predeterminada del blender generada desde app manager, tendrá el nombre del proyecto y cualquier actualización de la misma en blender seguiremos realizando mismo proceso anterior de exportar Tras crear un primer proyecto en el app manager se generaran automáticamente otros ficheros adicionalmente al .gltf:»miproyectname.gltf» , entre ellos ahora solo os mencionare algunos, el blend file ejemplo «miproyectname.blend» que contendrá el cubo predeterminado como escena a actualizar, lo que podemos cambiar o modificar(ejemplo recomiendo dejar tal cubo con su propiedad blender, context- visibility en show renders, desactivado e ir adicionando con fichas puzzle, a su escena, otros modelos desde otros gltf files). Los archivos de imagenes o texturas que contenga cualquier material del proyecto ya comentamos que quedaran en mismo directorio raiz del proyecto, luego se recomienda por ello empezar planeando una organización en subdirectorios según se trate; de un personaje, escena para cada nivel, arma, objeto con el que interaccionar como un premio, etc, ubicando cada exportación a gltf desde el blender en un subdir del proyecto que le corresponda. assets/niveles/nivel1/ cada nivel tendrá un escenario ejemplo pisos por eso puede ser como en mi caso el siguiente path. assets/building/city assets/characters/heroe/ assets/pic_objects/premi1/ assets/vehicles/vehicle1 También le acompañara al .gltf exportado un .bin file que hace inviable modificar el tipo de text file .json que constituye el tipo .gltf Y lo dejas comprimido tal .gltf file , ejemplo como recomiendo en producción para reducir así su tamaño, se les añade en paralelo las copias comprimidas con la extensión * .xz correspondiente al .bin y al .gltf Y podrás prescindir de los originales y usar solo los xz, si esta activa la compresión en el puzzle del proyecto, exactamente en la sección init donde se pre configuran los parámetros de partida como son las fuentes de letra, compresión ,etc. Nosotros trabajaremos de partida con sólo dos secciones, la init y «la main» dónde se contendrá el corazón o código visual principal de la aplicación web. La aparición del resto de secciones sera opcional para organizarnos y reducir complejidad, dividendo el contenido. Puede decidirse sobre la marcha y pasarse con copy paste de conjuntos de puzzle de una sección a otra pero con mucha cautela pues el proceso requiere de un tutorial, me anticipo como ejemplo comentando que algunos casos deberás renombrar fichas puzzle duplicadas. También si haces cortar y pegar entre secciones, si estas fichas contienen anidamiento de otras, podrían perderse parte de tal contenido. Por eso estos videotutoriales proponen un modelo de organización que con tales secciones reduce sin duda la complejidad vista en otras alternativas a verge3d y te permite memorizar con solo un vistazo el contenido de las mismas. Para ver en el navegador cualquier actualización de los .gltf usados, se precisara seguir unas pautas sobre mantenimiento de la cache del navegador. Yo recomiendo principalmente la expuesta al articulo siguiente en lo referido al desarrollo sobre equipos escritorios donde desarrollemos contenidos 3d para la web. https://www.n-dimensiones.es/main/como-garantizar-el-acceso-a- cualquier-actualizacion-de-los-contenidos-en-vuestros- navegadores-o-actuales-accesos-en-vuestros- dispositivos/#more-416 Aunque cada cual puede usar las suyas propias. Podemos empezar a dar seriedad presentando ya el rellenado de variables principales entre las fichas puzzle a desplegar y controlar lo que sucede en cada sección o entre las mismas pero ahora podría resultar dar mucho engorro al tutorial pues puede hacerlo interminable ejemplos: stat_game a valor 0, solo cambia a 1 si ya hemos iniciado juego aunque este pausado stat_game_paused a 0, variara a 1 cada vez que una vez comenzado el juego se necesite pausar el tiempo. Ejemplo al mostrar el usuario opciones desplegando el game_menu, Para si alguién amplia el tema por su cuenta, le expongo un ejemplo de como lograrlo reutilizando algunos de los ejemplos three.js, engine webgl en que se basa verge3d y del que disponemos de ejemplos adaptados a verge3d(actualmente verge3d esta ya disponible la 2.14pre1 pero tales ejemplos sólo están aún actualizados hasta versión 2.12) https://github.com/Soft8Soft/verge3d-code-examples También puedes precisar en tal caso saber que el sistema de coordenas del blender deja al eje Z up en la vertical. Tenemos el siguiente articulo que nos dice como lo presenta three.js https://www.soft8soft.com/topic/three-js-coordinate-system/#po st-1395 tendra en su lugar del Z, el eje «Y», con su valor en negativo. Y ahora pasamos a lo que finalmente resulta ser el videotutorial, la carga de una escena donde el personaje aun no se mueva pero si aparezca en la posición central predeterminada y animado con su animación en blender predeterminada, podríamos añadir otros modelos como decorado en la deseada pero extendería demasiado el tiempo empleado a este tercer videotutorial. Y concluimos el tutorial. Activos desde Mixamo portal. Preparación previa malla y animaciones para portar a cualquier engine Con posterioridad a la emisión del segundo videotutorial sobre incorporar nuestro personaje en verge3d, descubrí un producto web en la nube, aparentemente gratuito en el portal Mixamo.com que no me inspira confianza de que siga siéndolo al pertenecer a Adobe desde el 2015 pero por el momento nos facilita la localización de cualquier personaje para nuestro videojuego, así como de sus animaciones. Este articulo se convierte en un requisito previo para seguir el videotutorial numero 2 actualización perteneciente a la serie creacion de videojuegos en verge3d pues en el mismo hemos casualmente partido de una malla desde este portal pero en general aquí describimos la preparación previa tras la localización de cualquier malla 3d antes de ser adaptada a cualquier engine webgl en este caso verge3d . Para seguirlo dispones de los originales como su adaptación en el siguiente enlace a materiales de los videotutoriales en el google drive del autor El proceso para cada animación consiste en ir a tal enlace y una vez te des de alta y dispongas de acceso gratuito, lo primero es seleccionar cualquier personaje, luego seleccionas cualquier animación, aparentemente todas son válidas para el actual personaje, sea cual sea y sólo entonces lo descargas como file .fbx. Tal animación sea del personaje que sea, las puedes ir añadiendo al personaje, creando un listado desde el mismo blender, para ello sólo has de ir importando cada fbx con la animación correspondiente, lo que añadirá esqueletos provisionales a la escena actual(según la descarga fbx que hayas descargado que permite hacerlo solo de la animacion (esqueleto) sin la malla), de los que podremos ir prescindiendo una vez portada la animación al esqueleto de nuestra malla si siendo su esqueleto el actual seleccionado, cliqueamos como muestra la siguiente captura, la nueva animación que ha de aparecer en el listado. Así una tras otra en la vista Dope_Sheet_ Action_Editor. En el juego sabremos sin duda aprovechar de muy diversas maneras este listado, una podría ser tales añadidos al Action_editor que nombra cada una con su correspondiente nombre en el campo action tal como se muestra en las siguientes capturas, y otra opción podría ser hacer una única animación con un rango de x frames combinando todas ellas, y manejar desde el juego, la walk si esta se encuentra ejemplo, entre el rango 0-32. Adjuntamos unas capturas que podríamos precisar comentar algo mas dependiendo vuestros comentarios y dudas. Se pretende con estos activos seguir aportando mas y mas referencias para que podamos hacer nuestro videojuego sin encontrar limites a nuestros deseos. Tema origen dónde precisamos de este apartado y alguno mas y que ya nos describe como llegan las animaciones al personaje antes de su descarga, lo que he creído fuese suficiente para retomar con estas capturas. La siguiente captura como el resto, parten de que hayamos importado al blender ya los fbx files descargados y precisan de la lectura del apartado origen anterior. Nos demuestra que los files .fbx de la descarga desde tal portal contienen ya las texturas con un paso que precisamos en blender 2.8, el que los materiales estén en cycles y dispongamos de nodes, así como el uv map del centro de la captura para que nos sea mas fácil cualquier cambio a la textura al localizar sus partes seleccionando en modo edición malla aquella parte que precisemos, algo que veremos en alguno de nuestros próximos videotutoriales.