Plataforma

En esta página se explicará la creación de un juegos con plataformas, donde el objetivo será superar todos los obstáculos que te puedas encontrar a través del mapa.

Los elementos que tendrá que tener este tipo de juego son un personaje, objetos, mapa para seguir en movimiento y enemigos.

Creando el juego

Se debe hacer clic en Nuevo para crear un proyecto.

Entonces aparecerá una ventana con información sobre las características que el proyecto podrá tener, como el directorio y nombre.

Luego de eso, se debe elegir Plataforma y en Crear un nuevo proyecto.

Conseguir los recursos necesarios para el juego

Luego de empezar con nuestro proyecto, se necesitan imágenes y elementos para así poder agregarlos a nuestro juego.

Unos ejemplos se pueden descargar aquí.

Luego de descargarlos, se tienen que extraer en la carpeta donde se ha creado el proyecto.

Creando tu personaje

Para empezar, el jugador tiene que controlar un personaje el cual avance a través de todo el juego, que pueda saltar y mover objetos.

Para ello hacemos clic derecho en el centro de la escena gris en GDevelop y elegimos Agregar un nuevo objeto. Entonces aparecerá una ventana con el tipo de objeto para crear, elegimos Sprite.

El editor de objetos se debería abrir, es entonces cuando el objeto sólo tiene una animación vacía. Después de eso, agregamos una imagen para esta animación: Hacemos clic derecho en la ventana inferior de imágenes, y elegimos Agregar una imagen desde un archivo.

Eliges la imagen llamada p1_stand en la carpeta del proyecto y haces clic en abrir. Luego de agregar esta imagen, cierras el editor de objetos y lo arrastras en la zona gris.

El nuevo objeto se llamará NuevoObjeto. Si quieres cambiar esto, puedes seleccionarlo en la parte derecha de la pantalla y presionar F2. Entonces ingresar el nombre deseado y presionas Enter.

Añadiendo plataformas

Ahora para que nuestro personaje pueda desplazarse, necesitamos que existan plataformas en los niveles.

Para esto, hacemos clic en Añadir un objeto. Pero esta vez, elegimos el tipo Mosaico, se te preguntará si quieres activar esa opción, y respondes con un sí.

Luego de agregarlo, se debe hacer doble clic izquierdo sobre el elemento agregado para abrir el editor de objetos, para luego utilizar el icono de añadir una imagen.

Selecciona la imagen grassHalfMid.png. Esta imagen es añadida a la lista, haz clic sobre ella y luego en el botón en la parte inferior a la derecha para insertar el nombre de la imagen.

Ahora puedes aceptar para que se cierre el editor. Puedes modificar su estructura para utilizarlo como una plataforma.

Asegúrate de que el jugador esté sobre la plataforma para que luego no pueda caer hacia abajo. Ponle nombre a la plataforma.

Agregar comportamientos a los objetos

El movimiento del jugador y comportamientos de los objetos pueden ser creados con este programa, son necesarios para un buen juego de plataformas.

Primero, hacemos doble clic en la imagen del jugador, esto mostrará las propiedades que tiene. Para agregar un comportamiento, se debe hacer clic en Agregar... en la sección de Comportamientos.

Se mostrará una lista de comportamientos disponibles. Para este objeto, elegimos la opción Objeto que se desplaza sobre plataformas y damos clic en aceptar.

Ahora podrás observar en las propiedades del objeto, que se despliegan algunas opciones extras en el comportamiento. Puedes asignarle valores a dichas opciones, como por ejemplo velocidad de salto a 800.

También necesitaremos asignarle propiedades al resto de objetos como las plataformas. Para eso, damos doble clic en la plataforma y le agregamos un comportamiento.

Esta vez, elegimos el comportamiento Plataforma y aceptamos.

Ahora con este tipo de comportamientos, podemos hacer los mapas mucho más entretenidos. Agregando objetos, obstáculos, trampas, enemigos y otros personajes que puedan hacer más interesante nuestro juego.

Recuerda que puedes mantener apretada la tecla Ctrl y mover, para duplicar objetos y sus propiedades, sin necesidad de crear todo de nuevo.

Visualizar

