Wchodzisz i grasz
Wszystkie moje gry to strony internetowe. Nie ma sklepu z aplikacjami, instalatora ani czekania na wielki plik. Klikasz w adres, gra się ładuje i po chwili możesz stawiać budynki albo prowadzić swój lokal. Działa to na komputerze, tablecie i telefonie, a gra dopasowuje się do wielkości ekranu.
Dlaczego tak? Po pierwsze, jestem jednoosobową pracownią i robię gry po godzinach. Jedną wersję gry mogę pokazać wszystkim naraz, zamiast osobno budować ją na każdy system. Po drugie, dla gracza to wygoda: nie trzeba pytać rodziców o zgodę na instalację, nie ma aktualizacji do zatwierdzenia ani miejsca do zwolnienia w telefonie. Gdy wychodzi nowa wersja, po prostu otwierasz stronę i masz ją.
Trójwymiarowy świat w przeglądarce
Gry są w 3D, a przeglądarka umie dziś rysować takie obrazy dzięki technice o nazwie WebGL. Korzystam z biblioteki Three.js, która ułatwia ułożenie sceny: terenu, budynków, ludzików i pogody. Sam kod gry jest napisany w TypeScript, czyli w języku, który przed wysłaniem do ciebie zamienia się na zwykły JavaScript.
Mocny komputer poradzi sobie z pełnym blaskiem, a słabszy telefon dostaje wersję oszczędniejszą. W grach są ustawienia jakości, a w niektórych gra potrafi sama obniżyć szczegóły, kiedy zaczyna zwalniać. Ludziki mają na przykład dwie wersje: bogatszą i lżejszą, o tych samych kształtach.
Dodaj grę do ekranu głównego
Gra w przeglądarce ma jedną wadę: na telefonie zajmują miejsce paski przeglądarki. Dlatego każda z moich gier ma opis, który pozwala przeglądarce zachować się jak z aplikacją. Po dodaniu do ekranu głównego gra dostaje własną ikonę, nazwę i startuje na całym ekranie, bez adresu i przycisków.
W grach jest okienko „Graj na pełnym ekranie”. Pokazuje się raz po pierwszej rozgrywce, a potem znajdziesz je w menu. Wyjaśnia to krok po kroku:
- Na iPhonie otwierasz grę w Safari, stukasz przycisk z trzema kropkami u dołu ekranu, potem „Udostępnij”, wybierasz „Do ekranu początkowego” i na końcu „Dodaj”.
- Na Androidzie w wielu przeglądarkach pojawia się przycisk „Zainstaluj grę” i wystarczy go stuknąć. Gdy go nie ma, otwierasz menu przeglądarki i wybierasz „Dodaj do ekranu głównego” albo „Zainstaluj aplikację”.
Okienko pokazuje się tylko tam, gdzie ma sens, czyli na telefonie lub tablecie, i tylko jeśli gra nie działa jeszcze jako aplikacja. Na komputerze go nie zobaczysz. Ikony dla telefonów robię automatycznie z jednego rysunku gry, bo iPhone nie lubi ikon w tym formacie, w którym je rysuję.
Ważne: po dodaniu ikony to dalej ta sama gra. Zapisy trzymane są w pamięci przeglądarki na urządzeniu, więc jeśli zauważysz, że po uruchomieniu z ikony nie widać dawnych zapisów, pomoże synchronizacja kodem, o której piszę w osobnym artykule.
Czy da się grać bez internetu?
Tak, w dużej mierze. Każda gra ma mały program pomocniczy, który działa w tle przeglądarki, tak zwany service worker. Pierwszy raz, gdy otwierasz grę, zapamiętuje jej pliki w pamięci urządzenia. Później, gdy internetu brakuje, gra uruchamia się z tej pamięci.
Dwie zasady, które przyjąłem:
- Strona główna gry jest pobierana z sieci, jeśli sieć jest, żeby od razu dostać świeżą wersję. Gdy sieci nie ma, gra bierze zapamiętaną kopię.
- Pozostałe pliki gry są zapamiętane na stałe i zmieniają się tylko wtedy, gdy wychodzi nowa wersja.
Wszystkie moje gry mieszkają pod jednym adresem, więc muszą dbać o siebie nawzajem. Każda gra sprząta wyłącznie własną pamięć podręczną i nie rusza cudzej. Inaczej jedna aktualizacja mogłaby skasować tryb offline pozostałych gier. Pilnuję tego przy dodawaniu każdej nowej gry.
Czego nie zrobi tryb offline? Nie połączy urządzeń i nie wyśle zapisu na inne urządzenie. Jeśli używasz synchronizacji, zapisy poczekają w kolejce i wyślą się, gdy internet wróci.
Pełny ekran i wygoda
Poza instalacją są rzeczy codzienne, które traktuję poważnie. Gry nie mają wymaganych kont ani logowania. Menu w każdej grze wygląda podobnie: ten sam przycisk ☰, ta sama kolejność pozycji, Esc zamyka okno. Dzięki temu po nauce jednej gry reszta jest znajoma.
Mam też zasadę o małym telefonie. Na najmniejszym iPhonie plansza ma zajmować co najmniej połowę ekranu, nawet gdy pasek budowy jest otwarty. Każdą nakładkę, na przykład samouczek, da się schować jednym łatwym stuknięciem. Przyciski, które trzeba trafić palcem, mają co najmniej około 44 piksele, bo mniejsze są po prostu irytujące.
Sterowanie dotykiem
Gra na telefonie nie może być grą na myszkę, do której dołożono kilka przycisków. Dlatego teksty w grach mają osobne wersje dla dotyku. Zamiast „kliknij prawym przyciskiem” albo „naciśnij F1” gra pisze, co zrobić palcem.
Zasady są wspólne:
- Jeden palec przesuwa widok. Plansza działa jak kartka pod palcem: dotykasz i ciągniesz, a to, co pod palcem, jedzie razem z nim. To brzmi oczywiście, ale w jednej z gier miałem to kiedyś odwrócone i plansza uciekała od palca, więc poprawiłem.
- Dwa palce przybliżają i obracają. Rozsuwasz palce, żeby przybliżyć, a skręt dwoma palcami obraca kamerę. Są też przyciski do obracania.
- Stuknięcie wybiera lub stawia. Obszar zaznaczasz dwoma stuknięciami w rogi albo przytrzymaniem.
- Duże, okrągłe przyciski do obracania obiektu, cofania i ponawiania są blisko kciuka.
Jeśli wolisz inaczej, w ustawieniach można włączyć lub wyłączyć sterowanie dotykowe. Na komputerze działa mysz i klawiatura, a strzałki przesuwają kamerę.
Co dalej
Najbardziej zależy mi na tym, żeby gra uruchamiała się szybko i nie sprawiała kłopotów. Dlatego każdą zmianę sprawdzam na małym telefonie z dotykiem, na tablecie i na komputerze. Gdy znajdę coś, co działa tylko na jednym urządzeniu, to dla mnie błąd. Jeśli trafisz na taki, napisz do mnie.