Entradas antiguas

Programación orientada a objetos en javascript

Escrito por el 5 Abril, 2012 | 25 comentarios

Bienvenidos a un nuevo tutorial sobre el apasionante mundo del desarrollo de juegos amateur en javascript. Hoy hablaré sobre cómo implementar el paradigma de la programación orientada a objetos (de ahora en adelante, POO) de la forma menos traumáica posible, emulando a la sintaxis de Java allí donde se pueda.

En la primera lección de cómo programar el Space Invaders hice una extensa introducción sobre una primer intento de POO en javascript, pero donde teníamos serias limitaciones, que veremos a continuación.

Desgraciadamente, asumiré que los que sigan este tutorial tienen conocimientos básicos de POO. En otro caso, deberías de leer antes aquél primer tutorial, o mejor aún, aprender POO por otras fuentes antes de empezar con mis tutoriales.

Primer intento de POO

Veamos alguno de los ejemplos que puse en aquel primer tutorial. La clase padre:

    function MiPrimeraClase(){
        //Atributos de la clase
        this.atributo1;
        this.atributo2;
        this.atributo3;
        //Construcor de la clase
        this.constructorBase=function(arg1,arg2,arg3){
            this.atributo1=arg1;
            this.atributo2=arg2;
            this.atributo3=arg3;
        };
        this.constructor=function(arg1,arg2,arg3){
            this.constructorBase(arg1,arg2,arg3);
        };
        //Métodos de la clase
        this.getAtributo1=function(){
            return this.atributo1;
        };
        this.setAtributo1=function(valor){
            this.atributo1=valor;
        };
        //Aquí irían más getter y setters de los otros atributos...
        this.metodo1=function(){
            this.atributo1=this.atributo2+this.atributo3;
        };
        this.metodo2=function(arg1){
            this.atributo3+=arg1;
            this.metodo1();
        };
    }

» Leer la entrada entera

Etiquetas: ,

Física en 2D, el tiro parabólico

Escrito por el 8 Febrero, 2012 | 7 comentarios

Después de más de un mes de vacaciones, ha llegado la hora de crear un nuevo tutorial. Aunque tengo en el tintero unas cuantas lecciones sobre sonido, inteligencia artificial y matemáticas aplicadas,  he preferido hacer antes un jueguecito muy simple como excusa para empezar a ver algo de física básica, y ya ques estamos, un nuevo tipo de detección de colisiones entre círculos y rectángulos, con el que podrás enriquecer tus propios juegos.

En esta ocasión sigo utilizando la programación orientada a objetos que vimos en el tutorial sobre juegos en javascript, y prácticamente el esqueleto de la aplicación es el mismo: Un constructor, algunos métodos getter y setter para recuperar y establecer atributos, una clase principal con la función loop que funcionará como bucle del juego, y que será llamada contínuamente con un intervalo, y otras funciones auxiliares que sirven para notificar al juego algún cambio de estado, como son las detecciones de colisiones que afecten al estado del juego, y para obtener las entradas de datos con el que hacer funcionar el juego.

Aquí teneis un enlace para ver el juego en movimiento, y aquí teneis el ZIP para descargarlo y probarlo en local.

» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 5ª parte

Escrito por el 26 Diciembre, 2011 | 18 comentarios

Bienvenidos a la quinta parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y sobre cómo empezar a dibujar el juego en la pantalla. En el tercer tutorial nos centramos en darle animaciones a las entidades para que se movieran por la pantalla, lo que nos introdujo el concepto de tiempo delta. También aprendimos una forma de detectar y utilizar los eventos de teclado, por medio de notificaciones al bucle principal del juego para mover al jugador. En el cuarto tutorial hicimos que el jugador pudiera disparar y destruir enemigos, utilizando un sencillo algoritmo de detección de colisiones. Hoy veremos cómo mejorar el aspecto general del juego, sustituyendo los feos rectángulos de colores por imágenes en movimiento. En concreto, usaré las del Space Invaders original, para que así, además de gastar mi tiempo escribiendo unos tutoriales que nadie lee , pueda también acabar en la cárcel por una denuncia de Atari por violación de copyrigth.

Aquí puedes probar la versión animada del juego, para entender mejor lo que explicaremos a continuación. Y aquí puedes tienes el ZIP con todos los archivos necesarios.

» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 4ª parte

Escrito por el 22 Diciembre, 2011 | 9 comentarios

Bienvenidos a la cuarta parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y sobre cómo empezar a dibujar el juego en la pantalla. En el tercer tutorial nos centramos en darle animaciones a las entidades para que se movieran por la pantalla, lo que nos introdujo el concepto de tiempo delta. También aprendimos una forma de detectar y utilizar los eventos de teclado, por medio de notificaciones al bucle principal del juego para mover al jugador. En éste tutorial completaremos el juego. Nos queda por hacer varias cosas: Permitir que el jugador pueda disparar, para lo que usaremos una nueva clase EntidadDisparo. Los disparos deben destruir naves alienígenas, lo que requerirá ser capaces de detectar las colisiones entre entidades que se produzcan en el juego. Y por último, queremos mostrar algun mensaje de fin de partida, ya sea porque hayamos ganado o perdido.


Aquí tienes una primera versión completa del juego, para entender mejor lo que explicaremos a continuación. Y aquí tienes el ZIP con todos ls archivos necesarios.
» Leer la entrada entera

Etiquetas: , , , , ,

Tutorial Canvas 2D – Cómo hacer un juego en javascript 3ª parte

Escrito por el 20 Diciembre, 2011 | 5 comentarios

Bienvenidos a la tercera parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. En la segunda parte vimos cómo crear las entidades que necesita el juego mediante herencia de los atributos y métodos en común, hablemos un poco sobre cómo simular el blucle principal del juego y por último, vimos cómo empezar a dibujar el juego en la pantalla. Es hora de hacer que los aliens y el jugador se muevan un poco.

Aquí puedes probar lo que vamos a hacer en este tutorial. Y aquí tienes un ZIP con todos los archivos necesarios.
» Leer la entrada entera

Etiquetas: , , , , , , , ,

Tutorial canvas 2D – Cómo hacer un juego en javascript 2ª parte

Escrito por el 20 Diciembre, 2011 | 5 comentarios

Bienvenidos a la segunda parte de mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. En la primera lección, hablábamos un poco sobre la estructura general que tienen los videojuegos, de forma muy sencilla, de cómo ibamos a diseñar nuestro juego, un par de consejos sobre cómo depurar, y finalmente, la parte más importante, enseñé una forma de adaptar la programación orientada a objetos a javascript. Por lo tanto, supongo que es el momento de empezar ya con la programación real del juego.

He estado meditando acerca de cual puede ser la mejor forma de abordar el código del juego. La primera forma más obvia es mostrar el código en el mismo orden que se ejecuta, que es lo que suelen hacer casi todos los tutoriales de programación que hay en la red. Esta forma me simplifica mucho el trabajo, y a vosotros os es más fácil seguir el tutorial mirando el código del ejemplo, pues practicamente sería ir leyéndolo de arriba a abajo. Sin embargo, me encontraría con el problema de que a veces comentar un método de alguna clase requeriría entender primero el funcionamiento de otra clase que aún no he explicado, por lo que al final, sería inevitable ir dando saltos de unas partes del código a otras, incluso alojadas en archivos distintos.

Así que finalmente me he decidido por la que me parece más natural: Explicar el código en el mismo orden en el que lo he programado. Nadie en su sano juicio pensaría que un juego (o cualquier aplicación ligeramente complicada) se programa del tirón, es decir, escribir línea a línea todo el código final de forma seguida. Todo depende de la dificultad del juego. Normalmente se programa un poco de una clase, se salta a otra clase que la maneja, se vuelve a la primera clase y se le añaden unos pocos atributos y métodos más, etc, siguiendo algun esquema mental que te agrade más. Concretamente, a mí me gusta programar primero una versión muy sencilla de las clases que representan las cosas (a partir de ahora las llamaré entidades, que queda mas guay) que se van a pitnar en pantalla. A continuación, hago una muy básica versión del bucle del juego para que pinte en pantalla a las entidades aún en estado muy primitivo. Así, al ver algo dibujándose, cojo moral para continuar con el código. Vuelvo a la clases de las entidades, y les añado un poco de código para que empiecen a moverse. Cuando todo está a mi gusto, me pongo con la entidad que representa al jugador, y a leer las teclas del teclado. Y así, poco a poco, el juego cada vez un poco más va cogiendo su forma final. También pruebo inmediatamente cada cosa que añado, para que si por desgracia cometo un error (algo que garantizo que te va a ocurrir) pueda solucionarlo instantáneamente y no arrastre bugs que luego pueden ser muy difíciles de detectar y corregir. Ya me entendereis cuando os pongais a programar vuestros propios juegos.

