Platformers coraz bogatszy. W poprzednim wpisie opisałem szczegóły dotyczące ruchu bohatera w pionie i poziomie, więc samo sterowanie miałem już przygotowane. Skupiłem się więc dziś na animowaniu postaci, tak aby przestała być jednokolorowym kwadratem na ekranie.
Pierwszą funkcją animacji bohatera jest chodzenie. Jak już wielokrotnie wspominałem, jednostką pomiaru czasu w silniku tej platformówki są klatki, a więc liczby całkowite – im dłużej ma dana czynność trwać, tym więcej klatek trzeba zliczyć. Tak więc aby móc animować chodzenie bohatera, należy liczyć klatki. Liczyć trzeba od momentu wciśnięcia przycisku ruchu w bok, a zakończyć po puszczeniu tego klawisza lub po spadnięciu z platformy. Ową animacją jest sinsunoidalne zatapianie i wynurzanie się ciała bohatera.
Wygląda to w ten sposób (trzy pierwsze unikalne, reszta dla podglądu, powiększenie trzykrotne):
Każdy spajt z powyższej listy wyświetlany jest przez pięć kolejnych klatek, dzięki czemu animacja nie jest ani zbyt szybka, ani zbyt wolna. Aby wiedzieć o ile pikseli przyciąć grafikę, należy obliczyć resztę z dzielenia liczby klatek chodu przez liczbę faz przypadających na pełne zanurzenie i wynurzenie (czyli cztery), a następnie wynik podzielić przez liczbę klatek przypadających na pojedynczą fazę (w której rozmiar grafiki nie zmienia się – czyli pięć):
LWalkPhase := AHero.WalkFrameIndex mod (FRAMES_PER_HERO_WALK * FRAMES_PER_PHASE_HERO_WALK);
LWalkPhase := LWalkPhase div FRAMES_PER_PHASE_HERO_WALK;
W ten sposób uzyskuje się numer fazy chodu – faza pierwsza to brak zanurzenia, druga to zanurzenie o jeden piksel, trzecia o dwa piksele, a czwarta to znów o jeden piksel. Piąta jest równoznaczna z pierwszą – tu następuje zapętlenie animacji. Po obliczeniu rozmiaru przycięcia, wystarczy wyświetlić odpowiedzi fragment. Aby zrobić to prawidłowo, należy wziąć pod uwagę orientację bohatera (kierunek siły przyciągania).
Druga funkcja to rozciąganie bohatera podczas opadania. Tu klatek liczyć nie trzeba, albowiem stopień rozciągnięcia można wyznaczyć na podstawie prędkości wertykalnej – im większa prędkość, tym większe rozciągnięcie. Aby móc namalować rozciągniętego bohatera, należy obliczyć obszar jaki zajmować ma sprajt – a według tego co napisałem zdanie wcześniej, nie jest to trudne:
LArea := AHero.Location.Area;
LArea.Inflate(0, Abs(AHero.VerticalSpeed));
Po kilku minutach zabawy ustaliłem, że najlepiej wygląda bohater, gdy rozciągany jest w pionie wyłącznie wtedy, gdy faktycznie opada. Wznosząc się podczas skoku nie zmienia rozmiaru, po zakończeniu skoku (ale wciąż wznosząc się) też nie – dopiero kiedy osiągnie maksymalną wysokość i prędkość zacznie rosnąć zgodnie z grawitacją. Animacja samego opadania wygląda w ten sposób:
Trzecią funkcją jest… mruganie oczkami. ;)
I znów, aby wiedzieć kiedy mrugać a kiedy nie, należy liczyć klatki. Na szczęcie najfajniej jest, gdy klocek mruga bez względu na wykonywaną akcję (stoi, idzie, skacze, spada itd.), więc wystarczy w kółko inkrementować licznik klatek i tak jak przy chodzeniu, obliczać fazę mrugnięcia, aby dało się wybrać odpowiedni sprajt dla animacji.
Mrugnięcie też składa się z czterech faz – pierwsza to otwarte oczy, druga to przymrużone, trzecia to zamknięte, a czwarta to znów przymrużone. Piąta jest taka sama jak pierwsza – animacja zapętla się. Duszki wyglądają tak (trzy pierwsze są unikalne – dalsze tylko dla podglądu):
Obliczenie fazy mrugnięcia jest identyczne jak w przypadku liczenia fazy chodu, natomiast odstępy pomiędzy mrugnięciami nie są stałe, bo wyglądało by to tandetnie… Dlatego liczba klatek pomiędzy mrugnięciami jest losowana. Aby klocek mrugał raz częściej, a raz rzadziej, zamiast po prostu losować liczbę klatek z zadanego przedziału, losuję wartość od 4 do 8 i na jej podstawie przesuwam bitowo wartość 1:
FWinkWaitFrames := 1 shl RandomRange(4, 9);
To daje wartości 16, 32, 64, 128 lub 256, a więc bohater czasem mignie kolejny raz po 266ms, a czasem dopiero po kilku sekundach. Rozwiązanie trywialne, a finalny efekt bardzo ładny, bo nieprzewidywalny.
Czwartą i ostatnią funkcją jest mała modyfikacja wcześniej opracowanego efektu rozciągania podczas opadania. W trybie debugowania można w dowolnym momencie odwrócić kierunek grawitacji, natomiast w trybie standardowym, tylko jeśli bohater znajduje się na bramce i trzyma odpowiedni klawisz. Bramki mogą być również w powietrzu, więc możliwe jest odwrócenie siły przyciągania podczas opadania, a więc wtedy, gdy bohater ma rozciągnięte ciało. Aby animacja rozciągania wyglądała dobrze, trzeba było dodać również animację kurczenia.
To nieco utrudniło sprawę, bo bohater musiał być rozciągany nie tylko podczas opadania, ale także podczas wznoszenia, co było zablokowane ze względu na dwie pierwsze fazy skoku, w których rozmiar ciała bohatera miał być stały. Dlatego też trzeba było dodać nowy parametr (wartość logiczną), w którym zapisywana jest informacja o tym, czy klocek wznosi się po skoku. Jeśli po skoku to nie zmienia się długości jego ciała, a jeśli nie – zmienia się.
Animacji tyle, a teraz czas na malowanie grafik. Pomimo tylu różnych funkcji, bohatera opisują zaledwie trzy sprajty, a konkretniej te z fazami mrugania – pierwsza z otwartymi oczami, druga z przymrużonymi, a trzecia z zamkniętymi. Rozciąganie jego ciała to nic innego jak namalowanie rozciągniętej grafiki.
Pewnie się zastanawiacie, co z kierunkiem ruchu i orientacją według grawitacji. A no nic – grafikę można flipnąć w poziomie dla ruchu w lewo, a w pionie dla przyciągania w górę. Do tego celu napisałem dwie proste procedurki, dzięki którym nie muszę tworzyć kolejnych duszków:
type
TRGBTriple = packed record
B, G, R: UInt8;
end;
type
PRGBTripleArr = ^TRGBTripleArr;
TRGBTripleArr = packed array [0 .. MaxInt div SizeOf(TRGBTriple) - 1] of TRGBTriple;
procedure FlipBufferHorizontal(ABuffer: TBitmap);
var
LLine: PRGBTripleArr;
LLineIndex, LPixelIndexLeft, LPixelIndexRight: Integer;
var
LPixel: TRGBTriple;
begin
ABuffer.BeginUpdate();
for LLineIndex := 0 to ABuffer.Height - 1 do
begin
LLine := ABuffer.ScanLine[LLineIndex];
LPixelIndexLeft := 0;
LPixelIndexRight := ABuffer.Width - 1;
while LPixelIndexLeft < LPixelIndexRight do
begin
LPixel := LLine^[LPixelIndexLeft];
LLine^[LPixelIndexLeft] := LLine^[LPixelIndexRight];
LLine^[LPixelIndexRight] := LPixel;
LPixelIndexLeft += 1;
LPixelIndexRight -= 1;
end;
end;
ABuffer.EndUpdate();
end;
procedure FlipBufferVertical(ABuffer: TBitmap);
var
LLineTop, LLineBottom: PRGBTripleArr;
LLineIndexTop, LLineIndexBottom, LPixelIndex: Integer;
var
LPixel: TRGBTriple;
begin
ABuffer.BeginUpdate();
LLineIndexTop := 0;
LLineIndexBottom := ABuffer.Height - 1;
while LLineIndexTop < LLineIndexBottom do
begin
LLineTop := ABuffer.ScanLine[LLineIndexTop];
LLineBottom := ABuffer.ScanLine[LLineIndexBottom];
for LPixelIndex := 0 to ABuffer.Width - 1 do
begin
LPixel := LLineTop^[LPixelIndex];
LLineTop^[LPixelIndex] := LLineBottom^[LPixelIndex];
LLineBottom^[LPixelIndex] := LPixel;
end;
LLineIndexTop += 1;
LLineIndexBottom -= 1;
end;
ABuffer.EndUpdate();
end;
To wszystko – z finalnego efektu jestem bardzo zadowolony. Wisienką na torcie była zmiana sposobu malowania tła poziomu w kolorze – zamiast wypełniać je jednym kolorem, teraz wypełniane jest subtelnym, wertykalnym gradientem (ostatni załącznik).
Następne w kolejce do animowania są świetliki, czym zajmę się jutro. Póki co jeszcze nie wiem dokładnie jak mają wyglądać, ale na pewno też będą mrugać swoimi świecącymi zadkami, tak samo nieregularnie jak bohater mruga oczami. Na szczęście pomysłów nie brakuje. Do następnego. ;)
#free-pascal #lazarus #platformer #retro
kate87
@kobuz80 -1 :P