Resumen del Sprint #07

Resumen del Sprint #07

¡Hola!, les escribo para comentarles las mejoras que se implementaron recientemente en Pilas Engine 2

Los links para usar la versión online o descargar la versión nueva están aquí. Recuerden que aún estamos en una fase muy temprana del desarrollo:

Antes de comenzar…

Antes de empezar a describirles los cambios, quisiera tomarme unos segundos para agradecer el movimiento que vi en el foro. Me pone muy contento ver y recibir sugerencias nuevas. ¡Sigan proponiendo ideas por favor!, intenté implementar en este sprint todas las ideas que pude y seguramente siga así !!!, a veces tardo en responder, pero leo todo. ¡Gracias!

Implementando redimensionables con 9-slices

Implementé una biblioteca llamada https://github.com/jdotrjs/phaser3-nineslice para que podamos tener fondos de texto que se puedan ajustar de tamaño sin deformar las imágenes.

La técnica consiste en subdividir la imagen original en 9 partes y cubrir el área completa para que los borde de imagen se vean siempre correctamente.

Por ejemplo, uno de los desafíos que puede resolver nine-slice es generar globos de historietas sin deformarse:

Esto funciona bien, no importa el tamaño del texto o la cantidad de saltos de lineas.

Además, pude integrarlo al actor texto para que incluso se puedan cambiar las imágenes de fondo y generar botones o cajas:

Si quieren probar esta funcionalidad, simplemente hagan un actor de tipo texto y seleccionen la propiedad “fondo”. Van a notar que se van a desplegar imágenes con la propiedad de poder cambiar de tamaño:

Arreglos generales de interfaz

Hice algunos cambios pequeños de interfaz pero que suman a que la herramienta sea mucho más cómoda de utilizar. Por ejemplo, ahora las habilidades se muestran en un componente personalizado para facilitar la lectura:

También se agregó un filtro en el selector de imágenes para ubicarlas más rápidamente:

y un selector de tamaño para el canvas:

Incluso hubo algo de tiempo para mejorar el indicador del modo pausa para mostrar la relación entre cuadros y minutos/segundos:

Optimizar carga y manejo de imágenes

Este cambio venía postergado de hace varios sprints, y me tenía un poco preocupado por lo difícil que era resolverlo.

Resulta que pilas 2, desde la versión inicial, tenía que cargar de forma individual cada una de las imágenes del editor y el motor. Cada vez que abrías el editor, la aplicación necesitaba solicitar, descargar y cargar en memoria cerca de 100 archivos de imágenes. Y naturalmente con el tiempo eso se empezó a poner lento…

Ahora implementé una forma diferente de acceder a los recursos del editor. Comenzamos a utilizar spritesheets (o atlas), para que pilas simplemente pueda acceder a todas las imágenes juntas.

Para tomarlo de un ejemplo, estos son los únicos dos archivos que cargará pilas para hacerse con todas las imágenes de actores e iconos que necesita para funcionar:

Para simbolizarlo en números, anteriormente pilas hacía cerca de 105 requests asincrónicos mientras que ahora solo hace 22. Se nota bastante lo rápido que carga ahora:

Internamente, los spritesheets o atlas, son archivos de imágenes normales pero que vienen acompañados de un archivo .json que define porciones (o recortes) para que sean tratadas individualmente.

Aquí hay una buena explicación de lo que significa:

Cabe mencionar que esto no solo sirve para que pilas cargue más rápido y consuma menos recursos. También es útil para agilizar el dibujado, principalmente en celulares y tables.

