¿Como hacer un juego de plataforma? (Principiante)

Este tutorial te ayudará a comenzar a utilizar GDevelop:
Crearás un juego de plataformas muy simple donde el jugador puede saltar sobre plataformas y recoger monedas.

También puede leer tutorial available for beginners here si prefieres crear un videojuego de disparos.

Tenga en cuenta que puede leer el Getting Started page con el fin de obtener una visión general del software: Explica los principales conceptos y describe la interfaz de GDevelop.

Descargar GDevelop

Si no tienes GDevelop, descárgalo desde la página web oficial: http://compilgames.net.
Siempre descargue GD desde esta página para asegurarse de tener la última versión .
Instale o extraiga GDevelop y ejecútelo. Aparecerá la página de inicio:

Si lo desea, puedes leer Esta pagina para obtener una visión general rápida de la interfaz de GDevelop.
Observe que el tema visual de GDevelop puede ser diferente: Puede elegir un tema haciendo clic en Archivo> Opciones , luego eligiendo Apariencia y finalmente seleccionando uno de los temas disponibles.

Crear un nuevo juego

Haga clic en Nuevo en la cinta para crear un nuevo proyecto.
Una ventana le ofrece elegir la plataforma en la que se basa su juego, así como algunas plantillas. Elija la plataforma Web y haga clic en Proyecto vacío:

Elija también un directorio y un nombre de archivo para su juego, y presione Crear un nuevo proyecto.
Una primera escena se crea automáticamente y se abre para usted la primera vez que crear un juego.

Obtenga las imágenes y los recursos necesarios para el tutorial

Antes de ir más lejos, necesitaremos algunas imágenes para nuestro juego.
Puede descargarlos aquí : http://www.compilgames.net/dl/PlatformerTutorialResources.zip.

Una vez que haya descargado este archivo, extraiga su contenido en la carpeta donde creó el proyecto.

Creación del objeto jugador

El jugador estará controlando un personaje que puede saltar y moverse sobre plataformas. Vamos a crear este objeto.
Haz clic con el botón derecho del ratón en el centro de la escena gris de GDevelop y selecciona Insertar un nuevo objeto. Aparece una ventana para elegir el tipo de objeto a crear: Elija crear un objeto Sprite y haga clic en Ok.

Se abre el editor del objeto. Por ahora, el objeto tiene sólo una animación vacía. Lo primero que debes hacer es agregar una imagen para esta animación: Haz clic con el botón derecho en el área blanca en la parte inferior de la ventana y elige Agregar una imagen desde un archivo:

Elija la imagen llamada p1_stand en la carpeta del proyecto y haga clic en Abrir: La imagen se agrega al objeto. Ahora puede cerrar el editor y ver el objeto que se muestra en la escena:

El objeto se llamó NewObject por defecto: Para cambiar esto, seleccione el objeto en la lista en el lado derecho de la ventana y presione F2. Ingrese entonces Player como un nuevo nombre y presione Enter.


Adición de plataformas

Ahora vamos a crear un objeto que se utilizará para las plataformas:

Una vez más, haga un clic derecho en la escena y elija Agregar un objeto. En esta ocasión, elija el tipo de objeto Mosaico:

Por ahora, aparece en gris: Al hacer clic en Ok, GDevelop le preguntará si desea activar la extensión que contiene este objeto para su proyecto: Haga clic en .

El editor del objeto Mosaico está abierto: A la izquierda, hay el gestor de recursos que muestra todas las imágenes utilizadas por el proyecto. Primero, agregue una imagen a la lista usando el botón + de la barra de herramientas:

Elige la imagen grassHalfMid.png. La imagen se agrega a la lista: Haga clic en ella en esta lista y luego haga clic en el botón junto al campo de texto en la parte inferior del editor para insertar automáticamente el nombre de la imagen:

Ahora puede hacer clic en Ok para cerrar el editor.
El objeto se agrega en la escena pero es muy pequeño: Utilice las manijas para cambiar el tamaño de modo que se ve como una plataforma:

Asegúrese de colocar la plataforma debajo del reproductor, para que el jugador no se caiga fuera de la pantalla cuando se inicia el juego.

Además, en el editor del objeto, cambie el nombre del objeto para que se llame Grass.


Añadir comportamientos a los objetos

El movimiento del jugador podría ser creado utilizando los eventos de GDevelop, pero sería una tarea bastante larga y difícil de recrear un buen motor de plataformas. Para evitar esto, vamos a utilizar comportamientos, que permiten agregar comportamientos predefinidos a los objetos.

Hacer un doble clic en el objeto jugador (Player) en la escena: Esto mostrará una cuadrícula que contiene las propiedades del objeto y, en la parte inferior, los comportamientos aplicados al objeto. Haga clic en Agregar:

Se muestra una lista de comportamientos disponibles. Para este objeto, elija el comportamiento Objeto que se desplaza sobre plataformas y haga clic en Ok:

Eso es todo: se puede ver en la cuadrícula de propiedades que el comportamiento se muestra ahora, así como algunas propiedades. Puede cambiar algunas propiedades como la velocidad de salto: Establezca por ejemplo a 800 para que el salto sea más fuerte.

También necesitamos marcar objetos que sean plataformas como tales, de lo contrario el jugador caerá incluso si está chocando con objetos que parecen plataformas.
Haga doble clic en el objeto de la plataforma en la escena (grass) y en la cuadrícula de propiedades, en Comportamientos elija Agregar:

Esta vez, elija el comportamiento Plataforma y haga clic en Ok:

Tenga en cuenta que los comportamientos se aplican a todas las instancias del objeto puesto en la escena: Si inserta otra plataforma en la escena (Simplemente arrastre el objeto de la lista de objetos a la escena También puede presionar la tecla Ctrl, Luego arrastrar la plataforma para clonarla!), El objeto de otras plataformas también tendrá el comportamiento: No es necesario agregarlo

Iniciar una vista previa

Ahora puede probar que el comportamiento está funcionando:

En la cinta Escena, seleccione Vista previa:

Su navegador favorito se abrirá y el juego se lanzará:
Puede mover el personaje con las teclas de flechas, y usar Shift para saltar! Por ahora el objeto no tiene animaciones: Lo agregaremos más tarde.

Si el objeto no se mueve, asegúrese de haber agregado los comportamientos adecuados. Asegúrate de haber añadido el comportamiento Plataforma al objeto Grass, de lo contrario el jugador (Player) caerá fuera de la pantalla.

Añadir diferentes plataformas

Podemos usar más de un tipo de objetos como plataformas: Añada un nuevo objeto haciendo clic derecho en la escena y eligir Insertar un nuevo objeto.
Elija un objeto Sprite, haga clic en Ok y, en el editor, añada la imagen denominada Grass.png:

Cierre el editor y cambie el nombre del objeto para que se llame Platform:

A continuación, agregue el comportamiento de la Plataforma tal como lo hicimos antes (haga doble clic en el objeto en la escena, o selecciónelo en la lista de objetos.) Luego, elija Agregar un comportamiento y elija el comportamiento Plataforma. Como plataformas: puedes añadir más de ellas en la escena y lanzar una vista previa para intentar saltar de plataformas a plataformas.

Antes de ir más lejos, puede que desee cambiar el color de fondo de la escena: En el administrador del proyecto, haga un clic derecho sobre la escena que se está editando (“Nueva escena”) y elija Modificar esta Propiedad.

A continuación, puede cambiar el color de fondo de la ventana que se mostrará. Tenga en cuenta que agregaremos objetos de fondo al final del tutorial.

!Alto¡ !Guarda a tiempo¡

Antes de seguir adelante, recuerde guardar con frecuencia: En la cinta de opciones, haga clic en Archivo y luego en Guardar

También puedes en la cinta Proyectos y el Botón Guardar o el atajo Ctrl + s


Cambiar las animaciones del jugador (Player)

Por ahora, el jugador siempre está mostrando la misma imagen: Usando los eventos, vamos a cambiar su animación de acuerdo a lo que está haciendo.

Antes de hacer esto, debemos agregar las animaciones apropiadas al objeto Player: Haz doble clic en él en la lista de objetos para mostrar el editor.

En la parte superior izquierda de la ventana, haga clic en + en la barra de herramientas para agregar una animación:

Una animación llamada Animation 1 se agrega a la lista: Haga clic en ella para seleccionarla.

Está vacío: En la parte inferior en blanco, haga un clic derecho y añada la imagen llamada p1_jumping.png:

Esta animación se utilizará cuando el objeto estará en el aire.
También necesitamos una animación para cuando el jugador camina en una plataforma: Agregue otra animación como la que hicimos y, al agregar imágenes, seleccione las 5 imágenes p1walk03.png, p1walk04.png, … y p1_walk07.png.

Estas imágenes se mostrarán para crear la animación.

Tenemos que ajustar un poco algunas opciones: Haz clic con el botón derecho en Animation 2 en la lista y comprueba Animación en Bucle. Haga clic en y luego en Tiempo entre cada imagen: 0,05s para que la animación sea más rápida que cuando se usan las opciones predeterminadas.
Usted debe tener esto en el editor:

Puede previsualizar la animación haciendo clic en el pequeño botón “reproducir” de la barra de herramientas ubicada en la parte superior central del editor.
Cierre el editor cuando todas las animaciones estén bien.

Eventos

Ahora, necesitamos cambiar la animación que muestra el objeto de acuerdo a lo que hace el jugador. Vaya al editor de eventos haciendo clic en Eventos junto a la pestaña Escena:

A continuación, en la cinta de opciones, haga clic en Agregar un evento para crear un nuevo evento:

El evento se crea, con una lista vacía de condición (en la parte izquierda) y una lista vacía de acciones (a la derecha). Coloque el cursor sobre la lista de condiciones y elija Agregar una condición en el panel de contexto que apareció:

En este caso, vamos a comprobar si el jugador está saltando para cambiar su animación.

En la lista de condiciones, elija Comportamiento de Plataforma - > Está saltando. A continuación, en el parámetro, introduzca Player como objeto (queremos comprobar si el objeto Player está saltando) y PlatformerObject como comportamiento:

Haga clic en Ok para validar la condición.

Ahora, agregue una acción al mismo evento:

En la lista de acciones, elija Sprite - > Animaciones e imágenes - > Cambiar la animación. Introduzca Player como objeto, entonces = en el segundo parámetro y 1 en el último. Haga clic en Ok para validar la acción: Ahora, la animación 1 se iniciará cuando el jugador está saltando.

Crear un evento similar, pero con el jugador Está cayendo como condición (También puede hacer una copia-pegar del evento y luego haga doble clic en la condición para cambiarlo):

Luego, tenemos que establecer la animación 0 cuando el jugador alcance el piso, y también iniciar la animación 2 cuando el jugador empiece a moverse.
Esto podría hacerse usando dos eventos: El primero comprueba si el jugador está en el suelo y si se está moviendo. En este caso, se establece la animación 2. El segundo controla si el jugador está en el suelo y si no se está moviendo. En este caso, se establece la animación 0. Aquí, vamos a usar una característica agradable llamada Un sub eventos: Como estamos corriendo dos veces la misma condición (Para comprobar si el jugador está en el suelo), podemos insertar esta condición en un evento, y luego agregar sub-eventos A este evento: Los sub-eventos sólo se activan cuando se cumplen las condiciones de su “padre”.

Añadir un evento con el jugador Está sobre el suelo como condición. A continuación, coloque el cursor sobre el evento y elija Agregar Un sub eventos: Se agrega un evento secundario vacío.

En este evento en blanco, agregue la condición El Player se está en moviendo. A continuación, agregue una acción Hacer = 2 el número de la animación de Player.

A continuación, cree un segundo sub evento. Esta vez marcar en Invertir la condición para que la condición sea verdadera cuando el jugador no se está moviendo:

