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.
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.
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.
Dodajemy event listener do obiektu

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 eventugamepadConnected
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 przedrostkiemmoz
), 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.
1elt dnia 21.12.2011 o 12:05: