Parte 4: Creando tu jugador

En Parte 3 aprendiste a crear tu primer nivel. En este tutorial, comenzaremos a transformar nuestro nivel vacío en un juego.

Un Plataforma es un juego como Mario. Típicamente, los plataformas tienen un personaje que puede ser controlado por un joystick, y puede saltar para resolver varios acertijos.

Esta parte de la guía se basa en Parte 3, y asume que ya has creado tu nivel usando los recursos del Paquete de Inicio de Plataforma, el cual puedes descargar desde la Tienda de Recursos.

Añadiendo el Jugador:

Primero necesitas agregar tu gráfico de jugador al muelle de objetos. Comienza navegando a la carpeta de Descargas en la Biblioteca de Recursos y localiza el personaje animado de Hombre Espacial Verde.

Al tocar el personaje animado en la Biblioteca de Recursos, se te mostrarán todos los ciclos de animación disponibles.

Dado que no queremos que el jugador parezca que está caminando aunque esté quieto, usaremos el ciclo de animación de "Estar de pie". Toca el ciclo de animación de "Estar de pie" para agregarlo al muelle.

Nota: Si el gráfico animado que estás usando no tiene un ciclo de estar de pie o inactivo, siempre puedes seleccionar un solo fotograma de una animación manteniendo tu dedo en el ciclo de animación y seleccionando "Ver Fotogramas" desde el Menú de Recursos.

Ahora que tienes tu personaje en el Muelle de Objetos, simplemente puedes arrastrarlo fuera del muelle y a tu escena.

Moviendo al Jugador:

Ahora necesitamos dar vida al personaje y hacerlo movible con un joystick. hyperPad hace que este proceso sea realmente simple con los comportamientos incluidos.

Primero abre las Propiedades del Objeto tocando el personaje que acabas de arrastrar al lienzo.

Desde la "Pestaña de Física" de las Propiedades del Objeto, convierte tu personaje en un "Tipo de Física" tocando el ícono de objeto físico ( ) justo debajo del botón de "Comportamientos".

Nota: Los objetos físicos se adherirán a las leyes de la gravedad, y reaccionarán a otros objetos y fuerzas.

Luego toca el botón de Comportamientos, para abrir el editor de comportamientos y comenzar el proceso de hacer que tu personaje sea jugable.

El editor de comportamientos tiene diferentes categorías mostradas a lo largo de la barra superior, y comportamientos en el lado izquierdo.

Dado que has añadido un Ciclo de Animación, un comportamiento de "Reproducir Animación" ya está añadido en el lienzo de comportamiento.

Desde la categoría de "interacción", arrastra el comportamiento de "Controlado por Joystick" al lienzo.

Tan pronto como este comportamiento se añade, también creará y añadirá automáticamente un joystick en tu Capa de UI GLOBAL. Si ya tenías un joystick añadido a tu capa de UI, el comportamiento utilizará eso en lugar de agregar uno por ti.

En este punto, ¡puedes presionar play y ejecutar tu juego! Sin embargo, podrías notar que el jugador simplemente se desliza por la pantalla...

Animaciones:

Hagamos que el juego se vea un poco mejor añadiendo algunas animaciones a nuestro jugador.

Comenzaremos haciendo que el personaje camine al mover el joystick a la izquierda o derecha.

Para hacer esto, necesitas ver los comportamientos de interacción "avanzados". Mientras estás en la categoría de "Interacción", toca la opción "Avanzada" en la parte inferior de la lista de comportamientos.

Desde la lista "avanzada", añade "Joystick Izquierdo" y "Joystick Derecho" al lienzo.

A continuación, desde la categoría "FX", añade el comportamiento de "Reproducir Animación" y conecta tanto el Joystick Izquierdo como el Derecho a esta nueva Reproducir Animación añadida.

Ahora, toca el comportamiento "Reproducir Animación" para ver las Propiedades del Comportamiento.

El primer cuadro en la parte superior es el objeto al que deseas aplicar la animación. hyperPad selecciona automáticamente el objeto actual.

