Manual de Pilas Engine 2

ii
Contents

Primeros pasos 1
¡Pongamos el juego en funcionamiento! . . . . . . . . . . . . . . . . . . 2
Diseñando nuestro primer juego . . . . . . . . . . . . . . . . . . . . . . 3
Ambientando la escena en el espacio . . . . . . . . . . . . . . . . . . . 8
Creando más actores . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Agregando colisiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Reaccionando a las colisiones . . . . . . . . . . . . . . . . . . . . . . . 18
Es solo el principio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

El intérprete 27
Accediendo a las variables pilas y actores . . . . . . . . . . . . . . . . 30
Algunos consejos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Autómatas y estados 37

Animaciones 39
Crear animaciones desde el editor . . . . . . . . . . . . . . . . . . . . . 41
Cómo usar las animaciones . . . . . . . . . . . . . . . . . . . . . . . . 44
Crear animaciones desde el código . . . . . . . . . . . . . . . . . . . . 44
Detectar la finalización de las animaciones . . . . . . . . . . . . . . . . 46

Cámara 47
Mover la cámara desde el editor . . . . . . . . . . . . . . . . . . . . . . 47
Mover la cámara mientras se ejecuta el juego . . . . . . . . . . . . . . 48
Usando la función hacer_recorrido . . . . . . . . . . . . . . . . . . . . 49

Etiquetas 53
Etiquetas para distinguir colisiones . . . . . . . . . . . . . . . . . . . . 55

Habilidades 57
Desde el editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Desde el código . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Olvidar o eliminar habilidades . . . . . . . . . . . . . . . . . . . . . . . 58

iii
iv CONTENTS

Comportamientos 59
Realizando comportamientos . . . . . . . . . . . . . . . . . . . . . . . 59
Comportamientos incluidos en pilas . . . . . . . . . . . . . . . . . . . 60
Comportamientos personalizados . . . . . . . . . . . . . . . . . . . . . 60

Azar o cálculos aleatorios 63

Observables 65
Funciones manejar el tiempo . . . . . . . . . . . . . . . . . . . . . . . 67
Cancelar repeticiones o eliminar temporizadores . . . . . . . . . . . . . 68
Métodos especiales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69

Ángulos y distancias 71
Ángulo entre actores o puntos . . . . . . . . . . . . . . . . . . . . . . . 71
Distancia entre puntos y actores . . . . . . . . . . . . . . . . . . . . . 72

Colisiones 75
Tipos de colisiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
Colisiones entre figuras estáticas (no dinámicas) . . . . . . . . . . . . . 77

Mensajes entre actores y escenas 79

Enviar mensajes globalmente . . . . . . . . . . . . . . . . . . . . . . . 79
Mensajes dirigidos a actores particulares . . . . . . . . . . . . . . . . . 80
Mensajes con parámetros . . . . . . . . . . . . . . . . . . . . . . . . . 80

Escenas 83
Cambiar o reiniciar escenas . . . . . . . . . . . . . . . . . . . . . . . . 83
Gravedad y simulación física . . . . . . . . . . . . . . . . . . . . . . . 84

Código de proyecto 85
Un ejemplo breve . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85

Eventos del mouse 93

Antes de empezar, el caso más común . . . . . . . . . . . . . . . . . . 93
¿Cómo capturar un evento del mouse? . . . . . . . . . . . . . . . . . . 94
¿Cómo capturar eventos del mouse en un actor? . . . . . . . . . . . . 94
Capturar eventos de forma global, con manejadores . . . . . . . . . . . 96

Uso del teclado 97

Primer forma: ¿Cómo mover un personaje con el teclado? . . . . . . . 97
Segunda forma: ¿Cómo reaccionar a eventos del teclado? . . . . . . . 99

Dibujado simple en pantalla 101

Dibujar círculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101
Colores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102
Rectángulos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103
Lineas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
CONTENTS v

Animaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104

Cómo exportar juegos 107

¿Qué contiene el archivo exportado? . . . . . . . . . . . . . . . . 108
Cómo ejecutar mi juego sin el editor . . . . . . . . . . . . . . . . 109
Probar la aplicación en un servidor local . . . . . . . . . . . . . . 110
Ejecutar tu juego en electron de forma offline . . . . . . . . . . . 111
Cómo crear versiones empaquetas para distribuir (.exe, dmg etc) 112
Cómo ejecutar el juego en pantalla completa . . . . . . . . . . . . 114
Cómo llevar mi juego a celulares, tablets y tiendas oficiales de
apple o google . . . . . . . . . . . . . . . . . . . . . . . . 114

Colaborar con Pilas Engine 117

Participar en el foro de Pilas Engine . . . . . . . . . . . . . . . . . . . 118
Ayudar a difundir Pilas . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Creá juegos, cursos o tutoriales . . . . . . . . . . . . . . . . . . . . . . 118

Entorno para colaboradores de Pilas 121

¿Qué software se utiliza internamente en Pilas? . . . . . . . . . . . . . 121
Estructura de directorios . . . . . . . . . . . . . . . . . . . . . . . 122
Repositorio y modelo de trabajo . . . . . . . . . . . . . . . . . . . . . 122
Estilo de programación . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Tests . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Automatización e integración contínua . . . . . . . . . . . . . . . . . . 127
vi CONTENTS
Primeros pasos

En esta sección me gustaría describir los pasos iniciales para comenzar a hacer
juegos.
Pilas ha sido diseñada especialmente para que todas las personas puedan aprender
a programar realizando videojuegos, de forma sencilla y totalmente en español.
Esta es la pantalla inicial que aparecerá cuando abras pilas por primera vez:

Figure 1: portada

1
2 PRIMEROS PASOS

Desde aquí se pueden acceder a todas las secciones de pilas, te recomendamos

inspeccionarlas al menos una vez para familiarizarte con el entorno.
Ahora bien, la parte más interesante de la herramienta se puede acceder pulsando
el botón que dice “Abrir el editor”
Desde esta sección, vas a ver una escena principal y varios paneles:

Figure 2: editor-1

Al principio puede parecer un poco abrumador. . . pero vamos a ir paso a paso.

Hay dos partes importantes en esta pantalla:
• A la izquierda está el panel de actores y propiedades. Donde vamos a ver
listados todos los actores que aparecen en la pantalla. Los actores en este
caso son: una plataforma, una pelota, una caja, un techo y suelo.
• Luego a la derecha de la pantalla tenemos el area del editor:
Hay otras cosas importantes en la interface, pero vamos a prestarle mayor
atención a estas dos partes.
Sigamos:

¡Pongamos el juego en funcionamiento!

El botón que aparece arriba del area de juego es muy importante, porque nos
permite poner en funcionamiento el juego y hacer una prueba real.
DISEÑANDO NUESTRO PRIMER JUEGO 3

Figure 3: editor-partes

Así que hagamos el intento, pulsa el botón ejecutar una vez:

Deberías ver cómo dos de los actores comienzan a rebotar en la plataforma:
Cuando pulsas el botón “ejecutar” además de ponerse en funcionamiento el
juego sucede algo más: el editor por completo ingresará en un modo llamado
“ejecución”, así que no vamos a poder editar el código o cambiar la escena. Todo
lo que suceda en ese momento es parte de la experiencia de usuario de nuestros
juegos. Una vez que exportemos el juego, nuestros usuarios solo van a ver el
juego, no el editor.
Esto es importante porque nos lleva a pensar en el diseño del juego y hacernos
preguntas interesantes: ¿Qué queremos que el usuario haga dentro de nuestro
juego?, ¿qué elementos le vamos a mostrar?, ¿cuándo gana y cuando pierde?.
Pero claro, por el momento solo podemos hacernos las preguntas, porque lo
que tenemos en el editor es muy poquito, el usuario no puede hacer nada muy
interesante aún. . . solo ver cómo rebotan esos dos objetos en la plataforma :|

Diseñando nuestro primer juego

Para nuestro primer juego vamos a pensar en algo más interesante, queremos
que el fondo del juego sea un cielo lleno de estrellas, que el usuario pueda mover
una nave con el teclado y que luego de unos segundos comiencen a aparecer
algunos enemigos.
4 PRIMEROS PASOS

Figure 4: boton-ejecutar

Pulsá el botón que dice “detener” en el editor (o pulsá la tecla Esc), tendrías
que volver a ver el resto de los elementos del editor nuevamente habilitados.

Borremos
cada uno de los actores que aparecen en la pantalla, selecciona al actor pelota y
luego pulsa el botón del cesto de basura tal y como muestra esta imagen:
DISEÑANDO NUESTRO PRIMER JUEGO 5

Figure 5: primer-ejecucion

Figure 6: borrar
6 PRIMEROS PASOS

Repetí esos pasos hasta que la escena quede limpia, sin ningún actor:

Figure 7: image-20200601230444058

Ahora bien, con la escena completamente limpia, agreguemos un actor para

representar a nuestro protagonista:

Pulsa el botón “Crear actor” y luego selecciona la nave:

Figure 8: crear-actor-1

Una vez que selecciones el actor vas a verlo formar parte de la escena así:

Ahora pulsemos de nuevo el botón “ejecutar” y pulsa las flechitas del teclado
para mover la nave por el escenario (¡y con la barra espaciadora vas a poder
disparar!):
DISEÑANDO NUESTRO PRIMER JUEGO 7

Figure 9: crear-actor-2
8 PRIMEROS PASOS

Figure 10: creacion-de-la-nave

Ambientando la escena en el espacio

Al principio te mencioné que queríamos hacer que la nave pareciera estar en
el espacio, sin embargo aún tenemos ese fondo azul que no se parece mucho al
espacio. . .
Así que hagamos un cambio, selecciona la escena del panel izquierdo, vas a ver
que la parte inferior del panel va a cambiar:
Esa sección que marcamos con el número “2” en la imagen contiene todas las
propiedades de la escena. Si moves la barra de desplazamiento hacia abajo vas a
ver una propiedad llamada fondo:
Hace click sobre esa propiedad, donde está el ícono y vas a ver que pilas te
propone varias imágenes para sustituir el fondo:
Selecciona la del espacio:
Vas a notar que el fondo de la pantalla va a cambiar por completo:

Creando más actores

Ahora vamos a darle un poco mas de vida al juego: Nuestra nave está en el
espacio pero no parece haber un motivo por el cual está ahí, pensemos una
CREANDO MÁS ACTORES 9

Figure 11: nave

10 PRIMEROS PASOS

Figure 12: panel-de-escena

CREANDO MÁS ACTORES 11

Figure 13: propiedad-fondo

12 PRIMEROS PASOS

Figure 14: cambiar-fondo-1

Figure 15: fondo-espacio

CREANDO MÁS ACTORES 13

Figure 16: fondo-espacial-en-la-escena

historia:

“A causa de un experimento que se salió de control en la tierra, algunos objetos

llegaron al espacio: bananas, manzanas y otras frutas comenzaron a ensuciar el
espacio flotando por ahí. Nuestra misión es comandar una nave que tiene como
objetivo”limpiar" el desorden de la basura espacial lo antes posible !!!"

