Hagamos Juegos

domingo, 29 de enero de 2017

Herencia de Objetos en JavaScript

Como todo buen desarrollador de juegos sabe, si vamos a desarrollar un buen proyecto, es conveniente (aunque no obligatorio) que utilicemos alguna forma de herencia y polimorfismo en el código de nuestros juegos.

Para actualizarnos, existe un nuevo estandar de JavaScript, llamado ECMAScript 6, que empezó a funcionar desde 2015 y que entre sus múltiples cambios, ahora incluye las palabras clave class, constructor, static, extends y super. Lo cual nos facilita la vida grandemente.

Algunas referencias para entender esto son:

https://developer.mozilla.org/es/docs/Web/JavaScript/Herencia_y_la_cadena_de_protipos

y

https://carlosazaustre.es/blog/ecmascript-6-el-nuevo-estandar-de-javascript/
(que también incluye interesante información sobre como crear los módulos para importar funcionalidad de otros archivos de scripts en nuestro código, lo veremos luego ...)

Sin embargo, debemos tener cuidado, puesto que si queremos que nuestros desarrollos abarquen la mayor cantidad de usuarios posibles, también debemos soportar las versiones anteriores de navegador y lenguaje (al menos una versión anterior)

Por lo que podemos sentirnos inclinados a utilizar la versión ECMAScript 5, vigente desde 2009.

Un buen artículo que explica a detalle la herencia de objetos en JavaScript es este (y en español!)

Y otro buen articulo (en inglés, están advertidos) sobre como extender un objeto en Javascript es este

Otro enlace más:
https://developer.mozilla.org/es/docs/Web/JavaScript/Introducci%C3%B3n_a_JavaScript_orientado_a_objetos#Inheritance

Han encontrado ustedes alguna otra forma de heredar objetos en JavaScript?

En el siguiente post, veremos un par de ejemplos del uso de herencia en Javascript.

miércoles, 16 de marzo de 2016

Canvas: O Cómo Dibujar Imágenes con JavaScript?

Hoy me he sentido inspirado a escribir, y nada mejor (como todo tutorial que se respete) que empezar explicando como funciona el mecanismo de dibujo en HTML5/javascript.

Básicamente debemos utilizar el elemento Canvas de HTML5, el cual nos brinda herramientas para dibujar fijuras geométricas, texto e imágenes, así como aplicar algunas transformaciones sobre dichos elementos, por ejemplo desplazamiento, escalamiento y rotaciones.

Para empezar a utilizar canvas, veamos el siguiente ejemplo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
canvas { background: #eee; display: block; margin: 0 auto; border: 1px solid black;} body { background-color: black; }
</style>
</head>

<body>
<canvas id="Canvas1" width="480" height="320" > </canvas>
</body>

</html>

Con el cual obtendremos una salida similar a esto:

Ahora debemos mostrar una imagen, para ejemplo pueden usar la de este robot:

Para poder dibujarlo, básicamente seguimos el siguiente patrón:

Obtenemos la referencia al objeto Canvas1
Obtenemos la referencia a su contexto (si es 2D o 3D, nosotros usamos el 2D)
Creamos un objeto Image para cargar la imagen del robotin
Limpiamos el canvas (en realidad limpiamos su contexto)
Cuando la imagen esté completamente cargada, la dibujamos en el contexto del canvas.

Esto en código JavaScript quedaría de la siguiente forma:

<script>
var canvas = document.getElementById("Canvas1"); //1. referencia al objeto Canvas
var context = canvas.getContext('2d'); //2. referencia al contexto 2D del canvas

var img = new Image(); //3.1 objeto para cargar la imagen
img.src = "img/robowalk00.png"; //3.2 cargamos en memoria la imagen del robot

//4. Limpiamos el canvas:
context.clearRect(0,0, canvas.width, canvas.height);

//5. Cuando la imagen esté cargada, la dibujamos.
if(img.complete)
{
context.drawImage(img, canvas.width/2, canvas.height/2);
}
else
{
img.onload = function ()
{
context.drawImage(img, canvas.width/2, canvas.height/2);
}
}
</script>

Como pueden ver, el código es bastante simple, pero es la base para todos los ejemplos que realizaremos más adelante. Así que asegúrense de entenderlo, probarlo y hacerlo funcionar.

En el siguiente enlace pueden descargar el código completo con el primer ejemplo, de forma que puedan probarlo por ustedes mismos.

Por cualquier duda o consulta que tengan, podemos expandir el tema en los comentarios ;)

miércoles, 24 de febrero de 2016

2D breakout game using pure JavaScript

Empezemos el blog, dejando una referencia a este interesante tutorial sobre como desarrollar un juego tipo Pong con simple Java Script.

El tutorial enseña como inizializar, dibujar y actualizar imágenes en un Canvas; cómo leer los eventos de teclado del usuario y la lógica detrás del diseño de un juego, entre otras cosas más.

Como siempre, los buenos amigos de Mozilla, compartiéndonos sus conocimientos y ayudándonos a aprender más.

2D breakout game using pure JavaScript

Cómo les ha parecido el tutorial? han tenido algún problema? hay algo en lo que se pueda mejorar?

Saludos.

Empezando por el principio.

Como todo buen blog sobre desarrollo de juegos, que se respete, empezaremos por los fundamentos de la programación de video juegos, explicando primero los conceptos de diseño y técnicos, para luego ponerlos en práctica con algún código funcional.

Arrancaremos este blog, con un juego desarrollado en JavaScript, para irnos adentrando poco a poco en los conceptos y generalidades.

Conforme pase el tiempo (y le dediquemos más trabajo al blog) iremos viendo algunos tutoriales de Unity3d y 2d.

Las razones por las que empezaremos con JavaScript y no otras herramientas es por que creemos que al iniciarse con el desarrollo de juegos, es importante comprender los conceptos subyacentes y como es que toda la tecnología funciona.

Además, Javascript nos da la ventaja de estar incluido en cualquier navegador, por lo que simplemente necesitamos un buen editor y ya, dándonos la ventaja de ser multiplataforma (bajo algunos arreglos)

Como es de esperar, tampoco pretendemos reinventar la rueda, así que también estaremos publicando enlaces a otros sitios y tutoriales, cuando se crea que aportan algún valor a nuestras ideas.

Bueno, sin más, empezaremos con un par de posts básicos sobre programación de gráficos con javascript.

Esperamos que encuentren estos temas tan interesantes como educativos.

Saludos

martes, 12 de enero de 2016

De qué trata este Blog? (Oh nooo, un blog más!)

Este blog es una recopilación de temas, ejemplos, ejercicios y enlaces relacionados con el mundo del desarrollo de juegos; especialmente con tecnologías HTML5/JS y Android.

La ídea del blog es servir como un cuaderno abierto, donde se pueda compartir los temas que también vaya aprendiendo.

En lo posible trataré de publicar constantemente temas de interés (y si no, pues ténganme paciencia o envíenme un mensaje para recordarme).

También son libres e invitados a compartirme cualquier duda, comentario, enlace o corrección o lo que sea que deseen :)

Desde ya bienvenidos y muchas gracias por leerme.

Páginas

domingo, 29 de enero de 2017

Herencia de Objetos en JavaScript

miércoles, 16 de marzo de 2016

Canvas: O Cómo Dibujar Imágenes con JavaScript?

miércoles, 24 de febrero de 2016

2D breakout game using pure JavaScript

Empezando por el principio.

martes, 12 de enero de 2016

De qué trata este Blog? (Oh nooo, un blog más!)