pixel-platformer

Kompletna platformówka 2D w stylu pixel-art - fizyka postaci, poziomy, przeciwnicy i zbierane przedmioty. Dowód, że schodzimy do warstwy silnika gry, a nie tylko składamy gotowce.

TL;DR

Platformówka 2D, która chodzi w przeglądarce. Nie chodziło o liczbę funkcji, tylko o to, żeby skok miał dobry "feel" i żeby płynnie działało nawet na słabszym laptopie.

Wprowadzenie

Platformówka to jeden z tych projektów, które wyglądają banalnie z zewnątrz. Kwadrat skacze po kafelkach, co tu może być trudnego? Cała trudność siedzi w rzeczach, których gracz nie widzi, a jednak czuje w kilka klatek: czy skok jest sprężysty, czy sterowanie ma opóźnienie, czy da się doskoczyć do krawędzi.

Ten projekt powstał dla frajdy i po to, żeby naprawdę zrozumieć, skąd bierze się dobre sterowanie. Zamiast dokładać kolejne mechaniki, doprowadziliśmy do wysokiej jakości to jedno: ruch postaci, który dobrze leży w ręku, i pętlę gry, która zachowuje się tak samo na każdym sprzęcie.

Gracz ocenia grę w pierwszych sekundach, i to nie rozumem, tylko dotykiem. Postać za lekka ucieka spod palców, za ciężka wlecze się i frustruje. Między jednym a drugim jest wąskie pasmo, w którym skok czuć jako przyjemny - i to pasmo znajduje się tylko przez strojenie pojedynczych wartości: siły skoku, grawitacji, tarcia przy lądowaniu.

To dlatego platformówka jest tak dobrym ćwiczeniem. Nie ma tu wielkiej architektury do zaprojektowania, jest za to bezlitosny feedback: źle dobrana liczba i gra od razu przestaje być przyjemna. Reszta case study to opowieść o tym, co trzeba było poukładać, żeby to strojenie w ogóle miało sens.

Jeden krok fizyki, każdy sprzęt równy

Najczęstszy błąd w grach robionych po godzinach: pętla przywiązana do liczby klatek. Na monitorze 60 Hz postać skacze normalnie, na 144 Hz lata dwa razy szybciej, a na słabym laptopie, który gubi klatki, zwalnia. Fizyka nie może zależeć od tego, jak szybko rysuje się ekran.

Rozwiązanie jest proste i sprawdzone: symulacja idzie stałym krokiem, a rysowanie osobno, z interpolacją między tickami. Świat aktualizuje się dokładnie sześćdziesiąt razy na sekundę niezależnie od monitora, a renderer dostaje stan plus ułamek kroku, żeby ruch był gładki.

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);
}

Dwie pętle gry

Podejście	Na szybkim ekranie	Na słabym laptopie
Pętla związana z klatkami	postać lata za szybko	postać wlecze się
Stały krok plus interpolacja	to samo tempo	to samo tempo

Kolizje, które nie oszukują

Druga rzecz, która psuje "feel", to kolizje. Postać musi zatrzymywać się dokładnie na krawędzi kafla, nie piksel za wcześnie i nie piksel za późno, inaczej gracz czuje, że coś jest nie tak, nawet jeśli nie umie tego nazwać. Symulacja liczy prościej, niż się wydaje: prędkość, potem osobno oś X i oś Y wobec siatki kafli, z korektą pozycji przy zderzeniu.

Wejście

czytamy klawisze raz na klatkę, ale przekazujemy do symulacji, nie prosto do ruchu.

Symulacja

stały krok liczy prędkość, grawitację i kolizje z siatką kafli.

Rysowanie

renderer dostaje stan świata plus ułamek kroku, żeby ruch był gładki między tickami.

➜

Wskazówka

Stały krok symulacji plus interpolacja przy rysowaniu to najprostszy sposób, żeby gra zachowywała się tak samo na każdym sprzęcie. Fizyka nie wie nic o liczbie klatek monitora, a to ona decyduje, czy skok będzie sprawiedliwy.

Efekt, który czuć w ręku

Na wyjściu jest mała gra, którą naprawdę przyjemnie się steruje, a jej kod da się czytać i rozbudowywać. Skok ma dobry ciężar, kolizje są uczciwe, a tempo jest takie samo na każdym monitorze. To nie jest demo techniczne udające grę, tylko rzecz doprowadzona do stanu, w którym chce się w nią grać dłużej, niż trwa jej uruchomienie.

Więcej projektów

Inne realizacje z tej samej kategorii - zobacz, jak podchodzimy do podobnych wyzwań.

Masz podobny projekt?

Napisz do nas - wycena jest bezpłatna i wraca w godzinę.