Por cierto, para un próximo sprint me gustaría hacer una optimización similar con los sonidos, usando una técnica llamada audio sprites, para cargar un solo sonido en lugar de varios individuales. Hay un ejemplo aquí para simbolizar esta optimización (https://pixijs.io/pixi-sound/examples/sprites.html) aunque no hace falta hacerlo con esa biblioteca, ya que esta técnica viene soportada por phaser3 (nuestra biblioteca base).

Más ejemplos y actores

Agregué 4 ejemplos nuevos, uno mostrando cómo cambiar el cursor del mouse, otro mostrando cómo generar números aleatorios y los otros dos mostrando cómo obtener ángulos entre puntos y actores:

También agregué un actor llamado botón, que se puede pulsar y emite un mensaje:

Obviamente no parece muy prometedor, pero como todos los actores de pilas está diseñado para agregar en la escena y modificar. Así que es fácil agregarle funcionalidad nueva o modificar la existente.

Para el próximo sprint

Uno de los objetivos más grande para el próximo sprint y realizar pruebas sobre celulares y tablets para empezar a experimentar con la publicación de juegos. Hice varias pruebas y experimentos aislados, creo que es momento de implementarlo en el editor. @Gus seguramente te pida una mano con esto…

Otro objetivo que tengo en mente es implementar un actor “pizarra” para que los usuarios puedan dibujar círculos, cuadrados, lineas o polígonos libremente. Esta idea la sugirió @Pan hace unos días, así que seguramente vaya comentando los progresos mientras los esté realizando aquí.

También quiero dedicar tiempo a mejorar los ejemplos, porque creo que hay varias cosas nuevas que documenté muy por arriba y que no se lucen sin ejemplos. Por ejemplo, cambios de escenas, colisiones y temporizadores. No se si llegue a implementar un minijuego de peleas como el que mencionó @hokuto, pero haré el intento.

2 me gusta

Voy probando.

Se me a ocurrido que se podria añadir el poder generar texto como si escribiera en maquina de escribir,es decir,que se vaya mostrando el texto poco a poco como en los juegos de rol.Esto serviria para hacer juegos de texto,algo como visual novel.

Te comento otra cosa,no se si conoceras gdevelop 5,es un engine parecido a construct 2 pero es open-source y esta programado con javascripts y pixijs.Tal vez te interece ojear su codigo y a lo mejor encuentras cosa interesantes que puedes trasladar a pilas2,sobre todo lo mas interesante son los comportamientos.Te paso la pagina:

Hola de nuevo.

Voy a subir un video del nintendo direct del 15 de mayo sobre super mario maker 2,este programa es un editor para hacer juegos de plataformas como el mario bros y he visto muchas cosas muy interesantes en este video.

Creo que hay muchas ideas muy buenas que se podrian utilizar para adaptarlas a pilas engine 2,el video dura unos 17 minutos pero merece la pena verlo entero por todas las ideas tan buenas que propone.

1 me gusta

Que bueno esto nos da esperanza para seguir investigando sobre el motor…Esperamos las mejoras…una cosa que podrías implementar, me imagino que es re dificil, es un sistema de monetización a los juegos,tanto en web como en android…Ni me imagino como se hace eso,pero si un game engine tiene una forma simple de monetizar los juegos seguramente atraería a miles de desarrolladores…En el caso de tener que depender de otras plataformas una buena documentación en español también atraería a muchas gente.

Estoy haciendo un PONG con pilas2 para ver como funciona,pero en la versión 2.0.77 ya no encuentro la opción de cargar el proyecto.

Saludos

¡Super interesantes los avances @hugoruscitti!

¡Tenemos una versión llena de novedades!

Coincido en que hay una cantidad de ideas muy potentes en los diversos motores de juegos pero pienso, al mismo tiempo, que el roadmap de Pilas debe estar asegurar que no pierda su identidad. Y si se trata de incorporar opciones, que sean aquellas que permiten facilitar el ingreso de nuevos programadores y programadoras :slight_smile: Es decir, aquellas que faciliten el aprendizaje.

Pienso en Pilas como un entorno que habilita espacios donde aprendemos a programar y aprendemos a compartir nuestras producciones. Por lo segundo se me ocurre que el sistema de generación de “ejecutables” se vuelve un aspecto crucial. No pienso en sistemas de monetización porque no me imagino a Pilas como un motor destinado a desarrollos comerciales. Veo necesaria, en cambio, una forma fácil de compartir las producciones a destinatarios que no tienen el entorno de desarrollo.
Ahora bien, cuando se trata de compartir con programadores (está en lenguaje inclusivo) lo anterior ya no hace falta porque compartimos directamente el código :wink:
Obviamente son una ideas, como todas, discutibles y si Pilas avanza en otras direcciones también estaría perfecto, entiedo que nada impediría múltiples y variados usos.

Me gustó la nueva función azar y creo que sería piola agregar la posibilidad de definir una semilla. Asi se podrían abordar dos cuestiones: 1) explicar y entender mejor que la fuente de azar es una secuencia pseudoaleatoria y 2) disponer de escenarios de prueba “determinísticos”. Esto, creo, requiere implementar algún generador porque en JS, hasta donde entiendo, no se puede definir una semilla.

Estoy, como dije, dispuesto a dar una mano en todo lo que pueda.

¡Saludos!
Gus

Gracias por comaprtirlo @hokuto

Es una mina de ideas. Me quedo pensando en las funciones para juegos multijugador…

Saludos,
Gus

De nada gus.:wink:

Yo tambien comparto en que pilas 2 sea una herramienta para el aprendizaje.

Hay dos cosas importantes que se deben estudiar con detenimiento.

Una seria introducir un lenguaje visual para las personas que empiezan en el aprendizaje,a mi personalmente me ha ido muy bien los lenguajes visuales y gracias a ellos he aprendido muchas cosas que de otra manera no lo hubiera conseguido.

Lo que se nota al usar un lenguaje visual es que el cerebro lo asimila mejor y mas rapido,es como si fuera mas natural y aprendes mas rapido.

Otra cosa que creo que es fundamental es la propia experiencia y interacion del estudiante con la herramienta sin nadie que le ayude y explique nada.De los videojuegos se puede sacar mucha informacion porque el principio de los videojuegos son como tutoriales donde cada persona aprende solo a jugar y sin ayuda de nadie.

Yo tengo el primer super mario maker y no hay ningun tutorial,aprendes tu solito interactuando con el programa y probando continuamente.La mejor forma de aprender es jugando con la herramienta pero debe estar diseñada de tal forma que te invite a ello,pero para eso tiene que ser divertida, por eso hay que estudiar este tipo de herramientas que son como videojuegos.

Se que super mario maker es comercial pero hay otros gratuitos que se pueden estudiar como este que voy a poner.
https://megamanmaker.com/

Es muy divertido y se aprende sobre todo a diseñar niveles de calidad.