Czego nauczyłem się analizując 800 gier mających tylko 13 kilobajtów

8 lipca 2018 Andrzej Mazur

W ramach współpracy spotkań Meet.js w Katowicach z meetupami Gamedev.js odbywającymi się głównie w Warszawie, jubileuszowa, 30. edycja okazała się być specjalną, bo dotyczyła gier HTML5. Wystąpiłem na niej z prezentacją dotyczącą tego, czego nauczyłem się recenzując jako juror 800 gier, które ważyły tylko 13 kilobajtów.

Andrzej Mazur. Twórca gier HTML5, programista JavaScript. Założyciel studia Enclave Games, pomysłodawca konkursu js13kGames, wydawca newslettera Gamedev.js Weekly, reprezentant Mozilla Tech Speakers w Polsce. Kieruje społecznością Gamedev.js organizując spotkania, warsztaty i hackathony. Lubi jeść sushi i grać w Neuroshimę Hex.

Gry zostały zgłoszone na konkurs js13kGames, który co roku odbywa się online między 13 sierpnia, a 13 września online. Zasada główna przyświecająca konkursowi jest jedna: wszystkie muszą zmieścić się w limicie wielkości 13 kilobajtów paczki zip, co jest dosyć sporym wyzwaniem, bo zwykłe obrazki na stronach poszczególnych gier zazwyczaj ważą więcej, niż cała taka gra! Mimo to, od 2012 roku, czyli od pierwszej edycji konkursu, dostaliśmy 800 gier stworzonych na potrzeby konkursu. Oto, czego dowiedziałem się poddając je analizie.

Wymaganiem konkursowym jest umieszczenie pełnego kodu źródłowego gry na GitHubie — w czytelnej formie, najlepiej z komentarzami. Dzięki temu każdy może zobaczyć jak została zaprogramowana dowolnie wybrana gra. Dodatkowo uczestnicy publikują też wpisy podsumowujące proces tworzenia gier — co poszło dobrze, co można było zrobić lepiej itp. Czasami można sporo nauczyć się czytając tylko ich relacje, które są skarbnicą wiedzy.

Ważne jest to, żeby odpowiednio podejść do tematu i jak najwięcej rzeczy wygenerować proceduralnie za pomocą JavaScriptu. Oczywiście porywanie się na MMORPG nie ma sensu — należy mierzyć siły na zamiary i pamiętać o ograniczeniach. Kreatywne wykorzystanie ograniczeń powodowało powstawanie niezwykłych gier.

Zobacz też

Juniors Od Juniora do Seniora. Pierwsze podsumowanie Speed Datingu

Spis treści

Tagi HTML są opcjonalne

Z relacji uczestników konkursu, można na przykład dowiedzieć się, że niektóre tagi HTML są opcjonalne, a inne zostaną automatycznie uzupełnione przez przeglądarkę jeśli zapomnimy je sami umieścić. Poniżej przykład:

<style> body { margin: 0; background: black; ... } </style>

<canvas></canvas>

<script>

 document.title = "Blade Gunner";

 ...

</script>

Powyższa struktura dokumentu jest jak najbardziej poprawna i kompletna, kod JavaScript wewnątrz tagów <script> zostanie wykonany, a przeglądarka nie wyświetli żadnych błędów w konsoli, ponieważ brakujące tagi <html>, <head> czy <body> zostaną dodane automatycznie.

Kod źródłowy w jednym pliku

var i = new Image();

