W momencie pojawienia się HTML 5 zaczęło się pojawiać nowe zjawisko – gry komputerowe działające w przeglądarce (i niekorzystające z rozszerzenia Flash). Być może te gry są przyszłością współczesnej rozrywki…

Większość gier napisanych w technologii HTML 5 to gry dwuwymiarowe wykorzystujące nowy element w standardzie HTML 5 – „canvas”. Canvas to jak gdyby pusta kartka na stronie, po której kod napisanych w języku JavaScript może dosyć swobodnie rysować. Wystarczy zatem narysować planszę około 25 klatek na sekundę, by uzyskać płynny obraz gry.

Przykładowe wykorzystanie obiektu canvas i porównanie z alternatywą – wtyczką Microsoftu „Silverlight”.

Niestety JavaScript nie jest zbyt wydajnym językiem programowania, a sam canvas także dodaje swój narzut. Dlatego by uzyskać płynny obraz, często trzeba stosować różne sztuczki, np. przerysowywać tylko część ekranu, tworzyć warstwy typu tło i obiekty, spośród których tylko niektóre warstwy są modyfikowane itp. Koniecznością jest także ciągłe badanie, czy przypadkiem nie przekroczyliśmy złożoności obsługiwanej przez komputer i czy nasza gra działa płynnie.

Jednym z powodów problemów z wydajnością jest natura języka JavaScript – jest to język wyłącznie jednowątkowy i asynchroniczny. To podejście doskonale sprawdzało się, gdy JavaScript był wykorzystywany tylko do renderowania prostych stron internetowych, ale obecnie jest ograniczeniem, ponieważ nie wykorzystuje w pełni wielordzeniowych procesorów. Aby obejść to ograniczenie, wprowadzony został „Worker” – nowy obiekt w JavaScript. Dzięki niemu możliwe jest przerzucenie części operacji do innego wątku (np. czasochłonne szukanie drogi na planszy może być wykonane w innym wątku, podczas gry główny wątek jest zajęty renderowaniem grafiki).

Kolejnym elementem HTML 5 wykorzystywanym przez gry przeglądarkowe jest tag „audio”. Umożliwia on umieszczenie na stronie dźwięków, które później są odtwarzane gdy nastąpi dane zdarzenie (np. odgłos wybuchu jest odtwarzany gdy uda nam się trafić bronią w jakiś ładunek wybuchowy na planszy).

Alternatywą dla canvas jest np. używanie biblioteki webgl, która niestety nie jest jeszcze wspierana przez wszystkie przeglądarki, ale umożliwia np. stworzenie trójwymiarowych gier komputerowych zbliżonych jakością do komercyjnych gier wykorzystujących DirectX.

Przykłady świetnych gier

Czym byłby artykuł o grach przeglądarkowych, gdyby nie kilka świetnych przykładów tego, co można wycisnąć z HTML 5. Poniżej kilka moich ulubionych gier utrzymanych w różnorodnym stylu.

Command & Conquer

Jeden z fanów klasycznej gry Command & Conquer zdecydował się przenieść grę z systemu operacyjnego DOS na przeglądarkę. O dziwo takie przenosiny się sprawdziły, a efektem jest jedna z najlepszych gier strategicznych w przeglądarce.

http://www.adityaravishankar.com/projects/games/command-and-conquer

Entanglement

Coś dla fanów gier logicznych. Entanglement oferuje świetną grafikę i okazję do sadystycznego poznęcania się nad naszymi szarymi komórkami. Gra w sam raz na 10-minutową przerwę w pracy.

http://entanglement.gopherwoodstudios.com

Game Of Bombs

Game of Bombs to jedyna w tym zestawieniu gra dla wielu użytkowników. Gracz podłącza się do serwera, gdzie ląduje razem z innymi członkami rozgrywki na dużej planszy. Gracze walczą ze sobą podkładając bomby i uciekając przed bombami podłożonymi przez przeciwników. Kawał dobrej zabawy!

http://gameofbombs.com

Bananabread

Bananabread jest grą tworzoną przez zespół firmy Mozilla i służy badaniu efektywności silnika graficznego ich przeglądarki Firefox. Gra jest w pełni trójwymiarowa i ze świetną grafiką – efekt wykorzystania biblioteki webgl. Bananabread to świetna strzelanka, w której będziemy mogli zmierzyć się z komputerowo wygenerowanymi przeciwnikami. Niestety gra nie będzie działać na przeglądarce Internet Explorer, gdyż – jak zwykle – przeglądarka ta jest dużo w tyle, jeśli chodzi o implementację przeglądarkowych standardów.