Bueno, no es una gran idea. . . pero es algo, algo que podemos construir, jugar y
divertidos. ¡así que vamos a intentarlo!

Pulsá el botón “Crear actor” nuevamente:

Pero a diferencia de antes, que elegimos la nave, ahora elegí el actor que no tiene
una imagen asignada:

Luego, podes mover este actor usando el mouse, así no tapa a la nave:

Ahora cambiemos la apariencia del actor. Este paso es muy similar al que hicimos
antes, tendrías que seleccionar al actor, ir al panel de propiedades pero ahora
pulsar la propiedad “imagen”:

y luego, selecciona alguna de las opciones. Por ejemplo una manzana:

y te debería quedar así:

14 PRIMEROS PASOS

Figure 17: crear-actor

Figure 18: actor-sin-imagen

CREANDO MÁS ACTORES 15

Figure 19: mover-actor

16 PRIMEROS PASOS

Figure 20: cambiando-imagen

CREANDO MÁS ACTORES 17

Figure 21: manzana

Figure 22: manzana-en-el-espacio

18 PRIMEROS PASOS

Agregando colisiones

Vamos a hacer que la manzana se pueda destruir con los disparos de la nave.

Para eso tenemos que volver a seleccionar el actor con apariencia de manzana y
asignarle una figura física así:

Estos parámetros admiten muchas combinaciones, pero te recomiendo que la

figura sea “círculo”, el radio de “32” y desactives la opción “Dinámica”.

Vas a notar que en la pantalla aparecerá un círculo azul al rededor del actor nuevo.
Esto significa que el actor tiene un area de contacto para poder interactuar con
el resto de los actores:

Reaccionando a las colisiones

Para hacer que el actor manzana reaccione tenemos que escribir un poquito de
código.

Selecciona nuevamente al actor y pulsa la pestaña que aparece en la parte derecha

de la pantalla que tiene el texto “Código”:

Cuando pulses esa pestaña, vas a ver que se abre un panel nuevo; un panel en
donde tenemos código y un botón que dice “Recetas”:

El código es una de las cosas más importantes que incluye pilas, ya que el código
nos permite darle órdenes a la computadora para que haga cosas, como eliminar
actores, reaccionar al movimiento del mouse, emitir sonidos y todo lo que se te
ocurra.

Sin embargo para empezar vamos a tomar un atajo, vamos a pedirle a pilas que
nos ayude a escribir el código para que la manzana se pueda eliminar fácilmente.

Pulsa el botón que dice “Recetas”:

y luego selecciona la opción que dice “Cuando colisiona explotar”:

Cuando hagas eso, vas a notar que pilas escribió por nosotros una porción de
código que hace algunas cosas por nosotros:

Mas adelante en el manual vamos a escribir algo de código sin usar recetas, desde
cero y comprendiendo cada función y expresión, por ahora lo dejaremos ahí.

Ahora pulsa “Ejecutar” y corrobora cómo los disparos pueden limpiar el espacio
de frutas:
REACCIONANDO A LAS COLISIONES 19

Figure 23: propiedades-de-manzana

20 PRIMEROS PASOS

Figure 24: image-20200601235938682

REACCIONANDO A LAS COLISIONES 21

Figure 25: solapa-codigo

Figure 26: codigo-primera-vista

22 PRIMEROS PASOS

Figure 27: receta-1

Es solo el principio
Pilas es una herramienta super completa, y este mini-tutorial es solo el comienzo
de una gran aventura. Seguí leyendo este manual para conocer muchas más
cosas que incluye pilas o explora nuestro sitio web, vas a encontrar tutoriales,
videos, juegos y muchas cosas más.
¡Te damos la bienvenida a el mundo de la programación!
ES SOLO EL PRINCIPIO 23

Figure 28: receta-2

24 PRIMEROS PASOS

Figure 29: codigo-de-la-receta

ES SOLO EL PRINCIPIO 25

Figure 30: explosion

26 PRIMEROS PASOS
El intérprete

Programar se parece un poco a mantener una conversación con la computadora,

le enviamos mensajes y esperamos una devolución de su parte. Por ese motivo,
para poder hacer un juego que pueda ejecutar una computadora podemos usar un
“lenguaje de programación” que entendamos tanto personas como computadoras.
Aquí es donde entra en juego una pieza de Pilas llamada “Intérprete”. El
intérprete es como un chat en donde podemos comunicarnos directamente con la
computadora y esperar respuestas.
Para mostrar brevemente lo que puede hacer el intérprete pulsá el botón “Ejecu-
tar”, y luego hace click en ese botón que aparece debajo del area de juego a la
izquierda:
Cuando pulses ese botón debería abrirse un area rectangular de esta forma:
Lo primero que aparece en esta pantalla son dos mensajes que nos envía pilas
avisando que ingresamos en el modo ejecución, es decir, el juego está en fun-
cionamiento. Y por el otro lado nos dice que hay dos variables para usar “pilas”
y “actores”.
Pero antes de hablar de variables, vamos a probar exactamente qué nos permite
hacer el intérprete.
En el intérprete podemos escribir código y la computadora nos va a responder.
Hagamos una prueba, escribí 2+2 en el intérprete así probamos la interacción
con la computadora.
En area en donde se puede escribir es la que está marcada con ese cursor ›:
Luego pulsa la tecla “Enter” y la computadora te va a responder:
El intérprete va a responder a cada una de las cuentas con el resultado, como si
fuera una calculadora aritmética.
Sin embargo, hace más que eso, si le pedimos incorrectamente algo nos dará un
mensaje de error:
2 + numero;

27
28 EL INTÉRPRETE

Figure 31: boton-interprete

 29

Figure 32: interprete-inicial

Figure 33: suma

Figure 34: respuesta

Figure 35: error

30 EL INTÉRPRETE

Y esto está bien, si bien el texto rojo parece algo grave, no lo es. La computadora
nos explica que no sabe de que se trata “numero” y por lo tanto no sabría
decirnos el resultado de esa cuenta.
Si le indicamos que el “numero” es 10 sí va a poder decirnos el resultado:
numero = 10;
2 + numero;

Figure 36: resultado-con-variable

¡Claro!, el resultado es 12 ya que creamos una variable llamada “numero” con el

valor de 10.

Accediendo a las variables pilas y actores

Ahora bien, el intérprete no solo puede realizar cuentas aritméticas, también nos
da la posibilidad de realizar pruebas, crear o modificar los actores en la pantalla
y varias cosas mas.
Al principio de esta sección mencioné que pilas nos avisaba que había dos
variables listas para utilizar “pilas” y “actores”:
Estas dos palabras se denominan variables, porque representan un nombre que
almacena un valor asignado con anterioridad. En nuestro caso, “numero” también
es una variable, porque básicamente es el nombre que le dimos al valor 10.
Ahora bien, ¿qué podemos hacer con estas variables?.
La variable pilas nos permite acceder a todas las funcionalidades del motor. Si
escribimos algo como:
ALGUNOS CONSEJOS 31

Figure 37: variables

pilas.actores.nave()
Vas a notar que aparecerá una nave en la pantalla como respuesta al código que
escribimos:
También vas a notar que en el intérprete aparece el mensaje <nave en (0, 0)>,
esto es así para indicarnos que obedeció a nuestras orden. Pilas creó el actor
nave y lo dejó en la posición (0, 0) de la pantalla.
Si haces click en la pantalla, vas a notar que la nave está “viva”, se puede mover
y disparar usando el teclado.
Ahora bien, aquí es donde entra en juego la otra variable que te comenté llamada
“actores”. Esta variable va a permitirnos referirnos a cualquier actor dentro de la
escena.
Escribí estas lineas de código en el intérprete para ver el resultado:
nave.escala = 2
nave.rotacion = 90
nave.decir("hola")
Lo que deberías ver es que la nave cambia de tamaño, apunta hacia arriba y
además muestra un mensaje:
Esto es bastante útil, porque el código que escribimos en el intérprete también
se puede trasladar al editor. Si tenemos dudas sobre alguna función o forma de
hacer algo en pilas podemos probar en el intérprete, y si todo sale bien, llevarlo
al editor y que forma parte de nuestro juego.

Algunos consejos

El intérprete es algo bastante original en los motores de video juegos, pero se

utiliza muchísimo en ambientes de desarrollo web y sistemas complejos.
Y como varias de las personas que usamos pilas venimos de ese mundo, el
intérprete está diseñado en base a la experiencia de usar intérpretes durante
muchos años. . . Un ejemplo de esto es el sistema de auto completado:
32 EL INTÉRPRETE

Figure 38: image-20200604161609718

ALGUNOS CONSEJOS 33

Figure 39: image-20200604161800642

34 EL INTÉRPRETE

Figure 40: nave-dice-hola

ALGUNOS CONSEJOS 35

Siempre que escribas una variable conocida el intérprete va a intentar ayudarte

a escribir código de esta forma:

Figure 41: autocompletado

Otra necesidad muy común es querer volver a repetir una instrucción anterior,
para eso podes pulsar las flechitas del teclado hacia arriba y abajo para navegar:

Figure 42: autocompletado-historico

36 EL INTÉRPRETE
Autómatas y estados

Un desafío muy común en el desarrollo de juegos es lograr que los actores puedan
mostrar animaciones y reaccionar de acuerdo a modos particulares: saltar,
caminar, quedarse parado, perdiendo, etc. . .
Para estas cosas Pilas incorpora un mecanismo de autómatas y estados.
Un actor puede estar en un estado a la vez, por ejemplo, “parado” podría ser el
estado de un actor en un juego de plataformas. Cuando el usuario pulsa hacia
arriba, podría pasar al estado “saltando”, pero solo cuando toca el piso podría
pasar al estado “parado” nuevamente.
Este modelo de estados y transiciones es lo que llamamos un autómata, y si bien
puede parecer algo complejo al principio, con el tiempo notarás que se trata de
algo muy práctico y sencillo.
Para crear un estado simplemente tenemos que editar el código de un actor y
asignarle un valor a la propiedad “estado” y crear dos métodos para que pilas
sepa a qué métodos llamar cuando el actor esté en ese estado:
class MiActor extends Actor {
iniciar() {
this.estado = "parado";
}

actualizar() {
}

parado_iniciar() {
this.animacion = "parado";
}

parado_actualizar() {
// código que se ejecutará 60 veces por segundo
// cuando el actor esté en el estado "parado".
}
}

37
38 AUTÓMATAS Y ESTADOS
Animaciones

Para crear animaciones se tiene que utilizar el editor que aparece en la parte
superior de la pantalla:

Este botón abrirá una ventana en donde se pueden previsualizar todas la anima-
ciones del proyecto:

Estas animaciones también se pueden editar fácilmente, solo tienes que pasar el
mouse sobre el nombre de la animación y pulsar el botón “editar”:

39
40 ANIMACIONES

Las animaciones son simplemente una lista de imágenes que pilas mostrará una
detrás de la otra, a determinada velocidad. Vas ver toda esta información en el
editor de animaciones:
CREAR ANIMACIONES DESDE EL EDITOR 41

