en Fundación Andreani

VideojuegosPaso a paso

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

2

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

PASO A PASOLUGAR DE INVENTOS EN FUNDACIÓN ANDREANI#InventoresEnCasa

VIDEOJUEGOS

hOY

En este Tutorial vamos a ver como crear un Videojuego básico sin la necesidad de usar código de programación. Para este Proyecto vamos a necesitar tener el programa

Game Maker 8. Para eso pueden entrar enHTTPS://TINLY.CO/GAMEMAKER8 para descargarlo directamente y comenzar con la actividad.

¡QUE TAL FUTUROS PROGRAMADORESDE VIDEOJUEGOS!

¡Empecemos!

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

3

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Una vez ya descargado dentro del programa veremos la siguiente pantalla:

Nos vamos a encontrar con muchas herramientas que no conocemos pero que vamos a ir aprendiendo a usar a lo largo del tutorial.

Para comenzar carguemos las fotos que sacamos. Vamos a darle click al icono de Pacman Rojo en la barra superior.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

4

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Esto nos crea un Sprite automáticamente con el nom-bre “sprite0” que no tiene ninguna imagen asignada. Para asignarle una imagen seleccionamos el botón de cargar un sprite.

Seleccionamos una de las fotos que esté en la carpeta donde las guardamos y de esa manera lo asociará al sprite.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

5

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Para retirarle el fondo lo que vamos a hacer es darle al botón de “Edit Sprite” y seleccionar el marcador para poder editar la imagen.

Esto nos va a abrir un editor de imagen en el que vamos a pintar todo el fondo de negro.Una vez pintado el fondo seleccionamos la herramienta de la varita mágica, lo seleccionamos y apretamos [ Ctrl + X ]

Este sería el resultado final.

Le damos Aceptar a todo y repetimos este mismo paso con las 3 imágenes faltantes.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

6

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Una vez que terminemos de editar las imagenes no tendrian que quedar todas las posiciones en la carpeta de sprites.

Para eso clickeamos en la pelotita azul de la barra superior.

Nos va a abrir una ventana en la que podemos configurar nuestro objeto según nuestras necesidades.

Vamos a crear nuestroobjeto perosnaje

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

7

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

¡¡¡A MOVERSE!!!

Comencemos dándole un nombre en el campo “Name”. Luego le vamos a asociar el sprite de frente que carga-mos anteriormente dando click en el campo de <sprite> y seleccionando la imagen que cargamos.

Ahora si, vamos a otorgarle comportamiento a nuestro objeto para poder moverlo a nuestro antojo.Dentro de la ventana de configuración del objeto tene-mos un campo de eventos y otro de acciones.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

8

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Los Eventos son literalmente eventos que suceden en la computadora y el Game Maker tiene que reconocer de alguna manera. Si yo quisiera que mi personaje se mueva hacia la izquierda cuando aprieto la tecla ‘flecha izquierda’ entonces apretar la tecla es el evento y moverse es la acción.

Con esto en la cabeza vamos a añadir el evento KeyPress y seleccionamos el botón <Left>

Ahora dentro del campo de las acciones vamos a arras-trar el movimiento (Move Fixed)instantáneamente se nos abrirá una ventana para configurar la velocidad y la dirección a la que se va a mover nuestro personaje.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

9

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

De la manera que se configuró en la imagen de arriba nuestro personaje se debería mover hacia la izquierda cuando presionemos la tecla “Flecha izquierda”.Pero no tan rápido!!! Todavía nos faltan unos ajustes para probar nuestro juego.De esta manera el personaje se va a mover para la izquierda pero no va a dejar de hacerlo nunca.

Vamos a añadir otro evento que se llama Key release y seleccionar la tecla“Flecha izquierda” nuevamente. Luego arrastramos la acción de movimiento y la dejamos quieta con veloci-dad 0 -cero- como en la imagen de abajo.

También queremos que mire para donde nos estamos moviendo! Así que le vamos a agregar la acción “change sprite” dentro de la solapa “Main 1” y seleccionamos el lado para el que queremos que mire, en este caso es la izquierda.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

10

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Podemos repetir estos pasos 3 veces más, ya tenemos el movimiento hacia la Izquierda. Nos faltan Derecha, Arriba y Abajo. Por cada dirección crearemos 2 eventos con las teclas que correspondan a cada una.

El siguiente paso sería hacer las colisiones con las pare-des para que nuestro personaje no pueda seguir cami-nando hacia el infinito y más allá.Vamos a crear entonces el Sprite de la pared y asignarlo a un objeto que llamaremos “Pared”.el Sprite se puede encontrar en el directorioC:\Program Files (x86)\Game_Maker8\Sprites\Maze - Platform

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

11

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Es importante que al igual que en la imagen marquemos el casillero “Solid”. Esto hará que el juego detecte este objeto como algo que no se puede traspasar.De todas maneras nuestro personaje le pasara por encima como si nada, así que tendremos que ir a la ventana de nuestro Objeto Personaje y darle algunos comportamientos.

Seleccionamos el Evento “Colisión” y elegimos la Pared. Esto quiere decir que al tocar la pared con el personaje va a hacer lo que le pidamos. Y que queremos que haga cuando toca una pared ??? Sencillamente quedarse quieto. De esta forma entonces le asignamos la acción de movimiento la dejamos en el centro.

