Fullscreen, Mouselock i Gamepad API - świetlana przyszłość rozbudowanych gier HTML5

Gry tworzone w Otwartych Technologiach nadal przez wielu porównywane są co najwyżej do kiepskich natywnych produkcji sprzed kilku lat, a poziomem skomplikowania przyrównywane do Tetrisa lub Mario. Sieć rozwija się jednak na tyle szybko, że to kwestia miesięcy, gdy będziemy mogli zagrać w grę pokroju Battlefielda lub Call of Duty bezpośrednio w przeglądarce.

To, że HTML5 jest przyszłością sieci wie już większość i raczej nikt temu nie przeczy. Już teraz powstają dema prezentujące np. wygenerowaną w WebGLu mapę do Quake 3 Arena lub Team Fortress 2. Dzięki nowym API (interfejsom aplikacji umożliwiającym obsługę nowych funkcjonalności) będzie można upodobnić rozgrywkę przez przeglądarkę do pełnoprawnej, natywnej rozrywki na PC czy konsoli. Tworzenie i rozwijanie wszelkiego rodzaju API dedykowanych przeglądarkom przeżywa ostatnio niesamowity rozkwit. Dzisiejszy wpis wspomni o trzech z nich, które dobrze wykorzystane przez programistów umożliwią stworzenie jeszcze lepszych gier, produkcji ciekawszych i dających więcej radości z grania.

Full Screen API - gry webowe na pełnym ekranie

Do tej pory gry HTML5 widoczne były jako jedna z wielu zakładek w przeglądarce. Różniły się zupełnie od natywnych gier, które uruchamiały się na pełnym ekranie, dzięki czemu mogliśmy skupić się tylko i wyłącznie na graniu. W przypadku gier przeglądarkowych jest cała masa drobnych rzeczy, które nas rozpraszają - pasek adresu, inne zakładki przeglądarki, komunikaty z innych aplikacji i tym podobne. Dzięki Full Screen API będzie można zbliżyć do siebie oba światy i uruchomić grę przeglądarkową w trybie pełnoekranowym! Puzzle lub inne proste gierki obejdą się bez tego, ale gry wyścigowe lub FPP? W nich tryb pełnoekranowy pozwoli nam skupić się na samej grze, a nie wszystkim innym, co nas otacza. Zobaczmy więc kawałek kodu, który za to odpowiada:

var element = document.getElementById("kontener");

if (element.requestFullScreen) {

    element.requestFullScreen();

}

Użycie tego API jest banalne: odnosimy się do konkretnego elementu DOM, następnie sprawdzamy, czy obsługuje Full Screen, a jeśli tak, to uruchamiamy ten tryb. Jak widać po powyższym, dowolny element struktury HTML może wejść w tryb pełnoekranowy. Więcej informacji o Full Screen API znaleźć można na Mozilla Wiki oraz w dokumentacji W3C.

Mouse Lock API - problem myszy rozwiązany

Ok, mamy już tryb pełnoekranowy za sobą. Uruchamiamy naszego czysto teoretycznego Battlefielda 3 w przeglądarce i co? Mamy problem z myszką - po co nam widok kursora w grze, w której chcielibyśmy go ukryć? Pojawia się też problem obliczania pozycji kursora wewnątrz przeglądarki. Na to wszystko też jest API! W naszej przykładowej grze będziemy mogli użyć ruchu myszy wewnątrz aplikacji w identyczny sposób, jak w natywnej grze PC - na przykład do celowania bronią w złych terrorystów. Nic nie irytowałoby bardziej, niż ciągle widoczny kursor podczas całej tej rozgrywki. Dzięki Mouse Lock API pozbędziemy się tego problemu raz na zawsze, a jednocześnie będziemy mogli "zablokować" myszkę w jednym punkcie i bez problemu sterować jej pozycją w grze. Użycie jest bardzo proste - wystarczy zainteresować się metodą navigator.pointer.lock z odpowiednimi parametrami:

