MEMORIA 2 - Videojuego de corte sencillo YinYang Runner

2016/11/17 21:10
1/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
MEMORIA 2 - Videojuego de corte sencillo
YinYang Runner
ENLACES
Web YinYang Runner
Descarga Directa del Juego
RESUMEN EJECUTIVO
El proyecto YinYang Runner consiste en un videojuego de plataformas autorunner con una
mecánica que gira en torno al cambio entre el color blanco y negro del avatar. YinYang Runner
pretende ser un prototipo en el que plasmar las mecánicas y estudiar el feedback de los jugadores
que lo prueben para, una vez conocido su potencial, comenzar a desarrollar un videojuego completo.
Para llevar a cabo el proyecto se decidió crear una página web propia en la que se publicarían
periódicamente los avances que se iban realizando en el videojuegos, es decir, un diario de
desarrollo. Las dos razones principales para la creación del blog son el mantener informados a los
jugadores interesados en el título - la futura comunidad de YinYang Runner - y poder publicar de
forma visible y cómoda los enlaces para la descarga directa del videojuego. Como queríamos centrar
nuestros esfuerzos en el desarrollo del videojuego decidimos que para el diseño del blog
reutilizaríamos el del anterior proyecto con algunas modificaciones pues nos gustó mucho como
quedó de limpia la web de GamEsp Magazine.
Las labores del proyecto se han repartido a partes iguales entre los dos integrantes del grupo y para
agilizar el trabajo cada uno ha centrado sus esfuerzos en una de las mitades del mismo; siendo Jorge
Quesada Mora el encargado de la programación del videojuego y Vicente Andrés Quesada Mora el
encargado de realizar el diseño de niveles, mecánicas, fondos y sprites. La realización de cada tarea
se explicará con más detalle en el apartado Descripción de los trabajos realizados.
DESCRIPCIÓN DEL PROYECTO
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
2/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
OBJETIVO GENERAL
En objetivo principal de este segundo proyecto multimedia será finalizar un videojuego de corte
simple y crear una web del mismo para poder promocionarlo y facilitar los enlaces de descarga a los
jugadores interesados. Nuestra intención es de que YinYang Runner, aunque se trate de un
videjuego simple más cercano a un prototipo, sea jugable y no presente ni bugs ni glitches
importantes que entorpezcan la partida.
OBJETIVO SECUNDARIO
Como objetivo secundario del proyecto tenemos en mente realizar una campaña (ficticia) para
publicitar el título en diversos sitios web y redes sociales a la vez que buscamos posibles vías de
financiación, siendo la más viable realizar un pequeño crowdfundig o a través del apartado
'Conceptos' de Steam Greenlight.
CONTEXTO
Los videojuegos llevan, aunque no lo parezca, más de 40 años entre nosotros y ya forman parte
indispensable de la cultura multimedia y del entretenimiento contemporáneo. Sólo el tiempo dirá si
de elemento cultural pasan a ser considerados como arte como ocurrió con el cine, aunque para
muchos jugadores este reconocimiento no es más que una mera formalidad pues los videojuegos han
sido capaces de trasmitir mensajes tanto o más profundos que el resto de medios.
Tal es el éxito de la industria del videojuego que genera más ingresos que la del cine y la música
juntos y cada día salen al mercado centenares de nuevos títulos, muchos de ellos superproducciones
triple A que no tienen nada que envidiar a los grandes blockbusters. Desarrollar un videojuego
independiente pequeño y hacerlo visible entre millones de títulos no es tarea fácil y menos sin una
potente campaña de markening y por ello YinYang Runner, por su carácter retro, será publicado
buscando un target más definido: los jugadores amantes de los videojuegos de la generación de los 8bits y los interesados en la prolífica vertiente indie. Al enfocar nuestro producto a un nicho más
pequeño perdemos parte del público pero ganamos visibilidad y aumentamos el número de posibles
compradores.
DESCRIPCIÓN DE LOS TRABAJOS REALIZADOS
Para una mejor organización del proyecto, vamos a explicar los trabajos realizados por semanas (pese
a que algunos elementos costaron más y otros menos). De media cada semana realizábamos dos o
tres mecánicas nuevas en el juego, contando la actualización del blog y la semana inicial de creación
del blog.
Semana 1 (21/10 - 27/10):
Esta semana ha sido la semana de creación de la web entera. Gracias a los conocimientos ganados en
el Proyecto 1 con la revista digital GamEsp hemos podido crear la web en un tiempo record. Cabe
destacar que también hemos reutilizado parte de código de la anterior web. Al igual que en el anterior
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
3/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
proyecto, empezamos creando una cuenta en Hostinger, host que nos facilito mucho las cosas con
otras webs y en los que obtuvimos muy buenos resultados. Tras conseguir nuestro dominio
instalamos WordPress en la web siguiendo los mismos pasos que con la anterior web. Tras la
instalación de WordPress nos pusimos a editar el css para que quedara a nuestro gusto. Tras unos
dias de trabajo obtuvimos un resultado aceptable, que nos gustaba. En estos días también creamos
las redes sociales, tanto Twitter como Facebook. En la web hemos ido actualizando semana a semana
las mecanicas nuevas que hemos ido añadiendo al juego, desde el personaje, la primera hasta la
implementación del sonido.
Captura de la web de YinYangRunner
Semana 2 (28/10 - 03/11):
Empezamos el aprendizaje de GameMaker y de ASEprite, programas que utilizaremos a lo largo de
todo el proyecto. El primero lo utilizaremos para la creación del juego en si, es una herramienta de
desarrollo de videojuegos, este nos facilita una forma muy fácil de programar, importar y exportar
contenido y de probar el juego. Por otra parte tenemos ASEprite, el cual es un programa gratuito de
edición de imagen especializado para hacer pixelart.
GameMaker resultó mucho más completo de lo que pensabamos, tiene cientos de opciones, y otros
cientos de funciones que podemos usar en nuestro código. Esta semana prácticamente fue de
aprendizaje, vimos decenas de tutoriales de nuestros respectivos programas. Jorge Quesada se
encargó del aprendizaje de GameMaker empezando por la creación mediante tutoriales de un juego
de plataformas muy simple tipo SuperMario. Mientras que Vicente Quesada se encargó del
aprendizaje del ASEprite y diversas técnicas de PixelArt.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
4/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
Captura del programa GameMaker.
Captura del programa ASEprite.
Semana 3 (04/11 - 10/11):
Esta semana empezamos por la creación del personaje:
Como todo buen plataformas la base de YinYang Runner es el personaje y su interacción con el
entorno. En nuestro caso el avatar tendrá dos tipos distintos de colisiones; por un lado estarán las
colisiones que lo mantendrán por encima del suelo y por el otro lado la colisión que lo mate, es decir,
choques con enemigos, superficies horizontales de los muros o con los pinchos. Cualquiera de estas
colisiones matará a nuestro personaje, reiniciando el nivel.
Nuestro avatar tendrá una peculiaridad, podrá cambiar de color blanco a negro y de negro a blanco.
En el caso de ser de color blanco únicamente tendrá colisiones con los objetos blancos y grises. Por
otro lado, si es negro, tendrá colisiones con los objetos negros y grises. Dicho de otra manera, el
personaje siempre tiene colisión con superficies y enemigos grises y con las de su propio color.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
5/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
El diseño del personaje principal es uno de los aspectos más importantes en un videojuego pues tiene
que resultar atractivo para el jugador pero en nuestro caso, al no ser especialistas en diseño hicimos
lo que pudimos; obteniendo un resultado mejor de lo esperado. Para su diseño tuvimos que crear
numerosos sprites para las acciones YinYang Runner - estando parado, corriendo, saltando y cayendo
-, tanto para la versión en negro como la de blanco. A continuación mostraremos los sheet/strips de
sprites finales del personaje en sus dos versiones:
Este es el personaje en carrera normal.
Este es el personaje saltando y al caer.
Semana 4 (11/11 - 17/11):
Esta semana se centró en la creación de los muros y las vidas:
Los muros, en YinYang Runner hemos utilizado un mismo diseño para los muros, cambiando los
colores para que en cada muro para que predomine el blanco, el gris y el negro. Para cada color de
muro hemos creado 4 diseños diferentes, los cuales en el juego aparecerán de forma aleatoria.
Además de muros hemos creado unos pinchos los cuales si el personaje toca morirá. Estos pinchos
los colocamos en la parte inferior de cada nivel impidiendo que el personaje pueda caer sin parar.
Las colisiones de estos objetos con el personaje con las siguientes. Con los muros si el personaje es
del color del muro o este es gris tendrá colisión ya sea por arriba en ese caso el personaje caminará
sobre el o un choque de forma horizontal, en este caso el personaje perderá una vida. Mientras que
siempre que se toque el pincho por cualquier lado se perderá na vida.
A continuación vamos a poner los diseños de los 3 tipos de muros y los pinchos. En los muros los 4
tipos de diseños salen juntos unos con otros.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
6/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
Diseño final de los muros
Diseño final de los pinchos
Nuestro personaje cuenta con un total de 5 vidas para cada nivel, si pierde todas ellas se acabará el
juego mandándonos al menú principal. Pero hay una forma de aumentar el número de vidas y esto es
cogiendo los objetos de vida que hay repartido por todo el mapa. Pero cuidado! estos objetos son de
un solo uso, es decir, si los coges y mueres no volverán a aparecer en la pantalla. Su mecánica es
muy simple, si no tienes 5 vidas, estos objetos al cogerlos te suman una vida y desaparecen. Y si ya
tienes las 5 vidas tenemos pensado que nos sumen 1000 puntos a la puntuación total (cuando
implementemos la puntuación implementaremos este punto). Este es el sprite de las vidas:
Semana 5 (18/11 - 24/11):
En este periodo creamos a los enemigos y algunas mecánicas como la pausa y una cuenta atrás
antes de empezar:
Tocado implementar los enemigos, que a parte del propio jugador serán los únicos elementos en el
juego que tendrán movimiento. Siempre vendrán de frente al jugador y hemos decidido que habrá, al
menos en esta versión del juego, solo 2 tipos de enemigos. Un enemigo estático que solo podremos
sortearlo saltando por encima (en nuestro caso será una calavera de color gris) y el otro tipo de
enemigo es un fantasma de color negro o blanco que se mueve en dirección contraria a la nuestra
que para esquivarlo tendremos que traspasarlo cambiando de color. Da igual por donde toquemos a
los enemigos, nos quitarán una vida con tan solo tocarlos. A continuación os dejamos los sprites de
todos los enemigos.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
7/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
Diseños finales de los 3 tipos de enemigos.
En estos días hemos implementado las siguientes mecánicas: que cuando el personaje pierda una
vida vuelva al principio del nivel, que cuando se empieza el nivel o perdamos una vida haya una
cuenta atrás de 3 segundos para darnos tiempo a prepararnos y que seamos capaces de parar el
juego cuando queramos mediante el botón pausa (ESC en nuestro caso).
El botón de pausa ha creado bastantes problemas para crearlo ya que no queríamos que al pausarlo
se saliera del juego, como es el caso de algunos juegos. Esa es una forma muy fácil de hacer una
pausa, que consiste que al pulsar determinado botón el juego se guarda y sale a una pantalla de
pausa, y al reanudarlo se carga el juego en el instante en el que estábamos. Pero nosotros queríamos
que todo se quedara parado al darle al botón pausa. Al final lo hemos conseguido mediante un objeto
que guardara todas las variables de todos los objetos con algún tipo de movimiento (incluido
velocidades, gravedad, etc.) y luego las pusiera a 0. Al darle a reanudar dicho objeto retornaría a
todas las variables su valor y el juego continuaría tal cual lo habíamos dejado.
La cuenta atrás simplemente dejaba al personaje quieto mientras sucedía, y mientras tanto su sprite
era el siguiente:
Sprites del personaje parado mientras ocurre la cuenta atrás.
Semana 6 (25/11 - 01/12):
Esta semana toca implementar los menús de nevegación y la puntuación:
Como todo juego que se precie, nuestro juego también ha de tener los menús. En nuestro caso
cuenta con tres menús distintos y con una pantalla de inicio con el logo del equipo. Los menús son, el
menú principal, desde el que podemos acceder al menú de juego, el de créditos o salir, y luego
tenemos como ya he nombrado, los créditos y el menú de juego desde el que podremos acceder al
tutorial o al juego. A continuación dejamos una captura de los sprites del menú principal:
Sprites del menú principal
Por fin lo añadimos!! La puntuación ha sido añadida. Este ha sido uno de los elementos más
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
8/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
trabajados hasta la fecha. No nos imaginábamos que hacer una puntuación y mostrarla por pantalla
fuera tan complicado. También hemos añadido el “Hi-Score” es decir la máxima puntuación que se
guarda siempre que superes a la anterior.
Primero de todo añadimos los puntos. Estos son unos objetos que al recogerlos sumarán 100 a la
puntuación.
Se trata de una especie de octaedro blanco y negro que gira sobre si mismo.
También tenemos la pantalla de score que muestra los puntos actuales, el nivel en el que estamos y
los puntos que llevamos recogidos sobre el total. Aquí dejamos una captura ingame que hicimos
posteriormente donde salen tanto los puntos, como algún enemigo y el score.
Semana 7 (02/12 - 08/12):
La última semana de desarrollo nos tocó trabajo extra, los fondos, el tutorial y los sonidos:
Hoy toca una parte más artística, los fondos del juego. Para ello tenemos pensado usar tres capas que
se muevan con una velocidad distinta cada una, esta técnica es muy usada en muchos juegos de
plataformas, se llama scroll parallax. Ahora os dejamos una muestra de las tres capas de fondos que
hemos creado para el juego.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
9/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
Primer fondo se mueve muy, muy lento.
Segundo fondo, más rápido, se mueve por encima del primero.
Tercer fondo, más rápido aún, por encima de los dos anteriores.
El desarrollo del juego prácticamente está acabado, ahora nos hemos centrado en hacer el tutorial,
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
10/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
que como no, nos ha traído muchos problemas nuevos. Para el tutorial hemos hecho un nivel
extremadamente sencillo en el que de vez en cuando aparece un cartel que pausa el juego y nos
muestra una nueva mecánica. Hemos aprovechado el código de la pausa para que mientras aparecen
los carteles de explicación nasa se mueva en el juego, ni tampoco podamos saltar ni cambiar de
color. A continuación dejamos una captura del nivel de tutorial en el que aparece uno de los carteles
anteriormente nombrados.
Captura del tutorial.
¡Por fin hemos acabado el desarrollo de YinYang Runner! Hoy hemos acabado los últimos retoques; el
sonido, añadiendo tanto música como los efectos. La música ha sido compuesta por por Jamie Nord y
por BoxCat - su música es de uso libre con atribución -, la hemos sacado de una página de música
llamada SoundCloud. Por otra parte los efectos los hemos creado nosotros mediante un programa
gratuito diseñado para tal cosa llamado SFXR. Hemos usado efectos para la cuenta atrás del principio,
saltar, coger puntos, coger vidas y cuando pierdes una vida.
CONCLUSIÓN
OBJETIVOS CUMPLIDOS Y NO CUMPLIDOS
Hemos conseguido todos los objetivos que nos habíamos planteado e incluso hemos superado
nuestras expectativas inciales. Hemos crado un blog de aspecto sencillo para hacer más fácil su
navegación y lectura, hemos conseguido crear un videojuego sencillo pero completamente
operacional, con menús de navegación, créditos, tutorial y tres niveles a superar. Claro está que todo
el proyecto se podría mejorar dedicándole mucho más tiempo y dinero, pero si tenemos en cuenta el
plazo limitado para la entrega y que no teníamos ninguna noción de las herramientas utilizadas el
resultado final es más que satisfactorio.
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/
2016/11/17 21:10
11/11
MEMORIA 2 - Videojuego de corte sencillo YinYang Runner
LIMITACIONES
Las limitaciones que nos hemos encontrado a la hora de realizar el proyecto han sido tres: falta de
conocimientos, inexistencia de una fuente de ingresos y falta de tiempo. La primera de ellas la hemos
podido superar gracias a tutoriales y guías que nos han enseñado en pocos días a emplear las
herramientas de trabajo necesarias para hacer el videojuego – a un nivel básico. Las otras dos
limitaciones han sido imposibles de superar por el carácter prototípico del proyecto en sí pero nos han
permitido descubrir herramientas gratuitas muy útiles (como aseprite) y a su vez hemos aprendido a
priorizar las tareas más importantes para optimizar el gasto de tiempo.
MEJORAS
Ligado a las limitaciones están las mejoras posibles para el proyecto, que no son pocas. Si se
dispusiese de un intervalo de tiempo amplio (por ejemplo, de un año) y un fondo económico el
videojuego YinYang Runner se vería potenciada en todos los aspectos. En primer lugar todas las
herramientas open source empleadas se podrían sustituir por otras de pago (como Photoshop para
hacer los sprites en lugar del aseprite y el Gimp), siendo éstas últimas más completas y con muchas
más opciones de edición. El mismo caso para el GameMaker Studio pues podríamos costear la versión
Master en lugar de usar la versión Standard (que tuvimos la suerte de obtener de forma gratuita
gracias a una promoción de Yoyo Games, sino habríamos tenido que trabajar con la versión gratuita).
Tener acceso a todas estas herramientas profesionales y de pago derivaría en una mejora sustancial
de la calidad final del videojuego.
Finalmente mencionar que el resultado obtenido, sobre todo en el videojuego, nos ha dejado muy
satisfechos y más si se tiene en cuenta las limitaciones arriba mencionadas y nuestra inexperiencia
pues es la primera vez que realizamos un proyecto de este estilo (aunque nos ha servido de mucho
para ir habituándonos al desarrollo de videojuegos). Sin duda crear desde cero YinYang Runner ha
sido una experiencia que nos ha servido de mucho y que nos ha dejado claro nuestro interés por ser
developers. En cuanto a YinYang Runner seguiremos puliéndolo (aún hay mucho trabajo por hacer)
para que evolucione de prototipo a videojuego completo.
From:
http://sm.ingenieriamultimedia.org/ - Sistemas Multimedia
Permanent link:
http://sm.ingenieriamultimedia.org/doku.php/alumnos:201314:grupos:grupo18:memoria_p2
Last update: 2013/12/15 10:54
Sistemas Multimedia - http://sm.ingenieriamultimedia.org/