Our Tutorials

Introducción

Vamos a empezar viendo ejemplos de juegos creados con Game Maker, que es el programa que vamos a utilizar. Podeis ver un juego de plataformas creado por mí llamado The bullies (que ya os aviso que tengo poca imaginación y que he conseguido mal el movimiento, pero en este tutorial lo aprendereis bien), que lo podeis descargar aquí. Como sé que al ver el mío os vais a desanimar (o no) os pongo un link hacia otro juego creado con Game Maker por un chaval de 15 años, para descargarlo pulsa aquí.

Esta primera lección se estructurará de forma que consigáis los conocimientos básicos (y algunos un poco avanzados) para crear un juego y luego creeis uno. Por lo tanto los primeros capítulos serán puramente teóricos, en los que aprendereis las distintas partes de los juegos y cómo crearlas, y luego crearemos un juego con los conocimientos adquiridos, ya en el capítulo 1.9.

El programa

Como ya os he dicho vamos a utilizar el Game Maker, concretamente el 7.0. Os lo podeis descargar aquí. Esa es la versión de prueba, que os permite usar el programa, pero no os aparecerán todas las posibilidades. Si quieres usar la versión pro puedes comprarla en esa misma web por 20$ o "buscarte el crack".

Conceptos

Antes de empezar a utilizar el programa vamos a aprender cómo se estructuran los juegos. Primero tenemos los sprites, que son las imágenes que vamos a poner a los objetos del juego. Luego tenemos los objetos, que son los que están en el juego, ya sea con movimiento o parado. Ejemplos de objetos son el suelo o el personaje. A los objetos también se les llama instancias, por lo que no os extrañeis si lo veis por ahí escrito. También están los backgrounds (que son los fondos de nuestro juego) y los sonidos. Además están los rooms (habitaciones en inglés), que son por ejemplo las fases. Para ser más exactos las rooms es donde colocamos objetos y backgrounds.

Si no teneis claro alguno de estos conceptos no os preocupeis, ya los acabareis diferenciando. El principal problema está en confundir un sprite con un objeto, que no son lo mismo, ya en el siguiente capítulo aprenderemos a poner sprites en nuestro juego y aprenderemos lo principal de ellos.

Si alguna vez teneis alguna duda o quieres opinar del manual dínoslo en la sección crear juegos del foro.

Agregar sprites

Primero abrimos el Game Maker. Para agregar un sprite hay dos formas, las dos señaladas en la imagen siguiente. Una es dar botón derecho sobre la carpeta que se llama sprites y darle a Create Sprite, o también se le puede dar a la cara roja del menú de arriba.

Una vez agregado el sprite se nos abre la ventana siguiente:

Primero le ponemos un nombre al sprite donde pone Name (usa sólo letras, números y barras bajas, y procura que no haya dos sprites con el mismo nombre) y después cargamos uno dándole a "Load sprite". Nos aparecerá la carpeta de sprites por defecto del Game Maker, para nuestro primer sprite vamos a poner un bloque que puede servir de pared o suelo, se encuentra en la carpeta various y se llama Square.

Características de los sprites

Para continuar asegúrate de que esté marcada la casilla Advanced mode en file (en el menú de arriba del todo), porque sino no te aparecerán algunos botones.

Ahora vamos a aprender a modificar las características de los sprites siguiendo en la ventana que teníamos antes. Si la cerraste sólo tienes que darle dos clics al sprite que creaste. Por encima del botón OK puedes ver una casilla que se llama transparent, ésta vale para que el color que tenga en el pixel de abajo a la izquierda (en ese punto) no se vea, de forma que si ese punto es negro, todo lo que sea negro no se verá porque se hace transparente.

El botón de "precise collision checking" tiene que ver con la colisión entre objetos, es decir, cuando un objeto entra en contacto con otro. Si la casilla no está marcada la colisión se tendrá en cuenta con la zona transparente incluida, y si está marcada sólo se tendrá en cuenta la zona visible. Si está marcada el juego va a consumir más memoria, por lo que sólo lo marcaremos en objetos que necesiten colisiones perfectas, como el personaje del juego.