Aquí puedes ver lo que queremos conseguir en este tutorial.
» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial canvas 2D – Cómo hacer un juego en javascript 1ª parte

Escrito por el 18 Diciembre, 2011 | 17 comentarios

Bienvenidos a mi primer tutorial sobre cómo realizar un pequeño juego en JavaScript, más concretamente el tan viejo como popular Space Invaders. Para programar el código, me ha sido de gran utilidad el tutorial de Kevin Glass sobre cómo programar videojuegos en Java, donde también escogió el Space Invaders como punto de partida. Gran parte del código que he utilizado ha sido una conversión directa de sus rutinas, aunque he tenido que adaptar numerosas cosas al peculiar lenguage JavaScript, que si bien incluye la palabra “Java” en su nombre, se parece a aquél tanto como un huevo a una castaña. Para quien tenga la desgracia de no conocer el videojuego original, el juego trata sobre una invasión alienígena que el protagonista, una nave que sólo puede moverse de izquierda a derecha y disparar hacia arriba, debe evitar. Las naves alienígneas se van moviendo todas juntas y en zigzag desde la parte superior de la pantalla a la parte inferior, donde se encuentra el protagonista. El jugador debe destruir todas las naves antes de que lo alcancen, o perderá la partida.

Pero antes, la advertencia habitual: Estas lecciones están pensadas para personas con unos razonables conocimientos de programación previa, pero sin experiencia en la programación de juegos en 2D; el objetivo que buscamos es que aprendais las rutinas básicas que se necesitan para programar juegos en poco tiempo, con una buena comprensión de lo que está ocurriendo en el código en cada momento. Debo añadir que yo tampoco soy un experto en éste tema, y todo lo que he hecho aquí se basa en lo que he ido aprendiendo tanto de la experiencia propia como de haber ido viendo códigos y tutoriales de otras personas. Así que no me extrañaría que pueda haber mejores soluciones a la hora de afrontar los mismos miniproblemas que me han ido surgiendo mientras programaba el juego, por lo que si usas directamente el código, que sea bajo tu propio riesgo. Sin embargo, tampoco creo que esté del todo mal lo que he hecho. Y por su sencillez, puede ser una muy buena forma de empezar a conocer este mundillo. Por otro lado, si mientras lees ésto ves que puedes mejorar algo, no dudes en dejar un comentario con tu punto de vista; es posible que incluso añada tus consejos a éste tutorial.

Aquí tienes un enlace para poder probar un rato el juego y tener así una mejor perspectiva de lo que queremos hacer.
» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial WebGL 16 – Texturas renderizadas

Escrito por el 14 Diciembre, 2011 | Sin comentarios

Bienvenido al decimosexto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL.En él vamos a enseñar una técnica que os resultará muy útil: La representación de una escena 3D como si fuera una textura, que puede ser “pegada” a la superficie de cualquier objeto en otra escena 3D diferente. Éste es un recurso muy importante, no sólo porque hace posible crear escenas dentro de una escena, como vamos a hacer con el ejemplo de hoy, sino también porque es la base necesaria para la selección de objetos 3D con el ratón de nuestra escena (picking), el cálculo de sombras, algunos tipos de reflexiones de la luz (cuyos rebotes iluminan a otros objetos), y muchos otros efectos 3D más complicados.

Si tu navegador soporta webGL, este video muestra lo que deberías ver:

Abre este enlace para ver el ejemplo en vivo de webGL, aquí tienes una textura, aquí la otra, y aquí el modelo del portátil, para descargarlos y probarlo en local. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome. Podemos ver un ordenador portátil blanco girando en el vacío, con todos los efectos de iluminación que hemos visto hasta ahora (incluyendo un reflejo especular en la pantalla). Pero lo más interesante, es que en la pantalla del portátil se está mostrando otra escena 3D (la luna con la caja en órbita) que vimos en el tutorial 13. Queda claro que lo que está pasando es que estamos dibujando una escena completa en 3D en una textura, y luego utilizamos esa textura para “pintar” la superficie que representa el monitor.