También cambie el parámetro de animación para que se configure la animación 0 :

Ahora puedes iniciar una vista previa y ver la animación que se está cambiando:

Si algo no funciona, asegúrese de que sus eventos se vean exactamente como los eventos mostrados anteriormente.
Usted puede ver que cuando el jugador va a la izquierda, el sprite no es reflejado. Afortunadamente, hay una acción que se puede usar para reflejar a los sprites.

Vuelva al editor de eventos y añada un nuevo evento: Agregue una condición, Teclado - > Tecla Presionada y en Tecla escribir la palabra Left.

Tenga en cuenta que en lugar de escribir Left, puede hacer clic en el botón pequeño junto al parámetro y, a continuación, simplemente pulse la flecha izquierda del teclado. GDevelop llenará automáticamente el parámetro.

En este caso, agregue una acción para voltear el sprite en Sprite - > Efectos - > Invertir el objeto horizontalmente:

A continuación, añade otro evento similar, comprobando si se pulsa la tecla Right (derecha) y se vuelve a invertir el objeto Player con su orientación inicial:

Centrar la cámara en el reproductor

Centrar la cámara en el reproductor Hay más de una manera de mover la cámara para que siga al jugador. Por ahora, lo vamos a hacer muy simplemente usando la acción Centrar la cámara en el objeto. Sólo tiene que añadir esta acción en un evento en blanco sin ninguna condición:

Tenga en cuenta que puede leer this thread del foro oficial si desea información sobre cómo limitar el movimiento de la cámara a la tamaño de ventana.

Agregar una plataforma de "Saltar a través"

Por ahora, todas las plataformas son sólidas como roca, pero también podemos crear plataformas, también puedes saltar a través de ellas:
Cree un nuevo objeto Sprite y añada imagen bridge.png:

Puedes nombrar este objeto “Jumpthru” por ejemplo:

A continuación, añada el comportamiento Plataforma como lo hicimos antes para la otra plataforma. Cuando haya terminado, cambie la propiedad Tipo que se muestra en la cuadrícula de propiedades y elija Plataforma atravesable:

¡Eso es todo! Ahora puede iniciar una vista previa: El jugador podrá saltar a través de este tipo de plataformas.

Añadir monedas y una puntuación

Vamos a agregar algunas monedas para recoger en el nivel: Crear un nuevo objeto llamado Coin con coinGold.png como imagen. A continuación, puede poner varias monedas en el nivel: Puede arrastrar el objeto de la lista de objetos a la escena, o presione Ctrl y drag'n'drop (Arrastra y soltar) un objeto existente para clonarlo!

Ahora, vamos a destruir el objeto moneda cuando el jugador los toca: Agregar un nuevo evento y agregar un evento de prueba para la colisión entre monedas y el objeto Jugador:

A continuación, agregue una acción para eliminar el objeto Moneda (Puede encontrarlo en Todo el objeto> Objetos> Eliminar el objeto). Tenga en cuenta que esta acción sólo se activará para la moneda que han sido “recogidas” por las condiciones, es decir, sólo la moneda que están en colisiones con el jugador aquí! Este potente mecanismo le permite iniciar acciones sólo en objetos que coinciden con los criterios especificados por las condiciones.

También podemos tocar un sonido pequeño cuando se recoge una moneda. Añadir otra acción para reproducir el sonido coin.wav:

Actualizar y mostrar una puntuación

Vamos a usar una variable para actualizar y recordar la puntuación del jugador. Las variables son útiles para recordar todo tipo de información. Hay variables de escena (las más usadas), variables globales (variables que se comparten entre todas las escenas del juego) y variables de objetos (que son específicas para cada instancia de un objeto.También son muy útiles y vamos a utilizar uno Para crear un enemigo más tarde).

Añade una acción en el último evento que hayamos realizado:

Elija acción Variables > Valor de una variable.

En el botón variable de ensena crear la variable Score

Añadir un valor 100, así como se muestra aquí:

