Skalowanie gry budowanej w oparciu o Enchant.js

W ostatnich dniach student zwrócił się do mnie z prośbą o pomoc w implementacji kodu skalującego grę opartą o silnik Enchant.js do rozdzielczości ekranu użytkownika. Cieszy mnie fakt, że udało mi się zainteresować studentów i kontynuują oni projekty (mimo, że wpisy już mają), które rozpoczęli na moim przedmiocie. Tym chętniej spieszę odpowiedzieć na pytanie.

Opisany tutaj pomysł jest jednym z wielu możliwych rozwiązań, aczkolwiek wydaję się rozwiązaniem dość eleganckim.  Kluczowym założeniem jest dobranie (dość dużej) rozdzielczości gry. Grę przygotowujemy tak, jakby miała być ona wyświetlana tylko w zadanej rozdzielczości; krótko mówiąc wszystkie grafiki i skrypty są dostosowane do wybranego rozmiaru ekranu. W tym przykładzie będzie to standardowe 1920 pikseli w szerokości na 1080 pikseli wysokości. Intuicyjnie czujemy, aby nie przesadzić, gdyż może to negatywnie wpłynąć na płynność gry.

Rozpocznijmy od wprowadzenia kodu dodającego bibliotekę i uruchomiającego grę z dwoma pustymi scenami.

Po uruchomieniu powyższego kodu w oknie przeglądarki o wymiarach mniejszych niż założona rozdzielczość zauważymy paski przewijania strony, czego oczywiście nie chcemy. W związku z tym musimy dostosować grę do szerokości oraz wysokości okna użytkownika – na szczęście Enchant.js posiada wbudowany mechanizm skalowania, przez co cała nasza praca polega na wyliczeniu stosunku założonej rozdzielczości do wymiaru okna.

Po dodaniu powyższego kodu sytuacja uległa poprawie ale nadal daleka jest od ideału. Paski przewijania ciągle są widoczne; wynika to z faktu istnienia domyślnego arkusza stylów przeglądarki, który wprowadza domyślne marginesy na stronie. Dodanie poniższego kodu CSS nadpisze domyślne marginesy i dodatkowo ustawi czarne tło.

Zdecydowanie lepiej, jednak brakuje pionowego i poziomego wyśrodkowania wyświetlania gry. Kolejna modyfikacja arkusza stylów wyeliminuje ten problem. Przy okazji element o identyfikatorze enchant-stage to standardowy kontener, w którym wyświetlana jest gra. Biblioteka umożliwia jego wcześniejsze utworzenie i tym samym pozycjonowanie gry na stronie.

Teraz już wszystko wygląda dobrze. W związku z tym możemy przejść do obsługi pełnego ekranu.

Wbudowany w przeglądarkę JavaScript umożliwia przejście w tryb pełnoekranowy, jednakże to użytkownik musi ją aktywować np. poprzez kliknięcie w przycisk; niemożliwe jest automatyczne wywołanie żądania pełnego ekranu.

Dopiszmy kilka funkcji umożliwiających przejście w tryb pełnoekranowy (więcej informacji znajdziecie na https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API) oraz przycisk aktywujący żądanie pełnego ekranu.

Kolejny problem wynika z faktu, że nasza gra nie skaluje się automatycznie wraz z zmianą rozmiaru okna przeglądarki. Zatem przejście w tryb pełnoekranowy pozostawi wiele do życzenia. Zmodyfikujemy funkcje przechodzenia w tryb pełnoekranowy, aby usunąć ten problem. UWAGA! pamiętaj udostępnić funkcji zmienne oznaczające szerokość i wysokość gry (np. przenieść je do przestrzeni globalnej), tutaj są to zmienne width i height.

W funkcji wykorzystałem małe opóźnienie, aby wszystkie własności opisujące okno zostały zaktualizowane. Ostatnim elementem może być przeniesienie operacji zmiany skalowania do ogólnego zdarzenia zmiany rozmiaru okna przeglądarki, wówczas możemy wrócić do wykorzystywania przez przycisk metody toggleFullScreen.

Podsumowując, wprowadzenie kilku zmian w kodzie pozwala na dość elastyczne skalowanie naszej gry. Oczywiście nie jest to rozwiązanie idealne, ciężko sobie wyobrazić skalowanie z dużych rozdzielczości na skrajnie małe. Taka uniwersalność wymaga przygotowania kilku wersji gry w różnych rozdzielczościach a następnie skalowanie ich w granicach wyznaczonych progów. Na koniec załączam plik zawierający wszystkie modyfikacje opisane w niniejszym wpisie.

Załączniki