Ahora puedes utilizar la Vista Previa, para revisar como está yendo tu proyecto.

Dependiendo del tipo de juego que creaste, abrirá el navegador o se abrirá una ventana con la vista previa.

Puedes mover tu personaje con las flechas de dirección y saltar con la tecla Shift.

Añadir diferentes plataformas

Se pueden utilizar más de un tipo de plataformas en el proyecto. Agrega un nuevo objeto, haciendo clic en Añadir un objeto.

Eliges un sprite y aceptas. En el editor, agregas la imagen llamada Grass.png.

Cierras el editor y nombras el objeto como Plataforma:

Es entonces cuando le agregamos un comportamiento a esta plataforma, como pudimos observar anteriormente, ese comportamiento será Plataforma.

Antes de seguir, si quieres puedes cambiar el color de fondo de la escena. Para ello en el gestor de proyecto utilizas el clic derecho en la escena y seleccionas Modificar propiedades.

En esta zona puedes cambiar el color de la escena.

Importante, recuerda guardar regularmente

Recuerda que es importante salvar regularmente el proyecto por precaución. En cualquier momento podría cortarse la energía eléctrica, o haber un problema técnico.

Agregar animaciones

Por ahora, el jugador siempre tendrá la misma imagen. Por lo que sería recomendable agregar animaciones para reflejar realismo.

Tomando esto en cuenta, hacemos doble clic en el jugador para entrar al editor de objetos. En la sección de animaciones, damos clic en el signo más para agregar una animación.

Una animación llamada Animación 1 será agregada en la lista; Haz clic para seleccionarla. Si está vacía, en la parte en blanco, hacemos clic derecho para agregar una imagen llamada p1_jumping.png.

Esta animación será el objeto cuando esté en el aire, puedes agregar más imágenes para otra animación cuando el personaje esté caminando.

Para una vista previa, puedes darle al signo de Play en la parte de arriba. Seguido de eso, aceptas y cierras el editor de animaciones.

Ahora, debemos asignar estas animaciones según la acción que nuestro personaje realice. Ve a la pestaña de Eventos, al lado de Escena.

Haz clic en la opción Agregar un evento, la cual se encuentra en la parte superior.

Cuando se ha creado, se generará un evento sin condiciones y sin acciones. Necesitas agregar una condición primero, por lo que eliges Agregar una condición.

En la ventana, entre todas la opciones, ingresamos en Comportamiento Plataforma, donde elegimos la condición Está saltando.

En objeto ponemos el nombre del objeto. Ejemplo: Jugador.

En comportamiento ponemos el nombre de dicha interacción. Ejemplo: PlataformerObject

Aceptamos para validar la condición.

Ahora lo que necesitamos es una acción.

En la lista, ingresamos en Sprite > Animaciones e imágenes >  Cambiar la animación.

Ingresamos el objeto del jugador, el signo igual en modificación y el valor 1 en la última casilla.

Aceptamos, y podremos observar que al realizar la acción de salto, se mostrará la animación del jugador.

Posteriormente se debe crear otro evento con la condición Jugador está cayendo.

Entonces, necesitamos colocar la Animación 0, es decir cuando el jugador está en el suelo, para cuando toque el suelo se ponga en dicha postura. La Animación 2, para cuando el personaje comience a estar en movimiento.

Dado que comienza a moverse luego de que el jugador esté sobre el suelo, se debe asignarle el valor 2 en un subevento de cuando el jugador esté sobre el suelo.

Recuerda agregar otro evento invertido y asignarle el valor 0 para que deje de estar en movimiento una vez detenido.

Ahora puedes utilizar la vista previa para ver el resultado.

Si algo no funciona, revisa las imágenes para hacer todo exactamente igual. Ahora para que el sprite cambie de forma según la dirección donde se mueva, sigan los siguientes pasos.

Vuelve al editor de eventos y agrega uno: La condición sobre si la tecla izquierda está presionada.

Se debe tener en cuenta que al presionar la tecla, automáticamente debe cargarse para seleccionarla y aceptarla.

En el editor de eventos agregamos una acción para rotar el sprite:

Entonces se agrega otro evento similar , revisando si Derecha es presionada para que el personaje se revierta a su orientación inicial:

Centrar cámara en el jugador

Hay más de una forma para centrar la cámara en el jugador y que lo siga. Por el momento, utilizaremos la simple acción Centrar cámara en un objeto. Sólo agrega esta acción en un evento en blanco sin ninguna condición.

Agregar un salto sobre plataforma

Por ahora, todas de las plataformas son sólidas, pero puedes crear una plataforma para saltar sobre ella.

Crea un nuevo sprite y agrega la imagen bridge.png:

Puedes nombrar este objeto Jumpthru por ejemplo:

Entonces, agregamos el comportamiento Plataforma hacemos lo mismo que en la otra plataforma. Cuando terminamos, cambiamos la propiedad Tipo mostrada en las propiedades del comportamiento e ingresamos Plataforma atravesable.

Eso es todo. Ahora puedes intentar una vista previa.

Agregar monedas y puntos

Podemos agregar unas monedas para completar el nivel: Crea un objeto llamado Moneda con la imagen coinGold.png. Se pueden poner varias en el nivel, recuerda que con la tecla Ctrl y clic puedes duplicar varias veces el objeto.

Ahora, hagamos que la moneda desaparezca una vez que el jugador la coleccione. Agrega un nuevo evento de colisión entre el jugador y las monedas.

Luego de eso, agrega una acción para eliminar el objeto de moneda. (Puedes encontrarlo en Todos los objetos > Objetos > Eliminar objeto). Ten en cuenta que esta acción sólo se aplicará para las monedas que tengan "coleccionada" o "acumulada" en la condición, eso significa que solamente las monedas que estén en colisión con el jugador van a desaparecer.

También podemos reproducir un pequeño sonido cuando el jugador las recolecta. Agrega otra acción para ejecutar el archivo 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 cualquier tipo de información. Hay variables de escena (la mayoría utiliza algunas), variables globales (variables que son utilizadas en todas las escenas del juego), y variables de objetos (son utilizadas en objetos en específico. Útil para crear enemigos.)

Agrega una acción en el último evento que creamos:

Elige la acción Variables > Valor de la variable. Esta acción agregará 100  a la variable Puntuación, así que recuerda el parámetro de aquí.

Recuerda que no necesitas declarar variables antes de usarlas: Si el nombre de tu variable no existe, GDevelop la creará por ti. También puedes colocar un valor inicial para cualquier variable abriendo el primer parámetro para ver todas las variables creadas.

El evento debería quedar así.

Para mostrar la variable en pantalla, necesitamos un objeto de texto mostrando la puntuación. En la escena, agregamos un nuevo objeto. Esta vez seleccionamos Texto cuando pregunte por el tipo de objeto.

Edita el objeto para cambiar su tipo de letra, color y tamaño.

Cuando esté terminado, nombra este objeto como ScoreText.

Posteriormente, agrega un nuevo evento en blanco. Agrega la acción Modificar el texto, dentro de la categoría "Objeto de Texto". Ingresa el nombre del proyecto (ScoreText) en el primer parámetro, entonces pon el signo de igual en el segundo parámetro, y aceptamos que el texto sea mostrado en el último parámetro. Se tiene como objetivo mostrar "Puntuación: " seguido del valor de la variable Puntuación.

Para hacer esto, podemos escribir la expresión Variable(Puntuación) para conseguir el valor. De todas formas, esto es un número y necesitamos convertirlo a texto usando la función ToString. Finalmente la expresión y el texto deben ser concatenados usando el signo de más.

Hay un montón de funciones para usar. Sólo haz clic en el botón siguiente a los parámetros para mostrar un editor poniendo a disposición todas las disponibles. El evento recién creado debería quedar así.

Si tu realizas una vista previa del juego, te darás cuenta que la puntuación es actualizada cuando recoges una moneda, y mostrada en el objeto de texto. Pero por precaución, confirmaremos que siempre se está mostrando.

Ingresamos al editor de escena. Vamos a poner al objeto en una capa diferente y el texto en esa capa. Puedes considerar que las capas transparentes son como vidrios transparentes donde se muestran objetos.