Tenga en cuenta que no necesita declarar variables antes de usarlas: Si utiliza un nombre de variable que no existe, GDevelop creará esta variable para usted. También puede declarar e incluso establecer un valor inicial en cualquier variable.

El evento ahora debería ser así:

Para mostrar la variable, necesitamos un objeto de texto que muestre la puntuación. En la escena, agregue un nuevo objeto. En esta ocasión, elija Texto cuando se le solicite el tipo de objeto:

Edite el objeto y cambie su color para que el texto sea negro y la fuente sea lo suficientemente grande:

Cuando haya terminado, nombre este objeto ScoreText:

A continuación, en los eventos, agregue un nuevo evento en blanco. Agregar a la acción Modificar el texto, dentro de la categoría Objeto de texto. Introduzca el nombre del objeto (ScoreText) en el primer parámetro, entonces = en el segundo parámetro:

El último parámetro: Queremos mostrar la palabra “Score:“ seguido del valor de la variable Score debemos usar el signo + la para unir la palabra y la variable. Sin embargo, la variable Score es un número y debemos convertirlo a un texto.
Ahora dar clic en el boton txt .En la ventana de Editar el texto escribir el texto “Score:”+ debe quedar asi:

Luego usando la función Conversión en Otras funciones, damos clic en Número > Texto:

En Parámetro damos clic en Abrir un editor de expresiones:

Luego en la ventana Editar la expresión buscamos en Otras funciones > Variables > Variables de la Escena y Seleccionamos la variable Score. El texto final deberá quedar como “Score:”+ToString(Variable(Score)). El resultado de la Acción quedara así:

A pesar que las funciones dentro de las ventanas están en español, el resultado sera la función en ingles.
Hay un montón de funciones disponibles que pudes utilizar.

Así es como debe ser su evento:

Si obtiene una vista previa del juego, notará que la puntuación se actualiza cuando obtiene una moneda y se muestra en el objeto de texto. Sin embargo, queremos asegurarnos de que la puntuación es siempre visible.
Para ello, vuelva al editor de escenas. Vamos a añadir una capa y poner el texto en esta capa. Puede considerar las capas como vidrios transparentes donde se muestran los objetos: Al colocar el objeto en una capa diferente, nos aseguraremos de que se muestre siempre, siempre y cuando la cámara de esta capa no se mueva.

Haga clic en el editor de capas de la cinta para mostrar este editor:

En el editor de capas, agregue una nueva capa:

A continuación, seleccione la nueva capa y muévala sobre la capa base:

Puede hacer doble clic en la Nueva Capa para cambiarle el nombre (por ejemplo, el nombre de la GUI).
Finalmente, haga un clic derecho sobre el objeto de texto en la escena y muévalo a la capa GUI:

