Guia G Develop

 

  Dirección de Investigación y Desarrollo Tecnológico

Festival de la Ciencia y Tecnología Semillero INICTEL-UNI   

“   

GUÍ

” ”    

DE L BOR TORIO 

Taller “  

” 

Mi Primer Videojuego  

Dirección de Investigación y Desarrollo Tecnológico

1

 

 

Taller “Mi Primer Videojuego”  ¿Alguna vez pensaste en hacer tu propio videojuego y que todos tus amigos lo jueguen? Pues esta es tu oportunidad de iniciarte en este fascinante mundo. Hoy tendremos nuestra primera experiencia creando videojuegos, y para ello no necesitamos ser unos genios de la programación, ni mucho menos haber estudiado años en una universidad, porque tenemos esta genial herramienta:

El GDevelop es un programa que nos facilitará la creación de todo tipo de videojuegos en 2D, y lo mejor de todo: ¡Es gratis! Para esta primera experiencia, crearemos un juego estilo “plataforma” (algo así como un Mario Bros). Todos los gráficos que necesitas (mas algunos adicionales por si quieres experimentar)

están adjuntos a esta guía, así que manos a la obra.

Paso 1: Iniciando el proyecto Si estás llevando esta guía, en tu colegio, y con los profesores que escribieron esto, seguramente tienes instalado el programa en la computadora donde estás, así que puedes abrirlo. Si quieres seguir aprendiendo en tu casa o algún otro lugar, y no tienes instalado el programa, puedes encontrarlo aquí:  aquí: http://compilgames.net/main-es.html. http://compilgames.net/main-es.html.  Una vez abierto el GDevelop, ve rápidamente al menú “Archivo”  y selecciona Nuevo. Te aparecerá esta pequeña ventana:

Dirección de Investigación y Desarrollo Tecnológico

2

 

  Selecciona la primera opción en ambas columnas, y escoge la carpeta donde guardarás tu trabajo (en la parte inferior de la ventana). Cuando estés listo, presiona el botón “Crear un nuevo proyecto”, y empecemos. Es importante también que tengas a la mano los archivos que te hemos dado con esta guía. Importante: Todo proyecto tiene 2 partes, las escenas y los eventos. Las escenas son los espacios donde colocaremos todos los elementos de nuestro juego, y los eventos son enunciados con los

cuales daremos funcionalidad al videojuego. Cuando crees tu proyecto en GDevelop, iniciaremos en la ventana de la escena.

Paso 2: Añadiendo el personaje Todo buen videojuego tiene un personaje, el cual va a ser manejado por el usuario y se convertirá en nuestro héroe durante el juego ¿cierto? Pues esto será lo primero que añadiremos. Para ello, haremos click derecho  sobre cualquier parte vacía y seleccionaremos “Insertar un nuevo objeto”. 

Dirección de Investigación y Desarrollo Tecnológico

3

 

  Al hacer esto nos aparecerá una nueva ventana, donde debemos elegir el tipo de objeto a insertar. Seleccionaremos “Sprite” y damos click en Ok.

Luego de seleccionar el tipo de objeto, nos aparecerá otra ventana de edición de objetos. En esta nueva ventana (que al inicio estará vacía), en la parte baja, hay un recuadro blanco con el título “Imágenes”, donde daremos click derecho y seleccionaremos “Añadir una imagen desde un archivo” (como la imagen siguiente).

Dirección de Investigación y Desarrollo Tecnológico

4

 

  En la ventana de selección de archivos buscaremos la carpeta donde tenemos nuestros gráficos, y agregaremos la imagen que se llama “p1_stand”. Este es el dibujo de nuestro personaje cuando no se mueve. Damos click a Abrir y el personaje aparecerá así:

Ya tenemos nuestro personaje añadido al juego, así que cerramos la pequeña ventana. Ahora fíjate en la columna de la derecha, donde dice “Editor de objetos”, hay un “NuevoObjeto” que es nuestro personaje. Selecciónalo, presiona F2  (si, en tu teclado) y colócale de nombre “Player”.  

¡Felicidades! Ya tienes tu personaje principal y tu primer videojuego ya va cobrando forma. Es hora de añadir más objetos.

Dirección de Investigación y Desarrollo Tecnológico

5

 

 

Paso 3: Necesitamos piso Los juegos tipo plataforma se basan en un personaje que recorre diferentes lugares, ya sea superando obstáculos o venciendo enemigos, pero siempre moviéndose y saltando sobre superficies, como el piso, o bloques que están sobre el aire (a esos se les llama plataformas). Empecemos entonces a ponerle un piso a nuestro personaje. Para ello damos click derecho en algún espacio en blanco, y seleccionamos “Insertar un nuevo objeto”. En la ventana de selección elige “Mosaico”. 

