Etiqueta: colisiones

Uso práctico de vectores: Pong (y un poco de sonido)

Escrito por el 10 Abril, 2013 | 3 comentarios

Tengo pendientes de realizar tutoriales sobre un juego estilo shooter en 2D y otro de carreras de coches, pero ví que hacía un intensivo uso de vectores en ellos, asi que rebusqué entre los muchos experimentos que tengo hechos desde hace tiempo buscando algún minijuego con el que poder hacer una introducción al mundo de los vectores, y lo encontré: Un Pong sencillito. Y éste es el resultado:
pong

Aquí teneis un enlace para poder probarlo online, y aquí está el zip con todo el código necesario para descargarlo y jugar en local. Las palas se mueven con W y S, y los cursores.

Con éste famoso minijuego aprenderemos a usar vectores (matemáticos) orientados a los videojuegos, y su increíble utilidad para posicionar, rotar y mover entidades por el mundo, entre otras muchas funciones. Y ya que estamos, veremos cómo meter sonidos en nuestros juegos javascript usando el nuevo elemento AUDIO de HTML5. Y por si mis queridos lectores no tuvieran hermanos ni amigos con los que jugar, también incluiremos una inteligencia artificial tan estúpida que podría llegar fácilmente a presidente del gobierno.

» Leer la entrada entera

Etiquetas: , , , , , ,

Tutorial de Tiles 2ª parte, el héroe

Escrito por el 7 Mayo, 2012 | 8 comentarios

Bienvenidos al segundo capítulo de la serie. En el primer capítulo vimos los conceptos básicos para crear un mapa basado en tiles. Pero un juego sin un héroe que acabe con los malos, no es un juego ni es nada. Así que el capítulo que estamos a punto de comenzar tratará sobre cómo crear a nuestro protagonista principal, a cómo embellecerlo usando sprites animados, y a moverlo por el mapa detectando las colisiones con las paredes infranqueables. En uno de los comentarios del blog me acusaban de crear artículos demasiado largos. Pues toma dos tazas, para que sepan con quién están tratando.

Antes de empezar, como siempre, veámos el resultado que conseguiremos si seguimos éste tutorial:

Como viene siendo habitual, aquí teneis un enlace para verlo en movimiento, y aquí un zip para que lo descargues y lo pruebes en local.
» 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 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 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: , , , , , ,

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