La casilla "smooth edges" sirve para que en el caso de que se nos vea el muñeco muy cuadriculado nos lo redondee. La casilla "Preload texture" sirve para que este sprite se cargue a la vez que el juego. Contra más sprites tengas con esta casilla marcada más tardará en cargar el juego, pero tampoco conviene quitarlas todas porque sino cuando aparezcan estas texturas en el juego se tendrán que cargar haciendo que durante el tiempo de carga vaya lento. Por lo tanto conviene marcarla en los sprites que más utilicemos, y los que apenas aparezcan no se marca.

Debajo de esos tres botones podemos ver una ventanita llamada origin. Cuando agreguemos un objeto en una room se pondrá en un sitio u otro dependiendo donde esté el origen, donde lo pongamos ahí se pondrá el origen del objeto. La mayoría de las veces utilizaremos el origen en el 0,0, pero si te conviene cambiarlo lo puedes cambiar ahí. La ventana llamada "bounding box" no la vamos a tocar, porque no tiene apenas utilidad.

Modificando los sprites

Nosotros podemos modificar un sprite dando en "Edit sprite". Ahí podemos ver el sprite, y en el caso de que sea un gif animado aparecerán las distintas imágenes que lo componen. En el menú de arriba a la derecha hay un lápiz, y si seleccionamos una imagen del sprite y le damos se nos abrirá una ventana en la que podemos cambiar el sprite como si fuera el paint. Si lo modificamos después lo podemos guardar dando clic en el disket del menú donde estaba el lápiz.

En la ventana de edit sprite además de modificarla como en el paint podemos hacer lo siguiente:

• En el menú transform:
1. Mirror horizontal gira el sprite horizontalmente.
2. Flip vertical lo gira verticalmente
3. Shift nos permite mover la imagen dentro del recuadro que la contiene.
4. Rotate nos permite girar el sprite 90º, 180º o la cantidad que queramos. En el último podemos especificar la calidad, siendo 9 la máxima.
5. Resize canvas redimensiona el recuadro que contiene la imagen, y nos permite elegir donde aparecerá la imagen en este recuadro. Si marcamos "Keep aspect ratio" el porcentaje será el mismo en los dos ejes.
6. Stretch nos permite redimensionar tanto el recuadro que contiene la imagen como la imagen.
7. Scale nos permite redimensionar la imagen pero no el recuadro que la contiene.
• En el menú images:
1. Cycle left hace que en los gifs animados la animación empiece en la imagen anterior, y cycle right en la siguiente.
2. Black and white pone el sprite en blanco y negro, colorize cambia el color del sprite, colorize partial cambia de color sólo una parte, shift hue es otra forma de cambiar el color, intensity es la intensidad del color e invert invierte los colores.
3. En fade elegimos un color y la imagen se aproximará a ese color, transparency nos permite hacer medio transaparente el objeto (cuanro más grande sea el nº que pongamos más transparente será) y blur difumina la imagen.
4. Crop nos permite reducir la imagen tanto como sea posible dándonos a elegir la distancia entre ésta y el borde.

Antes de seguir con el menú transform os voy a enseñar a crear una animación gif a partir de las imágenes. Vamos a utilizar las siguientes tres imágenes de mario:

Guardadlas en vuestro ordenador antes de seguir. Cread un nuevo sprite, cargar la primera imagen de mario e iros a "Edit sprite". En el menú de arriba podeis ver una carpeta con un signo mas. Dadle y agregad la segunda imagen y luego la tercera. Ahora si marcais la casilla "Show preview" vereis el sprite en movimiento. Dentro del preview (previsualización) podeis ver un recuadro que se llama speed, hay podeis probar a poner una velocidad más lenta, como 10, pero esa no será la que tendrá en el juego. Una vez hecho esto veamos el menú animation::