Un Mosaico es una imagen especial, la cual empieza a repetirse mientras intentas agrandarla. Ya lo entenderás mejor cuando lo coloques, así que presiona Ok.

Aparecerá el mensaje para activar la extensión. Presiona “Si”. 

Dirección de Investigación y Desarrollo Tecnológico

6

 

  Ahora te aparecerá una ventana con las opciones de Mosaico. En esta nueva ventana, en la esquina superior izquierda, hay una pequeña cruz blanca en un círculo cír culo azul. Dale click y busca el archivo “grassHalfMid”.  

Asegúrate que esté seleccionado en la columna izquierda, como en la imagen:

Ahora presiona éste botón: y el nombre del archivo aparecerá en el recuadro que dice “Texturas”.  Si ya apareció, dale click a Ok y verás el objeto junto a nuestro personaje.

Dirección de Investigación y Desarrollo Tecnológico

7

 

  Igual como en el caso de Player, en la columna derecha aparece nuestro mosaico como NuevoObjeto. Ponle de nombre “Grass”.  Para que nuestro objeto sirva de piso para nuestro personaje, selecciónalo en el área de la escena y agrándalo  utilizando los cuadraditos blancos. Trata de darle la apariencia de la siguiente imagen:

Ya hemos avanzado rápidamente con dos de los elementos básicos: El personaje y el piso donde se moverá. Es hora de darle movimiento.

Paso 3: A Moverse Nuestro personaje por ahora es solo un dibujo inmóvil. Para darle movimiento, le daremos doble click a la imagen (la de Player) y aparecerá una pequeña ventana de Propiedades: 

En la parte final de esta ventana, está la opción de “Agregar un comportamiento”. Daremos click a la palabra “Agregar…” que está a su costado. Dirección de Investigación y Desarrollo Tecnológico

8

 

  Importante:  Un comportamiento consiste en un conjunto de propiedades prediseñadas que añaden funcionalidad a cada objeto, ya sea el personaje, los enemigos, proyectiles, o hasta el piso, que ya veremos más adelante.

Al presionar Agregar, aparecerá una ventana de selección de comportamiento. Ahí elegiremos “Objeto que se desplaza sobre plataformas”  y damos click a Ok. (No confundir con “Plataforma”, que está arriba).

Cerramos la ventana de propiedades, y nuestro personaje ya tiene propiedades de movimiento. ¡Genial!, ahora debemos transformar a Grass  de una simple imagen al piso de nuestro personaje. Para ello también le damos doble click, elegimos agregar comportamiento, y en la ventana de selección escogemos “Plataforma”. 

Dirección de Investigación y Desarrollo Tecnológico

9

 

  Este piso o Grass puedes hacerlo más largo, corto, o duplicarlo, y conservará el comportamiento que le has asignado. En caso quieras duplicar el objeto, simplemente mantén presionada la tecla Ctrl, dale click al objeto, y sin soltarlo, arrástralo hacia otro lugar. Debería resultarte algo como esto:

Importante: ¿Quieres saber cómo va cobrando forma tu videojuego? ¡Es tiempo de probarlo! En la parte superior encontrarás un botón azul que dice “Vista previa”, presiónalo y se abrirá un

navegador web con tu juego.

Si todo está bien, Player debería estar sobre el Grass, y puedes moverlo a ambos lados utilizando las flechas del teclado. Por cierto, también puedes saltar con la tecla Shift.

Dirección de Investigación y Desarrollo Tecnológico

10

 

  ¡Ahora es tu turno! Demuéstrate a ti mismo cuánto haz aprendido y añade, tu solo, sin ayuda, un sprite adicional. Este sprite debes hacerlo utilizando la imagen con nombre “GrassBlock” y debes añadirle el comportamiento “Plataforma”. 

Este objeto lo utilizaremos dentro del juego como pequeños bloques donde Player puede apoyarse o saltar sobre ellos.

Paso 4: Animando mi personaje Player puede moverse por el escenario, pero aún parece una estatua que solo se desliza, es por ello que ahora le pondremos animaciones de movimiento. Una animación es una serie de movimientos que pasan uno tras otro mientras el personaje realiza alguna acc acción. ión. En nuestro caso, ya tenemos la imagen de Player cuando está inmóvil, así que ahora añadiremos las imágenes de cuando salta y cuando camina. En la columna de editor de objetos, dale doble click a Player . Volveremos a la ventana de edición de objeto, donde ahora encontrarás una cruz blanca que dice “Agregar una animación”. 