Crear animaciones desde el editor

Para crear animaciones hay que pulsar el botón “Crear una animación”:

y luego cargar cada uno de los cuadros de animación pulsando el botón “+” que
aparece en la parte superior de la ventana:
42 ANIMACIONES

Por ejemplo, aquí incluí algunos cuadros de animación de un personaje corriendo:

CREAR ANIMACIONES DESDE EL EDITOR 43

Podes utilizar el botón “Reproducir” y la propiedad “Cuadros por segundo” para

ajustar la velocidad de la animación y dejarla como quieras:

Por último es muy importante que le asignes un nombre a la animación, por

ejemplo “shaolin_corre”:

Esto es muy importante porque tu juego puede tener un montón de animaciones,

y el nombre que le asignes será la única forma de identificar cada una de las
animaciones.

Ahora sí, podes cerrar la ventana del editor y continuar con la siguiente sección.
44 ANIMACIONES

Cómo usar las animaciones

Una vez que tienes creada la animación, lo único que hace falta es copiar el
código que aparece como ayuda en el visor de animaciones dentro del código:

Ese código, sirve para indicarle al actor qué animación tiene que reproducir. Por
ejemplo, si quieres que el actor muestre esta animación al comenzar deberías
colocarlo dentro de la función “iniciar” así:

Crear animaciones desde el código

Para crear y asignar animaciones también se puede usar directamente el código
del editor. Esto es algo más difícil, pero en algunas situaciones puede ser útil.
Existe un método llamado “crear_animacion” que se puede invocar especificando
el nombre de la animación, los cuadros que se deben mostrar y la velocidad.
CREAR ANIMACIONES DESDE EL CÓDIGO 45