var element = document.getElementById("element");

function onMouseLockSuccess() {}

function onMouseLockError() {}

navigator.pointer.lock(element, onMouseLockSuccess, onMouseLockError);

Powyższy kod "zablokuje" kursor myszy w obszarze podanego przez nas elementu, lub wykona odpowiednią funkcję (zdefiniowaną wcześniej przez nas), jeśli to się nie powiedzie. Więcej informacji o Mouse Lock API znaleźć można na Mozilla Developer Network oraz w dokumentacji W3C.

Gamepad API - nowy kontroler dla webowych gier

Super, gramy sobie radośnie w webowego Battlefielda na pełnym ekranie i bez widocznego kursora myszy. Jednak przychodzi malkontent i zaczyna narzekać, że on to może sobie grać na konsoli XBOX 360 z użyciem pada, co dla niego jest o wiele wygodniejszym podejściem niż klawiatura i myszka. Ha, na to też jest recepta - Gamepad API, wcześniej znane jako Joystick API. Dzięki użyciu Gamepad API będzie możliwe sterowanie grą przeglądarkową za pomocą zwykłego pada do gry konsolowej. Użycie go będzie sprowadzać się do nasłuchiwania eventu gamepadConnected na obiekcie window. Detekcja wciśniętych przycisków także ograniczy się do odbierania eventów w kodzie Javascript.

function gamepadConnected(e) {

	var gamepads = document.getElementById("container"),

	gamepadId = e.gamepad.id;

	gamepads.innerHTML += " Gamepad Connected (id="+gamepadId+")";

}

window.addEventListener("GamepadConnected", gamepadConnected, false);

Dodajemy event listener do obiektu window, do którego podpinamy funkcję wyświetlającą wszystkie podłączone kontrolery. Więcej informacji o Gamepad API znaleźć można na Mozilla Wiki oraz w dokumentacji W3C.

Wsparcie przeglądarek

Fullscreen API wspierane jest przez Firefoxa 10 (aktualnie nocne buildy, tzw. Aurora, z przedrostkiem moz), aktualne wersje Chrome (od 15, z przedrostkiem webkit) oraz Safari (od 5.1, także z przedrostkiem webkit). Wsparcie trybu pełnoekranowego w Internet Explorerze 10 oraz Operze 12 nie jest jeszcze znane, natomiast wcześniejsze wersje tych dwóch przeglądarek nie posiadają jego implementacji. Mouse Lock API wprowadzane jest dopiero do eksperymentalnych kompilacji przeglądarek, aktualnie można go przetestować w Firefox Nightly lub Chrome Canary. Wsparcie Gamepad API jest podobne do powyższego - jeśli chcesz się pobawić padem z wykorzystaniem przeglądarki, to (poza specjalnymi sterownikami dla systemu) będziesz potrzebował developerską wersję odpowiedniej przeglądarki, czyli Firefox Nightly lub Chrome Canary.

Podsumowanie

Należy pamiętać, że powyższe fragmenty kodu źródłowego to tylko szkice. W przeglądarkach tu i ówdzie należy stosować odpowiednie przedrostki, a sama specyfikacja jest dopiero na etapie tworzenia, więc może się oczywiście jeszcze zmieniać. Jeśli interesuje Cię użycie tych API w praktyce, to przeczytaj dwa ciekawe wpisy na Mozilla Hacks autorstwa Roba Hawkesa - jego gra Rawkets implementuje wszystkie trzy API. Warto już teraz eksperymentować i na własne oczy zobaczyć jakie możliwości w branży gier przyniosą nam przeglądarki w przyszłości. Przykład Battlefielda 3 jest mocno na wyrost, podobnie czas potrzebny do zobaczenia tego typu produkcji w przeglądarce, ale z całą stanowczością twierdzę, że to bardziej kwestia miesięcy, niż lat.