RPG JS: Un framework Javascript para crear juegos RPG

RPG JS es un framework Javascript para crear videojuegos al estilo RPG Maker pero utilizando javascript. Los juegos creados son compatibles con la mayoría de navegadores modernos.

Características

  • Es Libre y Open Source
  • La documentación es bastante amplia
  • 100% HTML5 y Javascript
  • Se puede utilizar de manera comercial
  • Importar mapas y eventos creados en RPG Maker XP
  • 100 animaciones predefinidas (las mismas que RPG Maker XP)

Compatible con

compatibilidad

En la pagina oficial podemos encontrar un ejemplo que es muy bueno http://rpgjs.com/examples/ el cual demuestra el funcionamiento de este framework. Si deseas descargarlo es posible encontrarlo en GitHub: https://github.com/RSamaium/RPG-JS

¿Como empezar a utilizarlo?

Requerimientos que utilice

  • Servidor web Apache (Yo utilice wamp server)
  • RPG Maker XP
  • Editor de texto

Para utilizar este Framework comenzaremos con descargarlo desde el sitio en github en mi caso descargue la Beta 2 version que muestran en el sitio web y la coloque en una carpeta en mi servidor web apache. quedando de esta manera:

rpgjsdemo1

En la carpeta example están los archivos necesarios para que el juego funcione así que moveremos el contenido que esta ahí a la carpeta principal quedando de esta manera:

rpgjsdemo2

Si revisamos el archivo Index.html veremos que la estructura es la siguiente:

<!DOCTYPE html>
<html>
 <head>
 <title>Example</title>
 <script src="rpg-beta-2.js"></script> 
 <script>
 var rpg;
 RPGJS.load(function() {
 rpg = new Rpg("canvas_rpg");
 rpg.loadMap('MAP001', {
 tileset: '023-FarmVillage01.png',
 player: {
 x: 26, 
 y: 18, 
 filename: '001-Fighter01.png'
 }
 }, function () { 
 rpg.setScreenIn("Player"); 
 });
 }); 
 </script> 
 </head>
 <body>
 <canvas id="canvas_rpg" width="640px" height="480px"></canvas> 
 </body>
</html>

ahora probamos el juego en el navegador y debería funcionar correctamente de la siguiente manera:

rpgjsdemo3

para movernos se emplean las teclas direccionales y para la interacción con los eventos es la tecla A o la tecla Enter.

Como crear nuestros propios mapas

Los mapas de RPG JS se ubican en la carpeta Data\Maps. La estructura de los mapas que utiliza RPG JS es mediante cadenas Json similar a la siguiente:

rpgjsdemo4

por lo que crear un mapa manualmente seria complicado, para solucionar esto se emplea RPG Maker XP. Tiene que ser esta versión y no otras como RPG Maker ACE, puesto que el script de exportación funciona solo aquí. Entonces para crear el mapa Iniciamos RPG Maker XP y creamos un nuevo proyecto.

rpgjsdemo5

Ahora procedemos a crear nuestro escenario

rpgjsdemo6

Una vez que tenemos esto nos vamos a herramientas, editor de scripts o presionamos el icono iconoscript y busca en el script Main

rpgjsdemo7

 

y en la primera línea pegamos el código que encontramos en RPGJSDemo\rmxp\convertToJs_v2.rb  en la carpeta de RPG JS y nos quedara algo así:

rpgjsdemo8

 

Ahora Iniciamos el juego

rpgjsdemo9

 

Una vez dentro presionamos F8 para ejecutar el script y aparecerá el siguiente menú. Presionamos exportar para guardar el mapa.

rpgjsdemo10

 

El Mapa generado se encuentra en la carpeta RpgJs/Data/Maps del proyecto en RPG Maker Xp, ahora copiamos ese mapa a la carpeta Data\Maps de nuestro proyecto en RPG JS. Tambien debemos asegurarnos de exportar el Tileset de nuestro mapa. Los Tilesets los encontramos en gestor de archivos de RPG Maker como en la Imagen.

rpgjsdemo11

los exportamos y los guardamos en la carpeta Graphics\Tilesets donde esta el proyecto de RPG JS. Ahora modificamos un poco el código de nuestro index.html

rpgjsdemo12

y probamos de nuevo el juego en el Navegador y de esta manera hemos creado nuestro mapa correctamente.

rpgjsdemo13

 

Para mayor información consultar el sitio web oficial del proyecto http://rpgjs.com/

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s