guia g develop
Post on 01-Mar-2018
316 Views
Preview:
TRANSCRIPT
-
7/25/2019 Guia g Develop
1/22
Direccin de Investigacin y Desarrollo Tecnolgico
1
Direccin de Investigacin y Desarrollo Tecnolgico
Festival de la Ciencia y Tecnologa
Semillero INICTEL-UNI
GU DE L BOR TORIO
Taller
Mi Primer Videojuego
-
7/25/2019 Guia g Develop
2/22
Direccin de Investigacin y Desarrollo Tecnolgico
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 -
7/25/2019 Guia g Develop
3/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
4/22
Direccin de Investigacin y Desarrollo Tecnolgico
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).
-
7/25/2019 Guia g Develop
5/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
6/22
Direccin de Investigacin y Desarrollo Tecnolgico
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/25/2019 Guia g Develop
7/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
8/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
9/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
10/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
11/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
12/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
13/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
14/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
15/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
16/22
Direccin de Investigacin y Desarrollo Tecnolgico
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:
-
7/25/2019 Guia g Develop
17/22
Direccin de Investigacin y Desarrollo Tecnolgico
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:
-
7/25/2019 Guia g Develop
18/22
Direccin de Investigacin y Desarrollo Tecnolgico
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:
-
7/25/2019 Guia g Develop
19/22
Direccin de Investigacin y Desarrollo Tecnolgico
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:
-
7/25/2019 Guia g Develop
20/22
Direccin de Investigacin y Desarrollo Tecnolgico
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).
-
7/25/2019 Guia g Develop
21/22
Direccin de Investigacin y Desarrollo Tecnolgico
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.
-
7/25/2019 Guia g Develop
22/22
Direccin de Investigacin y Desarrollo Tecnolgico
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
top related