Etiqueta: contexto

Three.js Tutorial 1 – El retorno del triángulo y el cuadrado

Escrito por el 4 marzo, 2013 | 10 comentarios

Bienvenidos al primer tutorial de la nueva serie centrada en Three.js, un framework de javascript exclusivamente dedicado a facilitarnos la vida a la hora de programar nuestros mundos 2D y 3D usando la especificación WebGL que trae el novedoso HTML5. Antes de empezar con él, me gustaría que leyeras antes los tutoriales que dediqué a WebGL que puedes encontrar en este enlace.

En esencia, lo que pretendo conseguir con cada lección de Three.js, es explicar cómo programar el mismo efecto que conseguíamos en uno o varios de los capítulos de aquél tutorial de WebGL. Así se podrán comparar códigos y comprenderemos mejor la gran ayuda que supone usar este framework de WebGL. En concreto, para este tutorial inicial, haremos lo mismo que hicímos en el viejo tutorial del triángulo y el cuadrado en WebGL.

Éste es el resultado de lo que se verá en un navegador que soporte webGL:

Abre este enlace para ver el Ejemplo en vivo de Three.js. Para poder verlo en acción, tendrás que usar un navegador que soporte webGL, como Mozilla Firefox o Google Chrome.
» 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: , , , , , ,

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