Share
Avez-vous déjà vu les vieux jeux Game & Watch où les personnages étaient soit au sol, soit dans les airs, sans transition entre eux? Cela peut être un effet cool lorsqu'il est utilisé au bon endroit, mais il a l'air raide et saccadé dans la plupart des jeux. Dans ce petit conseil, je vais vous montrer la différence entre l’approche Game & Watch et une approche plus réaliste (mais toujours simple) qui utilise une vitesse de saut et une gravité..
Remarque: Bien que ce tutoriel soit écrit en JavaScript, vous devriez pouvoir utiliser les mêmes techniques et concepts dans presque tous les environnements de développement de jeux. Merci également à Kenney.nl pour les géniaux sprites de plateforme gratuits!
La façon naïve de faire un saut de personnage serait de simplement définir les personnages y position à une coordonnée supérieure, laissez-le pendant une seconde, puis remettez-le à la valeur précédente.
Par exemple:
var jumpSpeed = 1000; fonction jump () character.y - = 25; setTimeout (function () character.y = characterGround; stage.update ();, jumpSpeed); function gameloop () // Lorsque le joueur appuie sur W: appelle la fonction jump jump ();
J'ai mis en place une démo pour démontrer cette approche. Utilisez le W pour faire sauter le personnage, voir et modifier le code sur jsFiddle:
Cela semble bien fonctionner. Nous pouvons changer le saut vitesse variable pour faire sauter le personnage plus vite ou plus lentement.
Cependant, lorsque nous décidons d'ajouter du mouvement à notre personnage, nous voyons que cela devient un problème. Voir la démo ci-dessous (utiliser W sauter, UNE et ré pour aller à gauche et à droite, et voir et modifier le code sur jsFiddle):
Je ne connais certainement personne qui saute comme ça. Nous avons besoin d'un moyen pour que notre personnage "retombe" progressivement sur le sol. En utilisant la notion de gravité, nous pouvons accomplir cela. (Un autre problème est que notre personnage peut sauter alors qu'il est déjà dans les airs, nous allons donc régler ça aussi.)
Si nous examinons une définition formelle de la gravité (faire défiler jusqu’à la section de gravité de la Terre), nous pouvons voir qu’un objet tombant librement près de la surface de la Terre augmente sa vitesse de descente de 9,81 m / s (32.1740 ft / s ou 22 mph). deuxième qu'il tombe.
Tout cela signifie que la vitesse à laquelle elle tombe augmente avec le temps. En d'autres termes, il accélère vers le sol.
Pour traduire cela en un code de travail, nous devons ajouter une variable de vélocité y pour notre personnage; chaque image, il descendra de la vitesse y. Lorsque le jeu commence pour la première fois, la vélocité y du personnage sera 0, puisqu'il est au sol. Pour le faire sauter, nous allons régler sa vitesse y sur un nombre négatif, le propulsant dans les airs. Pendant chaque image en vol, nous ajouterons une valeur définie (que nous appellerons la gravité) à sa vitesse, l'accélérant vers le sol au fil du temps.
Voici comment le code pourrait fonctionner:
var yVel = 0; gravité var = 1,2; var isJumping = false; fonction jump () if (isJumping == false) yVel = -15; isJumping = true; function gameloop () if (isJumping) yVel + = gravity; character.y + = yVel; if (character.y> characterGround) character.y = characterGround; yVel = 0; isJumping = false;
Nous avons d'abord mis yVel à 0, définissez un la gravité variable (que vous pouvez modifier pour que le personnage descende à un taux différent), et définissez une est de sauter variable pour définir s'il saute déjà.
Si l'utilisateur tente de sauter alors qu'il est déjà dans les airs, rien ne se passe; sinon, nous mettons yVel à -15. (Modifiez cette valeur pour augmenter ou réduire le saut initial.)
À l'intérieur de gameloop (), si le personnage saute, nous ajoutons un peu de gravité à la yVel ce qui fait que le personnage "tombe" d'un certain montant à chaque tick de la boucle de jeu. S'il frappe le sol, nous mettons est de sauter retour à faux afin que nous puissions le faire sauter à nouveau
J'ai une autre démo que vous pouvez essayer, créer et personnaliser. Essayez de changer le la gravité et yVel valeurs sur jsFiddle, vous pouvez donc vraiment avoir une idée de comment cette technique fonctionne:
Dans ce court tutoriel, vous avez appris à faire sauter votre personnage de manière plus réaliste en intégrant un peu de gravité. J'espère que vous avez trouvé ce tutoriel utile et merci de le lire!
Accentsconagua