Comunidad orientada al desarrollo de videojuegos

Game Maker Studio – Tutorial Aventura gráfica

De vuelta otra vez, ahora por fin comenzamos el tutorial de cómo hacer una aventura gráfica. Para ello tendremos que planificar el desarrollo del juego a lo largo de esta serie de tutoriales.

INDICE:

  1. Tutorial I: Planificación
  2. Tutorial II: Escenario y movimiento personaje principal
  3. Tutorial III: Interacción con objetos del escenario
  4. Tutorial IV: Diálogos
  5. Tutorial V: Inventario
  6. Tutorial VI: Coger objetos – Usar Objetos
  7. Tutorial VII: Combinación de objetos
  8. Tutorial VIII: Desarrollo de un puzle – Operaciones de variables
  9. Tutorial IX: Diseño de sprites y escenario
  10. Tutorial X: Los toques finales.

PLANIFICACIÓN

Si fueramos a diseñar una aventura gráfica original con objetivos comerciales, este es el momento de dejar la programación a un lado y comenzar escribiendo un guión. Es primordial tener claro TODOS los diálogos del juego, situaciones, escenarios y personajes. También tener unos diseños básicos de personajes y estética del juego son importantes, pero no en este momento. GM:Studio permite sustituir los sprites en cualquier momento, así que no nos obsesionemos con eso ahora.

En este tutorial nos decantaremos con una trama sencilla con gráficos sencillos, para que más adelante si lo deseamos podamos sustituirlos por diseños más trabajados. Lo único importante para empezar será tener en cuenta todos los elementos que necesitaremos y el tamaño en píxeles en cada uno, sin olvidarnos de elegir la resolución ideal para el tamaño completo de la pantalla. El primer paso será por tanto elegir la plataforma objetivo del juego.

Resolución: Este ejemplo está pensado para funcionar en navegadores web, bajo HTML5, así no descartaremos ninguna plataforma (Nota: Para exportar a HTML5 hace falta tener la edición Profesional de GM:Studio + Módulo HTML5 o la edición Master), sin embargo será funcional totalmente con la edición Standard bajo Windows, aunque los ejemplos los cuelgue en HTML5 por comodidad para vosotros. La resolución por tanto será 640 x 480, lo que abrirá puertas a funcionar en practicamente todos los PCs, tablets y móviles de gama media-alta.

Argumento: Te despiertas en una pequeña isla desierta, el escenario es limitado (una sola room), con varios objetos que coger y combinar, aparte de un objetivo claro, escapar de la isla.

Personaje: El personaje principal es un naufrago, con una pequeña barba y con la ropa desgarrada. Podrá moverse por la isla esquivando obstáculos (usando el anterior tutorial de búsqueda de rutas). El tamaño preliminar del personaje será de 64 x 128 píxeles.

Posibles objetos: Palmera, Coco, Botella, Maletín, Mapa, X, Llave, Pala, Calavera, Móvil.

Personajes no jugadores (NPCS): Loro, Sam.

Desarrollo: Aquí iría especificado todo el tema de combinación de objetos, diálogos y desarrollo de la historia. Por ahora lo voy a dejar abierto. Si aparecen propuestas en los comentarios elegiremos los mejores detalles de cada desarrollo, sino, lo iremos haciendo al mismo tiempo aunque la integridad de la “aventura” será cogida por los pelos.. es un tutorial, después de todo 😉

Particularidades de las aventuras gráficas:

Existen dos escuelas clásicas en el mundo de las aventuras gráficas:

– Estilo Lucas Arts (Monkey Island): En el desarrollo es imposible perder o morir, como mucho puedes quedarte atascado o el juego devolverte a una escena anterior, pero nunca podrás “perder” y tener que reiniciar el juego. Todo se resuelve por: Prueba -> no funciona -> prueba -> no funciona -> prueba -> funciona y sigues adelante.

– Estilo Sierra (King’s Quest): Puedes morir como producto de tus acciones y por tanto debes salvar y cargar partidas solucionando todo por el método prueba -> error ->  muerte -> cargar partida.

En este tutorial usaremos el sistema Lucas Arts, ya que es más dinámico. Por lo tanto tendremos que preparar distintas interacciones que programaremos por variables.

Ejemplo:

Coco (obj_coco): Estará colocado en la palmera, oscilando, sin embargo no podrá cogerse a menos que tengamos un palo en el inventario. Haremos que al pasar el ratón por encima, el cursor cambie a un ojo, para marcarnos que podemos mirarlo y así hacer que aparezca una descripción. Sin embargo si cogemos el  palo. Podremos seleccionar el palo en nuestro inventario y entonces activar la variable palo_activado = 1 y al pasar el ratón por encima del coco, cambiará el icono al símbolo de usar (una V por ejemplo) y sucederá una acción por la que el coco caerá, cambiando de posición y pudiendo cogerlo en ese momento.

Por tanto, hay que distinguir entre la programación visual de las animaciones y la programación de las variables. Pero todo esto lo veremos más adelante.

boceto_1s

Boceto preliminar del escenario con el personaje

Así que realmente ya queda poco para empezar. Aquí os dejo un pequeño boceto de cómo podría plantearse el escenario, sencillo y con movimiento limitado, habrá que ajustarlo a 640 x 480,obviamente. Para este tutorial usaremos una habitación más grande que la cámara, dejando cierto “aire” a los lados y arriba, aunque la cámara sí que medirá 640 x 480, nunca viene mal dejar cierto margen para posibilitar futuros encuadres y el “port” a más plataformas.

Nota sobre la resolución:

Cada smarphone basado en android tiene una resolución diferente, con un ratio distinto (16/9 4/3/ 4/2, etc). GM:Studio ajusta la cámara a la pantalla, pero deforma la imagen si no tiene el mismo ratio  la View, que la pantalla del móvil. Por eso es mejor dejar ese margen y más adelante por código hacer que se ajuste todo automáticamente. Por ejemplo, ajustando la isla siempre verticalmente, dejando unos pocos píxeles a los lados. En resoluciones alargadas se verá más oceano a los lados, y en resoluciones basadas en 4:3, se verá siempre la isla entera sin tanto mar a los lados.

Por lo tanto aunque la cámara que usemos para el ejemplo será 640 x 480, nuestra única habitación por ahora tendrá que medir 1024 x 480 con una velocidad de 30 steps.

En el próximo tutorial:

Configuraremos la habitación con un escenario sencillo y configuraremos un personaje en movimiento, para que pueda moverse por la habitación.

,

10 thoughts on “Game Maker Studio – Tutorial Aventura gráfica

  • Asensio says:

    Muy interesante la decisión de optar por un tutorial de aventura gráfica con GMS, por varios motivos; primero porque casi diría que no existe ninguno en nuestro idioma, y segundo porque la gente suele optar por alternativas más específicas como son wme y visionaire, antes que usar algo más generalista como es gamemaker.

    Lejos de criticar la decisión la alabo, seguiré con atención y curiosidad esta serie de tutoriales.

  • javifugitivo says:

    Sí, la idea nació de mi conversación con el administrador de Gamedev, sobre que hay muchos tutoriales para hacer juegos de plataformas (cientos) pero muy pocos sobre aventuras gráficas. Aparte es una buena oportunidad para iniciar a la gente en la programación tocando operaciones de variables y operaciones sencillas, a partir del próximo capítulo nos meteremos de lleno. ¡Gracias por seguirnos!

  • eulogioep says:

    Hola, Yo tengo la licencia de Visionaire y es verdad que es una herramienta dedicada para Aventuras gráficas pero hace poco conocí GameMaker Studio, he comprado la versión Master collection en una promoción y me gustaría aprender a fondo a usar esta herramienta. He encontrado tutoriales pero casi todos en inglés. Estoy muy interesado en este curso y espero que siga adelante.

    Muchos ánimos y a la espera del segundo tutorial.

    Un saludo!

  • David says:

    Continua por favoooor!!!!…XD

    Que parece la mar de interesante.

    • javifugitivo says:

      Han sido unos meses muy buenos con una gran proyección profesional así que he dejado esto un poco descuidado, en breve intentaré retomar este tutorial. ¡Siento el super retraso!

  • empardopo says:

    Acabo de dar con estos tutoriales, soy nuevo en Game Maker y creo que me van a venir geniales.
    Lástima la falta de tiempo; el verdadero ORO de nuestra era,jeje!
    Enhorabuena por los tutoriales.

  • gromberr says:

    muy interesante, hay más info?

  • mrblue77lol says:

    parte 2 pls

  • Jose Luis says:

    Enhorabuena!!! muy bueno este artículo, en español y muy bien explicado. Acabas de ganar a un aprendiz nuevo a tus tutoriales 🙂

  • javifugitivo says:

    Gracias por los ánimos. Tengo claro que hay que retomar este tutorial de una vez, aunque ahora con lo que he aprendido seguro que se puede hacer mucho mejor.

Leave a Reply