sábado, 31 de enero de 2015

Demo de Megaman

¡Buenas!

Esta vez tampoco ha pasado mucho tiempo desde la última vez.

Hoy traigo otra demo, pero esta vez es de Megaman también hecho en Java.


Cómo surgió:


Sabía que aún debía aprender cosas, así que sabía que iba a hacer otra demo. Esta vez no quería matrices de por medio, quería trabajar con una posición "X" e "Y" absolutas.

Pensando en cosas que estuvieran a mi alcance, pensé en juegos de la SNES. Los recursos son fáciles de coger y por lo que me facilitaría muchos dolores de cabeza. Ya revisando juegos que tenía y que me gustaría hacer, pensé en una escena en concreto que ocurre en Megaman VII y que a mí personalmente me encantaba jugar cuando era más pequeño.

La escena en concreto era esta, en el minuto 5:08:




Es una escena bastante simple en la que la cámara no se mueve, el escenario es plano y Bass no tenía un moveset complicado de realizar (a pesar de que no lo haya calcado al final), por lo que para mí era perfecto.

Un mes he tardado y el resultado es este:





Imágenes de la demo de Megaman v1.0


Realización:


La realización ha sido bastante sencilla, ya que esta vez no era necesario usar matrices, por lo que todo el trabajo entre coordenadas era mucho más sencillo de realizar.

Los personajes y proyectiles tenían una clase padre la cuál englobaba las coordenadas, la velocidad a la que se movían por el mapa y la imagen actual que tiene el objeto, aunque en el caso de los personajes tenían muchas más imágenes guardadas y muchas otras variables de las que no voy a hablar.

El método para pintar sobre la pantalla ha sido a través de timers; al igual que la animación y muchas otras cosas que no usé en la demo de Pokémon. Por lo que si hay algo "útil" que he aprendido en este proyecto en Java, diría que ha sido eso.

La forma de pintar si que ha sido la misma que en la demo de Pokémon. Se pinta todo en un mapa más grande, luego se hace el recorte de esa imagen de la zona que quieres mostrar y ese recorte pasa a la pantalla final.

La animación por su parte, es simplemente cambiar la imagen a otra cada "X" milisegundos. Es decir, si yo me muevo a la derecha, mando la orden de animar el movimiento; y mientras me esté moviendo, la imagen cambiará cada "X" milisegundos a otra de las asociadas al movimiento. Para el resto de animaciones la idea es la misma.

La colisión es simplemente comparación de coordenadas. Todas estás imágenes son rectangulares, tomando como referencia la "X" e "Y" de la esquina superior izquierda de la imagen. Cada vez que haya un movimiento de las coordenadas, habrá que hacer una comprobación de colisión con el resto de objetos presentes en las escena. Si los rectángulos de las imágenes chocan entre sí o se atraviesan, habrá una colisión.

Eso es prácticamente todo lo destacable a nivel de realización.


Cómo jugar:


Al igual que los proyectos anteriores, para jugar necesitaréis Java. Es importante que descarguéis la versión acorde a vuestro sistema (32 bits/64 bits).

https://www.java.com/es/download/windows_xpi.jsp?locale=es

Y aquí el link al .jar (el ejecutable) de la demo.

https://www.dropbox.com/s/plun81odzn3cabz/Megaman.jar?dl=0



Controles:


Moverse:            Usar las teclas de dirección del teclado.

Saltar:                 "A".

Disparar:             "S".

Deslizarse:           Mientras presionas abajo, pulsa "A".


Estáis invitados a probarlo y a jugar cuando queráis. Si os surgiera algún fallo o algo que queráis comentar, podéis usar los comentarios ;).

Eso es todo, espero que sea de vuestro agrado.

Gracias.

martes, 6 de enero de 2015

Demo técnica de Pokémon

¡Hola de nuevo!

Afortunadamente no ha pasado mucho tiempo desde la última vez.

Esta vez he querido hacer algo más corto y más vistoso. Como ya habréis leído, sí, una demo técnica de Pokémon.


Cómo surgió:


Llevaba ya un par de días pensando qué sería lo siguiente que iba a hacer después del Tetris. Como algunos sabréis, hacer un videojuego no es tarea de un solo hombre; es algo que hay que hacer con un equipo especializado en diversas áreas, por lo que en este punto, yo sabía que tenía que hacer una demo y no un juego.

Hay muchas herramientas que me permiten hacer juegos o demos con muy pocos recursos (Unity3D), pero por el momento quería seguir aprendiendo sin ninguna herramienta complementaria que me facilitara ciertas tareas, porque a mi juicio, iba a interiorizar mejor cómo funcionan las cosas en un juego.

