Ooit de oude Game & Watch-games gezien waarbij personages zich op de grond of in de lucht bevonden, zonder tussenliggende overgangen? Dat kan een cool effect zijn wanneer het op de juiste plaats wordt gebruikt, maar het ziet er in de meeste spellen stijf en schokkerig uit. In deze Quick Tip laat ik je het verschil zien tussen de Game & Watch-benadering en een meer realistische (maar nog steeds eenvoudige) benadering waarbij gebruik wordt gemaakt van een springsnelheid en zwaartekracht.
Notitie: Hoewel deze tutorial met JavaScript is geschreven, zou je in bijna elke game-ontwikkelomgeving dezelfde technieken en concepten moeten kunnen gebruiken. Ook heel erg bedankt aan Kenney.nl voor de geweldige gratis sprites voor platformgames!
De naïeve manier om een personagesprong te maken, is om gewoon de personages in te stellen Y
positie naar een hogere coördinaat, laat het een seconde staan en stel het dan terug naar de vorige waarde.
Bijvoorbeeld:
var jumpSpeed = 1000; functie jump () character.y - = 25; setTimeout (function () character.y = CharacterGround; stage.update ();, jumpSpeed); function gameloop () // Als speler op W drukt: bel de jump-functie jump ();
Ik heb een demo opgezet om deze aanpak te demonstreren. Gebruik de w toets om het personage te laten springen en de code op jsFiddle te bekijken en aan te passen:
Dit lijkt vrij goed te werken. We kunnen de jumpSpeed
variabele om het karakter sneller of langzamer te laten springen.
Wanneer we echter besluiten om beweging toe te voegen aan ons personage, zien we dat dit een probleem wordt. Zie de demo hieronder (gebruik w springen, EEN en D om naar links en rechts te gaan, en bekijk en wijzig de code op jsFiddle):
Ik ken zeker niemand die zo springt. We hebben een manier nodig om ons karakter geleidelijk "terug te laten vallen" naar de grond. Door het begrip zwaartekracht te gebruiken, kunnen we precies dat bereiken. (Een ander probleem is dat ons personage kan springen terwijl het al in de lucht is, dus we zullen dat ook repareren.)
Als we naar een formele definitie van zwaartekracht kijken (naar de zwaartekrachtsegmenten van de aarde bladeren), kunnen we zien dat een object dat vrij in de buurt van het aardoppervlak valt, zijn neerwaartse snelheid met 9,81 m / s (32,1740 ft / s of 22 mph) verhoogt. ten tweede dat het valt.
Dit betekent dat de snelheid waarmee het valt in de loop van de tijd toeneemt. Met andere woorden, het versnelt naar de grond.
Om dit in een werkende code te vertalen, moeten we een y-snelheidsvariabele toevoegen voor ons karakter; in elk frame beweegt hij naar beneden met de hoeveelheid van deze y-snelheid. Wanneer het spel voor het eerst start, is de y-snelheid van het personage 0, omdat hij op de grond staat. Om hem te laten springen, zullen we zijn y-snelheid op een negatief getal zetten, hem in de lucht duwen. Tijdens elk frame dat hij in de lucht heeft, zullen we een ingestelde waarde toevoegen (die we zullen noemen) zwaartekracht
) tot zijn snelheid, hem versnellend naar de grond als de tijd verstrijkt.
Hieronder ziet u hoe de code zou kunnen werken:
var yVel = 0; var zwaartekracht = 1,2; var isJumping = false; functie 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;
We zijn eerst begonnen Yvel
tot 0, stel een zwaartekracht
variabele (die u kunt wijzigen om het teken met een andere snelheid te laten dalen) en stel een isJumping
variabele om te bepalen of hij al springt.
Als de gebruiker probeert te springen terwijl hij al in de lucht is, gebeurt er niets; anders stellen we in Yvel
naar -15
. (Verander deze waarde om de initiële sprong hoger of lager te maken.)
Binnen in de gameloop ()
, als het personage springt, voegen we wat zwaartekracht toe aan de Yvel
waardoor het karakter een bepaald bedrag "valt" op elk vinkje in de spellus. Als hij de grond raakt, gaan we zitten isJumping
terug naar vals
dus we kunnen hem weer laten springen
Ik heb nog een demo die je kunt uitproberen, vorkten en aanpassen. Probeer de zwaartekracht
en Yvel
waarden op jsFiddle, zodat u echt een idee krijgt van hoe deze techniek werkt:
In deze korte tutorial heb je geleerd hoe je je personage realistischer kunt laten springen door wat zwaartekracht op te nemen. Ik hoop dat je deze tutorial nuttig hebt gevonden en bedankt voor het lezen!