Al poner un objeto en una capa diferente, nos aseguramos que se muestra siempre, siempre y cuándo la cámara de esta capa no esté en movimiento.

Haz clic en Editor de Capas en la cinta para mostrar este editor.

En el editor de capas, agrega una nueva.

Entonces, selecciona la capa recién creada, y colócala sobre la capa base.

Puedes hacer doble clic sobre la nueva capa para renombrarla como tú quieras. Por ejemplo GUI.

Como último, haz clic derecho sobre el objeto de texto en la escena y colócala en la capa GUI.

Ahora, el texto siempre será mostrado. Sólo coloca una posición correcta en la ventana. Puedes utilizar la cinta para centrar la cámara en el origen de la escena.

Agregar un enemigo

Para terminar esta guía, añadiremos enemigos que puedan moverse entre plataformas.

En el editor de capas, asegúrate de que la capa base está seleccionada.

Entonces agrega estos objetos.

El llamado Bad es el objeto representando al enemigo. Está compuesto con imágenes entre slimeWalk1.png y slimeWalk2.png.

Los dos otros objetos serán usados como marcadores para asegurarnos que el enemigo no se moverá fuera de las plataformas. Pon un enemigo sobre una plataforma. Asegúrate que esté colisionando sobre ella y no dentro.

Creando el movimiento del enemigo

Para crear el movimiento del enemigo, usaremos acciones para mover un objeto, y el enemigo recordará la dirección (izquierda o derecha) de sus movimientos usando un objeto de variable.

Añade este evento.

A diferencia de antes, no utilizamos una variable de escena sino una variable de objeto. (Esta acción puede encontrarse en Todos los objetos > Variables ). Cada vez que un objeto Bad esté colisionando con un objeto GoLeft, la variable GoLeft se cambiará por 1. Añadiremos un evento para mover el enemigo en un momento.

Por ahora, añadiremos un evento similar para seleccionar la variable del objeto en 0 si está colisionando con GoRight.

Ahora el objeto recordará donde debe ir, sólo comparamos el valor de esta variable y movemos el objeto.

Agregamos un evento verificando si la variable del objeto Bad es igual a 0. Entonces, agregamos una acción adherida a Bad a forzar coordenadas de 50 pixeles en eje X y 0 en eje Y. Las fuerzas son un mecanismo incorporado que permite mover fácilmente los objetos en la escena. (La acción está disponible en Todos los objetos > Desplazamiento > Añadir una fuerza a un objeto). Aquí, la fuerza moverá el objeto a la derecha a la velocidad de 50 pixeles por segundo

Añade un evento similar para mover el objeto a la izquierda cuando la variable GoLeft de Bad sea igual a 1.

Si ejecutas la vista previa, podrás ver que el enemigo se mueve entre marcadores. Si no funciona, verifica que el objeto está colisionando con un marcador al inicio de la escena. También verifica si pusiste bien los eventos.

El marcador es visible cuando nosotros jugamos. Para esconderlos, agrega este evento.

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

Destruir un enemigo al saltar sobre él

Esto se puede crear agregando un evento con dos condiciones. La primera verifica si el jugador está colisionando con un enemigo y la segunda verifica si el jugador está cayendo.

Si las dos resultan ser verdaderas, el objeto del enemigo colisionando con el jugador es destruido y podemos hacer que el jugador rebota sobre él agregando realismo.

Siempre usaremos las condiciones y la primer acción. Las últimas acciones están disponibles bajo la categoría de comportamiento de plataforma.

Añadir objetos de fondo

Para terminar, añadir algunos objetos en el fondo es realmente fácil. Sólo agregamos algunos sprites con las imágenes que desees poner en la escena.

Asegúrate que los objetos sean mostrados detrás del personaje, los seleccionas en el editor de escena y pones un valor negativo como una orden Z: Cualquier objeto con una orden Z será mostrado frente de él.

Además, asegúrate que los objetos estén en la capa base.

Finalizando

Luego de todo esto, es muy fácil crear un juego de plataforma. Sólo faltarían que realices tus propios retoques en tu juego.

Además de obtener sprites para realizar los escenarios y personajes. Ante cualquier duda, revisa de nuevo los pasos para conseguir terminarlo.