Direccin de Investigacin y Desarrollo Tecnolgico

Festival de la Ciencia y Tecnologa

Semillero INICTEL-UNI

GUA DE LABORATORIO

Taller
Mi Primer Videojuego

Direccin de Investigacin y Desarrollo Tecnolgico

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
programacin, ni mucho menos haber estudiado aos en una universidad, porque tenemos esta
genial herramienta:

El GDevelop es un programa que nos facilitar la creacin 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 grficos que necesitas (mas algunos adicionales por si quieres experimentar)
estn adjuntos a esta gua, as que manos a la obra.

Paso 1: Iniciando el proyecto

Si ests llevando esta gua, en tu colegio, y con los profesores que escribieron esto, seguramente
tienes instalado el programa en la computadora donde ests, as que puedes abrirlo. Si quieres
seguir aprendiendo en tu casa o algn otro lugar, y no tienes instalado el programa, puedes
encontrarlo aqu: http://compilgames.net/main-es.html.
Una vez abierto el GDevelop, ve rpidamente al men Archivo y selecciona Nuevo. Te
aparecer esta pequea ventana:

Direccin de Investigacin y Desarrollo Tecnolgico

Selecciona la primera opcin en ambas columnas, y escoge la carpeta donde guardars tu

trabajo (en la parte inferior de la ventana). Cuando ests listo, presiona el botn Crear un
nuevo proyecto, y empecemos.
Es importante tambin que tengas a la mano los archivos que te hemos dado con esta gua.
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: Aadiendo el personaje

Todo buen videojuego tiene un personaje, el cual va a ser manejado por el usuario y se
convertir en nuestro hroe durante el juego cierto? Pues esto ser lo primero que aadiremos.
Para ello, haremos click derecho sobre cualquier parte vaca y seleccionaremos Insertar un
nuevo objeto.

Direccin de Investigacin y Desarrollo Tecnolgico

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 edicin de objetos. En
esta nueva ventana (que al inicio estar vaca), en la parte baja, hay un recuadro blanco con el
ttulo Imgenes, donde daremos click derecho y seleccionaremos Aadir una imagen desde
un archivo (como la imagen siguiente).

Direccin de Investigacin y Desarrollo Tecnolgico

En la ventana de seleccin de archivos buscaremos la carpeta donde tenemos nuestros grficos,

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 aadido al juego, as que cerramos la pequea ventana. Ahora
fjate en la columna de la derecha, donde dice Editor de objetos, hay un NuevoObjeto que
es nuestro personaje. Seleccinalo, presiona F2 (si, en tu teclado) y colcale de nombre
Player.

Felicidades! Ya tienes tu personaje principal y tu primer videojuego ya va cobrando forma. Es

hora de aadir ms objetos.

Direccin de Investigacin y Desarrollo Tecnolgico

Paso 3: Necesitamos piso

Los juegos tipo plataforma se basan en un personaje que recorre diferentes lugares, ya sea
superando obstculos o venciendo enemigos, pero siempre movindose y saltando sobre
superficies, como el piso, o bloques que estn sobre el aire (a esos se les llama plataformas).
Empecemos entonces a ponerle un piso a nuestro personaje. Para ello damos click derecho en
algn espacio en blanco, y seleccionamos Insertar un nuevo objeto. En la ventana de seleccin
elige Mosaico.

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

Aparecer el mensaje para activar la extensin. Presiona Si.

Direccin de Investigacin y Desarrollo Tecnolgico

Ahora te aparecer una ventana con las opciones de Mosaico. En esta nueva ventana, en la
esquina superior izquierda, hay una pequea cruz blanca en un crculo azul. Dale click y busca el
archivo grassHalfMid.

Asegrate que est seleccionado en la columna izquierda, como en la imagen:

Ahora presiona ste botn:

y el nombre del archivo aparecer en el recuadro que dice
Texturas. Si ya apareci, dale click a Ok y vers el objeto junto a nuestro personaje.

Direccin de Investigacin y Desarrollo Tecnolgico

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, seleccinalo en el rea de la escena y agrndalo utilizando los cuadraditos blancos.
Trata de darle la apariencia de la siguiente imagen:

Ya hemos avanzado rpidamente con dos de los elementos bsicos: 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 inmvil. Para darle movimiento, le daremos doble
click a la imagen (la de Player) y aparecer una pequea ventana de Propiedades:

