guia g develop

7/25/2019 Guia g Develop

1/22

Direccin de Investigacin y Desarrollo Tecnolgico

1


Festival de la Ciencia y Tecnologa

Semillero INICTEL-UNI

GU DE L BOR TORIO

Taller

Mi Primer Videojuego


2/22


2

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:
http://compilgames.net/main-es.htmlhttp://compilgames.net/main-es.htmlhttp://compilgames.net/main-es.htmlhttp://compilgames.net/main-es.html


3/22


3

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.


4/22


4

Al hacer esto nos aparecer una nueva ventana, donde debemos elegir el tipo de objeto a

insertar. Seleccionaremos Spritey 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 elttulo Imgenes, donde daremos click derechoy seleccionaremos Aadir una imagen desde

un archivo(como la imagen siguiente).


5/22


5

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 Abriry 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.


6/22


6

Paso 3: Necesitamos piso

Los juegos tipo plataforma se basan en un personaje que recorre diferentes lugares, ya seasuperando 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.


7/22


7

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 clicky 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 Oky vers el objeto junto a nuestro personaje.


8/22


8

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 agrndaloutilizando 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

clicka 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 Agregarque est a su costado.


9/22


9

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.


10/22


10

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 comoesto:

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.


11/22


11

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.


12/22


12

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.


13/22


13

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 clickderecho a Animacin 2 y seleccionamos Tiempo entre cada imageny 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.


14/22


14

Paso 4: Los primeros eventos

Como ya mencionamos, nosotros podemos programar todas las acciones de nuestro videojuegoa 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.


15/22


15

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

Plataformala opcin Est saltandoy 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: y seleccionamos Player. En la parte de abajo

presionamos este botn: 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.


16/22


16

Al igual que en la condicin, encontramos una lista de todas las posibles acciones. Seleccionamos

la accin Cambiar la animacinsiguiendo 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:


17/22


17

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 movimientode 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:


18/22


18

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:


19/22


19

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 objetode la siguiente manera:

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


20/22


20

Paso 7: Aadiendo enemigos

Para aadirle dificultad al juego, podemos poner diferentes obstculos, o en algunos casosalgunos 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(quitndolela opcin de controles por defecto y velocidad mxima diferente) y el comportamiento Destruir

Fuera(lo cual destruir los objetos cuando estos salgan del escenario).


21/22


21

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.


22/22


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!
https://www.facebook.com/raymicienciaperuhttps://www.facebook.com/raymicienciaperuhttps://www.facebook.com/raymicienciaperuhttps://www.facebook.com/raymicienciaperu

guia g develop

Documents