Nota: Puedes tocar aquí y seleccionar cualquier otro objeto en tu escena si lo deseas. No queremos hacer eso ahora, así que lo dejaremos como está.

El siguiente cuadro, representa la animación que deseas reproducir. Dado que no hay animación para reproducir, está en blanco.

Toca el cuadro vacío para seleccionar una animación.

Observa que una tira de película aparece en la parte inferior de la pantalla. Toca el icono de la Biblioteca de Recursos, para agregar un ciclo de animación a la tira de película.

Navega hacia el personaje animado "Hombre Espacial Verde", y selecciona el ciclo de "Caminar". Observa que cada fotograma de la animación se ha añadido automáticamente a la tira de película. Toca en cualquier lugar para cerrar la tira de película y volver a las propiedades.

Nota: También puedes añadir imágenes individuales o fotogramas de animación a la tira de animación. No estás limitado a ciclos de animación pre-creados.

A continuación, desde las propiedades del comportamiento de animación de Caminar, apaga el toggle para "Bucles de Animación". Queremos que este interruptor esté apagado porque el Joystick Izquierdo y Derecho básicamente buclean nuestra animación por nosotros, ya que la animación solo sucederá mientras el joystick esté a la izquierda o a la derecha.

Finalmente, vamos a renombrar este comportamiento para que sea más fácil de encontrar después. Desde las propiedades del comportamiento, toca el nombre del comportamiento en la parte superior. Esto abrirá un teclado y te permitirá escribir un nuevo nombre para el comportamiento. Llamémoslo "Animación de Caminar".

Si presionas play ahora, ¡tu personaje debería moverse por ahí con el joystick y estar animado!

Saltar:

¡No puedes tener un juego de plataformas sin saltar! Hacer que el jugador salte es muy fácil en hyperPad.

Mientras aún estás en el editor de comportamientos del Hombre Espacial Verde, toca la categoría de "Interacción", y desde la lista de comportamientos a la izquierda, arrastra el comportamiento de "Saltar con Botón". Al igual que el comportamiento Controlado por Joystick, saltar con botón también se encargará de muchos de los movimientos de tus objetos por ti, y añadirá automáticamente un botón a la Capa de UI Global.

Puedes tocar el comportamiento de salto para ver sus propiedades. Desde las propiedades del comportamiento de salto, puedes cambiar configuraciones como el sonido a reproducir, la potencia de los saltos, y más. Para este tutorial, dejaremos todo igual, excepto que cambiaremos la potencia.

Tuve que hacer la potencia 18, para poder saltar sobre todos los obstáculos en el nivel creado para la Parte 3. Si diseñaste tu propio nivel, es posible que necesites jugar con el valor de salto hasta que funcione para ti.

Si presionas play ahora, puedes ver a tu jugador correr y saltar. Sin embargo, es posible que hayas notado que el personaje sigue caminando mientras salta en el aire... ¡Vamos a arreglar eso!

Comencemos reproduciendo una animación mientras saltas.

Desde la categoría de "Interacción" añade un comportamiento de "Comenzó a Tocar", luego toca el comportamiento que acabas de añadir para ver las propiedades.

Ahora necesitamos cambiar el comportamiento para que solo funcione cuando comienzas a tocar el botón de salto. Desde las propiedades del comportamiento de "Comenzó a Tocar", toca el gráfico del hombre espacial en la parte superior del cuadro.

Esto te llevará a la pantalla de "Selector de Objetos". Desde aquí puedes seleccionar cualquier objeto, o elemento de UI en tu escena. Probablemente no puedes seleccionar el botón. Esto se debe a que el Hombre Espacial Verde estaba en la Capa Principal, y el botón está en la Capa de UI Global. Desde la barra de capas en el lado derecho de la pantalla, simplemente toca la capa de "Global UI". Ahora puedes seleccionar el botón.

Con el botón seleccionado, toca el icono de aceptación en la parte inferior.

A continuación, añade otro comportamiento de Reproducir Animación, y conéctalo al comportamiento de Comenzó a Tocar que añadimos anteriormente.

Al igual que hiciste anteriormente, puedes renombrar el comportamiento y seleccionar una animación desde las Propiedades del Comportamiento.

Para renombrar, toca el título del comportamiento en las propiedades del objeto e ingresa un nuevo nombre. Yo utilicé "Animación de Salto".

Como hiciste para la animación de caminar, necesitas seleccionar un ciclo para el salto. Toca el segundo cuadro vacío en las propiedades del comportamiento y selecciona el ciclo de animación de Salto de las animaciones disponibles del Hombre Espacial Verde.

También necesitarás apagar el interruptor "Bucles de Animación", y el interruptor "Restaurar Fotograma".

Si presionas play ahora, puedes ver que cuando saltas, ¡el personaje parece que está saltando! Sin embargo, aún hay 2 pequeños problemas.

1. El personaje no regresa a su animación de estar de pie cuando aterriza.

2. Si mueves al personaje mientras está en el aire, el personaje reproduce la animación de caminar en el aire.

Para el primer problema, cambia a la categoría de comportamiento "Transformar" y toca el botón avanzado para ver los comportamientos avanzados.

Ahora arrastra el comportamiento de "Dejó de Caer", y también arrastra otro comportamiento de "Reproducir Animación" desde la categoría FX y conéctalo al "Dejó de Caer".

En el "Reproducir Animación" que acabas de añadir, selecciona el ciclo de animación de "Estar de pie" del Hombre Espacial Verde, desactiva los toggles de "Restaurar Fotograma" y "Bucles de Animación", y cambia el nombre del comportamiento de Reproducir Animación a "Estar de pie".

El Hombre Espacial Verde debería ahora ser capaz de saltar, y parecer estar de pie cuando aterriza.

Para el segundo problema, necesitamos detener la animación de correr mientras el personaje está saltando.

Cambia a la categoría de comportamiento "Personalizado" y arrastra "Comportamiento Apagado", y conéctalo al comportamiento de "Comenzó a Tocar" que añadimos anteriormente para la Animación de Salto.

Ahora toca el "Comportamiento Apagado", y toca el cuadro vacío para seleccionar un comportamiento de la lista. Desde la lista, localiza el comportamiento de "Reproducir Animación" (Animación de Caminar) que está conectado a los comportamientos de Joystick Izquierdo y Derecho.

A continuación, añade un "Comportamiento Encendido", y conéctalo al comportamiento de "Dejó de Caer" que añadimos anteriormente.

De nuevo, toca el cuadro vacío y selecciona el comportamiento de Reproducir animación (Animación de Caminar) que reproduce la animación de caminar.

Si presionas play ahora, ¡tu personaje debería poder moverse y saltar perfectamente!

Moviendo la Pantalla:

Como probablemente notaste, si te mueves demasiado lejos, el personaje se va de la pantalla. En los juegos de plataformas tradicionales, la pantalla normalmente se mueve con tu jugador. Toma Mario como ejemplo, Mario siempre permanece en el medio de la pantalla (con un poco de variación).

Hagamos que la pantalla se mueva con el Hombre Espacial Verde, para que nunca pueda salirse de la pantalla.

Mientras aún estás en los comportamientos del Hombre Espacial Verde, cambia a la categoría de "Pantalla" y añade el comportamiento de "Seguir Pantalla". El comportamiento de "Seguir Pantalla" moverá la pantalla con tu objeto seleccionado.

A continuación abre las propiedades del comportamiento de Seguir Pantalla, y desactiva el interruptor de "Sigue Y". Esto hace que la pantalla siga a tu jugador a la izquierda o a la derecha, pero no arriba o abajo.

En este punto, si presionas play deberías poder correr a través de tu nivel con un personaje animado, y hacer que la pantalla se mueva contigo.

Puedes descargar la versión final de la Parte 4 desde el Hub y verla en acción.

En la Parte 5, comenzaremos a añadir un poco más de elementos de Juego Añadiendo monedas para recoger, y un puntaje.