Dirección de Investigación y Desarrollo Tecnológico

11

 

  Dale click a la cruz, y selecciona ahora el archivo “p1_jump”.  Esta será la imagen que usaremos para cuando Player salte o caiga.

De la misma forma, añade otra animación nueva, pero ahora selecciona todos los archivos con nombre “p1_walk” (del 03 al 07).   Estos son los gráficos que usaremos para cuando Player camine, y son varios porque la imagen cambiará constantemente entre ellos, como un video.

Dirección de Investigación y Desarrollo Tecnológico

12

 

  Ya tenemos nuestras 3 animaciones, pero aún debemos hacer un ajuste adicional. En la columna izquierda, dale click derecho a Animación 2 , y marca la opción que dice “Animación en bucle”. 

Un bucle es la repetición constante de una secuencia, en este caso de imágenes, esto quiere decir que después de la última regresará al principio. También podemos seleccionar la velocidad en la que pasa de una imagen a otra dentro de la animación, para ello volvemos a hacer click derecho a Animación 2 y seleccionamos “Tiempo entre cada imagen” y colocamos 0.05. 

Damos click a Aceptar, y ¡Listo!, ya tenemos nuestras animaciones colocadas. Sin embargo, si pruebas tu juego, verás que nada ha cambiado… Esto es porque aún no hemos programado en qué momento aparecerá cada animación, lo cual haremos a través de Eventos. Dirección de Investigación y Desarrollo Tecnológico

13

 

 

Paso 4: Los primeros eventos Como ya mencionamos, nosotros podemos programar todas las acciones de nuestro videojuego a través de eventos. Para poder colocar eventos, iremos a la pestaña que dice “Eventos”, que está arriba del área de trabajo.

Importante:  Todo evento está dividido en 2 partes: La condición y la acción. La condición es aquel suceso mediante el cual damos la orden de que algo pase, como por ejemplo cuando presiono una tecla, o cuando salto sobre un enemigo. Una acción es lo que va a pasar cuando

suceda cada condición, por ejemplo que mi personaje dispare (cuando presiono una tecla) o que el enemigo quede aplastado (cuando salto sobre él). Para agregar un evento, busca en la parte superior el botón que dice “Agregar un evento”, y presiónalo.

Cuando agregues el evento, aparecerán dos espacios en blanco: uno para las condiciones y otro para las acciones. Empecemos por el primero: Coloca el cursor sobre el espacio para las condiciones y dale click a “Agregar una condición”.

Dirección de Investigación y Desarrollo Tecnológico

14

 

  Nuestro evento consistirá en que Player tenga la animación de salto cuando esté saltando, así que eso último será nuestra condición. En la nueva ventana que aparecerá, podremos encontrar en la columna izquierda todas las posibles condiciones que puedan ocurrir en el juego. Buscamos en el grupo  “Comportamiento Plataforma”  la opción “Está saltando” y le damos click.

Luego, en la parte derecha, debemos indicar cuál de los objetos es el que debe estar saltando, pa para ra ello ello pr pres esion ionam amos os este este bo botó tón: n: presionamos este botón:

y sel selec ecci cion onam amos os Playe Player. r. En la pa part rte e de de aba abajo jo

y dejamos ahí la opción que aparece.

Presionamos Ok, y nuestra condición está lista. Ahora debemos colocar qué acción se debe realizar al cumplirse la condición, para lo cual hacemos clic en  “Agregar una acción”. 

Dirección de Investigación y Desarrollo Tecnológico

15

 

  Al igual que en la condición, encontramos una lista de todas las posibles acciones. Seleccionamos la acción “Cambiar la animación” siguiendo la ruta de la parte izquierda de la imagen.

En Objeto, seleccionamos Player utilizando el pequeño botón de la derecha. En el campo de “Signo de modificación” escribimos “=”, y en el campo “Valor” colocamos “1”, tal cual se muestra en la imagen de arriba. Presionamos Ok para finalizar.

De la misma forma, creamos un evento para cuando Player está cayendo, utilizando la misma animación. Cuando Player se encuentra apoyado sobre el piso existen dos opciones: Que esté caminando o que esté detenido. En estos casos, cuando se tienen dos posibilidades dentro de la misma condición, se utilizan los sub-eventos. Para ello primero ponemos la condición general, que es cuando Player está sobre el suelo:

Dirección de Investigación y Desarrollo Tecnológico

16

 

  Presionamos “Agregar un subevento”, y ahora debemos ingresar la segunda condición de este

sub-evento. Iniciaremos cuando Player está en movimiento. La forma de agregar esta segunda condición es igual a como hemos agregado las anteriores.