Por ejemplo, para crear una animación de un actor mientras está esperando usé
lo siguiente:
this.crear_animacion("conejo_parado", ["imagenes:conejo/conejo_parado1", "imagenes:conejo/conejo_
El valor “2” significa que la animación se debe mostrar a una velocidad de 2
cuadros por segundo.
Luego, una vez creada la animación, se puede reproducir usando esta llamada:
this.animacion = "conejo_parado";
La creación de animaciones generalmente se realiza en el método iniciar de esta
forma:
class Conejo extends Actor {
iniciar() {
this.crear_animacion("conejo_parado", ["imagenes:conejo/conejo_parado1", "imagenes:conejo/con
this.crear_animacion("conejo_camina", ["imagenes:conejo/conejo_camina1", "imagenes:conejo/con
this.crear_animacion("conejo_salta", ["imagenes:conejo/conejo_salta"], 20);
this.crear_animacion("conejo_muere", ["imagenes:conejo/conejo_pierde"], 1);

this.animacion = "conejo_parado";
}

actualizar() {}
}
Luego, para cambiar de animación, se puede re-definir el valor del atributo
animación así:
class Conejo extends Actor {
iniciar() {
this.crear_animacion("conejo_parado", ["imagenes:conejo/conejo_parado1", "imagenes:conejo/con
this.crear_animacion("conejo_camina", ["imagenes:conejo/conejo_camina1", "imagenes:conejo/con
this.crear_animacion("conejo_salta", ["conejo_salta"], 20);
this.crear_animacion("conejo_muere", ["conejo_muere"], 1);

this.animacion = "conejo_parado";
}

actualizar() {
if (this.pilas.control.izquierda) {
this.animacion = "conejo_camina";
this.x -= 5;
}

if (this.pilas.control.derecha) {
this.animacion = "conejo_camina";
this.x += 5;
46 ANIMACIONES

if (!this.pilas.control.izquierda && !this.pilas.control.derecha) {

this.animacion = "conejo_parado";
}
}
}

Detectar la finalización de las animaciones

Las animaciones siempre se muestran de forma cíclica, es decir, cuanto terminan
vuelven a empezar desde cero. Si tu animación es tradicional, como un personaje
caminando, no tienes que hacer nada adicional para que continue la animación
automáticamente.
Si quieres detectar el momento exacto cuando la animación llega a su final,
deberías crear un método llamado cuando_finaliza_animacion y colocar ahí
algún código para reaccionar ante la finalización de la animación. Por ejemplo,
el actor “explosión” se elimina de la pantalla automáticamente cuando finaliza
su animación:
class explosion extends Actor {

// Otros métodos

cuando_finaliza_animacion(nombre: string) {
this.eliminar();
}
}
Cámara

Si bien el juego tendrá un tamaño fijo en la pantalla, pilas incorpora una cámara
que nos permite realizar desplazamientos para mostrar otras partes de la escena.
En esta sección vamos a controlar cámara de la escena tanto desde el editor
como desde el juego en ejecución.

Mover la cámara desde el editor

Para desplazar la cámara simplemente tenemos que pulsar y arrastrar con el
mouse sobre el fondo de la escena:

Vas a notar que en la escena el movimiento de la cámara se refleja en los atributos

“Cámara x” y “Cámara Y”.

47
48 CÁMARA

Esos dos atributos también se utilizan para definir la posición inicial de la cámara
cuando comienza a ejecutarse el juego.
También vas a observar otros dos atributos llamados “Ancho” y “Alto”. Estos
dos atributos van a definir el tamaño total del escenario. Podes cambiar esos
parámetros para hacer que el escenario total sea más grande o más chico.

Mover la cámara mientras se ejecuta el juego

Para mover la cámara podemos acceder a los atributos de posición directamente,

por ejemplo si quieres mover constantemente la cámara hacia la derecha, podrías
escribir este código en la escena:
class escena1 extends Escena {
actualizar() {
this.camara.x += 1;
}
}
O bien, si quieres que un actor se mueva libremente por el escenario y la cámara
la siga todo el tiempo podrías usar el método seguir_al_actor así:
class nave extends Actor {

actualizar() {
this.camara.seguir_al_actor(this, 10, true);
}
}
Ten en cuenta que esta función se tiene que llamar todo el tiempo, por eso la
tenemos que incluir dentro del método actualizar.
También ten en cuenta que la función lleva 3 parámetros:
seguir_al_actor(actor, suavidad, ignorar_bordes)
• actor: el actor que la cámara tiene que seguir.
• suavidad: tiene que ser un número indicando cuán gradual tiene que ser
el movimiento de la cámara, cuanto menor sea el número mas rápido y
brusco será el movimiento de la cámara.
• ignorar_bordes: el último parámetro tiene que ser true o false. Si se
envía true la cámara seguirá al actor incluso si sale del area del escenario,
esto es ideal para juegos con area de movimiento infinita. Si se coloca
false la cámara se detendrá en los bordes del escenario. # Recorridos
Los recorridos nos permiten realizar movimientos de actores de manera muy
simple, lo que tenemos que hacer es enumerar todos los puntos “x” e “y” que
queremos recorrer y llamar a una sola función.
USANDO LA FUNCIÓN HACER_RECORRIDO 49

Usando la función hacer_recorrido

Por ejemplo, imagina que tenemos un enemigo de juego de naves, un ovni con
un alien, y queremos que se mueva por la pantalla de izquierda a derecha.
Primero tenemos que tener en cuenta qué puntos de la pantalla queremos que
recorra. Por ejemplo, que primero visite la posición (x= -200, y=0), luego
hacia abajo a la posición (x=0, y=-100), luego a la derecha (x=200, y=0) y
por último que regrese al punto de origen (x=0, y=0):

Y por último, tenemos que llamar a la función hacer_recorrido de esta forma

dentro de una actor:
this.hacer_recorrido([-200, 0, 0, -100, 200, 0, 0, 0], 7, 1, false);
El primer parámetro tiene que ser una lista con todas las coordenadas que
queremos que recorra. Tenemos que ingresar el número de la coordenada x,
luego en de la coordenada y y seguir así. Esta lista tiene que tener la forma
[x_punto_1, y_punto_1, x_punto_2, y_punto_2 ....]
El segundo argumento, que en este ejemplo es 7, tiene que ser un número
indicando cuantos segundos tiene que durar el movimiento. En este caso se pide
que el movimiento dure 7 segundos.
El ante último argumento es el número que indicará las repeticiones de esta
animación, si le pasamos 0 el movimiento se va a repetir constantemente.
50 CÁMARA

Y el último argumento indica si el actor deber rotar en dirección al camino o no.

Es útil poner este argumento en true cuando el actor es una nave vista desde
arriba o un automóvil:

Ten en cuenta que el actor va a visitar todos los puntos pero de manera gradual,
siguiendo el recorrido pero realizando una curva de movimiento muy suave:
USANDO LA FUNCIÓN HACER_RECORRIDO 51
52 CÁMARA
Etiquetas

Las etiquetas son útiles para clasificar actores y simplificar interacciones.

Por ejemplo, en un juego podríamos tener 10, 20 o 30 actores diferentes que

tengan el rol de “enemigos”. En cuyo caso simplemente podríamos asignarle a
todos la misma etiqueta para distinguirlos de los demás.

Las etiquetas se pueden definir directamente en el inspector de pilas:

53
54 ETIQUETAS

O bien, también se puede directamente desde el editor código usando el atributo

etiqueta así:

class Caja extends ActorBase {

iniciar() {
this.etiqueta = "enemigo";
}
ETIQUETAS PARA DISTINGUIR COLISIONES 55

actualizar() {}
}

Etiquetas para distinguir colisiones

Vamos describir un uso típico de las etiquetas: las etiquetas son muy útiles para
distinguir colisiones.
Cuando pilas detecta una colisión entre dos actores llamará a la función
cuando_comienza_una_colision y enviará el parámetro actor como referencia
al actor que entró en contacto.
Así que esto es lo que se suele hacer, imaginemos que nuestro actor protagonista
pueda capturar monedas pero debe perder vidas si toca un enemigo. Podríamos
hacer algo así:
class Protagonista extends Actor {
// otras funciones...

cuando_comienza_una_colision(actor) {
if (actor.etiqueta === "moneda") {
actor.eliminar();
this.pilas.reproducir_sonido("moneda");
// sumar puntaje, emitir particulas etc...
}

if (actor.etiqueta === "enemigo") {

this.estado = "perder";
this.vidas -= 1;
// emitir sonido de game over, mostrar textos etc...
}
}
}
Ten en cuenta que en la función cuando_comienza_una_colision también se
puede cancelar una colisión retornando true. Por ejemplo si quieres que un
actor pueda sobrepasar a otro.
56 ETIQUETAS
Habilidades

Cuando realizamos juegos hay ciertos comportamientos que son tan comunes
que ni siquiera necesitamos programarlos escribiendo código.
Un ejemplo de estos comportamientos comunes incluyen “hacer que un actor se
mueva con el teclado”, “poder arrastrar y soltar un actor con el mouse” etc. . .
A todos estos comportamientos los llamamos “habilidades”, y lo interesante es
que podemos tomar a cualquier actor y “enseñarle” cualquier de las habilidades
para mejorar nuestro juego.

Desde el editor

Una opción para incorporarle habilidades a un actor es usar el inspector del

actor. Hay una propiedad llamada “Habilidades” en donde cargar una o más
habilidades que busquemos enseñarle a un actor al momento de iniciar la escena.

Desde el código

Otra opción, es enseñarle una habilidad al actor desde el código.

Imaginá que buscamos crear un juego de cartas, donde el usuario tiene que poder
mover una carta por la pantalla usando el mouse o gestos del dispositivo mobile.
El primer paso es crear el actor, con la imagen que nos interesa:
let mi_actor = pilas.actores.actor();
mi_actor.imagen = "imagenes:cartas/carta";
Y aquí lo interesante, para hacer que el usuario pueda mover este actor por la
pantalla simplemente tenemos que “enseñarle” al actor la habilidad arrastrable
así:
mi_actor.aprender("arrastrable");

57
58 HABILIDADES

Olvidar o eliminar habilidades

Si en algún momento quieres eliminar una habilidad de un actor, simplemente
se puede llamar a la función olvidar así:
mi_actor.olvidar("arrastrable");
Comportamientos

En el desarrollo de videojuegos es conveniente tener una forma de indicarle a los

actores una rutina o tarea para que la realicen.
En pilas usamos el concepto de comportamiento. Un comportamiento es un
objeto que simboliza una acción a realizar por un actor.
La utilidad de usar componentes es que puedes asociarlos y intercambiarlos
libremente para lograr efectos útiles.
Por ejemplo: un guardia de un juego de acción puede ir de un lado a otro en un
pasillo:
• caminar hacia la izquierda hasta el fin del pasillo.
• dar una vuelta completa.
• caminar hacia la derecha hasta el fin del pasillo.
• dar una vuelta completa.
• etc. . .
En este caso hay 4 comportamientos, y queda en nuestro control si queremos
que luego de los 4 comportamientos comience nuevamente.

Realizando comportamientos
Para indicarle a un actor que realice un comportamiento tenemos que llamar a
la función hacer indicándole el nombre del comportamiento:
let mi_actor = pilas.actores.actor();
mi_actor.hacer("aparecer");
Ten en cuenta que los comportamientos se pueden encadenar para lograr efectos
o animaciones una detrás de otra. Por ejemplo, si queremos mostrar y ocultar
un actor podemos hacerlo así:
let mi_actor = pilas.actores.actor();
mi_actor.hacer("aparecer");
mi_actor.hacer("desaparecer");

59
60 COMPORTAMIENTOS

Incluso, algunas habilidades reciben parámetros para indicar velocidad, posición

etc. . .
Por ejemplo, si queremos hacer que el actor desaparezca y aparezca varias veces
muy rápidamente podemos escribir algo así:
let mi_actor = pilas.actores.actor();

for (i=0; i<50; i++) {

mi_actor.hacer("aparecer", {velocidad: 10});
mi_actor.hacer("desaparecer", {velocidad: 10});
}

Comportamientos incluidos en pilas

Esta es la lista de comportamientos que incluye pilas:

• desaparecer (parámetros: velocidad)
• aparecer (parámetros: velocidad)
• eliminar (sin parámetros)
• mover (parámetros: x, y, demora)

Comportamientos personalizados

Si quieres crear tus propios comportamientos podrías abordarlo de la siguiente

forma:
Primero, deberías crear una clase que herede de Comportamientos y tenga al
menos un método iniciar y actualizar así:
class MiComportamiento extends Comportamiento {

iniciar(argumentos) {
}

actualizar() {
// retornar true para detener el comportamiento.
}

terminar() {}
}
Luego, deberías vincularlo al módulo de comportamientos:
pilas.comportamientos.vincular("mi comportamiento", MiComportamiento);
COMPORTAMIENTOS PERSONALIZADOS 61

y por último asignárselo a un actor:

mi_actor.hacer("mi_comportamiento");
62 COMPORTAMIENTOS
Azar o cálculos aleatorios

Una utilidad muy utilizada en los juegos son las funciones para obtener números
aleatorios. Pilas incluye una función muy simple para esto llamada pilas.azar:
La función pilas.azar retorna un número aleatorio entre dos números. Por
ejemplo, si buscas que pilas retorne un número al hacer entre 1 y 5 podrías
llamar a la función así:
pilas.azar(1, 5)
Es importante mencionar que el rango de valores incluye los extremos. En el
caso anterior la función podría retorna 1, 2, 3, 4 o 5.

63
64 AZAR O CÁLCULOS ALEATORIOS
Observables

Los observables te permiten visualizar rápidamente en pantalla qué valor tienen

los atributos, variables o expresiones dentro de un juego.
Por ejemplo, imagina que tu juego tiene un personaje que interactúa con la
posición x e y del cursor del mouse. Mediante observables vas a poder agregar
un visor de variables como este:

Es super importante poder visualizar rápidamente variables en un juego, no solo

para informarse sino también para detectar errores o incluso saber si estamos
accediendo a la información correcta.
Los observables se pueden crear mediante una llamada a la función
pilas.observable enviando un nombre (a elección tuya) y una variable para
observar, por ejemplo:
actualizar() {
this.pilas.observar("cursor_x", this.pilas.cursor_x);
this.pilas.observar("cursor_y", this.pilas.cursor_y);

65
66 OBSERVABLES

this.pilas.observar("¿pulsa la tecla arriba?", this.pilas.control.arriba);

}
Ten en cuenta que los observables se tienen que crear siempre desde funciones
actualizar, ya sea de actores o de la escena, porque esa es la única forma de
que pilas pueda saber el valor más reciente de esas variables.
Otro ejemplo útil, sería poder saber la posición exacta de un actor que hemos
creado. Incluso podemos imprimir otros atributos menos visibles como la rotación
o la velocidad vertical:
class un_actor extends Actor {
iniciar() {
this.x = -100;
this.y = 70;
}

actualizar() {
this.pilas.observar("mi actor", this)
this.pilas.observar("rotación", this.rotacion)
}
}
Si buscas un ejemplo aplicado de observables abrí el ejemplo angulos:

# Manejo de tiempo
Pilas ofrece varias formas de ejecutar funciones cada determinado tiempo. Esto
FUNCIONES MANEJAR EL TIEMPO 67

es útil para crear enemigos, crear relojes para hacer más desafiante un juego o
incluso para aumentar la dificultad de un juego.

Funciones manejar el tiempo

Hay dos funciones principales en el temporizador de pilas:

• pilas.luego(cantidad_de_segundos_a_esperar, función)
• pilas.cada(segundos_para_el_intervalo, función, veces_a_repetir:
opcional)

La primer función permite ejecutar una función luego de un periodo de tiempo.

Por ejemplo, si queremos hacer que un actor diga algo luego de 3 segundos
podemos hacerlo así:

let mi_actor = pilas.actores.aceituna();

pilas.luego(3, () => {
mi_actor.decir("¡Han pasado 3 segundos!");
});

Hay que tener en cuenta que esta función se ejecutará una sola vez.

La segunda función, llamada pilas.cada, permite invocar una función cada

determinada cantidad de segundos, muy similar a la anterior, pero invoca la
función que le pidamos varias veces.

Por ejemplo, imagina que queremos crear actores pelota cada medio segundo,
podemos hacer algo así:

pilas.cada(0.5, () => {
var pelota = pilas.actores.pelota();
pelota.y = 100;
pelota.x = pilas.azar(-200, 200);
});

Si ejecutas esas instrucciones, vas a ver en pantalla algo así. Cada medio segundo
se creará un actor pelota en una posición diferente:
68 OBSERVABLES

Cancelar repeticiones o eliminar temporizadores

Si utilizas la función pilas.cada para repetir una acción varias veces, es probable
que ante una determinada condición quieras dejas de repetir la ejecución de la
función.
Una forma de lograr esto es diciéndole a pilas cuantas veces tiene que repetir
la función, por ejemplo, para llamar 5 veces una función cada dos segundos
deberías llamar a la función así:
var actor = pilas.actores.aceituna();

pilas.cada(
2,
() => {
actor.decir("prueba");
},
5
);
Otra opción, es detener el temporizador directamente desde la función retornando
true:
Por ejemplo, imagina que tienes un actor que se mueve 50 pixeles a la derecha
cada 2 segundos, pero que quieres que deje de moverse cuando llegue a la posición
MÉTODOS ESPECIALES 69

x igual a 200. Podrías implementarlo de esta forma:

var actor = pilas.actores.aceituna();

pilas.cada(2, () => {
actor.x += 50;

if (actor.x > 200) {

// retornar este valor 'true' hace que
// la función deje de llamarse cada
// dos segundos.
return true;
}
});

Métodos especiales
También existe un método llamado cada_segundo que los actores pueden utilizar
para disparar una acción cada vez que transcurre un segundo en el juego. Por
ejemplo, si queremos crear un actor que aumente su tamaño cada un segundo
podemos definir el método así:
class caja extends Actor {
cada_segundo() {
this.escala += 0.5;
}
}
O bien, si ya tenemos la referencia al actor también sería válido escribir algo así:
var mi_actor = pilas.obtener_actor_por_nombre("caja");

mi_actor.cada_segundo = () => {
mi_actor.escala += 0.5;
mi_actor.decir("¡pasó un segundo!");
};
70 OBSERVABLES
Ángulos y distancias

Pilas trae varias funciones para realizar cálculos geométricos sencillos, como
obtener la distancia entre actores o incluso el ángulo entre ellos.

Ángulo entre actores o puntos

Un ejemplo práctico sería poder mirar en dirección a donde está el puntero del
mouse: Observa uno de los ejemplos que trae pilas, el usuario puede mover el
puntero del mouse y observar cómo el cañon ajusta su rotación correctamente:

Este ejemplo hace uso de la función obtener_angulo_entre_puntos así:

let x = actor_cañon.x;
let y = actor_cañon.y;
let cx = pilas.cursor_x;
let cy = pilas.cursor_y;

actor_cañon.rotacion = pilas.obtener_angulo_entre_puntos(x, y, cx, cy);

71
72 ÁNGULOS Y DISTANCIAS

La función obtener_angulo_entre_puntos espera que le enviemos 4 parámetros,

correspondientes a los dos puntos que nos interesan. El resutado de la función
es el ángulo en grados esperado.
También existe una función llamada obtener_angulo_entre_actores, que hace
algo muy similar, solamente que espera que le enviemos dos actores en lugar de
4 números.
Un ejemplo que muestra esto es angulo-entre-actores, que nos muestra una
nave mirando constantemente al centro de la pantalla, donde está el actor planeta:

Si observas el código, vas a encontrar una llamada a obtener_angulo_entre_actores

similar a la siguiente:
let nave = pilas.actores.nave();
let planeta = pilas.obtener_actor_por_nombre("planeta");
nave.rotacion = pilas.obtener_angulo_entre_actores(nave, planeta);

Distancia entre puntos y actores

Otras dos funciones útiles en esta categoría son las funciones obtener_distancia_entre_puntos
y obtener_distancia_entre_actores. Ambas reciben los argumentos de
manera muy similar a las funciones de ángulos anteriores. Aquí unos ejemplos:
DISTANCIA ENTRE PUNTOS Y ACTORES 73

let actor = pilas.actores.aceituna();

let cx = pilas.cursor_x;
let cy = pilas.cursor_y;

let distancia = pilas.obtener_distancia_entre_puntos(actor.x, actor.y, cx, cy);

actor.decir(`la distancia al mouse es ${distancia}`);
o entre actores:
let actor = pilas.actores.aceituna();
actor.x = 100;

let nave = pilas.actores.nave();

let distancia = pilas.obtener_distancia_entre_actores(actor, nave);

nave.decir(`la distancia al otro actor es ${distancia}`);
74 ÁNGULOS Y DISTANCIAS
Colisiones

Las colisiones permiten ejecutar funciones como respuesta al contacto entre

diferentes actores. Las funciones se pueden personalizar para hacer casi cualquier
cosa: reproducir un sonido para magnificar el impacto, eliminar alguno de los
actores en contacto, emitir efectos etc. . .

Por ejemplo, imaginá que tenemos estos tres actores:

Cuando el juego se ejecute, la plataforma va a quedar fija en pantalla. Mientras

que la pelota y la caja van a moverse hacia abajo y colisionarán.

Pilas va a llamar automáticamente a la función cuando_comienza_una_colision

ni bien entren en contacto dos actores. Por ejemplo en este caso, pilas va a

75
76 COLISIONES

llamar a la función cuando_comienza_una_colision cuando la pelota colisione

con la caja, y luego la plataforma.
class pelota extends Actor {
propiedades = {
imagen: "pelota",
figura: "circulo",
figura_radio: 25
};

cuando_comienza_una_colision(actor) {
if (actor.etiqueta === "caja") {
return true;
}

if (actor.etiqueta === "plataforma") {

this.decir("Oh, colisioné con una plataforma!");
}
}
}
En el código hay dos cosas interesantes, tenemos la función cuando_comienza_una_colision
dentro de la clase “pelota” para detectar colisiones y además intentamos
distinguir contra qué actores se produce la colisión usando etiquetas. :
• Si la pelota colisiona con una caja, le indicamos a pilas que ignore la
colisión, y continúe. Esto se hace simplemente retornando true.
• Si la pelota colisiona con una plataforma, emitimos un mensaje para que
el usuario pueda reconocer que la pelota detectó la colisión.

Tipos de colisiones
Hay 3 instantes muy importantes cuando se producen colisiones:
• Cuando se detecta el contacto inicial.
• Cuando los dos actores permanecen en contacto prolongado. Por ejemplo
cuando un actor se posa sobre una plataforma.
• El instante en donde la colisión desaparece porque los actores dejan de estar
en contacto. Por ejemplo cuando un actor posando sobre una plataforma
“salta” y deja de estar en contacto.
Para distinguir estos casos pilas llamará a las tres funciones de forma diferente.
Este es un ejemplo de cómo se declaran esas funciones en el código de un actor:
class mi_actor extends Actor {
cuando_comienza_una_colision(actor: Actor) {
if (actor.etiqueta === "moneda") {
COLISIONES ENTRE FIGURAS ESTÁTICAS (NO DINÁMICAS) 77

this.pilas.reproducir_sonido("moneda");
actor.eliminar();
}
}

cuando_se_mantiene_una_colision(actor: Actor) {}

cuando_termina_una_colision(actor: Actor) {}
}
Luego, el tipo de colisión más común que se llamará siempre tiene la siguiente
forma:
cuando_colisiona(actor: Actor) {

Colisiones entre figuras estáticas (no dinámicas)

Hay otro tipo de colisión especial que solo se produce entre figuras no dinámicas,
esas colisiones se notifican constantemente en cada cuadro de animación mediante
el método cuando_colisionan.
78 COLISIONES
Mensajes entre actores y
escenas

Dentro de un juego se puede producir varias comunicaciones entre actores. Si

un personaje protagonista pierde, tal vez queremos que el contador de puntajes
se entere y cambie de color, o que los enemigos conjuntamente dejen de seguir al
protagonista; tal vez incluso vamos a querer que la escena se notifique de esto y
ponga un cartel en pantalla o pase a otra escena.
Los mensajes sirven para implementar este tipo de comunicaciones entre distintos
objetos de nuestro juego. Y tienen una ventaja, porque podemos hacer que un
actor no tenga que conocer todo lo que lo rodea, sino que simplemente emita un
mensaje “y quién escuche puede hacer algo al respecto”.

Enviar mensajes globalmente

Un ejemplo típico que se suele dar de mensajes son los mensajes globales, estos
mensajes se pueden enviar desde un actor a todos los demás, estos mensajes
globales incluso llegan a la escenas.
Para enviar un mensaje global tenemos que escribir este código en el actor emisor:
this.pilas.enviar_mensaje_global("mi_mensaje");
Y para que otros actores puedan atender este mensaje simplemente tenemos que
crear un método que se llame “cuandollega_el_mensaje” seguido del nombre
del mensaje así:
cuando_llega_el_mensaje_mi_mensaje() {
this.decir("Algún actor envió el mensaje 'mi_mensaje'");
}
opcionalmente, si queremos un actor o escena que capture todos los mensajes
podemos usar este método:

79
80 MENSAJES ENTRE ACTORES Y ESCENAS

cuando_llega_un_mensaje(mensaje:string) {
this.decir("llegó el mensaje " + mensaje);
}

Mensajes dirigidos a actores particulares

Si no queremos enviar el mensajes a todos los actores y escenas, lo que podemos
hacer es obtener la referencia a un actor en particular y enviarle el mensaje de
forma directa:
let puntaje = this.pilas.obtener_actor_por_nombre("puntaje");
puntaje.enviar_mensaje("aumentar");
Y de forma similar a como mencionamos antes, el puntaje debería tener un método
llamado cuando_llega_el_mensaje_aumentar para reaccionar al mensaje:
cuando_llega_el_mensaje_aumentar() {
this.puntaje_acumulado += 1;
}

Mensajes con parámetros

A veces junto con el mensaje necesitamos enviar parámetros para ser más
específicos. Para eso podemos usar el segundo argumento de las funciones de
mensajes.
Por ejemplo, imagina que tenemos un actor que cuando colisiona con una moneda
sume 5 puntos, pero cuando colisiona con un diamante sume 10 puntos.
Por un lado, cuando se produce la colisión podemos emitir el mensaje “aumen-
tar_puntaje” con la cantidad de puntos que le corresponden:
cuando_colisiona(actor: Actor) {
if (actor.tiene_etiqueta("moneda")) {
actor.eliminar();
this.pilas.enviar_mensaje_global("aumentar_puntaje", {cantidad: 5});
}

if (actor.tiene_etiqueta("diamante")) {
actor.eliminar();
this.pilas.enviar_mensaje_global("aumentar_puntaje", {cantidad: 10});
}
}
Luego, del lado del receptor (o los receptores) del mensaje, tenemos que leer los
parámetros adicionales así:
MENSAJES CON PARÁMETROS 81

cuando_llega_el_mensaje_aumentar_puntaje(datos) {
this.puntaje_acumulado += datos.cantidad;
}
82 MENSAJES ENTRE ACTORES Y ESCENAS
Escenas

Las escenas te permiten dividir el juego en partes reconocibles y que interactúan

de manera diferente con el usuario.

Un juego típico tendrá al menos una escena como el menú principal, una presen-
tanción y una pantalla de juego.

Cambiar o reiniciar escenas

Para cambiar la escena actual se puede llamar a la función cambiar_escena

indicando el nombre de la escena que se quiere cambiar. Por ejemplo:

pilas.cambiar_escena("escena2");

También se puede reiniciar la escena actual llamando a esta función:

pilas.reiniciar_escena();

83
84 ESCENAS

Gravedad y simulación física

Cada escena tiene asociado su propio entorno de simulación de física. Así
que si estás haciendo un juego que involucra física es probable que quieras
ajustar algunos parámetros como gravedad_x y gravedad_y. Estos parámetros
se encuentran en el inspector de la escena y también se pueden cambiar desde el
código así:
pilas.fisica.gravedad_x = 1;
pilas.fisica.gravedad_y = 1;
o bien:
pilas.escena.gravedad_x = 0;
pilas.escena.gravedad_y = -2;
Código de proyecto

En un proyecto de pilas hay varios elementos que pueden contener su propio

código: Tanto las escenas como los actores tienen su propio código asociado.

Ahora bien, en alguna situaciones necesitamos poder guardar variables en algún

lugar común que sobreviva más allá de los actores y la escena actual. Por ejemplo
si queremos almacenar la cantidad de vidas disponibles que tiene un actor cuando
pasa de una escena a otra.

Un ejemplo breve

Para ejemplificar cómo podemos usar el código de la escena voy a dar un ejemplo.
Imagina que tenemos un juego en el que tenemos que recolectar monedas con el
mouse, pero queremos que la cantidad de monedas persista entre un nivel y otro.

Primero tenemos que seleccionar el proyecto desde el panel de propiedades:

85
86 CÓDIGO DE PROYECTO

Luego, vamos a ver que en el panel de código aparece el código del proyecto:

El código está casi vacío, así que vamos a crear el contador de monedas recolec-
tadas y vamos a darle un valor inicial:
class Proyecto {
monedas: number;
UN EJEMPLO BREVE 87

iniciar() {
this.monedas = 0;
}
}

Ahora vamos a crear un actor para “visualizar” ese contador directamente en

pantalla.

Pulsá el botón “Crear actor” y luego seleccioná al actor “puntaje”:

Ahora editemos el código para que este actor pueda acceder a la variable puntaje
del proyecto. Tenemos que cambiar estas lineas de código:
88 CÓDIGO DE PROYECTO

Observá que desde un actor podemos acceder directamente al proyecto usando

el código this.proyecto, y por supuesto vamos a poder acceder a todas las
variables o métodos del proyecto directamente.

El código completo debería quedarte así:

// @ts-ignore
class puntaje extends ActorTextoBase {
iniciar() {
this.actualizar_texto();
}

aumentar(cantidad: number = 1) {
this.proyecto.monedas += cantidad;
this.actualizar_texto();
}

actualizar_texto() {
this.texto = `MONEDAS: ${this.proyecto.monedas}`;
}
}

y una vez que ejecutamos el juego debería verse así:

UN EJEMPLO BREVE 89

Ahora creá un actor de tipo moneda, con este código:

// @ts-ignore
class moneda extends Actor {
cuando_hace_click() {
this.proyecto.monedas += 1;
this.eliminar();
}
}

y luego duplica ese actor unas 5 veces desde el menú:

Y ya casi lo tenemos listo, si ejecutas el proyecto vas a ver cómo el contador de

monedas almacena y muestra la variable monedas directamente desde el proyecto:
90 CÓDIGO DE PROYECTO

Ahora bien, lo más interesante de almacenar variables en el proyecto es que

conservarán su valor incluso si cambiamos de una escena a otra.
Hagamos la prueba: pulsa el botón “crear escena” y en el código de la escena
coloca este código para que el usuario pueda ver el puntaje cuando ingresa a
esta escena:
class escena2 extends Escena {
iniciar() {
this.pilas.clonar("puntaje");
}
}
y luego, en la escena principal, pulsa el botón “crear actor” para crear un actor
de tipo “botón”:
UN EJEMPLO BREVE 91

y por último, cambia el código de este actor para que nos permita pasar a la
siguiente escena cuando se pulsa:
// @ts-ignore
class boton extends ActorTextoBase {
cuando_hace_click() {
this.pilas.cambiar_escena("escena2");
}
}
Si bien este ejemplo es muy simple, es un punto de partida para poder mantener
los datos del jugador durante toda su partida.
Te recomiendo mirar el proyecto “mantener-valores-entre-escenas” de la sección
“ejemplos” de pilas para que veas cómo se puede mejorar este mismo proyecto
que realizamos acá.
92 CÓDIGO DE PROYECTO
Eventos del mouse

En pilas llamamos “eventos” a las señales que emiten desde dispositivos como el
mouse o teclado. Por ejemplo, un “click” del mouse es un evento al igual que la
pulsación de una tecla.
Y lo interesante de los eventos es que podemos capturarlos y disparar alguna
acción dentro del juego para responder. Por ejemplo, en un juego de acción, el
“click” del mouse podría realizar una explosión o hacer que un personaje salte.

Antes de empezar, el caso más común

Si bien esta sección habla de eventos y cómo hacer uso por completo del mouse,
casi siempre se quiere saber la posición del mouse para mover actores o crear
objetos. Si ese es tu caso, te comentamos que pilas tiene 4 atributos para conocer
en qué posición se encuentra el cursor del mouse en todo momento:
• pilas.cursor_x: posición horizontal del mouse.
• pilas.cursor_y: posición vertical del mouse.
• pilas.cursor_x_absoluta: posición horizontal del mouse pero sin tener
en cuenta la posición de la cámara. La coordenada corresponderá a la
coordenada física de la ventana.
• pilas.cursor_y_absoluta: posición vertical del mouse pero sin tener en
cuenta la posición de la cámara.
Y estos atributos, se puede usar generalmente directamente desde la función
actualizar de los actores:
class actor extends Actor {
iniciar() {}

actualizar() {
// la sentencias a continuación hacen que el actor siga la
// posición del cursor del mouse en todo momento
this.x = this.pilas.cursor_x;
this.y = this.pilas.cursor_y;

93
94 EVENTOS DEL MOUSE

}
}

¿Cómo capturar un evento del mouse?

Para capturar un evento desde el mouse simplemente hay que declarar alguna
de estas funciones en el código:
• cuando_hace_click(x, y, evento_original)
• cuando_termina_de_hacer_click(x, y, evento_original)
• cuando_mueve(x, y, evento_original)
• cuando_sale(x, y, evento_original)
Estas funciones se pueden crear en el código de una escena o de un actor. La
diferencia es que en las escenas el “click” o el movimiento se van a detectar en
toda la pantalla, mientras que en el código del actor solo se detectarán si el
mouse apunta al actor.
Si desde un actor necesitas detectar el click del mouse en la pantalla deberías
usar este otro método:
• cuando_hace_click_en_la_pantalla(x, y, evento_original)
Veamos un ejemplo, imaginá que queremos crear actores de la clase “Pelota” cada
vez que el usuario hace “click” sobre la pantalla. Podríamos hacerlo colocando
este código en la escena:
class escena2 extends Escena {
iniciar() {}

actualizar() {}

cuando_mueve(x, y, evento_original) {}

cuando_hace_click(x, y, evento_original) {
let pelota = this.pilas.actores.pelota();
pelota.x = x;
pelota.y = y;
}
}

¿Cómo capturar eventos del mouse en un actor?

Para capturar eventos en el contexto de un actor, tenemos que usar las mismas
funciones, pero declarándolas dentro del código del actor.
¿CÓMO CAPTURAR EVENTOS DEL MOUSE EN UN ACTOR? 95

Por ejemplo, imaginá que estamos haciendo un juego de cartas y queremos que la
carta se pueda hacer girar con un “click” de mouse y que cambie de transparencia
cuando el mouse esté sobre ella:

El código del actor debería quedarnos algo similar a lo siguiente:

class actor extends Actor {
propiedades = {};

iniciar() {
this.transparencia = 50;
}

actualizar() {}

cuando_mueve(x, y, evento_original) {
this.escala = 1.2;
this.transparencia = 0;
}

cuando_sale(x, y, evento_original) {
this.transparencia = 50;
this.escala = 1;
}

cuando_hace_click(x, y, evento_original) {
this.rotacion = [360];
}

cuando_termina_de_hacer_click(x, y, evento_original) {}
96 EVENTOS DEL MOUSE

}
Los manejadores de eventos como cuando_mueve, cuando_sale y cuando_hace_click
van a ser llamados internamente cuando se produzcan esos eventos sobre el
actor.

Capturar eventos de forma global, con mane-

jadores
Otra forma de capturar eventos más sofisticada es utilizando el módulo eventos
de la escena.
pilas.eventos.conectar("mueve_mouse", (x, y) => {
console.log("mueve", x, y);
});

pilas.eventos.conectar("click_de_mouse", (x, y) => {

console.log("mueve", x, y);
});

pilas.eventos.conectar("termina_click", (x, y) => {

console.log("mueve", x, y);
});
Esta es la lista de eventos completa:
• mueve_mouse: x, y
• click_de_mouse: x, y, boton_izquierdo, boton_derecho
• termina_click: x, y, boton_izquierdo, boton_derecho
Uso del teclado

El teclado se puede utilizar de dos formas básicas: por consulta para mover
personajes o mediante eventos para responder a pulsaciones de teclas específicas:

Primer forma: ¿Cómo mover un personaje con el

teclado?

En la mayoría de los juegos para computadoras se puede controlar al protagonista

del juego usando el teclado.
Pilas hace bastante sencillo esto mediante un objeto llamado “control” que nos
va a permitir acceder a las teclas básicas para controlar personajes.
Por ejemplo, para mover un actor hacia izquierda y derecha usando las flechitas
del teclado podemos editar el método “actualizar” del actor y colocar estas lineas
de código:

actualizar() {
if (this.control.izquierda) {
this.x -= 5;
}

if (this.control.derecha) {
this.x += 5;
}
}
El objeto “control” tiene varios atributos que podemos consultar (mediante la
palabra “if”) para saber si en ese instante la tecla está pulsada o no.
Estas son otros atributos que tiene el objeto “control”:
Tecla | Código para consultar la tecla | nombre |
-||–|

97
98 USO DEL TECLADO

Flecha izquierda | this.control.izquierda | “izquierda” |

Flecha derecha | this.control.derecha | “derecha” |
Flecha arriba | this.control.arriba | “arriba” |
Flecha abajo | this.control.abajo | “abajo” |
Tecla Space | this.control.espacio | “espacio” |
Alt | this.control.alt | “alt” |
Control | this.control.control | “control” |
Shift | this.control.shift | “shift” |
Tab | this.control.tab | “tab” |
Backspace | this.control.backspace | “backspace” |
Meta | this.control.meta | “meta” |
Escape | this.control.escape | “escape” |
Enter | this.control.enter | “enter” |
Tecla a | this.control.tecla_a | “a” |
Tecla b | this.control.tecla_b | “b” |
Tecla c | this.control.tecla_c | “c” |
Tecla d | this.control.tecla_d | “d” |
Tecla e | this.control.tecla_e | “e” |
Tecla f | this.control.tecla_f | “f” |
Tecla g | this.control.tecla_g | “g” |
Tecla h | this.control.tecla_h | “h” |
Tecla i | this.control.tecla_i | “i” |
Tecla j | this.control.tecla_j | “j” |
Tecla k | this.control.tecla_k | “k” |
Tecla l | this.control.tecla_l | “l” |
Tecla m | this.control.tecla_m | “m” |
Tecla n | this.control.tecla_n | “n” |
Tecla ñ | this.control.tecla_ñ | “ñ” |
Tecla o | this.control.tecla_o | “o” |
Tecla p | this.control.tecla_p | “p” |
Tecla q | this.control.tecla_q | “q” |
Tecla r | this.control.tecla_r | “r” |
Tecla s | this.control.tecla_s | “s” |
Tecla t | this.control.tecla_t | “t” |
Tecla u | this.control.tecla_u | “u” |
Tecla v | this.control.tecla_v | “v” |
Tecla w | this.control.tecla_w | “w” |
Tecla x | this.control.tecla_x | “x” |
Tecla y | this.control.tecla_y | “y” |
Tecla z | this.control.tecla_z | “z” |
Tecla 1 | this.control.tecla_1 | “1” |
Tecla 2 | this.control.tecla_2 | “2” |
Tecla 3 | this.control.tecla_3 | “3” |
Tecla 4 | this.control.tecla_4 | “4” |
Tecla 5 | this.control.tecla_5 | “5” |
Tecla 6 | this.control.tecla_6 | “6” |
SEGUNDA FORMA: ¿CÓMO REACCIONAR A EVENTOS DEL TECLADO?99

Tecla 7 | this.control.tecla_7 | “7” |

Tecla 8 | this.control.tecla_8 | “8” |
Tecla 9 | this.control.tecla_9 | “9” |

Segunda forma: ¿Cómo reaccionar a eventos del

teclado?

Otra forma de acceder al teclado es mediante eventos, para ejecutar una función
justo cuando se pulsa una tecla o se suelta.

Esto es útil por ejemplo en los juegos por turnos o cuando queremos que el
teclado funcione sin repetición, imaginá que si hacemos un juego donde el jugador
pueda disparar, queremos que pulse y suelte la tecla de disparo muchas veces,
no que la deje pulsada y eso dispare automáticamente.

Para capturar eventos de teclado de esta forma tendrías que definir los métodos
cuando_pulsa_tecla y cuando_suelta_tecla así:

cuando_pulsa_tecla(tecla) {
if (tecla == "espacio") {
this.disparar();
}
}

cuando_suelta_tecla(tecla) {
if (tecla == "1") {
this.decir("Has soltado la tecla 1")
}
}

Estos métodos están disponibles tanto en las escenas como en los actores. Puedes
comprobarlo escribiendo “cuando” en el editor y viendo cómo se sugieren las
opciones:
100 USO DEL TECLADO
Dibujado simple en pantalla

En esta sección veremos como dibujar libremente, ya sean lineas, círculos, etc..

Comenzaremos con una forma de dibujado muy sencilla, existe un actor llamado
Pizarra que podemos colocar en una escena para dibujar figuras geométricas
sencillas.

Cuando se agrega el actor pizarra, vas a observar que soporta algunos métodos
para dibujar. Esta es una lista de los más utilizados:

Dibujar círculos

Para dibujar círculos tenemos una función que pinta el contenido de un círculo
en base a 4 parámetros:

• x: la posición horizontal del centro del círculo.

• y: la posición vertical del centro del círculo.
• radio: el radio del círculo.
• color: el color de relleno que tendrá el círculo.

Por ejemplo, esta llamada a la función generará un círculo en la posición x=100

y=0 con un radio de 40 píxeles y de color rojo:

this.dibujar_circulo(100, 0, 40, "rojo");

101
102 DIBUJADO SIMPLE EN PANTALLA

Opcionalmente, si quieres dibujar el contorno del círculo de otro color o con un

grosor en particular podrías llamar a esta función:
this.dibujar_borde_de_circulo(100, 0, 40, "negro", 2);

Los primeros 3 parámetros son idénticos al de la función anterior, corresponden

a los parámetros x, y y radio, mientras que el argumento que le sigue será el
color del borde y el último el grosor en píxeles.

Colores

En los ejemplos anteriores utilicé colores como “rojo”, “negro” y “verde”; sin
embargo esta no es la única forma de especificar colores. Los nombres de colores
son útiles y fáciles de recordar, pero no ofrecen mucha variedad.
Otra forma de definir colores con mucha flexibilidad es mediante la función
RECTÁNGULOS 103

pilas.colores.generar. Esta función genera un color “mezclando” tres com-

ponentes de color (rojo, verde y azúl).
Cada componente de color tienen que ser un número entre 0 y 255, por ejemplo:
let color_verde_oscuro = this.pilas.colores.generar(0, 100, 0);
let color_verde_claro = this.pilas.colores.generar(0, 200, 0);
A su vez, una vez que tenemos el color generado, podemos usarlo en las funciones
para dibujar. Por ejemplo, si queremos dibujar dos círculos con estos colores
podemos escribir lo siguiente:
this.dibujar_circulo(-50, 50, 40, color_verde_claro);
this.dibujar_circulo(+50, 50, 40, color_verde_oscuro);

Rectángulos

De forma similar a los círculos, también existen funciones para dibujar rectángulos
y bordes de rectángulos.
this.dibujar_rectangulo(0, 0, 120, 50, "naranja");
this.dibujar_borde_de_rectangulo(0, 0, 120, 50, "rojo", 5);
104 DIBUJADO SIMPLE EN PANTALLA

Los argumentos de estas funciones son: el punto de originen, en este caso x=0
y=0, luego el ancho y alto del rectángulo y por último el color.

Lineas

Para dibujar lineas, tenemos que especificar dos coordenadas, color y grosor de
la linea:
Por ejemplo, para dibujar una linea de color “verde” desde el punto (0, 0) al
punto (200, 100) podemos escribir:
this.dibujar_linea(0, 0, 200, 100, "verde", 10);

Animaciones

Si bien el actor pizarra pude moverse en pantalla, tener una figura física e incluso
ser utilizado como cualquier otro actor. También es posible usarlo para crear
animaciones cuadro a cuadro.
El actor Pizarra incluye una función llamada limpiar que si se combina con
funciones de dibujado se pueden hacer algunas animaciones simples.
Por ejemplo, si queremos dibujar una linea que señale la posición del mouse
constántemente podemos hacerlo así, usando la función actualizar:
actualizar() {
this.limpiar();
this.dibujar_linea(0, 0, this.pilas.cursor_x, this.pilas.cursor_y, "verde", 10);
}
ANIMACIONES 105
106 DIBUJADO SIMPLE EN PANTALLA
Cómo exportar juegos

El editor de pilas incluye la posibilidad de exportar proyectos completos para

ser utilizados sin el editor.

Para exportar un juego simplemente hay que pulsar el botón Exportar del editor:

A continuación se nos va a mostrar una pantalla de exportación, que demora

unos minutos ya que tiene que recopilar todos los recursos necesarios, y luego
obtendremos un archivo comprimido con el proyecto:

107
108 CÓMO EXPORTAR JUEGOS

Este archivo .zip aloja el proyecto completo, así que podemos utilizarlo para
punto de partida para llevar nuestro juego a otro lugar.

A continuación se muestran algunas alternativas de publicación:

¿Qué contiene el archivo exportado?

El archivo .zip se puede descomprimir fácilmente con las herramientas que vienen
instaladas en cualquier sistema operativo.

Una vez que se descomprime, vamos a observar un archivo de ayuda y una

carpeta llamada “proyecto” con todos los recursos de nuestro juego:
 109

Cómo ejecutar mi juego sin el editor

El primer paso es tener instalado Node.JS y acceso a un terminal para ejecutar

comandos.
Luego, se tiene que ingresar en el directorio “proyecto” y ejecutar el comando:
110 CÓMO EXPORTAR JUEGOS

npm install

Si todo va bien, deberíamos ver que el instalador de paquetes de node trabaja

unos segundos para descargar todo lo necesario para seguir trabajando:

A partir de este punto, vas a tener la posiblidad de hacer alguna de estas cosas:

Probar la aplicación en un servidor local

Para iniciar el juego directamente en un navegador podrías escribir este comando

en el mismo directorio “proyecto”:

npm start

A continuación se va a abrir el navegador y tu juego.

 111

Ten en cuenta que pilas no funciona directamente abriendo el archivo index.html

en un navegador, la razón por la que no puede andar directamente es porque
necesita cargar archivos mientras se inicializa usando ajax (algo que los nave-
gadores no pueden hacer si se inicializan abriendo un archivo .html de forma
directa).

Ejecutar tu juego en electron de forma offline

Otra opción es lanzar el juego como si se tratara de una aplicación dedicada, sin
necesidad de un navegador.

Para eso, tendrías que ejecutar este comando:

npm run electron

112 CÓMO EXPORTAR JUEGOS

Cómo crear versiones empaquetas para distribuir (.exe,

dmg etc)

Una opción muy solicitada a la hora de exportar juegos es poder hacerlos

completamente portables, y que la persona que recibe el juego no tenga que
instalar o configurar nada para jugar al juego, solamente hacer “doble click” en
un archivo y jugar.
Pilas permite hacer esto mediante la herramienta que mencionamos antes llamada
electron y una serie de scripts.
Tomemos el ejemplo más solicitado, hagamos que nuestro juego se pueda compilar
para windows y distribuirse como un archivo .exe. Lo que tenemos que hacer es
hacer doble click en los archivos:
• instalar_dependencias.bat
• generar_version_exe.bat
o bien, abrir el comando “cmd”, ingresar en el directorio del juego exportado y
ejecutar estos comandos:
npm install electron-packager --save-dev

node_modules/.bin/electron-packager . mijuego --platform=win32 --arch=ia32

 113

El comando demorará unos segundos, cuando termine aparecerá un mensaje

indicando que los archivos están listos:

En mi caso, los archivos se generaron en un directorio llamado “mijuego-win32-

ia32”. Ese directorio completo es el que se puede entregar a los usuarios de
windows para que puedan ejecutar el juego haciendo doble click en el archivo
.exe:

Si además de windows estás buscando llevar tu juego a otras plataformas como

gnu/linux, mac/osx o raspberry también hay un parámetro para lanzar la
compilación en todas las plataformas soportadas así:

node_modules/.bin/electron-packager . mijuego --all

114 CÓMO EXPORTAR JUEGOS

Hay varios parámetros más, pero para no extendernos mucho te dejamos la

documentación detallada de electron-packager
Por cierto, si quieres investigar exactamente qué hacen estos scripts podrías
profundizar tu investigación mirando la documentación de electron sobre dis-
tribución de binarios ya que se describe cada uno de los pasos de compilación de
forma manual.

Cómo ejecutar el juego en pantalla completa

Si empaquetas el juego con electron, como muestra la sección anterior, también

tienes la posibilidad de configurar la compilación para que funcione en modo
pantalla completa. Para eso tienes que editar el archivo index.js y colocar
true en la variable pantalla_completa:

Cómo llevar mi juego a celulares, tablets y tiendas oficiales

de apple o google

Pilas incluye una forma sencilla de probar juegos en celulares y tablets, si solo
quieres probar tus juegos te recomendamos mirar ahí primero.
Ahora bien, si en realidad lo que buscas es llevar tu juego de forma permanente
a un celular o tablet, ya sea para tí, amigos o para publicar en un tienda oficial,
lo que necesitas es instalar cordova, los SDK oficiales para tu tipo de dispositivo
(android o ios) y compilar tu juego por completo.
 115

npm install cordova -g

cordova create cordova

Luego, tendrías que mover todos los archivos del directorio “proyecto” (in-
dex.html, pilas-engine.js etc. . . ) dentro del directorio “cordova/www”.
Por último, tendrías que agregar la plataforma principal (android o ios) y luego
iniciar la compilación:
Por ejemplo, para ios:
cd cordova
cordova platform add ios
cordova build ios
y luego abrir el proyecto desde el directorio “platforms/ios” en xcode y ejecutar:

Y para android:
cd cordova
cordova platform add android
En este punto, asegúrate de haber movido todos los archivos del directo-
rio “proyecto” (index.html, pilas-engine.js etc. . . ) dentro del directorio “cor-
dova/www”.
Luego tienes que generar el proyecto para android con este comando:
cordova build android
116 CÓMO EXPORTAR JUEGOS

y luego abrir el proyecto del directorio “platforms/android” con Android Studio

y pulsar el botón ejecutar para lanzar el emulador:

O bien, abrí el menú “Build” y luego “Build APK(s)” o “Generate Signed APK”
para crear el un archivo .apk e instalarlo directamente en tu equipo o subirlo a
la tienda Play Store de Google.
Colaborar con Pilas Engine

Pilas Engine es un proyecto de Software Libre, que se desarrolla de forma

colaborativa por un equipo de varios colaboradores, personas del equipo de
desarrollo y la comunidad de usuarios.

Todas las personas que quieran participar del desarrollo son bienvenidas, Pilas
nos es solo una herramienta de software, es un proyecto colaborativo que sostiene
un equipo de personas amigables y respetuosas que buscan mejorar la calidad de
la educación brindándole a los Jóvenes la posibilidad de volverse protagonistas
en el uso de la tecnología.

Por ese motivo, queremos invitarte a participar. ¡Vos también podes formar
parte del equipo de Pilas!.

117
118 COLABORAR CON PILAS ENGINE

Te damos algunas ideas de participación que podrían interesante:

Participar en el foro de Pilas Engine

La tarea mas recomendable para quienes recién comienzan es dar de alta una
cuenta en nuestro foro (http://foro.pilas-engine.com.ar), presentarse y ayudarnos
a resolver preguntas de otros usuarios.
No hace falta experiencia previa para colaborar en el foro, podes ingresar, saludar
y contarnos qué te parece Pilas, cómo lo conociste; vas a notar que el foro es el
lugar ideal para aportar ideas, conversar, y publicar juegos.

Ayudar a difundir Pilas

Muchas personas no conocen Pilas, y creemos que podría interesarles. Así que
otra forma de colaborar es difundir la existencia de Pilas entre las personas que
conoces.
Además, si conoces escuelas o proyectos donde se utilice Pilas dales ánimo
para que nos cuenten sus proyectos, queremos ayudar y mejorar Pilas con cada
posibilidad que se nos presente.
También es super útil si tienes la posibilidad de mencionar Pilas las redes sociales:
twitter, facebook, youtube o ¡donde quieras!

Creá juegos, cursos o tutoriales

Necesitamos tutoriales, juegos y cursos sobre Pilas Engine.
Si estás haciendo un juego con Pilas, contanos de qué se trata; puedes es-
cribirnos directamente desde el foro de mensajes de la web (http://foro.pilas-
engine.com.ar).
Si te gusta enseñar y contar tus experiencias con la herramienta, te invitamos a
escribir y proponer cursos dentro del foro; además, en la web tenemos una sección
en donde podemos publicar artículos, así que seguramente también podamos
ayudarte a subirlos ahí. # Pilas como biblioteca externa
Pilas se puede usar como una biblioteca externa para permitir un uso avanzado
y muy personalizado de pilas.
Esta opción es ideal si quieres poner tu juego en blogs, fotos o incluso en
dispositivos móviles como tablets o celulares con herramientas como cordova o
phonegap.
CREÁ JUEGOS, CURSOS O TUTORIALES 119

El primer paso para incorporar pilas como biblioteca es descargar los archivos
javascript phaser, nineslice y pilas-engine del directorio public de nuestro
repositorio y colocarlos en un directorio local:
• https://github.com/pilas-engine/pilas-engine/tree/master/public
Luego, deberías agregar en ese mismo directorio los archivos “ima-
genes/sin_imagen.png” y el directorio “fuentes” que también aparencen
en el link anterior.
Por último, deberías crear un archivo index.html con la estructura inicial que
necesita pilas.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />

<script src="archivo phaser js"></script>

<script src="archivo nineslice js"></script>
<script src="archivo pilas-engine js"></script>
</head>

<body>
<script>
var pilas = pilasengine.iniciar(600, 600);

pilas.onready = function() {
let actor = pilas.actores.actor();
};
</script>
</body>
</html>
Este archivo index.html se tiene que cargar en un navegador usando un web-
server y no directamente abriendo el archivo index.html. Esto se tiene que
hacer debido a que pilas (y phaser) usan ajax para cargar imágenes y otros
recursos.
Adicionalmente, si tu juego utiliza recursos propios, u otros actores de pilas, te
recomendamos ver este otro ejemplo en donde se cargan varios recursos:
• https://github.com/pilas-engine/pilas-engine/blob/feature/adaptar-para-
ser-usada-como-biblioteca/public/ejemplo-minimo-con-recursos.html
Vas a notar que la diferencia más grande de este otro ejemplo es que usamos
un parámetro para especificar la lista de recursos a cargar y opcionalmente
enumeramos los detalles del proyecto.
120 COLABORAR CON PILAS ENGINE
Entorno para colaboradores
de Pilas

Si sos desarrollador y queres replicar el entorno completo para editar el código

de Pilas te recomendamos una serie de pasos para tener un entorno completo de
desarrollo.
Ten en cuenta que si bien esta es una sección muy avanzada del manual de
Pilas, cualquier duda que te surja al respecto podes realizarla en el foro de Pilas
(http://foro.pilas-engine.com.ar/) para que podemos mejorar el manual.

¿Qué software se utiliza internamente en Pilas?

Para realizar Pilas usamos principalmente Javascript junto a varios Frameworks

y utilidades. Las más importantes son:
• Phaser: Es la biblioteca multimedia que utilizamos para dibujar el espacio
de juego de pilas, Phaser nos permite cargar imágenes, dibujarlas en
pantalla, reproducir sonidos, detectar colisiones, realizar simulaciones
físicas etc. . .
• ember-js: Es el framework web que utilizamos para crear la estructura
visual y de interacción de la aplicación; incluye componentes, rutas, con-
troladores y complementos. Ember también nos permite empaquetar toda
la aplicación y publicarla en la web.
• Typescript: Lo utilizamos para el código fuente del motor Pilas. El motor
de Pilas es el encargado de declarar todos los actores existentes, es donde
vive la estructura de escenas, y donde se encapsulan todas las llamadas a
Phaser.
• gitbook: Es la herramienta que usamos para componer el manual de pilas.
Básicamente gittbok convierte archivos markdown en archivos .html que
se pueden abrir desde la aplicación y la web.
• electron: Sirve para empaquetar la aplicación web completa y distribuirla
en formato binario, como un ejecutable que se puede usar de forma offline.

121
122 ENTORNO PARA COLABORADORES DE PILAS

Estructura de directorios

Estos son los archivos principales del repositorio y qué función cumplen:
Directorio | ¿Qué función cumple? |
-||
api_docs | Almacena el resultado de la documentación automática. Si ejecutás
“make api” vas a ver cómo se recorre el código de Pilas y se genera esta docu-
mentación. |
app | Es un directorio importante, aquí está todo el código fuente de la aplicación
realizado con Ember. Dentro están las plantillas, los controladores, componentes
y rutas. Más adelante en este tutorial damos detalles sobre cómo editar los
archivos de este directorio. Pero a grandes razgos, con “make ejecutar” o “make
compilar” se puede invocar a Ember para que convierta todo ese directorio en
una aplicación web. |
manual | Contiene todo el manual de Pilas en formato markdown. Podes editar
el contenido con cualquier editor de textos, y para convertirlo en html y que se
vea dentro de la aplicación deberías ejecutar el comando “make pilas_manual”. |
pilas-engine | Contiene el código fuente del motor de pilas. El código está
diseñado usando typescript, por ese motivo para compilarlo hay que ejecutar el
comando “make compilar_pilas” o “make compilar_pilas_live” para hacerlo de
forma continua. |
public | Almacena todos los archivos que se deben servir desde la aplicación
emberjs sin procesar. Por ejemplo imágenes, fuentes y sonidos. Pero además,
este directorio también se actualiza desde otros comandos. Por ejemplo, cuando
compilamos el código del directorio pilas-engine con el comando “make compi-
lar_pilas”, el archivo generado se copia a este directorio “public”. |
tests | Almacena todos los tests de unidad, integración y aceptación. Estos tests
se ejecutan cuando se invoca el comando “make test” o cuando se ejecuta “make
ejecutar” y luego se ingresa a http://localhost:4200/tests. Además, se ejecutan
en remoto cada vez que se hace un push al repositorio. Más adelante en este
documento se describe cómo funcionan los tests en la estructura del proyecto. |

Repositorio y modelo de trabajo

Antes de iniciar, necesitas tener instalado NodeJS 8 y el gestor de paquetes
“yarn”.
Si quieres asegurarte de tener todo correctamente instalado escribí los siguientes
comandos:
npm install -g yarn
node -v
El código completo de Pilas está almacenado en Github dentro del siguiente
repositorio:
REPOSITORIO Y MODELO DE TRABAJO 123

• https://github.com/pilas-engine/pilas-engine

Te recomendamos iniciar un fork del repositorio antes de continuar,

hay instrucciones sobre cómo realizar un fork del repositorio aquí:
https://help.github.com/articles/fork-a-repo/

Una vez que tengas realizado el fork, cloná el repositorio con estos comandos e
instalá las dependencias del proyecto:

make iniciar

Deberías ver cómo se van instalando todas las dependencias dentro del directorio
“node_modules”. Esto puede demorar varios minutos:

Una vez finalizada la instalación de dependencias podes ejecutar el comando

“make”. Cuando lo escribas, van a aparecer en pantalla todos los atajos que
usamos dentro del proyecto:
124 ENTORNO PARA COLABORADORES DE PILAS

Obviamente en la mayoría de los casos usamos solo algunos comandos, pero

siempre vamos a mantener actualizado este listado para simplificar el desarrollo.

Para poner en funcionamiento el servidor de Ember podes ejecutar este comando:

make ejecutar

y luego abrí esta dirección en el navegador: http://localhost:4200

ESTILO DE PROGRAMACIÓN 125

Ten en cuenta que el servidor de Ember va a estar en ejecución; cada vez que
modifiques un archivo del código de la aplicación Ember se va a encargar de
actualizar el navegador automáticamente.

Estilo de programación

Te recomendamos escribir el código en español siempre que sea posible, y aquellas

variables o métodos que tienen varias palabras intentaremos escribirlas como
“nombre_del_metodo” en lugar de “nombreDelMetodo”.
Además, es muy importante que tengas configurado tu editor para usar automáti-
camente prettier (https://prettier.io/).

Tests

El proyecto incluye tests que intentamos llevar de la mano con cada característica
que agregamos a la herramienta. Los tests se almacenan en el directorio “tests”
y cada uno de ellos está diseñado para encargarse del funcionamiento de una
característica de la herramienta.
126 ENTORNO PARA COLABORADORES DE PILAS

Por ejemplo, el archivo tests/acceptance/puede-ingresar-al-editor-test.js

se encarga de simular el comportamiento de un usuario que ingresa en la
aplicación y comienza a interactuar con la interfaz.

Cada sentencia del archivo intenta simular una acción del usuario y viene
acompañada de alguna validación:

De esta forma, tenemos la seguridad de que podemos validar el funcionamiento

de toda la herramienta de forma automatizada. Nos permite detectar errores y
darnos confianza para re-estructurar o mejorar partes internas de la aplicación
sabiendo qué funcionalidad podría comprometer.

Si ejecutas el comando “make ejecutar”, y abrís la aplicación con un navegador

desde “http://localhost:4200”, también vas a poder ejecutar los tests directamente
en el navegador.

Tendrías que ingresar a la dirección “http://localhost:4200/tests”:

AUTOMATIZACIÓN E INTEGRACIÓN CONTÍNUA 127

En la imagen marqué dos opciones que me parecen útiles para todas las personas,
la primera evita que la pantalla se llene con detalles de tests que corren bien y la
segunda es simplemente estética: sirve para ver cómo se ven los tests visualmente
al costado de la pantalla.

Automatización e integración contínua

Hay varias tareas que se realizan de forma automática cada vez que realizamos
un push al repositorio.

Por ejemplo, cada vez que se ejecuta un push sobre github, un servicio llamado
“circle-ci” se encarga de correr todos los tests del proyecto desde cero.

Este servicio no solo ejecuta los tests, sino que nos avisa por email si alguna de
las pruebas falló o si alguna fase de la instalación tuvo problemas. Además nos
genera un listado histórico para corroborar si un cambio introduce algún tipo de
error:
128 ENTORNO PARA COLABORADORES DE PILAS

También usamos “circle-ci” cada vez que hacemos un lanzamiento estable de la

herramienta para que se generen los binarios y las versiones web de la aplicación.

La forma que utilizamos para marcar que Pilas se puede publicar es realizando
un tag. Los tags los va a detectar circle CI para generar binarios y subir una
versión actualizada de la aplicación a la web.
AUTOMATIZACIÓN E INTEGRACIÓN CONTÍNUA 129

Por
ejemplo, en la imagen se ve el tag de la versión v2.0.25. Cuando eso sucedió,
“circle-ci” generó estos archivos para que esa versión de pilas esté compilada y
disponible para descargar desde aquí:
130 ENTORNO PARA COLABORADORES DE PILAS

Si bien estos pasos son automáticos, todo el detalle de lo que se debe ejecutar
está en el archivo .circleci/config.yml.