Suggerimento rapido evita la gravità di Game & Watch nei salti dei tuoi personaggi

Hai mai visto i vecchi giochi di Game & Watch in cui i personaggi erano a terra o in aria, senza passaggi intermedi? Questo può essere un ottimo effetto se usato nel posto giusto, ma sembra rigido e a scatti nella maggior parte dei giochi. In questo suggerimento rapido, ti mostrerò la differenza tra l'approccio di Game & Watch e un approccio più realistico (ma comunque semplice) che utilizza velocità di salto e gravità.

Nota: Sebbene questo tutorial sia scritto usando JavaScript, dovresti essere in grado di utilizzare le stesse tecniche e concetti in quasi tutti gli ambienti di sviluppo di giochi. Inoltre, grande grazie a Kenney.nl per i fantastici sprite di platform gratuiti!


1. L'approccio ingenuo

Il modo ingenuo di avvicinarsi a un salto del personaggio sarebbe semplicemente quello di impostare i personaggi y posizionarsi su una coordinata più alta, lasciarla per un secondo e quindi riportarla al valore precedente.

Per esempio:

var jumpSpeed ​​= 1000; function jump () character.y - = 25; setTimeout (function () character.y = characterGround; stage.update ();, jumpSpeed);  function gameloop () // Quando il player preme W: chiama la funzione jump jump (); 

Ho creato una demo per dimostrare questo approccio. Utilizzare il W chiave per far saltare il personaggio e visualizzare e modificare il codice su jsFiddle:


Questo sembra funzionare abbastanza bene. Possiamo cambiare il jumpSpeed variabile per far saltare o accelerare il personaggio.

Tuttavia, quando decidiamo di aggiungere movimento al nostro personaggio, vediamo che questo diventa un problema. Guarda la demo qui sotto (usa W saltare, UN e D per spostarsi a sinistra e a destra e visualizzare e modificare il codice su jsFiddle):


Certamente non so di nessuno che salti in quel modo. Abbiamo bisogno di un modo per far "ricadere" gradualmente il nostro personaggio sul terreno. Usando la nozione di gravità, possiamo realizzare proprio questo. (Un altro problema è che il nostro personaggio può saltare mentre è già in aria, quindi lo aggiusteremo anche noi.)


2. Saltare con gravità

Se osserviamo una definizione formale di gravità (scorri verso il basso fino alla sezione di gravità terrestre), possiamo vedere che un oggetto che cade liberamente vicino alla superficie terrestre aumenta la sua velocità verso il basso di 9,81 m / s (32,117 ft / s o 22 mph) ogni secondo che cade.

Tutto ciò significa che la velocità con cui cade aumenta nel tempo. In altre parole, accelera verso il basso.

Per tradurre questo in un codice funzionante, dobbiamo aggiungere una variabile y-velocity per il nostro personaggio; ogni fotogramma, si muoverà verso il basso per la quantità di questa velocità y. Quando il gioco inizia per primo, la velocità y del personaggio sarà 0, poiché è a terra. Per farlo saltare, imposteremo la sua velocità y su un numero negativo, spingendolo in aria. Durante ogni frame che è in volo, aggiungeremo un valore impostato (che chiameremo gravità) alla sua velocità, accelerandolo verso il terreno con il passare del tempo.

Di seguito è riportato il modo in cui il codice potrebbe funzionare:

var yVel = 0; gravità variabile = 1,2; var isJumping = false; function jump () if (isJumping == false) yVel = -15; isJumping = true;  funzione gameloop () if (isJumping) yVel + = gravità; character.y + = yVel; if (character.y> characterGround) character.y = characterGround; yVel = 0; isJumping = falso; 

Per prima cosa impostiamo Yvel a 0, impostare a gravità variabile (che puoi cambiare per far scendere il personaggio ad una velocità diversa) e impostare un isJumping variabile per definire se sta già saltando.

Se l'utente tenta di saltare mentre è già in aria, non succede nulla; altrimenti, abbiamo impostato Yvel a -15. (Modificare questo valore per fare il salto iniziale più alto o più basso.)

Dentro il gameloop (), se il personaggio sta saltando, aggiungiamo un po 'di gravità al Yvel il che rende il personaggio "cadere" una certa quantità su ogni tacca del ciclo di gioco. Se colpisce il terreno che abbiamo impostato isJumping di nuovo a falso quindi possiamo farlo saltare di nuovo

Ho un'altra demo che puoi provare, forgiare e personalizzare. Prova a cambiare il gravità e Yvel valori su jsFiddle, così puoi davvero capire come funziona questa tecnica:



3. Conclusione

In questo breve tutorial hai imparato come far saltare più realisticamente il tuo personaggio incorporando un po 'di gravità. Spero tu abbia trovato questo tutorial utile e grazie per la lettura!