Gry praktycznie w HTML5  

Autor: Piotr Bubacz

Opublikowano: 2012-03-26

Przemysł rozrywkowy jest jednym z motorów napędzających gospodarkę. Branża gier komputerowych, mimo kryzysu, wzrasta o ponad 10% rocznie. Sukces odnoszą na rynku nie tylko duże firmy, produkujące znane tytuły, ale również pojedynczy programiści ze świetnym pomysłem.

Gry mogą zostać przygotowane zarówno w DirectX czy XNA, jak również, dzięki rozwojowi technologii i nowoczesnym przeglądarkom, w HTML5. Element Canvas doskonale nadaje się do gier, w których wykorzystujemy pliki rastrowe, postaci gracza czy świata gry.

Niezależnie od środowiska programistycznego, można wyróżnić w grach następujące etapy:

• wczytywanie zasobów – grafika, dźwięk i inne elementy niezbędne dla gry (często etapu gry),
• aktualizacja świata gry – obsługa urządzeń wejściowych użytkownika (klawiatura, myszka, pad), dodanie elementów, wykrycie kolizji, itd.,
• wyświetlenie świata gry – ponowne wyświetlenie kolejnej klatki/obrazu gry na podstawie zaktualizowanych informacji.

Etap pierwszy wykonywany jest jednokrotnie dla całej gry lub poziomu, dzięki czemu możemy ograniczyć do minimum niezbędne zasoby. Etapy - drugi i trzeci wykonywane są cyklicznie, co określony interwał czasowy, w zależności od liczby klatek na sekundę (FPS). Dla FPS=60 kolejny obraz wyświetlany jest co 16,6ms.

W tym kursie poznasz, w praktyczny sposób, podstawy tworzenia gier, przygotowując uproszczoną wersję gry Alien Game z kursu Windows Phone: Game Development with XNA Framework. Gra wykorzystuje możliwości elementu Canvas w HTML5. Przykładowy ekran gry został przedstawiony na Rys. 1.

Rys. 1. Przykładowy ekran gry Alien Game.

Po zakończeniu tego kursu będziesz wiedział:

• z jakich elementów składa się gra w HTML5,
• jak dodawać zasoby i zarządzać nimi w grze,
• jak wyświetlać obrazy i tekst w elemencie Canvas,
• jak animować elementy,
• jak odczytać klawisze z klawiatury i obsługiwać myszkę w grach,
• jak sterować elementami świata gry,
• jak wykrywać kolizje w przestrzeni 2D.

Kurs składa się z następujących artykułów:

• Zasoby – w tej części kursu nauczysz się pobierać zasoby – pliki graficzne i wyświetlać świat gry,
• Użytkownik – z tej części kursu dowiesz się, jak obsługiwać klawiaturę i mysz - urządzenia użytkownika oraz w jaki sposób poruszyć obiekt w Canvas,
• Ruch elementów – z tej części kursu dowiesz się, jak poruszać świat gry,
• Kolizje – w tej części kursu nauczysz się wykrywać kolizje i odpowiednio na nie reagować.