Ahora, el texto siempre se mostrará. Sólo asegúrese de que está correctamente colocado en la ventana. Puede utilizar la cinta para centrar la cámara en el origen de la escena (Haga clic en Volver al origin (0,0) y, a continuación, haga clic en Máscara para mostrar una máscara que muestra el tamaño de la ventana:

Añadir un enemigo

Terminemos este tutorial agregando un enemigo que se moverá en las plataformas.
En el editor de capas, asegúrese de que la capa base está seleccionada (de lo contrario, los nuevos objetos podrían agregarse a la capa GUI y no se mostrarán en la posición correcta).

A continuación, agregue estos tres objetos:

El primero llamado Bad es el objeto que representa al enemigo: Se compone de un bucle de animación entre las imágenes slimeWalk1.png y slimeWalk2.png:

Los otros dos objetos se utilizarán como marcadores para asegurarse de que el enemigo no se moverá de las plataformas. Ponga al enemigo en una plataforma. Asegúrese de que está chocando con uno de los marcadores:

Creando el movimiento del enemigo

Para mover al enemigo, usaremos las acciones integradas que permiten mover un objeto, y cada enemigo recordará la dirección (Izquierda o Derecha) de su movimiento usando una variable de objeto.

Añadir este evento:

A diferencia de antes, no estamos cambiando aquí una variable de escena sino una variable de objeto (La acción se puede encontrar en Todos los objetos > Variables). Siempre que un objeto Bad colisione con un objeto GoLeft, su variable GoBad se establecerá en 1. Agregaremos el evento para mover al enemigo en un momento. Por ahora, agregue otro evento similar para establecer la variable del objeto en 0 si está chocando con GoRight:

Ahora que el objeto es capaz de recordar dónde debe ir, sólo tenemos que comparar el valor de esta variable y mover el objeto:
Añada un evento que verifique si la variable GoBad del objeto Bad es igual a 1. A continuación, agregue una acción que añada a Bad una fuerza con coordenadas de -50 píxeles en el eje X y 0 en el eje Y:
Las fuerzas son un mecanismo incorporado que permite mover fácilmente objetos en la escena (La acción está disponible en Todos los objetos> Desplazamiento > Agregar fuerza a un objeto). Aquí, la fuerza moverá el objeto a la izquierda a la velocidad de 50 píxeles por segundo:

Tome en cuenta que el enemigo también tiene que cambiar su orientación según el movimiento, por lo cual se ha agregado la acción invertir horizontalmente para el cambio de orientación.
Agregue un evento similar para mover el objeto a la derecha cuando la variable GoBad del objeto Bad es igual a 0:

Si inicia la vista previa, debe ver que el enemigo se está moviendo ahora entre los marcadores. Si no funciona, compruebe que el objeto está chocando con uno de los marcadores al principio de la escena (de lo contrario, no se moverá en absoluto!). También compruebe que los eventos son correctos. Los marcadores son visibles cuando estamos jugando. Para ocultarlos, simplemente añada este evento:

La condición está disponible dentro de la categoría de escena, y es verdadera sólo cuando comienza la escena. Las dos acciones, disponibles en Objetos > Visibilidad, son útiles para ocultar un objeto y asegurarse de que aún está en la escena.

Destruir al enemigo al saltar sobre él

Para terminar este tutorial, el jugador debe ser capaz de destruir al enemigo saltando sobre él.
Esto se puede hacer añadiendo un evento con dos condiciones: La primera condición comprueba si el jugador está chocando con un enemigo. La segunda condición verifica si el jugador está cayendo.
Si estas condiciones son verdaderas, el objeto enemigo que colisiona con el jugador es destruido e incluso podemos hacer que el jugador salte de nuevo para dar la impresión de que está rebotando en el enemigo:

Ya hemos utilizado las condiciones y la primera acción. En las dos últimas acciones están disponibles dentro de la categoría de comportamiento de la Plataforma.

Adición de objetos de fondo

Añadiendo algunos objetos en el fondo es realmente fácil: Simplemente agrega algunos sprites con las imágenes que deseas y ponlas en la escena.

Para asegurarse de que los objetos se muestran detrás del Jugador, selecciónelos en el editor de escenas y ponga un valor negativo en las propiedades del objeto como Plano Z: Se mostrará delante de ellos cualquier objeto con un valor de plano Z mayor.

También asegúrese de que estos objetos están en la capa base (La propiedad de capa debe estar vacía).

Mejorar el juego

Eso es todo para este tutorial! Puedes descargar el juego aquí si es necesario, si quieres comparar con tu versión o si algo no funciona.

Una versión mejorada del juego también está disponible como plantilla cuando se crea un nuevo juego. Puedes probarlo en línea: http://www.compilgames.net/games/WebPlatformer

Vamos a descubrir GDevelop por sí mismo

Puede navegar por los otros tutoriales o leer la página Introducción.
También hay muchos ejemplos incluidos con GDevelop y plantillas disponibles cuando se crea un nuevo juego.
Ejemplos  Ejemplos
Plantillas  Plantillas
<note>Si tiene algún problema, puede enviar un mensaje en el foro oficial.
Si tienes algún comentario sobre el tutorial, no dudes en enviar un mensaje en el foro, o incluso arreglar el tutorial por ti mismo: sólo tienes que crear una cuenta en el wiki 8-)</note>