Para este caso, la acción será asignar la segunda animación, la cual corresponde al movimiento de “caminar” de Player.  El segundo sub-evento debe ocurrir cuando Player NO está en movimiento, lo cual es el caso contrario al anterior. Para este tipo de condiciones, las cuales son la opción negativa a otra, simplemente buscamos la condición anterior, y activamos la casilla de “Invertir la condición”. 

De este modo ya hemos cubierto todas las posibilidades y añadido todas las animaciones al  juego. Debe quedarte algo así:

Dirección de Investigación y Desarrollo Tecnológico

17

 

  ¿Por qué no pruebas el juego? Verás que cuando saltas y cuando caminas, ahora si las animaciones funcionan.

Paso 5: El efecto Espejo Si probaste el juego, te habrás dado cuenta que funciona a la perfecc perfección ión cuando te mueves hacia la derecha, sin embargo, cuando caminas hacia la izquierda, Player realiza una especie de “moonwalk”, lo cual no es lo que deseamos. Para arreglar este detalle, utilizamos el efecto de espejo. En este caso, la imagen de Player debe verse reflejada cuando presionamos la flecha izquierda. Esto último es lo que elegiremos como condición del evento:

La acción a realizar, será “Invertir el objeto horizontalmente”:

De la misma forma, debemos desactivar el efecto espejo cuando presionamos la tecla derecha. Nuestra hoja de eventos debería quedar de esta forma:

Dirección de Investigación y Desarrollo Tecnológico

18

 

 

Paso 6: Moviendo la cámara En la mayoría de videojuegos, mientras el personaje principal se mueve a lo largo del escenario, siempre podemos verlo en nuestra pantalla, como si una cámara lo estuviera siguiendo a cada momento. Esa misma acción será la que colocaremos a continuación. Como está acción debe realizarse en cada momento, crearemos un nuevo evento, y dejaremos la condición en blanco (porque no hay condición, ¿no?). En el caso de la acción, seleccionaremos “Centrar la cámara en el objeto”  de la siguiente manera:

Y nuestra hoja de eventos deberá quedar de la siguiente manera:

Dirección de Investigación y Desarrollo Tecnológico

19

 

 

Paso 7: Añadiendo enemigos Para añadirle dificultad al juego, podemos poner diferentes obstáculos, o en algunos casos algunos enemigos. En nuestro juego utilizaremos estos simpáticos bichos, para lo cual deberás crear un sprite con los archivos slimeWalk1 y slimeWalk2. Ponle de nomb re “Enemigo”. 

Como sabemos que tú ya dominas esto a la perfección, no entraremos en detalles, sólo te sugerimos colocarle el comportamiento de “Objeto que se mueve en plataformas” (quitándole la opción de controles por defecto y velocidad máxima diferente) diferent e) y el comportamiento “Destruir Fuera” (lo cual destruirá los objetos cuando estos salgan del escenario).

Dirección de Investigación y Desarrollo Tecnológico

20

 

  Como hemos quitado los controles al enemigo, debemos simularlos en los eventos, por lo cual puedes añadir la acción de “Simular tecla izquierda para Enemigo” al evento sin condición (No te damos la ruta porque confiamos en que la encontrarás por ti mismo).

Para que este objeto sea realmente un enemigo, hemos aumentado el evento en el cual, si este enemigo llega a tocar a Player, Player desaparecerá, y perderás el juego.

Paso 8: Alistando el escenario Ya hemos armado la jugabilidad básica de nuestro juego, pero aún a ún debemos alistar el escenario del juego. Empecemos por el fondo del escenario: Añade un sprite con el archivo “fondo” y agrándalo para que ocupe todo el espacio.

Dirección de Investigación y Desarrollo Tecnológico

21

 

  Luego, trata de poner el piso a lo largo de toda la parte baja del escenario, para evitar que Player P layer caiga al vacío. También puedes colocar más plataformas y bloques en todo el escenario. No olvides de colocar varios enemigos para que sea más difícil.

Paso 9: Ejercitando la creatividad Hasta aquí hemos desarrollado un juego básico, pero las cosas que puedes añadirle al juego no tienen límites, y puedes hacer todo lo que quieras con lo que ya has aprendido. Te sugerimos que te mantengas pendiente al Facebook de Raymi Ciencia https://www.facebook.com/raymicienciaperu)), porque ahí estaremos colocando tutoriales (https://www.facebook.com/raymicienciaperu virtuales para diferentes tipos de juegos, así que si quieres convertirte en un experto creando videojuegos, este reto es para ti. ¡A ¡ A crear más videojuegos!

Dirección de Investigación y Desarrollo Tecnológico

22