Usando Pilas Engine 2 como Biblioteca en vsCode
Pilas como Biblioteca
En esta ocasión vamos a crear un pequeño ejemplo mínimo usando Pilas Engine 2 como biblioteca en lugar del editor.
Específicamente, aprenderemos a ocnfigurar VSCode para poder usar la biblioteca de Pilas.
¿Qué es Pilas Engine?
Pilas Engine es un motor de videojuegos cuya particularidad es que la mayoría del código está en español. Mientras motores como Godot tienen funciones llamadas move_and_slide(), en Pilas la misma función sería mover_y_deslizar(). Parece una tontería, pero cuando estás aprendiendo a programar, usar nombres en español ayuda muchísimo.
Aunque este motor de videojuegos viene en forma de un editor (link), que es bastante completo, gratis, online y funciona bien para la mayoría de juegos simples; en esta ocasión vamos a aprender a usar la biblioteca.
¿Por qué? Porque el editor fue creado con el objetivo de aprender y enseñar a programar, por ello es que tiene ciertas limitaciones a fines de mantener esa simplicidad.
Decargando la biblioteca de Pilas
La biblioteca la obtenemos desde el repostitorio oficial de pilas.
Podemos acceder desde la página principal:
Tenemos que clicar en donde dice "más opciones de descargas".
Entre las varias opciones, descargaremos la que se llama version-minima.zip. Luego lo descomprimimos y obtenemos un ejemplo mínimo de cómo usar Pilas.
Configurando VSCode
Descarga e instalación
Visual Studio Code es uno de los tantos editores de código, es gratuito y podemos descargarlo desde aquí:
https://code.visualstudio.com/
https://code.visualstudio.com/
Una vez descargado e instalado, vamos a la pestaña de extensiones (barra lateral izquierda):
Allí buscamos "Spanish Language Pack for Visual Studio Code" para ponerlo en español y el "JavaScript (ES6) code snippets" para tener un autocompletado inteligente para programar en javascript.
Seguramente haya otros complementos que funciones igual de bien o mejor, pero yo tengo estos dos y son suficientes.
La última extensión que necesitamos es para crear un servidor local a partir de un html. Hay varios, pero yo uso: "Live Server".
Configurando el entorno
Una vez que tenemos las extensiones, vamos a archivo --> abrir carpeta. Esto abre el explorar de archivos y seleccionamos la carpeta que descomprimimos antes con la versión mínima.
Clicamos en confiar, ya que uno de los aspectos que bloquea la protección es el servidor local que necesitamos para probar nuestro juego.
Con esto hemos finalizado de configurar vsCode para programar juegos mediante la biblioteca de Pilas.
Probando el ejemplo mínimo
Si lo hicimos bien, deberíamos poder entrar al archivo "ejemplo minimo.html":
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="phaser.js"></script>
<script src="nineslice.js"></script>
<script src="pilas-engine.js"></script>
<style media="screen">
body {
margin: 0;
background-color: gray;
}
</style>
</head>
<body>
<script>
var opciones = {
maximizar: true,
pixelart: false,
}
var recursos = {
sonidos: [],
huesos: [],
}
var imagenes = [
{
nombre: "logo",
ruta: "logo.png",
},
{
nombre: "fondo",
ruta: "fondo.png"
}
];
var pilas = pilasengine.iniciar(500, 500, recursos, opciones, imagenes, true);
pilas.onready = function() {
let logo = pilas.actores.actor_basico("logo");
logo.transparencia = 100;
logo.animar().
mostrar().
mover_hasta(0, 50);
};
</script>
</body>
</html>
También deberíamos ver un botón en la parte inferior derecha del vsCode llamado "go live":
Al clicar sobre él, estamos iniciando un servidor local que nos permite ejecutar el juego "ejemplo minimo.html".
Nos debería abrir una pestaña del navegador web por defecto que tengamos:
Esto significa que hemos configurado todo correctamente y ya podemos programar nuestro videojuego usando la bilbioteca de Pilas.
En la siguiente entrada del vlog vamos a analizar un ejemplo más complejo que le pedí al creador de Pilas hace años:
Link al foro de Pilas
Link al foro de Pilas
Comentarios
Publicar un comentario