En la parte final de esta ventana, est la opcin de Agregar un comportamiento. Daremos

click a la palabra Agregar que est a su costado.

Direccin de Investigacin y Desarrollo Tecnolgico

Importante: Un comportamiento consiste en un conjunto de propiedades prediseadas que

aaden funcionalidad a cada objeto, ya sea el personaje, los enemigos, proyectiles, o hasta el
piso, que ya veremos ms adelante.
Al presionar Agregar, aparecer una ventana de seleccin 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 tambin le damos doble click, elegimos agregar comportamiento, y en la
ventana de seleccin escogemos Plataforma.

Direccin de Investigacin y Desarrollo Tecnolgico

Este piso o Grass puedes hacerlo ms largo, corto, o duplicarlo, y conservar el comportamiento
que le has asignado. En caso quieras duplicar el objeto, simplemente mantn presionada la tecla
Ctrl, dale click al objeto, y sin soltarlo, arrstralo hacia otro lugar. Debera resultarte algo como
esto:

Importante: Quieres saber cmo va cobrando forma tu videojuego? Es tiempo de probarlo!

En la parte superior encontrars un botn azul que dice Vista previa, presinalo y se abrir un
navegador web con tu juego.

Si todo est bien, Player debera estar sobre el Grass, y puedes moverlo a ambos lados utilizando
las flechas del teclado. Por cierto, tambin puedes saltar con la tecla Shift.

Direccin de Investigacin y Desarrollo Tecnolgico

10

Ahora es tu turno! Demustrate a ti mismo cunto haz aprendido y aade, tu solo, sin ayuda,
un sprite adicional. Este sprite debes hacerlo utilizando la imagen con nombre GrassBlock y
debes aadirle el comportamiento Plataforma.

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

Paso 4: Animando mi personaje

Player puede moverse por el escenario, pero an parece una estatua que solo se desliza, es por
ello que ahora le pondremos animaciones de movimiento. Una animacin es una serie de
movimientos que pasan uno tras otro mientras el personaje realiza alguna accin.
En nuestro caso, ya tenemos la imagen de Player cuando est inmvil, as que ahora aadiremos
las imgenes de cuando salta y cuando camina.
En la columna de editor de objetos, dale doble click a Player. Volveremos a la ventana de
edicin de objeto, donde ahora encontrars una cruz blanca que dice Agregar una animacin.

Direccin de Investigacin y Desarrollo Tecnolgico

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, aade otra animacin nueva, pero ahora selecciona todos los archivos con
nombre p1_walk (del 03 al 07). Estos son los grficos que usaremos para cuando Player
camine, y son varios porque la imagen cambiar constantemente entre ellos, como un video.

Direccin de Investigacin y Desarrollo Tecnolgico

12

Ya tenemos nuestras 3 animaciones, pero an debemos hacer un ajuste adicional. En la columna

izquierda, dale click derecho a Animacin 2, y marca la opcin que dice Animacin en bucle.

Un bucle es la repeticin constante de una secuencia, en este caso de imgenes, esto quiere
decir que despus de la ltima regresar al principio. Tambin podemos seleccionar la velocidad
en la que pasa de una imagen a otra dentro de la animacin, para ello volvemos a hacer click
derecho a Animacin 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, vers que nada ha cambiado Esto es porque an no hemos programado en
qu momento aparecer cada animacin, lo cual haremos a travs de Eventos.
Direccin de Investigacin y Desarrollo Tecnolgico

13

Paso 4: Los primeros eventos

Como ya mencionamos, nosotros podemos programar todas las acciones de nuestro videojuego
a travs de eventos. Para poder colocar eventos, iremos a la pestaa que dice Eventos, que
est arriba del rea de trabajo.

Importante: Todo evento est dividido en 2 partes: La condicin y la accin. La condicin 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 accin es lo que va a pasar cuando
suceda cada condicin, 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 botn que dice Agregar un evento, y
presinalo.

Cuando agregues el evento, aparecern 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 condicin.

Direccin de Investigacin y Desarrollo Tecnolgico

14

Nuestro evento consistir en que Player tenga la animacin de salto cuando est saltando, as
que eso ltimo ser nuestra condicin.
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 opcin Est saltando y le damos click.

Luego, en la parte derecha, debemos indicar cul de los objetos es el que debe estar saltando,
para ello presionamos este botn:
presionamos este botn:

