Villain Help! - Introducción

¡Hola!

Hoy os traígo un proyecto en el cual he estado trabajando estos últimos meses atrás, "Villain Help!", mi trabajo del máster de Desarrollo de Videojuegos de la UCM:

 

¿En qué consiste?:


"Villain Help!" es un juego donde tomaremos el papel del villano de un castillo, el cual, está aburrido debido a que todo los héroes que llegan al castillo a superarlo, siempre mueren. Ante tal aburrimiento, este decide ayudar a los héroes que van llegando a superar las trampas de su castillo y así suplir su aburrimiento.

El juego es un 2.5D donde el héroe va caminando solo a través de niveles cortos teniendo que superar de tres a seis trampas por nivel aproximadamente. Nosotros, desde la perspectiva del villano, invocaremos objetos a través de una serie de cartas para poder ayudar al héroe a superar la trampa que se tope en cada situación. Cuando supere todas las trampas, pasaremos al siguiente nivel.

Durante el desarrollo, hemos enfocado el juego a que sea para PC; no obstante, nunca descartamos la idea de móvil, dado que el concepto del juego funciona mucho mejor en este. Pero debido a que un móvil tiene unas especificaciones técnicas mucho menores, nos resultó mucho más fácil seguir en PC que en móvil, ya que los problemas de rendimiento eran o inmensamente menores o nulos.


Concepts Art:

Concept art del héroe

Concept art de algunas trampas

Cómo se juega:


A continuación se muestra una imagen de como vemos el juego en un nivel normal:

Como vemos, tenemos tres elementos principales... el héroe, las trampas y los objetos. Nosotros que estaremos desde la perspectiva del villano, usaremos una de las cartas que tengamos disponibles en el momento para interactuar con el entorno del castillo y evitar que el héroe caiga en alguna de las trampas que se encuentre, ya que el héroe, no lo controlamos.

En este ejemplo, nos encontramos con la situación de que tenemos una pared llena de pinchos y una lámpara antigua. Para superar esta trampa, como sabemos que el héroe es tonto y no se parará al ver la trampa, tendremos que usar las tijeras como en el ejemplo para que la lámpara caiga y el héroe pueda seguir caminando y viviendo para contarlo.

Para ello, con el ratón, seleccionaríamos la carta con el click izquierdo y arrastraríamos el objeto al punto donde creemos que se puede usar, en este caso la lámpara. El resultado sería que la lámpara caería al nivel inferior evitando los pinchos.


Gameplay:


 Ahora os muestro un pequeño gameplay del nivel 1:

 

El juego, claramente, está inacabado. Fueron siete meses de desarrollo y muchos problemas. En un futuro igual hablo un poco de la experiencia del desarrollo.

Gracias.

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.

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.

Tetris

¡Hola!

Hoy traigo algo bastante completo para ser la segunda vez que hago algo relacionado con juegos a pesar de la poca experiencia que tengo todavía en este mundillo.

Un Tetris desarrollado en Java.


Cómo surgió:


La pregunta más típica en este punto (para los entendidos) sería:

¿Por qué en Java y no en un lenguaje más adaptado a la industria como C++?

La respuesta es básicamente porque Java es el lenguaje que mejor domino actualmente. Aún así, para algo tan "sencillo" como esto, Java tampoco está mal.

Ha sido un proyecto muy orientado a aprender y a ver el funcionamiento de un juego en cada una de sus fases; además de realizar un proyecto de principio a fin con sus debidas mejoras y correcciones, lo cuál, es algo bastante importante a la hora de presentar algo en la industria.

Todo el mundo conoce el funcionamiento del Tetris y cómo se juega; un clásico donde los haya.

La elección del Tetris vino bastante condicionada de uno de los años en los que estaba en la carrera de Ingeniería Informática en la UNED. En la cuál, nos propusieron el primer año de carrera hacer un Tetris en Java, cuando la mayoría de los presentes no había programado de antes y era su primer año. Por lo que para mí en ese momento, fue una tarea imposible de realizar, dejándome la espina clavada por no haber sido capaz de realizarlo. De ahí a unos años después, ya estudiando el módulo de Desarrollo de Aplicaciones Multiplataforma en el segundo año, como proyecto, decidí retomar la idea del Tetris. Todo un éxito; pude realizar algo que realmente quería y afianzar conocimientos del curso y aprender muchos nuevos.

La versión que presenté en ese momento fue la 1.0; la cual era una versión estable, pero que aún le faltaban unos cuantos retoques y mejoras para poder sentirme satisfecho con el juego. A pesar de no estar completo, pude sacar el 10 en el proyecto, lo cuál fue bastante alentador y motivador.

La versión que os presento, es la 2.0:

Tetris v2.0

 

Realización:

Es un juego sencillo en que podía aplicar todo lo aprendido en programación sin estar muy ligado a factores que se me escapaban de mis manos; como puede ser el diseño, la música, los niveles, etc. Lo cual, fue de bastante ayuda a la hora de crearlo y avanzar.

Dado que ni era, ni soy un experto en el tema, el Tetris simplemente es el modo maratón; en el cual simplemente realizas líneas sin parar hasta que no puedas continuar más. Los controles son los básicos sin ninguna novedad fuera de la idea original.

A pesar de mis escasos recursos, fui capaz de solventar los problemas a la hora de diseñar, no obstante el diseño es muy pobre. Pero la finalidad no era esa, era aprender.


Funciona con una matriz de 0's y 1's, donde el 0 significa una casilla vacía y el 1 una casilla ocupada. Cuando se genera una pieza, ésta tiene una posición fija que será por la cual la pieza vaya rotando y moviéndose. Según el tipo de pieza que sea y el estado rotatorio de la misma, el resto de 1's que hay en la pieza se colocarán en base a esas 2 variables.

Cada vez que se mueva o rote nuestra pieza, habrá que hacer una comparación entre la matriz de la pieza y la matriz global donde se va almacenando toda la "basura" del juego. Si mientras baja la pieza choca con algún 1 de la matriz global, entonces la pieza se depositará en la matriz global; se pintarán 1's en donde en la matriz global había 0's, y finalmente se generará una nueva pieza.

Cuando en la matriz global hay una línea de 1's, significa que hay línea, y que habrá que pasar todos esos 1's a 0's. Una vez se hace eso, todo lo que está por encima de esa línea, baja una fila en la matriz. Después de eso, se suma la puntuación obtenida y las líneas que haya hecho en ese instante.


Cómo jugar:

Para jugar es necesario tener instalado previamente 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) del Tetris.

https://www.dropbox.com/s/3eb84p0shr3x1q8/Tetris.jar?dl=0


Aclaración:


Cuando hagáis el primer score del juego, se os generará un fichero "score" en el lugar donde se encuentre el ejecutable del Tetris, que es donde se guardarán las puntuaciones. Esto ocurre porque al no haber una carpeta donde se hayan instalado las cosas, el fichero se genera en el mismo sitio donde se ejecuta. Si es muy molesto, podéis guardar el ejecutable en una carpeta donde no moleste y crear un acceso directo; de esa manera el fichero se creará en la carpeta y no donde esté el acceso directo.


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.

El comienzo

Bienvenidos a mi portafolio. Espero que sea de vuestro agrado.

Atentamente, Ángel.