1. Set lenght nos da a elegir el nº de imágenes que tiene el gif animado repitiéndolas o borrándolas, mientras que stretch hace lo mismo pero duplicándolas o borrándolas.
2. Reverse pone al revés la animación, mientras que add reverse duplica la animación pero al revés.
3. Transalation sequence hace que en la animación la imagen se mueva un poco en cada paso, mientras que rotation hace que rote (clock-wise es en el sentido del reloj).
4. Colorize hace que la animación vaya tomando un color en concreto, fade to color va convirtiendo la imagen en un color en concreto y dissapear hace que la imagen vaya desapareciendo.
5. Shrink va encogiendo la imagen hasta que desaparece, grow empieza desaparecido y va agrandando, flatten aplasta la imagen en una dirección y raise la alarga.
6. Overlay superpone la animación a una imagen o animación y morph va convirtiendo la animación en otra.

Para terminar, una animación también la puedes crear a partir de imágenes como ésta:

Para ello en el menú file le damos a "Create from Strip" y abrimos la imagen. Entonces nos aparecerá una ventana con una serie de opciones en la derecha:

1. Number of images es el número de imágenes que vas a extraer, y images per row son las imágenes que va a haber en cada fila.
2. Image width es el ancho de las imágenes, y image heigth el alto.
3. Horizontal cell offset es cuantas imágenes se salta horizontalmente, y vertical cell offset verticalmente.
4. Horizontal pixel offset y vertical pixel offset es lo mismo pero en píxeles
5. Horizontal separation y vertical separation es la separación en píxeles entre las imágenes

Para la imagen que puse antes los datos a poner serían estos:

Cuando le des a OK te van a quedar las imágenes muy chicas, pero ya sabes agrandarlas.

Una vez hayas acabado de modificar el sprite sólo tienes que darle al tick que hay en el menú de arriba y después darle a OK en el menú de las propiedades del sprite. Con todo esto puedes llegar a hacer muy buenos sprites, sólo necesitas práctica.

Si tienes alguna duda o quieres opinar de éste manual lo puedes hacer en la sección de creación de juegos del foro. Nos vemos en el siguiente capítulo.

Agregar sonidos

Bueno, primero de todo recordar que teneis que tener marcada la opción "advanced mode" en el menú file, porque si no no te saldrán algunas opciones. Para agregar un sonido se puede hacer de dos formas también, una dando un clic en el icono de al lado de la carita de agregar los sprites, y otra dando botón derecho en la carpeta Sounds y dándole a "Create sound". Una vez creado el sonido nos aparecerá la siguiente ventana:

Primero, como hicimos con los sprites, le ponemos un nombre al sonido, y después le damos a "Load Sound" para cargar uno. Podeis ver una colección de música para tu juego en la galería de sonidos.

Características de los sonidos

Ahora vamos a seleccionar el tipo de sonido en la ventana "Kind":

1. Normal Sound: los sonidos normales suelen ser sonidos en formato wav (puedes poner otro formato, pero Game Maker no los reconoce todos). Estos sonidos tienen la característica de que pueden sonar varios a la vez, incluso del mismo sonido.
2. Background music: es la música de fondo, y sólo puede sonar una a la vez, por lo que si empiezas otra se parará la anterior. Los archivos midi son siempre música de fondo.
3. 3D Sounds: los sonidos 3d son, como su propia palabra indica, los que tienen opciones de 3d.
4. Use Multimedia Player: Game Maker utiliza Direct X para reproducir la música, lo que lo limita a archivos midi y wave. Esta opción sirve para que el sonido sea reproducido por el media player, permitiendo reproducir además sonidos mp3. El problema de esto es que no puedes darle efectos de sonido, y además los sonidos mp3 al ocupar tan poco necesitan ser descomprimidos por lo que tu juego tardará más en cargar. Por esta razón no es aconsejable utilizar sonidos mp3 en tus juegos.

Una vez elegido el tipo de sonido podemos ponerle efectos en la ventana "Effects". Los efectos son coro (chorus), eco (echo), distorsión (flanger), reverberación (reverb) y un efecto como si fueran gárgaras (gargle). Puedes ver como te va quedando el sonido pulsando en el play.