Más información acerca de cómo funciona todo, abajo.

» Leer la entrada entera

Etiquetas: , , , , , ,

WebGL Tutorial 15 – Mapas especulares

Escrito por el 13 Diciembre, 2011 | Un comentario

Bienvenido al decimoquinto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. En él aprenderemos a usar mapas especulares, que hacen que las escenas parezcan más realistas, pues sirven para indicar cómo debe verse el reflejo especular en cada punto de la superficie del objeto, de la misma forma en que una textura sirve para saber de qué color debe pintar cada punto. A nivel conceptual, usar mapas especulares incrementa la complejidad de cómo se está dibujando la escena; sin embargo, en términos de programación, es un cambio relatívamente pequeño.

Si tu navegador soporta webGL, este video muestra lo que deberías ver:

Abre este enlace para ver el ejemplo en vivo de webGL, aquí tienes la textura, y aquí el mapa especular, para descargarlos y probarlo en local. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome. Podemos ver un modelo de la Tierra girando sobre su centro en el espacio, con un reflejo especular muy brillante, que representa la luz del sol. Como se podría esperar, el reflejo especular sólo tiene sentido en las zonas donde hay agua, como en los océanos y mares. En las zonas donde hay tierra no se produce ningún reflejo.

Desmarque la casilla de “Usar mapa especular”, en el formulario. Verás que el reflejo especular también aparece en las zonas con tierra, empeorando la sensación de realismo de la escena. Ahora es más fácil entender que el uso de mapas especulares sirve para especificar qué zonas del objeto deben reflejar especularmente la luz, consiguiendo así un control más preciso de cómo la iluminación interactua con los objetos de la escena.

Ahora marque la casilla de “Usar mapa especular” de nuevo, y reduzca la intensidad de la luz difusa, poniendo su color RGB a (0.5, 0.5, 0.5). A continuación, desmarque la casilla “Usar mapa de color”. Verás se deja de usar la textura de la tierra, dibujando la esfera de color blanco, pero el reflejo especular sigue estando afectado por el mapa especular.

Más información acerca de cómo funciona todo, abajo.

» Leer la entrada entera

Etiquetas: , , , ,

WebGL Tutorial 14 – Reflejos especulares y cargar un modelo con JSON

Escrito por el 13 Diciembre, 2011 | Un comentario

Bienvenido al decimocuarto tutorial de la serie Aprende webGL. Es una traducción no literal de su respectivo tutorial en Learning webGL. Hoy completaremos la técnica reflexión de Phong añadiendo reflejos a las superficies más brillantes, para hacer la escena un poco más realista.

Si tu navegador soporta webGL, este video muestra lo que deberías ver:

Abre este enlace para ver el ejemplo en vivo de webGL, aquí tienes el modelo, aquí tienes la primera, y aquí la segunda de las texturas utilizadas, para descargarlas y probarlo en local. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome. En el ejemplo se ve la famosa tetera girando en el vacío. Se pueden ver los destellos especulares ocasionalmente en el pico y en el asa cuando la luz golpea en un ángulo determinado. Se puede apagar o encender el uso de los reflejos especulares, y también la iluminación en general, mediante las casilla de checkbox. Además se puede cambiar la textura de la tetera; la primera textura simula ser un material galvanizado, que conseguí en Texturas Arroway. La segunda textura es una proyección de mercator de La Tierra, obtenida en la página de la agencia espacial europea Envisat. También permite no utilizar ninguna textura, con lo que se utilizará el color blanco para dibujar la textura.

También puedes controlar el nivel de brillo de la tetera, la posición y color del punto de luz (que por cierto es la fuente que ocasiona el efecto de reflejo) y el color de la iluminación de ambiente en los campos de texto de abajo, como en otros tutoriales.

Más información acerca de cómo funciona todo, abajo.

» Leer la entrada entera

Etiquetas: , , , , ,

Gestionado con Wordpress y Stripes Theme Entradas (RSS) | Comentarios (RSS)