i.addEventListener('load', function() { // image can be drawn });

i.src = 'data:image/png;base64,iVBORw0KGgoAAAANS...RU5ErkJggg==');

Cały kod źródłowy w jednym pliku HTML kompresuje się lepiej niż gdyby wczytywać zewnętrzne pliki JavaScript, CSS, czy obrazki oddzielnie. Umieszczenie JavaScriptu czy CSSa w index.html to nie problem, natomiast co z obrazkami? Tu na ratunek przychodzi funkcja base64, która konwertuje obrazki do ciągu znaków, dzięki czemu można je umieścić bezpośrednio w kodzie.

Snake.UI = {

food: [

   [    ],

   [ , ,1  ],

   [ ,1, ,1],

   [ , ,1  ]

]

};

W powyższej strukturze brakujące miejsca między przecinkami zostaną uzupełnione zerami, więc możemy je ominąć oszczędzając kilka znaków.

Snake.Sound.sounds = {

// Example sound - entering the TRON mode

enterTronMode: [

jsfxr([0,,0.0864,,0.4458,0.2053,,0.3603,,,,,,0.2349,,0.4484,,,1,,,,,0.5]),

jsfxr([0,,0.2012,,0.4803,0.2939,,0.326,,,,,,0.525,,0.6112,,,1,,,,,0.5]),

jsfxr([0,,0.2424,,0.2184,0.2631,,0.2023,,,,,,0.2315,,,,,1,,,,,0.5]),

jsfxr([0,,0.0429,,0.4426,0.5,,0.2284,,,,,,0.1798,,,,,1,,,,,0.5]),

jsfxr([1,,0.2311,,0.2188,0.2821,,0.0801,,,,,,,,,,,1,,,,,0.5])

]

};

W tym przypadku wygenerujemy sobie zestaw dźwięków za pomocą narzędzia jsfxr, które bez problemu zmieści się w limicie 13 kilobajtów (i zostawi mnóstwo miejsca na pozostałe elementy). Swoją drogą, najbardziej ekstremalnym przykładem minifikacji jak dla mnie była sytuacja, kiedy zabrakło dosłownie jednego znaku, przez co końcowy napis „Game Over” zamienił się na „GameOver”.

(Narzędzia tworzone przez samych uczestników są później dostępna dla wszystkich, można je znaleźć na specjalnej stronie Resources — lista jest już dosyć imponująca.)

Dostosuj umiejętności do projektu

Co ciekawe sporo wniosków osób uczestniczących w js13kGames pokrywało się z moimi doświadczeniami tworzenia gier w Enclave Games. Nie chodziło oczywiście o zaoszczędzenie kilku znaków w kodzie, a raczej ogólne podejście do tworzenia gier. I tak na przykład najważniejszym wnioskiem wielu uczestników było odpowiednie zaplanowanie wielkości gry, którą chcemy zrealizować.

Mając małe doświadczenie w tworzeniu gier może nam się wydawać, że jest to banalnie proste zajęcie. Chcielibyśmy sami zrobić grę pokroju World of Warcraft, tyle że lepiej. Idealnie w miesiąc, nie więcej. Ludzie nie zdają sobie sprawy, że nad tego typu grami pracują setki osób, latami. Dlatego jako swój pierwszy projekt nie wybieraj MMORPG, bo nigdy nie uda Ci się go skończyć — zacznij od czegoś łatwiejszego. Zamiast MMORPG zrób więc Snake’a.

Nawet prosty koncept, ale dobrze dopracowany, będzie o wiele lepiej oceniony niż coś, czego nawet nie zdołasz uruchomić, bo będzie niedokończone. Przykładem niech będzie LOSSST — niby prosta gra w węża, ale ponadprzeciętnie dopracowana. Zajęła wysokie miejsce w zeszłym roku i została bardzo dobrze oceniona przez sędziów oraz pozostałych uczestników.

Unikaj perfekcji

Nie należy się natomiast za bardzo przejmować niedoskonałością naszej gry. Lepiej jest opublikować działający prototyp, niż schować go do szuflady.

Sam popełniłem ten błąd i bodajże sześć razy przepisywałem od zera grę Wizard Quest, zamiast zrobić to raz, wypuścić projekt i zająć się kolejnym. O wiele więcej nauczyłem się przechodząc przez cały proces tworzenia i publikowania gry, niż przepisując ten sam projekt od zera.

Korzystaj z gotowych narzędzi

Nie musisz być ekspertem w każdej dziedzinie, i nie musisz za każdym razem wymyślać koła na nowo. Skorzystaj z gotowych narzędzi, które powstały w tym samym celu, który ty chcesz właśnie osiągnąć.

Nawet w przypadku mocno ograniczonej ilości miejsca, autor gry Galactic Backfire był w stanie przygotować sobie cały wachlarz narzędzi, z których korzystał:

Kontra — obsługa podstawowych funkcjonalności w kodzie źródłowym,
Pico8 — stworzenie grafik do gry,
JSFXR — wygenerowanie dźwięków,
Sonant-X — skomponowanie muzyki,
Advzip — minifikacja całego projektu.

Oczywiście nie jest to jedyne słuszne rozwiązanie — każde narzędzie z powyższych można bez problemu wymienić na kilka innych. Do wyboru jest naprawdę dosyć spora lista, a każde z nich zostało przetestowane przez przynajmniej jednego uczestnika konkursów lat poprzednich.

Miej plan

Dzięki z góry ograniczonej ilości czasu musimy dobrze zaplanować naszą pracę, żeby nie okazało się, że dzień przed końcem mamy grę skończoną w 15% i nic tak naprawdę nie działa.

Odpowiednio dokładny plan pozwala nam odhaczać już zrobione zadania, dzięki czemu widzimy postępy w tym co robimy. Pomaga nam to w chwilach kryzysu, kiedy do końca jeszcze daleko i czasami ciężko się zmotywować.

Iteracja i wersja 2.0

To, co wyślesz na konkurs nie musi być idealne — to równie dobrze może być wersja demo, ale na tyle dobrze dopracowana, że zachęci graczy do czekania na pokonkursową pełną wersję, z kolejnymi poziomami, przeciwnikami i broniami.

Trzymaj się planu i pamiętaj, żeby wyrzucić jak najwięcej elementów z listy „na później”. Nigdy nie będziesz miał dostatecznie dużo czasu, żeby zrobić wszystko, co byś chciał, więc skup się najpierw na elementach niezbędnych do przyjemnej rozgrywki. Wszystko inne możesz zawsze zostawić na wersję 2.0, która wyjdzie po konkursie, jeśli demo okaże się dużym sukcesem.

Zobacz też

gamedev Zawody i specjalizacje przyszłości w branży gamedev

Pokaż się i otwórz na konstruktywną krytykę

Zacznij opowiadać o projekcie, nad którym pracujesz. Pochwal się nim wśród znajomych. Niech wiedzą co się dzieje, jak idą postępy, czego oczekiwać w najbliższej przyszłości. Zmotywuje cię to do dalszej, regularnej pracy.

Pamiętaj, żeby często pytać się innych o ich odczucia, wrażenia, preferencje. Ty siedzisz w tym projekcie dosyć głęboko i czasami możesz nie dostrzegać oczywistych rzeczy, które są widoczne na pierwszy rzut oka dla kogoś postronnego.

Testuj

Nie ma nic gorszego niż wypuścić niedziałającą grę. Testuj sam, testuj na kolegach z branży, znajomych i rodzinie. Każdy punkt widzenia może pomóc w wyłapaniu specyficznych błędów, które nie przydarzyły się tobie, bo jak nikt inny wiesz co w twojej grze trzeba robić.

Otwórz się na sugestie płynące od testerów — od tego są, by ci pomóc. Jeśli będziesz miał okazję skorzystać z pomocy profesjonalnych testerów to miej pewność, że oni znają się na rzeczy.

Termin to twój przyjaciel

Konkurs jest ograniczony czasowo, a więc nadejdzie czas (prędzej, niż później) kiedy będziesz musiał uznać swój projekt za ukończony na tyle, by móc go zgłosić. Musi działać, ale nie musi być idealny.

Plusem deadline’ów jest to, że musimy się ich trzymać. Jeśli takiego nie mamy, jak w przypadku swoich hobbystycznych gier robionych do szuflady, to możemy je robić latami. I tak nie ujrzą światła dziennego, bo przecież „nie ma ciśnienia”.

Skup się

Nikt nie zrobi tego za ciebie — jeśli chcesz skończyć grę, to musisz poświęcić na to całą swoją energię. Zostawić inne sprawy na później i skupić się na tym co chcesz zrobić. Innej drogi nie ma.

Jeśli nie będziesz w stanie dokończyć projektu, to najwyraźniej nie był dla ciebie tak ważny jak to sobie wyobrażałeś, albo napotkałeś po drodze problemy, które musisz rozwiązać zanim zabierzesz się za kolejny. Kończenie gier i ich wypuszczanie jest tak samo ważne, jeśli nie ważniejsze, od dopilnowania, żeby wspomniana gra była wystarczająco dobra.

Dopracuj

Jeśli wystarczy ci czasu, to postaraj się dodać coś do gry, by wyróżniała się z tłumu jej podobnych. Nawet, jeśli mechanika jest banalna, oklepana w setkach podobnych produkcji, to nadal możesz dodać coś wyjątkowego i oryginalnego, co będzie powiewem świeżości.

Tak drobne efekty jak dym za pociskami, wstrząśnięcie ekranem przy otrzymaniu obrażeń, czy temu podobne, robią ogromną różnicę w ostatecznym rozrachunku. Dzięki temu widać, że naprawdę znasz się na rzeczy.

Zrób to sam!

Polecam spróbować samemu, bo udział w konkursie daje mnóstwo frajdy. Następna edycja js13kGames odbędzie się już w połowie sierpnia — start 13.08.2018.

Jak co roku jest cała masa nagród, w tym unikalne, darmowe koszulki rozsyłane do uczestników na całym świecie. Warto śledzić Twittera i Facebooka, by być na bieżąco z kolejnymi ogłoszeniami.