Ya puestos en lo que quería (demo y en 2D), tenía que ser algo que conociera muy bien y pudiera conseguir recursos sin mucho esfuerzo. Pokémon era algo que conocía de sobra y había cantidad de recursos en internet, así que, decidido estaba.

Puesto que tampoco tenía que hacer algo exageradamente grande para ver el funcionamiento de ciertas cosas, únicamente me he centrado en sólo un pueblo y en la interacción con el lugar.

- ¡Pero Ángel! ¡¿Por qué haces un juego de Pokémon sin combates Pokémon?!

La finalidad de la demo sigue siendo aprender y mejorar. En este caso, me vale más centrarme en características que tienen todos los juegos en general, que centrarme en algo particular del juego. No es que haya sido por falta de ganas, pero como repito, no era lo que pretendía hacer en esta demo.

Vistazo rápido:

Demo técnica de Pokémon v1.0



Realización:


La realización ha sido en base a matrices nuevamente. El mapa entero es una matriz donde cada posición tiene asignado un número según lo que se encuentre en dicha posición. El 1 significa que no es habitable, ni interactuable; el 2 que es un objeto del mapa; el 3 que es un NPC (Non-Player Character) y el 0 es una posición habitable.

Nuestro personaje se les asigna unas coordenadas dentro de ese mapa. Vamos a poner el ejemplo de que tenemos la "X" = 10 y la "Y" = 10. Si me moviera hacia arriba, se comprobaría que hay en la posición "X" = 10 y "Y" = 9; si lo que hay es un 0 como en el ejemplo de la imagen, nuestro personaje se moverá una casilla hacia arriba sin problemas. Ahora estamos en "X" = 10 y "Y" = 9, y queremos volver a movernos hacia arriba. En esta ocasión, ¿qué es lo que ocurre? Que tenemos un NPC en la casilla "X" = 10 y "Y" = 8, es decir, tenemos un 3 en la matriz. Al haber un 3, no nos podremos mover, ya que hay un NPC ahí y no sería lógico subirse encima, ¿no? Por lo que nuestro personaje permanece donde estaba.

Hemos hablado del movimiento del personaje, pero... ¿cómo interactua el personaje? Pues de la misma forma planteada. Imaginemos de nuevo que estamos en la posición "X" = 10 y "Y" = 9 y que tenemos un NPC en la posición "X" = 10 y "Y" = 8; si lo que está encima nuestro es un 3, habrá una interacción, ¿no? Se activaría un diálogo. Si hubiera habido un 0, no hubiera ocurrido nada.

Como véis los juegos basados en matrices son bastante fáciles de gestionar. Es muy parecido a lo que pasaba en el Tetris.

Ahora bien, aquí hay 2 cosas nuevas que nunca había visto anteriormente. Una es la cámara y la otra la animación.

El tema de la cámara es fácil de simplificar, ya que al igual que nuestro personaje, también tiene asignada una posición "X" y una posición "Y", que en estos casos, se corresponde con la esquina superior izquierda de la pantalla. Es decir, a medida que nos movemos con el personaje, la cámara también moverá de igual forma que nosotros.

Quizá vuestra pregunta sea, ¿qué es lo que hace una "X" y una "Y" en una cámara? Son la "X" y la "Y" desde dónde yo voy a recortar la imagen del mapa. Desde ese punto, y con el alto y ancho de la ventana, haré un recorte en la imagen de mi mapa cada vez que me mueva y se pondrá en pantalla. De esa forma, la escena se mueve junto al personaje.

El tema de la animación puede ser algo más engorroso de explicar, pero es como si crearáis un GIF. Una imagen pasa cada "X" número de milésimas de segundo creando el efecto de movimiento. Es llevar esa idea al juego.

Puede que sea algo difícil de visualizar, pero hecho en un papel o viéndolo en la demo, es mucho más fácil de ver.


Cómo jugar:


Al igual que el Tetris, para jugar necesitaréis Java. Es importante que descarguéis la versión acorde a vuestro sistema (32 bits/64 bits).

https://www.java.com/es/download/windows_xpi.jsp?locale=es

Y aquí el link al .jar (el ejecutable) de la demo.

https://www.dropbox.com/s/pubexxcpxjbcvqe/Pokemon.jar?dl=0


Controles:


Moverse:            Usar las teclas de dirección del teclado.

Interactuar:         Pulsar la tecla "A" de vuestro teclado.


Estáis invitados a probarlo y a jugar cuando queráis. Si os surgiera algún fallo o algo que queráis comentar, podéis usar los comentarios ;).

Eso es todo, espero que sea de vuestro agrado.

Gracias.