gdlogo

 

Interesante Plataforma Francesa open source que nos permite desarrollar videojuegos en HTML5 de manera sencilla sin necesidad de ser experto programador, además es muy sencillo exportar estos juegos en android, ios, kindle, webapp, facebook, entre otros por medio de la herramienta intel xdk

 

 

Página oficial de la plataforma

Documentación

Juegos desarrollados por nosotros 

Juego 1 

space

Es una nave espacial que debe tomar 10 gemas rojas para pasar al siguiente nivel el control de la nave son unas flechas que aparecen en pantalla, en el siguiente nivel ya adquiere armamento y se activa haciendo click en la nave para poder destruir asteroides, la idea es subir lo que mas se pueda.

Jugar

 

Juego 2

dino

 

 La idea es guiar la pelota amarilla por medio de lo que podamos pintar con el mouse sobre la pantalla para capturar los dinosaurios que estan en el tablero.

 

Jugar

 

Juego 3

pong

Es una especie de Ping pong en donde las raquetas las fabrica el usuario pintando sobre el tablero, se puede jugar con otra persona en un celular o una tablet. (Para sacar solo hay que hacer click sobre la pelota)

Jugar

 

Contenido

  1. Descargando el software.
  2. Conociendo el entorno.
  3. Sprites y objetos.
  4. Eventos.
  5. Hola mundo en Gdev

 

 

Descargando el software



El software lo conseguimos desde la pagina principal de la plataforma, para descargar el software hacer click  Aqui.



Una vez descargado e instalado correctamente lo primero que vamos a encontrar es una interfaz como esta:

 

gdev

 

Empezaremos creando un proyecto que se llame Hola Mundo.
 
Iremos hacia create a new project y nombraremos nuestro proyecto como "hola_mundo" dentro de una carpeta con el mismo nombre:
 
hello w
 

También escogeremos las opciones Web Platform y Empty project.

 

Una vez hayamos terminado la interfaz será la siguiente:

scene

Lo que vemos de fondo gris es la escena 1 del juego, es decir en esa superficie estará lo primero que se verá  en el juego apenas lo empecemos a jugar, en esta zona pondremos los objetos que componen el juego (enemigos, heroe, escenario, puntajes, etc), a medida que tu juego vaya creciendo deberás agregar mas escenas.

Recomendamos que activen la grilla en la parte superior de la interfaz, esto hará mas fáciles las medidas de los tamaños de los diferentes objetos.

Sprites y objetos


Siendo poco técnicos los objetos en este caso serán las entidades constitutivas del juego, es decir nuestros personajes,árboles, monedas, rayos, naves etc, y los sprites serán los disfraces de esos objetos para que los veamos y les asignemos su papel respectivo dentro del juego.


No tiene sentido que tengamos un soldado invisible en el juego o árboles invisibles o naves invisibles, estos objetos deben tener su propio Sprite.

StarChar1

Eventos

Los Eventos son sucesos a los cuales nuestros objetos deben responder ya sea presionando una tecla, haciendo click, cuando haya colision entre dos objetos, cuando una variable en especial llegue a cierto valor entre otras cosas.

Retomando el Juego 1 si ya has jugado podrás ver que para poder elevar la nave hay que hacer click en la flecha hacia arriba, de esta manera se están generando dos tipos de eventos:

-Mouse sobre la flecha
-Boton derecho del mouse presionado

Una vez se cumplan estas dos condiciones se le dará la orden a la nave de que se desplace hacia arriba

space

Hola mundo en Gdev



Ahora si empezaremos con nuestro primer videojuego, anteriormente ya habiamos creado un proyecto que llamaremos hola mundo, respecto a ese hola mundo hemos decidido usar los personajes de pacman, básicamente lo que haremos es aplicar algunas funciones de Gdev para mostrales algo en funcionamiento, esperamos que terminen su propio videojuego ya que a partir de este momento las ideas empezarán a salir por montones.

Sprites

Encontramos unos curiosos Sprites tomados de esta Página http://www.spriters-resource.com/

15839

Nuestro personaje principal obviamente será Pacman entonces lo que haremos será recortar algunas imagenes de este personaje para crear la animación en el momento que le asignemos sus tareas con los controles que deseemos.

pacman right

En la imagen Anterior vemos como hemos recortado nuestra imagen de interés, lo siguiente es asignarle un fotograma a nuestro Objeto para que se convierta en Pacman.

En la parte derecha de Gdev encontraremos una barra llamada Object's editor y debajo dice No object y No groups por lo tanto haremos click derecho en No objects y luego en add object para que nos aparezca lo siguiente:

 object

Seleccionamos la opción Sprite y nombramos es objeto con el nombre pacman de inmediato hacemos doble click en pacman para que nos salga esta interfaz.

object2

 

En la parte inferior hay un espacio en blanco grande llamado Images, lo que debemos hacer es dar click derecho en ese espacio en blanco y hacer click en Add an Image from a file  y agregamos las dos instancias de nuestro pacman.

object3

 

Una vez agregadas las instancias ahora debemos darle animación a nuestro personaje, por lo tanto en la parte superior vas a encontrar esta barra:

reloj

Debes darle click a la flechita y despues al reloj, una vez le hayas dado click al reloj te recomendamos que cambies el 1 por 0.1 finalmente ve al lado en donde te encotrarás los siguientes símbolos.

previwe

Haz click en la flecha azul y verás como pacman ha cobrado vida.
 
Ahora vamos a agregar un fruta para que pacman pueda comer, simplemente es agregar un nuevo objeto y le asignamos el Sprite de alguna fruta.
 
fruta

En este caso no es necesario darle animación.

El siguiente paso es ubicar a pacman en el escenario, Gdevelop tiene la facilidad de ser Drag & drop, por lo tanto lo que tenemos que hacer es arrastrar a pacman y a sus frutas.

 

pacmanfruta

También queremos ponerle puntaje al asunto por eso crearemos otro objeto que llamaremos Caption_fruta  que servirá de indicador para el puntaje.

Para crear el objeto del puntaje debemos crear un objeto de tipo texto.

text

Damos click en text y Yes para habilitar la extensión.

puntaje2

Como podrán ver ya tenemos 4 objetos (pacman,fruta,Caption fruta y puntaje) ahora debemos hacer doble click en puntaje luego editamos el tamaño y el texto así:

puntaje3

Ahora ya tenemos listo nuestro tablero de Hola mundo

tablero

Ahora si empezaremos con la programación de nuestro juego:


Como puedes ver en la interfaz hay una pestaña llamada Events, Una vez le hayas dado click llegaremos a la zona en donde dejaremos nuestro código fuente

events
Espero que hayan leido esta sugerencia del software:
aviso

Bueno ahora vamos a agregar nuestro primer evento vamos a la parte superior izquierda y damos click en Add an event, una vez hayan dado click  se van a agregar dos campos de texto a la zona de eventos:

event1

El primer campo será para las condiciones y el segundo campo será para las acciones

Si ubican el cursor sobre cada campo aparecera una opcion que dirá add a condition o add an action

condition

La primera condicion que vamos a agregar será la de presionar la tecla derecha de nuestro teclado de esta manera

key
click en ok
keyok

Ahora agregaremos la accion que se debe ejecutar cuando la flecha derecha se presione.

accion
accion2

Lo siguiente será agregar una acción cuando pacman colisione con la fruta ( NO OLVIDEN AGREGAR OTRO EVENTO):

colision

Cuando pacman colisione con la fruta esta debe desaparecer entonces del lado de la acción hacemos lo siguiente:

delete

Y bueno.. una vez pacman logre comerse sus frutas debemos aumentarle su Score no? por lo tanto debemos crear una variable global que se aplique al objeto Score y eso lo haremos de la siguiente manera:
Agregamos una nueva accion del mismo lado en donde se borra la fruta una vez esta colisona con pacman y creamos nuestra variable que se llamará puntaje que estará inicalizada en 0

variable

Una vez creada le diremos que aumente su valor en +1 cada vez que pacman colisione con una fruta

suma

Por último lo que debemos hacer es aplicar la variable puntaje al objeto puntaje, lo que debemos hacer es crear un evento aparte que no tenga ninguna condición y cuya acción será la siguiente:

objetopuntaje

Bueno hemos terminado nuestro Hola Mundo! en Gdev si todo te quedó bien tu código fuente deberia parecerse al de la siguiente imagen:

codigo final

¿Cómo ejecutar nuestro juego?

En la parte superior del programa hay un pestaña que se llama Scene tienes que ir a esa pestaña, despues debes hacer click en preview

panel scene

Una vez hecho esto se te abrirá una nueva página en tu browser con el juego listo para jugar:

game

Si quieres echar un vistazo de como quedó nuestro juego puedes hacer click Aquí

En una próxima entrada explicaremos como exportar tu juego como web app , testearlo en intel xdk y crear su respectivo .apk para que puedas incursionar en el mundo de los juegos Móviles sin necesidad de ser un gurú del código.