Del lado izquierdo de la ventana en la solapa “objects” se encuentra el campo para seleccionar el objeto que se quiere colocar en el nivel. A nosotros nos aparecen Sebas y la pared que tenemos creada. Si damos click en el nivel nos colocará a nuestro objeto seleccionado

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

12

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

AHORA SÍ

En la barra superior encontraremos el botón de crear un nivel.

Una vez que le damos click nos crea un nuevo nivel que se encuentra vacío y aparece en la carpeta “rooms”.vamos a ir a la solapa de settings y cambiar el tamaño del nivel a 1000 x 600

A crear nuestro primer nivel

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

13

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Vamos a añadir algunas paredes y luego a probar como va nuestro juego!!!

Para darle play vamos a la barra superior y presionamos el botón verde.

Si todo salió bien nuestro personaje se tendría que mover para todas las direcciones y chocar contra las paredes sin ningún problema.

Para esto al igual que con nuestro Personaje y la pared vamos a tener que crear un sprite y asignarlo a un objeto “Enemigo”. El sprite recuerden que lo pueden conseguir de la carpeta:C:\Program Files (x86)\Game_Maker8\Sprites\Maze - Platform

Así es como lo dejé yo

Vamos a crear enemigos

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

14

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

El comportamiento del enemigo no va a ser una inteli-gencia muy sofisticada, le vamos a decir que se comience moviendo hacia cualquier dirección y que cuando choque contra una pared se mueva hacia cualquier otra dirección.

Para lograr esto vamos a usar un nuevo evento llamado “Create”. El evento Create es el comportamiento que va a tener el objeto cuando se crea en la pantalla, es decir al principio del juego.

Dentro el Evento Create le vamos a dar la acción de Movimiento y vamos a seleccionar todas las direccio-nes al mismo tiempo. Esto hace que el personaje tenga que “decidir” para donde moverse eligiendo una sola dirección.

Nos tendría que quedar como en la siguiente imagen:

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

15

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Por último le vamos a dar la colisión con las paredes. Para eso creamos el evento Colisión y le damos exacta-mente el mismo comportamiento.

Si agregamos al escenario algunos objetos de fantas-mas deberíamos verlos en acción.

¡¿QUÉ ES LO QUE SUCEDIÓ?! Los fantasmas se mueven a la perfección, pero no pasa nada cuando tocan a nuestro personaje! entonces démosle ese comportamiento.

Dentro de nuestro personaje principal creamos un nuevo evento de colisión pero esta vez con el Enemigo.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

16

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Y vamos a darle la acción “Jump to start” que quiere decir “Saltar al inicio”.

Lo dejamos como está y le damos a “OK”

Esto va a hacer que cada vez que un enemigo nos toque volvamos a aparecer en donde nos creamos en un principio.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

17

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Vamos a crear los puntos. Para esto al igual que con nuestro Personaje, la pared y enemigos vamos a tener que crear un sprite y asignarlo a un objeto “Puntos”. El sprite recuerden que lo pueden conseguir de la carpeta:

A diferencia de los demás objetos la manzana no va a tener ningún comportamiento. El comportamiento se lo vamos a dar al personaje.Así que vamos a nuestro personaje y le agregamos otro evento de colisión pero esta vez con la Manzana.

Dentro de este evento le vamos a dar la acción “Destroy”

C:\Program Files (x86)\Game_Maker8\Sprites\Maze - Platform

Yo elegí una manzana ya que me encantan las manzanas

Delicioso puntaje

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

18

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Y también le vamos a dar click a la opción que dice “Other” (Otro) para que lo que se destruya sea la manza-na y no el personaje.

Por último vamos a darle un evento más a nuestro personaje, el evento “Step”.

Este evento lo que hace es ejecutarse 60 veces por segundo. Es decir que lo que pongamos dentro se va a hacer siempre.Dentro del evento vamos a poner la acción “Test Instance Count” que está dentro de la solapa “Control”

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

19

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Y le vamos a asignar el objeto de la Manzana igual que en la imagen de abajo.

En el caso de que eso sea cierto queremos que nos envíe al siguiente nivel. Para eso debajo de esa acción le ponemos “Next room” (Siguiente nivel) que está en la solapa “Main1”

Dejamos la opción que dice <no effect> y le damos a OK

Esto va a fijarse si la cantidad de manzanas en el nivel es igual a cero.

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

20

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Por último nos queda poner las manzanas en el juego.

Ahora solo resta hacer más niveles apretando en el botón “Create a room” igual que hicimos con el primero.

El único problema que vamos a tener va a ser que cuando terminemos de jugar nuestros niveles nos muestre este error.

Esto pasa porque le decimos que vaya al siguiente nivel y no hay ninguno. Entonces para solucionarlo podemos crear un nivel que no tenga ni personaje ni manzanas y diga algo como “Victoria” o “Game over”Esto lo podemos hacer creando un Background (Fondo) en la barra superior.

SOLUCIONANDO ERRORES

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

21

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

y dándole a “Edit Background”

Y le damos el tamaño de nuestro nivel que es1000 x 600.

¡¡¡Yo hice esto!!!

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

22

ww

w.fu

ndac

iona

ndre

ani.o

rg.a

r

Por último se lo agregamos al último room dentro de las configuraciones en la solapa Background

Nos tenemos que asegurar de que este nivel sea el último.

¡MISIÓN CUMPLIDA!Ahora solo queda poner de tu ingenio e

imaginación para crear niveles cada vez mejores.¡Y a disfrutar de tu juego al máximo!