Por último tenemos el volumen del sonido y en qué lado (de los altavoces) debe sonar más. Además, como con los sprites, tenemos el botón Preload, para que se cargue el sonido a la vez que el juego. También puedes ver un botón que se llama Edit sound, que sirve para que se te abra un programa de edición de sonido, pero primero debes indicarle al Game Maker cual es ese programa. Para ello le das a File/Preferences, le das a la pestaña de Sound Editor y lo pones en cada tipo de archivo. Un ejemplo de estos programas es el Nero Wave Editor, que te viene en el nero.

Te recuerdo que si tienes alguna duda la puedes preguntar en la sección de creación de juegos del foro.

Agregar backgrounds

Como ya os dije, los backgrounds son los fondos de nuestro juego. La diferencia con los sprites es que los fondos no interaccionan con nada. Para agregar uno podemos darle al icono con una imagen que hay al lado del icono del sonido, o darle botón derecho en la carpeta backgrounds y darle a "Create Background". Una vez creado nos aparecerá la siguiente ventana:

Le damos a load background y cargamos uno que tengais. En la carpeta de game maker hay una carpeta llamada backgrounds donde encontrareis algunos. Como siempre lo primero debe ser ponerle un nombre.

Características de los backgrounds

Primero tenemos la casilla transparent, que hace lo mismo que en los sprites, vuelve todo lo que tenga el color del píxel de abajo a la izquierda transparente. El botón "Edit background" abre un programa parecido al paint para modificar o crear el background, al igual que con los sprites también.

Después hay otra casilla llamada "Smooth edges", que sirve para que cuando se vean los bordes un poco marcados por la transparencia se suavicen. Este efecto sólo es visible en el juego, y no en el editor. Preload texture, como siempre, sirve para que se cargue la imagen a la vez que el juego.

Por último tenemos "Use a tile set", que lo que hace es dividir la imagen en muchos cuadraditos y despues en el room elegimos qué parte (en cuadraditos) poner y dónde. Esto es útil para imágenes como las de los sprites que os enseñé que venían muchos en una sóla. Si marcamos el tile set nos aparecen seis casillas más:

1. Tile width es el ancho de los cuadraditos, y tile height el alto.
2. Horizontal offset y vertical offset indican desde dónde empiezan los cuadrados desde la izquierda y desde arriba.
3. Horizontal sep y vertical sep indican la separación horizontal y vertical entre los cuadrados.

Y hasta aquí el capítulo de los backgrounds, en el próximo capítulo empezaremos con los objetos.

Agregar objetos

Nos saltamos los paths, los scripts, las fuentes y los time lines que los veremos en la segunda lección y pasamos a algo más complejo como son los objetos. Dentro de los objetos se incluyen las acciones y los eventos, que veremos en capítulos aparte. Pues bien, agreguemos un objeto. Para agregar un objeto puedes dar botón derecho en la carpeta objects y darle a create object, o dar un clic a la bola azul del menú de arriba. Entonces nos aparecerá una ventana como ésta:

Como podeis ver, esta ventana es más compleja que las que hemos visto hasta ahora, y esto se debe a la infinidad de cosas que puedes ponerle a los objetos. Primero le ponemos el nombre. En este caso no podemos hacer como en el caso de las imágenes y los sonidos que cargábamos uno, porque un objeto es algo que no se ve, y que le pones un sprite para que sea visible. Un mismo sprite puede ser puesto en múltiples objetos. Pues vamos a asignarle un sprite que tengamos creado a este objeto, por ejemplo el del bloque que hicimos al principio. Para ello le damos al botón azul que hay al lado de donde pone <no sprite>, y seleccionamos el sprite, que ya debe de estar creado. Si no está creado le podemos dar a new y nos creará un sprite nuevo.

Características de los objetos

Pues más bien pocas. La primera que encontramos es la casilla visible, que si no está marcada el objeto no se verá, será invisible. Esto nos sirve por ejemplo para crear objetos que definan la música, para objetos que deben estar ahí pero que no se deben de ver. Luego tenemos la casilla solid. Esta casilla sirve para objetos que tengan eventos colisión con otros objetos, de forma que no puedan ser atravesados por esos objetos.

