Resumen del sprint 19

¡Buenas!, hoy estoy publicando una actualización de Pilas con un montón de mejoras, ¡y desde casa!.

hqdefault

Aquí van las novedades !!!

Links útiles

Recuerden que pueden descargar Pilas desde la web, usar la versión online o acceder al código en github:

Implementando animaciones de propiedades

Incorporé la posibilidad de realizar animaciones, movimientos y cambios de propiedades fácilmente.

image

Mediante esta mejora, se le puede pedir a los actores que realicen movimientos, rotaciones, efectos de transparencia etc… directamente desde el editor con ayuda del auto completado de código:

animaciones

Además, las animaciones se pueden encadenar, una detrás de otra, para producir efectos de manera muy precisa:

this.animar(Tipo.suave, 1)
  .rotar(180)
  .mover_x(200)
  .rotar(180)
  .mover_hasta(0, 0);

animacion-de-nave.png

Este tipo de animaciones también se pueden utilizar para realizar efectos en actores estáticos, para darles algo de “vida” dentro del juego:

escala-elastica

También van a encontrar algunas ejemplos nuevos, como este que muestra los tipos de animaciones:

PilasEngine_2020-06-13_20-26-52

Creo que esta es una mejora muy importante, y se me ocurren muchas cosas para charlar al respecto, pero para no extender demasiado el anuncio de esta nueva versión les paso el link a la documentación, ahí van a encontrar más detalles:

Mejorando el sistema de autómatas

Los autómatas permiten que podamos hacer que nuestros personajes puedan realizar varias acciones (“caminar”, “golpear” etc… ) como se ve en este mini-juego que incorporé a la sección de ejemplos:

ejemplo

El tema es que no teníamos muy bien documentada toda esa parte de pilas. Así que dediqué algunas horas a mejorar ejemplos y documentar de qué se tratan los autómatas y cómo se pueden utilizar dentro de pilas:

Además, añadí una receta para que sea más sencillo crear actores nuevos dentro de un autómata:

PilasEngine___2020-06-25_02-27-06

PilasEngine___2020-06-25_02-27-41

Les dejo el link con la documentación que pude armar:

Cualquier error o cosa que se les ocurra añadir para mejorar la documentación avisen por favor!

Cambiando la pantalla de errores

Mejoré la forma en la que se muestran los errores dentro del editor. Ahora los mensajes se muestran en español y de manera resumida:

Esta nueva pantalla de error también nos permite ver más detalles, simplemente hay que hacer click sobre el texto abreviado y aparecerá el listado completo de llamadas que produjeron el error.

También limpié aquellos detalles del error que no aportaban mucha información, como las rutas a los archivos internos de pilas y phaser.

Mejoras en el editor de código

El editor de código que usamos en pilas está basado en un biblioteca llamada Monaco, que sirve para crear editores de código bastante sofisticados, con auto completado, coloreado de sintaxis y varias cosas mas.

Pero hasta ahora no había podido indagar demasiado en los aspectos internos del editor, y me preocupaba no poder añadir algunas mejoras que tenía en mente, así que me puse a investigar y ver cómo podía mejorar la integración de Monaco dentro de pilas.

Por suerte mientras investigaba logré aprender y comenzar a implementar varias de las mejoras que quería incorporar.

Por ejemplo, ahora podemos incorporar acceso a los actores simplemente arrastrando y soltando los actores sobre el editor código:

Otra mejora es la incorporación de fragmentos de código (o snippets), para agilizar las tareas comunes.

El fragmento de código es una palabra, como “observar” que cuando la escribimos se “expande” y nos permite personalizar una sentencia de código más completa:

image

Creo que el ejemplo más ilustrativo de esta mejora se puede ver en el fragmento “control”: si queremos acceder al control de teclado podemos escribir “control”, luego pulsar enter, y por último tab para ir recorriendo el código:

receta

También pude incorporar algunas mejoras menores, como el hecho de que Monaco no consideraba a las tildes como letras válidas a la hora de colorear el código:

Además, aproveché para reacondicionar la forma en la que el editor puede interactuar con el resto del entorno de pilas. Ahora el código está mucho más organizado, y cómo aprendí un montón mientras limpiaba y ordenaba todo me imagino que voy a poder incorporar más mejoras en el futuro.

Si se les ocurren mejoras por favor avisen, voy a volver sobre esto más adelante.

Ah, también documenté como usar todas estas características en el manual, les dejo el link para que puedan darle una mirada:

Arreglos adicionales

Comencé documentando los pasos para utilizar pilas como una biblioteca externa directamente desde un archivo .html:

Esto era algo que nos había consultado @Ignacio en este otro post Usar Pilas como biblioteca externa - consulta - pilas-engine, así que seguramente seguiremos el tema por ahí.

Luego hice que el menú de recetas permita localizar rápidamente las posibilidades con un campo de filtros:

PilasEngine___2020-06-07_19-24-25

También realicé una mejora en el panel de escenas, ahora podemos asignar colores a cada uno de los actores para resaltarlos dentro del listado:

image

y también tenemos la posibilidad de crear carpetas:

image

Ideas para el próximo sprint

Estoy por armar un video tutorial mostrando cómo se puede implementar un personaje de videojuegos tipo “street fighter” usando autómatas:

Aún estoy armando el ejemplo que va a servir como guía de lo que me gustaría mostrar. Así que no se bien cuando podré publicarlo, pero si todo sale bien será en breve.

Otra de las cosas que me gustaría explorar es una forma de mejorar la navegación de la sección ejemplos, porque ya tenemos varios y estaría buenísimo que se los pueda ir recorriendo uno a uno.

Y como siempre, hay varias otras ideas en el radar:

  • @kone había sugerido implementar raycasts dentro de pilas, y me quedé pensando en cómo implementarlo dentro del motor. Voy a ver si avanzo con esto, btw, ¿podríamos llamarlo lasers en pilas no?.
  • Revisar las documentación de colisiones, incorporar capturas de pantalla nuevas y añadir uso de sensores.
  • Sumar más tutoriales.
  • Mejorar el selector de imágenes dentro del dialogo de animaciones, así nos permite seleccionar múltiples cuadros de animación de una sola vez.

Veré poco a poco cuales de estas ideas puedo ir incorporando al motor, pero recuerden que siempre podemos añadir algo mas, y cualquier bug que vean lo vamos a corregir.

Estaré atento a sus comentarios, cualquier cosa me escriben!

¡Saludos!

4 Me gusta

Grandes avances! Muy buen trabajo!