¿Alguna vez has visto los viejos juegos Game & Watch donde los personajes estaban en el suelo o en el aire, sin ninguna transición entre ellos? Eso puede ser un efecto genial cuando se usa en el lugar correcto, pero parece rígido y desigual en la mayoría de los juegos. En este Consejo rápido, te mostraré la diferencia entre el enfoque de Juego y Reloj y un enfoque más realista (pero simple) que utiliza la velocidad de salto y la gravedad.
Nota: Aunque este tutorial está escrito con JavaScript, debería poder usar las mismas técnicas y conceptos en casi cualquier entorno de desarrollo de juegos. También, muchas gracias a Kenney.nl por los increíbles sprites de plataformas gratis!
La forma ingenua de acercarse a hacer un salto de personaje sería simplemente configurar los personajes y
colóquela en una coordenada superior, déjela por un segundo y luego ajústela al valor anterior.
Por ejemplo:
var jumpSpeed = 1000; función salto () carácter.y - = 25; setTimeout (function () character.y = characterGround; stage.update ();, jumpSpeed); function gameloop () // Cuando el jugador presiona W: llama a la función de salto jump ();
He creado una demostración para demostrar este enfoque. Utilizar el W clave para hacer que el personaje salte, y ver y modificar el código en jsFiddle:
Esto parece funcionar bastante bien. Podemos cambiar el saltar velocidad
Variable para que el personaje salte más rápido o más lento..
Sin embargo, cuando decidimos añadir movimiento a nuestro personaje, vemos que esto se convierte en un problema. Vea la demostración a continuación (use W saltar, UNA y re para moverse a la izquierda y a la derecha, y ver y modificar el código en jsFiddle):
Ciertamente no conozco a nadie que salte así. Necesitamos una manera de hacer que nuestro personaje "caiga" gradualmente al suelo. Al utilizar la noción de gravedad, podemos lograr eso. (Otro problema es que nuestro personaje puede saltar mientras está en el aire, así que también lo arreglaremos).
Si nos fijamos en una definición formal de gravedad (Desplácese hacia abajo hasta la sección de gravedad de la Tierra), podemos ver que un objeto que cae libremente cerca de la superficie de la Tierra aumenta su velocidad hacia abajo en 9.81 m / s (32.1740 pies / s o 22 mph) cada segundo que cae.
Todo lo que esto significa es que la velocidad a la que cae aumenta con el tiempo. En otras palabras, acelera hacia el suelo..
Para traducir esto en un código de trabajo, necesitamos agregar una variable de velocidad y para nuestro personaje; En cada fotograma, se moverá hacia abajo según la cantidad de esta velocidad y. Cuando el juego comienza por primera vez, la velocidad y del personaje será 0, ya que está en el suelo. Para hacerlo saltar, estableceremos su velocidad de y en un número negativo, impulsándolo en el aire. Durante cada fotograma en el que esté en el aire, agregaremos un valor establecido (que llamaremos gravedad
) a su velocidad, acelerándolo hacia el suelo a medida que pasa el tiempo.
A continuación se muestra cómo podría funcionar el código:
var yVel = 0; gravedad var = 1.2; var isJumping = false; función jump () if (isJumping == false) yVel = -15; isJumping = true; función gameloop () if (isJumping) yVel + = gravedad; carácter.y + = yVel; if (character.y> characterGround) character.y = characterGround; yVel = 0; isJumping = false;
Primero establecemos yVel
a 0, establece un gravedad
variable (que puede cambiar para hacer que el personaje descienda a una velocidad diferente), y establecer una es saltar
variable para definir si ya está saltando.
Si el usuario intenta saltar mientras está en el aire, no pasa nada; de lo contrario, nos ponemos yVel
a -15
. (Cambie este valor para hacer que el salto inicial sea más alto o más bajo).
Dentro de gameloop ()
, Si el personaje está saltando, le agregamos algo de gravedad a la yVel
lo que hace que el personaje "caiga" una cierta cantidad en cada tic del bucle de juego. Si él toca el suelo nos ponemos es saltar
de regreso falso
para que podamos hacerlo saltar de nuevo
Tengo otra demo que puedes probar, bifurcar y personalizar. Intenta cambiar el gravedad
y yVel
los valores en jsFiddle, para que realmente puedas tener una idea de cómo funciona esta técnica:
En este breve tutorial, has aprendido cómo hacer que tu personaje salte de forma más realista incorporando algo de gravedad. Espero que hayas encontrado este tutorial útil y gracias por leerlo.!