Framework para desarrollo de juegos

Lo primero que debo decir es que detesto los Frameworks. El grueso de las personas que usan diferentes frameworks para desarrollar aplicaciones tienden a usar una ínfima parte de los mismos, pero en muchos casos, estos frameworks son grandes y lentos, ya que están repletos de condiciones para asegurar que, aquel que usa más de una ínfima parte, pueda usarlo completo.

Un caso por más que desparramado en las Webs es el de JQuery. No me odien, pero en muchos casos se usa JQuery para hacer esto:

var valor = $(“#miSpan”).val();

Vamos, todo un framework para no hacer esto:

var valor = document.getElementById(“miSpan”).innerHTML;

Simplemente es un absurdo. Y a esto sumamos desde los simples hide() y show(), o cualquier otra cuestión que se puede hacer con el mismo JavaScript en un par de líneas o en la misma cantidad de líneas sin toda la sobrecarga interna del framework. Y esto no pasa solo en la Web, eso está más que claro, pasa en código hecho en C#, como en cualquier otro lenguaje de programación. Como ya comenté antes, el costo de la infraestructura suele ser mayor que el de la funcionalidad. Pero, como también he dicho, el problema muchas veces está en el uso por el uso mismo y no en base a un planteo real sobre la solución a un problema. Por supuesto, no estoy diciendo que dejemos de usar los frameworks como JQuery porque somos guapos y queremos hacer todo por nuestra cuenta. Solo que a veces es mejor hacer una sola línea que importar miles para escribir una sola línea.

Entonces, dicho lo anterior, les presento MI framewok. En este caso, de desarrollo de video juegos con Javascript y HTML5. Y no vengo a ofrecer nada revolucionario y tampoco pretendo que dejen todo y corran a usarlo, ya existen cientos de frameworks para esto. La diferencia principal, o lo que a mi me interesa, es que no tenga líneas y líneas de sobre funcionalidad que nadie usará. Este framework es uno que ha ido evolucionando en base a las diferentes Game Jams en las que he participado, así como en los cursos que he dado sobre la temática, solo que ahora, e intentado hacerlo más al estilo Javascript, y más como a mi me gustaría que quedase.

Una aclaración adicional es que sigue en proceso de creación, y seguirá en proceso mientras piense que no afecte la performance del mismo. Con esto quiero decir que, en este framework, no verán funciones de física, ni raros efectos especiales, ni de intersección de objetos (Tal vez más adelante), ya que para eso existen estoy frameworks muy sólidos, como Box2D.

Por lo tanto, este framework es para aquel que necesite iniciar un juego y no quiera perder el tiempo en definir propiedades o funcionalidad que determine el bucle principal, o que maneje los recursos del juego (Gráficos, sonidos, etc.) o necesite poner en diferentes capas los diferentes elementos.

Como pueden ver, algo muy simple. Pero veamos un ejemplo.

jsGFwk.createObject({
id: “ball”,
x: 10,
y: 10,
zOrder: 2,
visible: true,
update: function(delta) {
this.x++;

if (this.x == 100) {
this.visible = false;
}

if (this.x == 300) {
this.visible = true;
}
},
draw: function (context) {
context.fillStyle = “rgb(255,255,255)”;
context.fillRect(this.x,this.y,10,10);
}
});

El ejemplo anterior lo que permite es dibujar un cuadrado que se moverá en el eje X y al llegar a los 100 píxeles, desaparece de la pantalla, para volver a aparecer a los 300 píxeles.

Otro ejemplo.

jsGFwk.createObject({
id: “ball”,
x: 10,
y: 10,
zOrder: 2,
visible: true,
update: function(delta) {
this.x++;

if (this.x == 100) {
this.destroy();
}
},
draw: function (context) {
context.fillStyle = “rgb(255,255,255)”;
context.fillRect(this.x,this.y,10,10);
}
});

En este caso, cuando el cuadrado llega a los 100 píxeles, es destruído y quitado de la colección de objetos a mostrar por el framework. En este caso, el objeto no se oculta, simplemente deja de existir.

Uno más.

jsGFwk.createObject({
id: “ball”,
x: 10,
y: 10,
zOrder: 2,
visible: true,
update: function(delta) {
this.x++;

if (this.x == 100) {
jsGFwk.sort();
}
},
draw: function (context) {
context.fillStyle = “rgb(255,255,255)”;
context.fillRect(this.x,this.y,10,10);
}
});

jsGFwk.createObject({
id: “ball2”,
x: 10,
y: 15,
zOrder: 1,
visible: true,
update: function(delta) {
this.x++;
},
draw: function (context) {
context.fillStyle = “rgb(255,255,0)”;
context.fillRect(this.x,this.y,10,10);
}
});

Teniendo dos objetos, los que contienen la propiedad zOrder, el primero, cuando llega a los 100 píxeles, re ordena todos los elementos, por lo que el primero pasará a estar por arriba del segundo.

Existen otras posibilidades dentro de este framework en construcción, y los ejemplos pueden ser encontrados en GitHub, en la siguiente dirección: https://github.com/MatiasIac/jsGFwk

Si tienes sugerencias, ideas o quieres colaborar, soy todo orejas.


5 comentarios on “Framework para desarrollo de juegos”

  1. sebasoftOFT! dice:

    Es un buen punto de inicio, y (citando el odiado caso de jQuery) podes agregar plugins al proto del framework para el que quiera adicionar cosas, de tal manera de que solo eligiendo la minima cantidad de plugins que tu juego necesite, se optimiza la performance….

    • Si, de hecho estaba encarandolo de esa forma. Aunque más que plugin es un pseudo plugin. El cargador de recursos funciona de esa forma. Si está disponible y lo usas, lo usa, si no, usas cualquier otra cosa que te sirva. De la misma forma, el mensaje de LOADING… que subí es una clase como la de un personaje común, por lo tanto, si vos queres crearte tu propio Loading… podés hacerlo y no dependes de una falsa plublicidad que diga: HECHO CON EL FRAMEWORK X.

      Solo para aclarar, no odio jQuery… si no el uso sin sentido, sea de ese framework como de cualquier otro. Me parece que muchas veces se usa porque no se sabe hacer código y no porque el framework te de algo que necesitás.

  2. ferclaverino dice:

    Muy bueno Mati! Tengo que volver a meter los dedos en juegos + html5.

    Abrazo!!

  3. […] Framework para desarrollo de juegos → […]


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