y seleccionamos Player. En la parte de abajo

y dejamos ah la opcin que aparece.

Presionamos Ok, y nuestra condicin est lista. Ahora debemos colocar qu accin se debe
realizar al cumplirse la condicin, para lo cual hacemos clic en Agregar una accin.

Direccin de Investigacin y Desarrollo Tecnolgico

15

Al igual que en la condicin, encontramos una lista de todas las posibles acciones. Seleccionamos
la accin Cambiar la animacin siguiendo la ruta de la parte izquierda de la imagen.

En Objeto, seleccionamos Player utilizando el pequeo botn de la derecha. En el campo de

Signo de modificacin 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
animacin.
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
condicin, se utilizan los sub-eventos. Para ello primero ponemos la condicin general, que es
cuando Player est sobre el suelo:

Direccin de Investigacin y Desarrollo Tecnolgico

16

Presionamos Agregar un subevento, y ahora debemos ingresar la segunda condicin de este

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

Para este caso, la accin ser asignar la segunda animacin, 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 opcin negativa a otra,
simplemente buscamos la condicin anterior, y activamos la casilla de Invertir la condicin.

De este modo ya hemos cubierto todas las posibilidades y aadido todas las animaciones al
juego. Debe quedarte algo as:

Direccin de Investigacin y Desarrollo Tecnolgico

17

Por qu no pruebas el juego? Vers que cuando saltas y cuando caminas, ahora si las
animaciones funcionan.

Paso 5: El efecto Espejo

Si probaste el juego, te habrs dado cuenta que funciona a la perfeccin 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 condicin del evento:

La accin 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 debera quedar de esta forma:

Direccin de Investigacin y Desarrollo Tecnolgico

18

Paso 6: Moviendo la cmara

En la mayora de videojuegos, mientras el personaje principal se mueve a lo largo del escenario,
siempre podemos verlo en nuestra pantalla, como si una cmara lo estuviera siguiendo a cada
momento. Esa misma accin ser la que colocaremos a continuacin.
Como est accin debe realizarse en cada momento, crearemos un nuevo evento, y dejaremos
la condicin en blanco (porque no hay condicin, no?). En el caso de la accin, seleccionaremos
Centrar la cmara en el objeto de la siguiente manera:

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

Direccin de Investigacin y Desarrollo Tecnolgico

19

Paso 7: Aadiendo enemigos

Para aadirle dificultad al juego, podemos poner diferentes obstculos, o en algunos casos
algunos enemigos. En nuestro juego utilizaremos estos simpticos bichos, para lo cual debers
crear un sprite con los archivos slimeWalk1 y slimeWalk2. Ponle de nombre Enemigo.

Como sabemos que t ya dominas esto a la perfeccin, no entraremos en detalles, slo te

sugerimos colocarle el comportamiento de Objeto que se mueve en plataformas (quitndole
la opcin de controles por defecto y velocidad mxima diferente) y el comportamiento Destruir
Fuera (lo cual destruir los objetos cuando estos salgan del escenario).

Direccin de Investigacin y Desarrollo Tecnolgico

20

Como hemos quitado los controles al enemigo, debemos simularlos en los eventos, por lo cual
puedes aadir la accin de Simular tecla izquierda para Enemigo al evento sin condicin (No
te damos la ruta porque confiamos en que la encontrars 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 perders el juego.

Paso 8: Alistando el escenario

Ya hemos armado la jugabilidad bsica de nuestro juego, pero an debemos alistar el escenario
del juego. Empecemos por el fondo del escenario: Aade un sprite con el archivo fondo y
agrndalo para que ocupe todo el espacio.

Direccin de Investigacin y Desarrollo Tecnolgico

21

Luego, trata de poner el piso a lo largo de toda la parte baja del escenario, para evitar que Player
caiga al vaco. Tambin puedes colocar ms plataformas y bloques en todo el escenario. No
olvides de colocar varios enemigos para que sea ms difcil.

Paso 9: Ejercitando la creatividad

Hasta aqu hemos desarrollado un juego bsico, pero las cosas que puedes aadirle al juego no
tienen lmites, 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
virtuales para diferentes tipos de juegos, as que si quieres convertirte en un experto creando
videojuegos, este reto es para ti. A crear ms videojuegos!

Direccin de Investigacin y Desarrollo Tecnolgico

22