Wejdź na ulicę

Bijatyka, która chodzi w przeglądarce

Odzyskaj ulicę. Uratuj Panienkę. Bądź jak Łysy.

← ↑ ↓ → / WSAD — ruch, także w głąb ulicy  •  J lub X — cios (trzy pod rząd = mocny finiszer)  •  K lub C — kopnięcie  •  SPACJA — skok, a w locie cios = atak z powietrza  •  E — chwyt: ogłuszony wróg, rekwizyt, a przy pełnej furii nawet samochód  •  Q lub Z — blok  •  L — furia, gdy pasek się napełni  •  SHIFT — unik  •  ESC — pauza  •  na telefonie sterujesz padem na ekranie, obsługiwany jest też pad USB

Co siedzi w środku

Gra, której nikt nam nie zlecił

Zrobiliśmy ją dla siebie. Dlatego możemy pokazać każdy plik, każdą pomyłkę i każdą decyzję — nie ma klienta, przed którym trzeba coś ładnie owinąć.

Sześć postaci z pełnym zestawem animacji. Sam Prezes to dziesięć sekwencji po sześć klatek — od bezczynności, przez cios i blok, po upadek.

Trzy lokacje po cztery warstwy. Niebo, plan daleki, elewacja i bruk przesuwają się z różną prędkością, bo inaczej ulica jest płaska.

Sześćdziesiąt cztery klatki efektów. Lekkie i ciężkie trafienie, iskry, pierścień parry, odłamki gardy i moment jej przełamania.

Pogoda w sześciu stanach i okna, które zapalają się niezależnie od reszty ulicy — cztery stany na okno, łącznie z włączonym telewizorem.

Całość chodzi w przeglądarce, bez wtyczek i bez instalacji. Ten sam warsztat wchodzi w animacje i w strony internetowe — gra była tylko najtrudniejszym testem.
Artur, właściciel Pixel Studio, w dresie z medalionem Pixel Studio
Bez formularzy na 12 pól

Zostaw namiar. Resztę załatwię ja.

Odpowiadam osobiście, zwykle tego samego dnia. Żadnych newsletterów.

Iteracja

Cztery klatki, potem trzydzieści — i ani jeden piksel różnicy

Cztery klatki malucha: auto bazowe, dwie fazy alarmu i wypalony wrak
Dostawa 1 — 4 klatki
Szesnaście klatek malucha po korekcie — pełny zestaw stanów pojazdu
Dostawa 2 — pełny zestaw

Pierwsza dostawa to cztery stany malucha: auto, dwie fazy alarmu, wypalony wrak. Po przeglądzie doszło trzydzieści. Cztery zaakceptowane klatki wróciły piksel w piksel — ta sama alfa, ten sam kolor, sprawdzone porównaniem tablic RGBA i sumami SHA-256 zapisanymi w pliku. Akceptacja ma znaczyć akceptację, nie „mniej więcej tak samo”.

Materiał

Tak wygląda jedna sekwencja

Każdy ruch to osobny arkusz: stała komórka, jeden rząd, punkt zakotwiczenia policzony dla całego cyklu — nie dla pojedynczej klatki.

Prezes — kopnięcie — cały arkusz

Prezes — kopnięcie

  • 6 klatek
  • 150 ms

Przygotowanie, uniesienie, wyprost, powrót do gardy. Sześć klatek wystarcza, jeśli trzecia jest naprawdę skrajna.

Ciężkie trafienie — cały arkusz

Ciężkie trafienie

  • 6 klatek
  • FX

Efekt rysowany osobno od postaci, żeby ten sam błysk dało się podpiąć pod każdy cios i każdą ofiarę.

Łysy — parry — cały arkusz

Łysy — parry

  • 4 klatki
  • obrona

Odbicie ciosu trwa cztery klatki, bo piąta już wybaczała za dużo. Okno parry to decyzja projektowa, nie efekt.

Od filmu do klatek

Najpierw scena, potem klatki

Postać nie zaczyna się w arkuszu animacji. Zaczyna się na filmie.

Cztery kadry z filmu referencyjnego — Łysy podchodzi do napastników przed barem w deszczu
Film referencyjny — 5 s
Cztery klatki parowania ciosu w wykonaniu Łysego — arkusz animacji
Arkusz w grze — 4 klatki

Najpierw powstaje pięciosekundowa scena z pełnym tłem, deszczem i światłem z witryny — po to, żeby zobaczyć, jak ta postać się rusza, zanim ktokolwiek narysuje pojedynczą klatkę. Dopiero z niej schodzą arkusze: garda, parry, przełamanie bloku. Film odpowiada na pytanie „jak”, arkusz na pytanie „co narysować w której milisekundzie”. Tę samą scenę wygenerowaliśmy w kilku silnikach i wybraliśmy tę, w której ruch pozostawał czytelny przy 24 klatkach na sekundę.

Kuchnia

Cztery rzeczy, które poszły nie tak

4
usterki złapane pomiarem, nie okiem

Każdą z nich zgłosił Szef jednym zdaniem, patrząc na ekran. Żadnej nie dało się znaleźć przez oglądanie plików — wszystkie wyszły dopiero, kiedy zaczęliśmy liczyć piksele.

Ucięta słuchawka

Budka gubiła fragment co ósmą klatkę. Zrzut na chybił trafił zwykle wyglądał dobrze — stąd „nadal ucina” po trzech poprawkach.

Latająca łapka

Przy każdym trafieniu pojawiała się obca dłoń. Efekty były czyste, atlas wroga też. Ktoś wrysował ją w klatkę postaci.

Prześwit na dresie

Przez białe pasy widać było graffiti ze ściany. Nie wina grafiki — silnik nakładał maskę alfy dwa razy.

Śmietnik rósł po rozwaleniu

Wrak kontenera wychodził o 21% większy od całego. Stany rekwizytu dzieliły jedną skalę, choć mają różne obrysy.

Wniosek jest nudny i dlatego go pilnujemy: jeśli czegoś nie zmierzyłeś, to tego nie wiesz. Skala świata w tej grze ma policzoną wartość — 125,69 piksela na metr — i każdy obiekt jest do niej dopasowany liczbą, nie okiem.
Grywalizacja

Chcesz coś, w co da się kliknąć?

Gra, kalkulator, konfigurator, quiz — cokolwiek, co zatrzymuje człowieka na stronie dłużej niż tekst. Napisz, co chcesz osiągnąć, a powiemy, czy to ma sens i ile zajmie.

Zadzwoń Wyceń
PIXEL / ZNAJDŹ SWÓJ KIERUNEK

Czego szukasz?