Comenzando en Pilas Engine 2
Este tutorial lo presento como una alternativa al que brinda el propio manual de pilas.
Aquí veremos como comenzar a utilizar este magnífico y sencillo motor de videojuegos. Lo haremos creando un pequeño jueguito, pero antes veamos como es la interfaz de pilas.
Una vez descargamos pilas o abrimos su version online nos encontramos con 4 botones: Abrir el editor, Abrir el manual, Explorar ejemplos y Acerca de pilas. Hacemos click en abrir el editor. Nos aparecerá lo siguiente:
En pilas engine, todo juego está constituido por actores y escenas, como una obra de teatro. Las escenas contienen actores y los actores son los que nosotros podemos configurar para que hagan ciertas cosas como, por ejemplo, controlar su movimiento con el teclado, que al hacer click sobre ellos desaparezcan o que persigan a otros actores, etc.
Los actores que se crean aparecerán en la pantalla del centro, llamada área del editor (en verde), esta pantalla será lo que el jugador verá cuando esté en nuestro juego. Aquí podemos hacer click en ejecutar, arriba a la izquierda, y el juego comenzará a andar:
Vemos que la caja y la pelota se caen, como si hubiera gravedad. Vamos a quitarla, seleccionemos la escena1 desde el panel de actores y propiedades (En rojo). Cuando hacemos esto, ya sea con un actor o una escena, en el recuadro de abajo (En amarillo) aparecerán las propiedades del mismo.
Busquemos donde dice gravedad y pongamos ambos valores en 0. Démosle a ejecutar y veremos que ya nada se cae. Luego volvamos a poner la gravedad de Y en 1.
Un primer jueguito
El jueguito que crearemos será uno de plataformas bien simple: un conejo que salte de una plataforma a otra y termine el juego si cae.
Primero vamos a eliminar a los actores que vienen por defecto, para hacerlo los seleccionamos haciendo click sobre ellos en el área del editor y apretamos X. Eliminemos también el suelo (barra negra debajo de todo) y el techo (barra negra de arriba).
Cambiemos la imagen de fondo por otra. Para ello buscamos entre las propiedades de la escena "escena1" donde dice apariencia, nos abrirá una ventana donde están varios fondos que trae pilas por defecto y un botón que dice importar.
Para importar nuestra propia imagen deberemos antes llamarla "fondo-un_nombre" de lo contrario pilas no permitirá que la pongamos de fondo, prueben poner la siguiente imagen:
Al clickear sobre importar nos abrirá el explorador de archivos para que busquemos nuestra imagen y la carguemos a pilas.
Ya tenemos el fondo, creemos ahora al conejo. Clickemos el botón crear actor en el editor de propiedades y actores, se abrirá una ventana que trae todos los tipos de actores que pilas admite.
Seleccionemos el actor "actor" que no tiene imagen. Al igual que con las escenas, los actores tienen propiedades y al seleccionar uno, estas estarán en el panel inferior izquierdo.
En nombre y etiqueta pongamos conejo, y cambiemos la imagen. Pilas trae varias imágenes y también podemos cargar nuestras propias imágenes de la misma forma que lo hicimos con la escena "Juego". Pongamos la imagen de conejo_parado, que viene por defecto. Debería quedarnos así:
Para poder mover al conejo lo seleccionamos y abrimos el panel de la derecha que dice código:
El código está escrito en el lenguaje de programación Javascript y por defecto nos trae dos funciones:
- inciar(): esta función se llama o invoca (así se dice cuando se ejecuta) una sola vez ni bien el actor entra en juego. Las instrucciones que pongamos aquí se ejecutan una sola vez.
- actualizar(): se llama o invoca 30 o 60 veces por segundos, aquí es donde pondremos las instruciones para mover al conejo. Las instrucciones que pongamos aquí se ejecutan 30 o 60 veces por segundo.
No hace falta saber programación para hacer juegos en pilas, así que si no saben Javascript no importa realmente (yo tampoco sé más que los básico).
Pilas nos trae recetas para facilitar la escritura de código, seleccionemos la receta de controlar el movimiento. Esto creará el código necesario para que al apretar la tecla flecha izquierda el conejo se mueva hacia a la izquierda:
Es posible que al crear la receta algunas partes se hayan subrayado de rojo, esta es la forma en que pilas nos dice que hay errores en el código. En este caso sucede que la receta volvió a escribir la función actualizar(), para arreglarlo hay que borrar la primera función actualizar() que está vacía. El código debería quedar así:
Si ahora clickamos a ejecutar en el área del editor veremos que el conejo no se cae y podemos moverlo. La razón por la que no se cae es porque aún no le dijimos a pilas como será la física de este actor.
Seleccionemos al conejo y en sus propiedades busquen Simulación física, configurenlo teniendo en cuenta lo siguiente:
- Figura: será la caja de colisión (o hit box) del actor, para pilas el actor es esta figura y medirá los choques e interacciones usando esta caja que le asignemos.
- Ancho y alto: Determinan las dimensiones de una caja de colisión rectangular.
- Radio: Determina la dimensión de una caja de colisión circular.
- Rebota: Si hay gravedad, determina como rebotan las figuras entre si.
- Dinámica: Si esta activo, le afecta la gravedad. También afecta a otras cosas, pero de momento no importan.
- Sin rotación: Si esta activa, hace que las colisiones no giren al actor.
- Sensor: No está muy clara su utilidad, sólo que si está activa la figura va a traspasar a otras en vez de empujarlas.
- Sensores: Se podría decir que permite crear cajas de colisión extra, no lo usaremos de momento.
- Rayo: Permite predecir colisiones, no lo usaremos de momento.
Pasemos ahora a crear las plataformas. Para ello creamos el actor plataforma y desde el área del editor lo movemos hasta debajo del conejo. Creemos también otra plataforma duplicando la ya existente, al duplicar un actor también se duplica su código por eso a veces es útil duplicar en vez de volver a crear.
Ya casi tenemos el jueguito hecho, faltaría agregar que si nos caemos el juego se reinicie.
Haremos esto desde el código del conejo, pero antes debemos crear al actor suelo y cambiarle el nombre y etiqueta por suelo.
Ahora vayamos al código del conejo, seleccionando al conejo y abriendo el panel de código, y usemos la receta de cuando colisiona eliminar al otro actor, esto nos agregará el siguiente código:
La función se invoca cuando comienza una colisión con otro actor (luego veremos qué es lo que está en verde) y para referirse en el código al actor con el que se choca, se usa el término otro_actor. Entonces al colisionar la función elimina al actor con el que se choque.
Esto haría que si tocamos la plataforma o el suelo, estos se eliminen y no es lo que buscamos, así que borremos la parte que dice otro_actor.eliminar();.
Queremos que si el conejo toca el suelo el juego se reinicie. Para ello primero debemos detectar cuando choquemos con el suelo usando lo siguiente:
Esto es lo que se llama el condicional if. Brevemente, un if tiene la siguiente estructura:
if (condición) {
código a ejecutar si la condición es verdadera
}Nosotros de condición pusimos que el otro_actor tenga de etiqueta suelo, si esto es verdad entonces se ejecuta el código que reinicia la escena y si no es verdad pilas saltea el código entre llaves. Agreguemos este código a nuestra función cuando_comienza_una_colision(). Debería quedarnos el código completo del conejo así:
Con esto ya tendríamos un mini jueguito de plataformas. Si clickamos ejecutar ya podríamos pasar de una plataforma a otra y perderiamos si caemos al suelo. O eso creíamos, porque somos incapaces de saltar entre plataformas. Para arreglar esto debemos "agregarle" más fuerza cuando vayamos hacia arriba, cambiemos el código de cuando apretamos la flecha hacia arriba:
Esto hace que cuando apretemos la tecla arriba, la posición en Y del actor aumente tanto como indica la variable velocidad, en este caso 5, y le sume además 4.
Ya casi tenemos el jueguito, falta agregarle animaciones. Hay varias maneras, pero usaremos la más simple y bonita: "ataremos" la animación con las teclas de movimiento. Para ello nos vamos al código del conejo y modificamos las instrucciones que indican qué pasa cuando se pulsa una tecla.
Miremos el siguiente código:
Esto nos dice que si se pulsa la tecla izquierda, a la posición en X del actor se le restará la variable velocidad. Podemos hacer que sucedan más cosas al pulsar la tecla izquierda, como que se reproduzca una animación:
Hagamos lo mismo para cada vez que pulsemos las teclas de movimiento, es decir, agreguemos a cada if la instruccion this.animacion = "conejo_camina".
La otra animación que deberíamos agregar es para cuando estemsos quieto: this.animacion = "conejo_parado". Pilas no tiene una forma de detectar cuando quietos, entonces la forma de reproducir esta última animación es hacer que pilas se fije cuando NO estamos pulsando las teclas de movimiento:
El símbolo && es el operador lógico "y", y el signo ! es el operador lógico negativo. Todo lo que está entre paréntesis en el condicional if debe ir en un mismo renglón, sucede que aquí no me cabía.
Estas animaciones ya vienen cargadas en pilas engine, por eso podemos usarlas, sino habría que cargar nuestras propias animaciones.
Aquí está el archivo del jueguito que creamos. Y por su tienen ganas de aprender mas, aquí les dejó un video de Hugo Ruscitti donde enseña a crear un juego de plataformas mucho más completo y pulido.
¡Gracias por leer!
Comentarios
Publicar un comentario