Ahora encontramos una ventana que se llama depth. Esto es la profundidad del objeto. Los objetos con mayor profundidad se dibujan primero quedando detrás de los que tienen menor profundidad. Esto es importante tenerlo en cuenta, para que no salgan cosas raras en el juego. Por lo tanto los objetos que se ven delante tienen un número mas chico de profundidad (puedes poner números negaivos). Si tienen la misma profundidad quedará delante el que haya sido creado después.

Ahora encontramos la casilla persistent, que hace que un objeto sea persistente, es decir, que cuando se cambie de room el objeto seguirá estando y además en el mismo sitio (en coordenadas). Por lo tanto en esa nueva habitación procura no poner ese objeto, porque sino habrá dos. Esto nos sirve para objetos que definan, por ejemplo, las armas que ha cogido nuestro personaje.

Por último tenemos dos cosas más. Parent, que hace que el objeto que pongamos aquí sea padre de éste, es decir, que los eventos y acciones del objeto padre (el que pongamos ahí) los tendrá también éste. Esto nos sirve para cuando queremos crear varios objetos con los mismos eventos y acciones pero que varien en algo. En ese caso crearemos un objeto con los eventos y acciones comunes y haremos que los otros sean hijos de éste. Luego sólo tenemos que ponerle a cada uno lo que tiene de particular. También tenemos la casilla Mask, que sirve para que en una colisión sólo se tenga en cuenta una parte del sprite y no entero, que nos sirve para dar una especie de realismo en 3d. Esta opción no la manejo todavía mucho, cuando aprenda a usarla lo pondré aquí.

Si pulsas en "Show information" puedes ver la información del objeto, dependiendo de cómo lo hayas configurado con lo visto hasta ahora. Luego ya las ventanas que hay a la derecha son los eventos y las acciones, que ya veremos más adelante.

Ahora vamos a crear las habitaciones donde ocurre el juego, el lugar donde se encuentran los objetos "vestidos" con los sprites. Primero vamos a abrir el game maker y vamos a agregar algunos objetos con sus sprites y al menos un fondo. Luego vamos a crear el room. Para agregar un room puedes dar botón derecho en la carpeta Rooms y darle a create room, o dar un clic al cuadrado blanco del menú de arriba. Entonces nos aparecerá una ventana como ésta:

Backgrounds (fondos)

Vámonos primero a la pestaña backgrounds, para ponerle fondo a nuestra habitación:

Lo primero que vemos es la casilla "Draw background color", que si no está marcada el fondo de la habitación será negro. Si está marcada el fondo será el color que pongamos dando clic en el recuadro gris de donde pone "color". Luego abajo podemos ver una lista de backgrounds que podemos definir, los backgrounds de más hacia abajo se superponen a los de arrriba, es decir, el background 2 quedaría encima del 1. Para activar un background seleccionadlo y marcad la casilla "Visible when room starts", entonces aparecerá en la lista en negrita. Vamos a activar el 1 y a ponerle una imagen. Una vez activo le damos al cuadradito azul y seleccionamos el background que queramos ponerle.

Luego abajo, si deseleccionamos la casilla "Tile Hor." el fondo no se repetirá horizontalmente, y podremos elegir donde pone X la posición en este eje. Al igual pasa con "Tile Vert." pero verticalmente. Stretch hace que el fondo se expanda y ocupe todo el room. "Hor. speed" le da una velocidad horizontal (cuanto mayor número pongamos mayor será la velocidad, y si ponemos un número negativo se moverá en sentido contrario), y "vert. speed" le da una velocidad vertical. Para ver los efectos conseguidos podemos darle arriba a la flecha verde para ver una previzualización del juego.

Objects (objetos)

Ahora vamos a ponerles los objetos a nuestro juego. Para ello le damos a la etiqueta objects. Entonces nos aparecerá en un rec