pixel-platformer

Un platform 2D completo in stile pixel art - fisica del personaggio, livelli, nemici e oggetti da raccogliere. La prova che scendiamo fino al livello del motore di gioco e non ci limitiamo ad assemblare pezzi pronti.

pixel-platformer
TL;DR

Un platform 2D che gira nel browser. Non è mai stata una questione di numero di funzionalità, ma di far sì che il salto abbia una buona sensazione e resti fluido anche su un portatile più debole.

Panoramica

Un platform è uno di quei progetti che dall'esterno sembrano banali. Un quadrato salta sulle piastrelle, cosa mai può esserci di difficile? Tutta la difficoltà sta in cose che il giocatore non vede eppure sente in pochi fotogrammi: se il salto è reattivo, se il comando ha ritardo, se si riesce a raggiungere il bordo.

Questo progetto è nato per divertimento, e per capire davvero da dove viene un buon controllo. Invece di aggiungere sempre nuove meccaniche, abbiamo portato a un livello alto una sola cosa: un movimento del personaggio che sta bene in mano, e un loop di gioco che si comporta allo stesso modo su qualsiasi hardware.

Un giocatore giudica un gioco nei primi secondi, e non con la ragione ma con il tatto. Un personaggio troppo leggero sfugge dalle dita, uno troppo pesante si trascina e frustra. Tra i due c'è una fascia stretta in cui il salto risulta piacevole - e quella fascia si trova solo regolando singoli valori: la forza del salto, la gravità, l'attrito all'atterraggio.

Ecco perché un platform è un esercizio così valido. Non c'è una grande architettura da progettare, ma c'è un riscontro spietato: un numero scelto male e il gioco smette subito di essere piacevole. Il resto di questo caso di studio racconta cosa è stato necessario mettere in ordine perché quella regolazione avesse un senso.

Un passo di fisica, ogni macchina alla pari

L'errore più comune nei giochi fatti dopo il lavoro: un loop legato al numero di fotogrammi. Su un monitor a 60 Hz il personaggio salta normalmente, a 144 Hz vola due volte più veloce, e su un portatile debole che perde fotogrammi rallenta. La fisica non può dipendere da quanto velocemente lo schermo disegna.

La soluzione è semplice e collaudata: la simulazione avanza a passo fisso, e il disegno avviene a parte, con interpolazione tra i tick. Il mondo si aggiorna esattamente sessanta volte al secondo indipendentemente dal monitor, e il renderer riceve lo stato più una frazione del passo perché il movimento resti fluido.

gameLoop.js · javascript
let accumulator = 0;
const step = 1 / 60;

function frame(now) {
  accumulator += (now - last) / 1000;
  last = now;

  while (accumulator >= step) {
    world.update(step);
    accumulator -= step;
  }

  renderer.draw(world, accumulator / step);
  requestAnimationFrame(frame);
}

Due loop di gioco

ApproccioSu uno schermo veloceSu un portatile debole
Loop legato ai fotogrammiil personaggio vola troppo veloceil personaggio si trascina
Passo fisso più interpolazionestesso ritmostesso ritmo

Collisioni che non barano

La seconda cosa che rovina la sensazione sono le collisioni. Il personaggio deve fermarsi esattamente sul bordo di una piastrella, non un pixel troppo presto né un pixel troppo tardi, altrimenti il giocatore percepisce che qualcosa non va, anche senza saperlo nominare. La simulazione calcola più semplicemente di quanto sembri: la velocità, poi l'asse X e l'asse Y separatamente contro la griglia di piastrelle, con una correzione di posizione al contatto.

1
Input

leggiamo i tasti una volta per fotogramma, ma li passiamo alla simulazione, non direttamente al movimento.

2
Simulazione

il passo fisso calcola velocità, gravità e collisioni contro la griglia di piastrelle.

3
Disegno

il renderer riceve lo stato del mondo più una frazione del passo perché il movimento resti fluido tra i tick.

➜
Suggerimento

Un passo di simulazione fisso più l'interpolazione al disegno è il modo più semplice per far comportare un gioco in modo identico su qualsiasi hardware. La fisica non sa nulla della frequenza di fotogrammi del monitor, ed è questo a decidere se il salto è equo.

L'effetto che senti in mano

Ne esce un piccolo gioco che si controlla davvero con piacere, con un codice che resta leggibile e facile da estendere. Il salto ha un buon peso, le collisioni sono oneste, e il ritmo è lo stesso su ogni monitor. Non è una demo tecnica che finge di essere un gioco, ma una cosa portata a uno stato in cui vuoi giocarci più a lungo di quanto duri il suo avvio.

Altri progetti

Altri lavori della stessa categoria - scopri come affrontiamo sfide simili.

Hai un progetto simile?

Contattaci - il preventivo è gratuito e arriva entro un'ora.