Strona używa cookies (ciasteczek). Dowiedz się więcej o celu ich używania i zmianach ustawień. Korzystając ze strony wyrażasz zgodę na używanie cookies, zgodnie z aktualnymi ustawieniami przeglądarki.    X

HTML5 w tworzeniu gier (cz. 1) wersja zaktualizowana

Hej,

jakiś czas temu zainteresowałem się HTML5, a w szczególności znanym już i lubianym ;) elementem Canvas, który w połączeniu z JavaScriptem wydaje się być znośnym narzędziem do tworzenia interaktywnych elementów, a nawet prostych gier. Wobec szumu, który przez jakiś czas trwał (i być może cały czas trwa) wokół HTML5, jego możliwości i konkurencyjności dla technologii Flash, wygląda to na temat, któremu warto się przyjrzeć.

W kilku częściach tego tutoriala postaram się pokazać jak stworzyć proste gry lub dema ilustrujące poszczególne możliwości HTML5. Do implementacji odpowiedniego zachowania strony użyję języka JavaScript. Można więc ten artykuł potraktować jako minitutorial obu z wyżej wymienionych.

Już na wstępie chcę zaznaczyć, że nie zamierzam wykazywać wyższości tego rozwiązania nad Flashem. Uważam, że HTMLowi jeszcze trochę brakuje, żeby mógł z nim konkurować, więc obie technologie mogą współistnieć jeszcze przez dość długi czas. Nie o tym będzie ten artykuł (a przynajmniej jego dalsza część :P).

Element Canvas

Zacznijmy od podstaw sprawdzając czym właściwie jest ów element Canvas, którego zamierzamy użyć. Według specyfikacji HTML5 ze strony organizacji w3:

...
The canvas element provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, or other visual images on the fly.
...

Canvas jest więc elementem, dzięki któremu skrypty mają do dyspozycji powierzchnię o określonej rozdzielczości, po której mogą rysować i dynamicznie zmieniać jego zawartość.

Szablon projektu

Na początku powinniśmy stworzyć stronę, na której umieszczony będzie nasz Canvas. Dla większej przejrzystości kod naszej aplikacji umieścimy w oddzielnym pliku ze skryptami.
W uproszczeniu plik strony może wyglądać tak: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="html5Scripts.js"></script> <title>Zabawy z HTML5</title> </head> <body> <canvas id="mojCanvas"> Twoja przeglądarka nie obsługuje elementu Canvas. </canvas> <script> inicjalizujGre(document.getElementById("mojCanvas")); </script> </body> </html>

Warto zwrócić uwagę na DOCTYPE i sposób określenia języka, znacznie skrócone względem wcześniejszej wersji :).
Nie ma tu szczególnie skomplikowanych fragmentów: podłączamy nasz plik ze skryptami, umieszczamy nasz canvas i przekazujemy go do funkcji inicjalizującej.
Dodatkowo wewnątrz znacznika canvas umieszczamy tekst, który zostanie wyświetlony, jeśli przeglądarka nie obsługuje tego elementu.

Główna pętla gry

Jeśli gra ma posiadać elementy zmieniające się w czasie, powinna posiadać pętlę główną. Możemy ją zaimplementować następująco w oparciu o funkcję wywoływaną w timerze co określoną liczbę milisekund. Plik html5Scripts.js będzie wówczas prezentował się następująco: var canvasElement; var szerokoscCanvas = 640; var wysokoscCanvas = 480; var context; var dlugoscKlatki = 100; function glownaPetla() { } function inicjalizujGre(glownyCanvas) { canvasElement = glownyCanvas; canvasElement.width = szerokoscCanvas; canvasElement.height = wysokoscCanvas; /* jeśli element canvas jest obsługiwany */ if (canvasElement.getContext) { context = canvasElement.getContext("2d"); /* uruchom glowna petle gry */ setInterval(glownaPetla, dlugoscKlatki); } else { alert("Element Canvas nie jest obsługiwany przez twoją przeglądarkę."); } }

Zimowy klimat

Mamy skrypt inicjalizujący część najważniejszych zmiennych dla obsługi gry, jednak w pętli głównej nic się nie dzieje. Na zakończenie tej części dopiszmy coś, żeby wczuć się w świąteczny klimat :). Przy okazji pokażę m. in. jak można "zasymulować" klasy w Java Script, w którym tak naprawdę klas nie ma :P.

Dodajmy kilka nowych linii na początku naszego pliku ze skryptami: var dlugoscKlatki = 100; var licznikKlatek = 0; var liczbaPlatkowMax = 100; //maksymalny promien platka var rozmiarPlatkaMax = 5; /* maksymalna liczba klatek, przez ktore platek moze leciec bez mozliwosc zmiany kierunku */ var dlugoscProstegoToruMax = 30; function PlatekSniegu(startX, startY) { //wspolrzedna x this.x = startX; //wspolrzedna y this.y = startY; //promien this.r = 5; //pozioma skladowa predkosci platka: -1 w lewo, 0 brak, 1 w prawo this.kierunek = 0; /* wartosc ze zbioru {-1, 0, 1} */ //liczba klatek do nastepnego losowania skladowej poziomej kierunku this.dlugosc = 0; } var platki = [];

Dodaliśmy właśnie coś na kształt konstruktora klasy PlatekSniegu, który definiuje pola xy, r oraz dlugosc. Więcej o sposobach definiowania klas w jednym z kolejnych postów ;).

Następnie dodajmy jeden płatek do tablicy zanim główna pętla zostanie wywołana po raz pierwszy.

//w funkcji inicjalizujGre ... context = canvasElement.getContext("2d"); platki[0] = new PlatekSniegu(100, 0); /* uruchom glowna petle gry */ setInterval(glownaPetla, dlugoscKlatki); ...

Na koniec zmodyfikujmy główną pętlę w następujący sposób: function glownaPetla() { /* wyczysc ekran po poprzedniej klatce */ context.fillStyle = "rgba(0, 0, 0, 1)"; context.fillRect(0, 0, szerokoscCanvas, wysokoscCanvas); /* zaktualizuj zmienne i narysuj aktualna klatke */ //co 10 klatek dodaj nowy platek sniegu az do osiagniecia maksymalnej ich liczby if (licznikKlatek++ == 10 && platki.length < liczbaPlatkowMax) { //dodaj nowy platek var nowyPlatek = new PlatekSniegu(Math.floor(Math.random()*szerokoscCanvas), 0); nowyPlatek.r = Math.floor(Math.random()*rozmiarPlatkaMax) + 1; nowyPlatek.dlugosc = Math.floor(Math.random()*dlugoscProstegoToruMax) + 1; platki[platki.length] = nowyPlatek; licznikKlatek = 0; } //dla kazego platka for(var j = 0; j < platki.length; j++) { //jesli platek jest poza canvasem if (platki[j].y > wysokoscCanvas + platki[j].r) { //przesun go na gore platki[j].y = 0; } //sprawdz czy wylosowac nowy kierunek lotu platka if (platki[j].dlugosc > 0) { platki[j].dlugosc--; } else { //losujemy liczbe calkowita z przedzialu [1;30] platki[j].dlugosc = Math.floor(Math.random()*dlugoscProstegoToruMax)+1; //losujemy liczbe ze zbioru {-1, 0, 1} platki[j].kierunek = Math.floor(Math.random()*3)-1; } //aktualizuj pozycje platka platki[j].x += platki[j].kierunek; platki[j].y++; //rysuj platek context.fillStyle = "#fff"; context.beginPath(); context.arc(platki[j].x, platki[j].y, platki[j].r, 0, 2*Math.PI, true /* informacja w ktora strone rysowac luk */); context.closePath(); context.fill(); } }

Po uruchomieniu naszym oczom powinien ukazać się padający śnieg :).

Przykład miał być krótki, ale trochę się rozrósł :P. Komentarze tłumaczą jakie zadanie realizują kolejne linie kodu. Jeśli coś nie działa, coś działa:P, coś nie jest jasne lub jest zbyt jasne i następnym razem nie muszę tak szczegółowo opisywać, piszcie :).

Mam nadzieję, że ten artykuł pomoże choć trochę osobom rozpoczynającym swoją przygodę z HTML5 lub/i językiem Java Script. W kolejnej części napiszę trochę m. in. o animacji i interakcji z użytkownikiem.

Pozdrawiam,

Łukasz

P.S. Przed publikacją tego posta zauważyłem, że niedawno pojawił się wpis o HTML5 pt. Gry w HTML5 autorstwa użytkownika deepone. Co prawda mój nie jest inspirowany tamtym, ale warto go przeczytać i zagrać w opisaną tam grę o piratach i stokrotkach :).

UPDATE

W kodzie przykładowym pojawiły się drobne błędy. Nie wątpię, że szybko je wykryliście, ale dla jasności tutoriala poprawiłem je :). Jeśli pojawią się jakieś problemy z uruchomieniem przykładu, piszcie. 

Komentarze

0 nowych
floyd   14 #1 28.12.2010 00:19

Po pierwsze:
Jeżeli to miał być przykład dla początkujących to moje gratulacje bo po przepisaniu tych listingów nikomu nie uda się tego skryptu uruchomić. Moim zdaniem jeżeli już podaje się listingi to należało by to robić precyzyjnie albo przynajmniej poinformować, że trzeba coś tam dostosować.
Szablon projektu dla tego przykładu powinien wyglądać tak:

Zabawy z HTML5

inicjalizujGre(document.getElementById("glownyCanvas"));

Po drugie:
Objekty canvas nie są obslugiwane przez IE i jeżeli tak zostanie to będzie to tylko ciekawostka bez przyszłości.
Po trzecie:
Porównywanie html5 z Flashem to jak na razie śmiech na sali, przynajmniej według mnie. Bardziej mi to przypomina pierwsze próby tworzenia gier na komputerach 8 bitowych sprzed 20 lat. W każdym bądź razie podobnie to wygląda.

floyd   14 #2 28.12.2010 00:26

PS.Nie wyszło z tym listingiem. :(
W każdym bądź razie należy w projekcie poprawić linie.
canvas id="myCanvas" na
canvas id="glownyCanvas"
i
initializeGame(document.getElementById("myCanvas"));
na
inicjalizujGre(document.getElementById("glownyCanvas"));

  #3 28.12.2010 05:50

"Objekty canvas nie są obslugiwane przez IE i jeżeli tak zostanie to będzie to tylko ciekawostka bez przyszłości."

Weź sobie nie żartuj, od kiedy IE jest wyznacznikiem? ;P A poza tym rozwija się takie cuś jak iecanvas lub explorercanvas ;)

A tak poza tym to KulkiWEB, które napisłem są oparte na canvasie/js ;)

ŁukaszPL   3 #4 28.12.2010 10:31

Hej,

dzięki, że zwróciłeś uwagę na błędy, które wkradły się do kodu. Są one skutkiem teog, że najpierw zacząłem zmienne nazywać po angielsku, a przed publikacją zmieniłem ich nazwy na polskie (chociaż, jak widać, nie we wszystkich miejscach). Naniosłem już poprawki do artykułu.
Sorry za zamieszanie.

Odnośnie innych uwag:
1. To miał być artykuł dla początkujących w HTML5 i JS, a nie w programowaniu :P. Pomimo tego starałem się opisywać co się dzieje w kodzie dość jasno tak, aby mógł zrozumieć je każdy, kto miał już wcześniej choć trochę do czynienia z programowaniem. Według mnie kod jest dość precyzyjny, bo (pomijając drobne błędy w HTMLu) wystarczy go skopiować do notatnika :P. Za błędy jeszcze raz przepraszam.
2. Nie napisałem nigdzie, że Canvas działa pod IE :P, jednak masz rację, że powinienem to zaznaczyć. Jeśli ktoś używa tylko tej przeglądarki i chce się pobawić Canvasem, może ściągnąć explorercanvas ze strony http://code.google.com/p/explorercanvas/. Nie testowałem tego rozwiązania.
3.Hmmm, może wyraziłem się niezbyt precyzyjnie. Nie chodziło mi o to, że jest konkurencyjny, tylko o szum wokół tego, że może być. Gry w HTML5 nie wyglądają tak źle pod względem graficznym (a przynajmniej nie muszą :P), ale Flash ma również pod tym względem przewagę. Tak czy inaczej, tak jak napisałem, nie o tym jest ten artykuł :P.

Pozdrawiam,

Łukasz

floyd   14 #5 28.12.2010 18:47

@ŁukaszPL
Trochę źle mnie zrozumiałeś. Poza pierwszą uwagą odnośnie nieprecyzyjności kodu, to pozostałe moje uwagi nie były komentarzem Twojej wypowiedzi, ale były moimi refleksjami na temat html5. W każdym bądź razie nie chciał bym Cię zniechęcić do pisania tego typu publikacji. :)

t0d   1 #6 28.12.2010 20:37

Tekst nie zły, ale napisany w stylu "patrzcie jaki ja jestem mądry" początkujący preferują styl "patrzcie jakie to proste"

przemek1234   7 #7 28.12.2010 20:57

Jest jeszcze taki projekt, który ponoć podlinkowany do strony odpowiednim kodem dodaje HTML5 do IE. Testował to ktoś?

http://code.google.com/p/html5shiv/

ŁukaszPL   3 #8 28.12.2010 21:15

@t0d: Hmmm, szkoda, że odniosłeś takie wrażenie, bo nie było to zamierzone. Ja z JSem w połączeniu z HTML5 nie mam dużego doświadczenia, cykl powstaje częściowo w ramach mojego zapoznawania się z tym językiem, a zdobyte informacje przekazuję czytelnikom :).
Zastanawiałem się czy adresować tekst do zupełnie początkujących czy do bardziej zaawansowanych programistów, którzy np.: chcą się zaznajomić z JS, dlatego tekst jest skierowany bardziej do osób, które mają pewne doświadczenie w programowaniu, ale HTML ani JS nie muszą znać.
Stąd też wynika prośba pod koniec posta o informacje czy osobom chcącym czytać dalej o tej tematyce odpowiada taki sposób tłumaczenia, czy nie rozpisywać tego lub czy opisywać pewne rzeczy dokładniej.

Dlatego też proszę jeszcze raz: jeśli coś jest niejasne lub nie odpowiada wam sposób tłumaczenia kodu, piszcie :).

@przemek1234: Nie testowałem, ale dzięki za informacje :).

Pozdrawiam,

Łukasz

ŁukaszPL   3 #9 28.12.2010 21:19

@floyd: Dzięki, że zwróciłeś moją uwagę na ten błąd z nazwą funkcji, przeoczyłem to :).

fenixproductions   6 #10 29.12.2010 04:05

@ŁukaszPL
Kilka sugestii z mojej strony:

1. Polecam wpisać tekst (jako fallback) pomiędzy znaczniki canvas (pytajniki zastąp nawiasami):

?canvas id="mojCanvas"?
Twoja przeglądarka nie obsługuje elementu canvas!
?/canvas?

2. Zawsze warto sprawdzić, czy dostałeś poprawny obiekt zatem zamiast:

if (canvasElement.getContext)

użyj:

if (canvasElement && canvasElement.getContext)

3. Wymiary definiujesz jako własne zmienne w JS, a przecież po to stworzono atrybuty width oraz height samego canvas (w JS użyjesz canvasElement.width oraz canvasElement.height).

Zatem:

?canvas id="mojCanvas" width="640" height="480"?
Twoja przeglądarka nie obsługuje elementu canvas!
?/canvas?


4. Linkujesz swój skrypt na początku pliku HTML, co może spowolnić wczytywanie strony. Nie lepiej zlinkować na końcu, a inicjalizujGre() wywołać kiedy dokument jest "ready"?

5. Według specyfikacji języka, najprościej wyczyścisz canvas używając:

canvasElement.width = canvasElement.width;

ewentualnie:

context.clearRect(0, 0, canvasElement.width, canvasElement.height);

6. Wstaw spację przed / w deklaracji kodowania.

7. Zamiast wyskakującego okienka z informacją o braku wsparcia (alert), po prostu wpisz komunikat w stronę (mniej irytuje).

DawidDS4   5 #11 29.12.2010 18:14

Ja myślałem, że dasz tutka jak stworzyć coś a'la flashowe gry.. :(

ŁukaszPL   3 #12 29.12.2010 19:55

@fenixproductions: Dzięki za rzeczowe uwagi :). Co do wykrywania obsługi canvasu, robi to JS, więc pominąłem umieszczanie dodatkowo informacji wewnątrz elementu, jak to opisałeś w 1. uwadze. Z drugiej strony warto o tym napisać :). Odnośnie 3. uwagi używam właściwości width i height elementu canvas, ale wolę mieć w jednym miejscu zdefiniowane wszystkie wielkości, które potencjalnie mogą być zmieniane.
Uwaga 4. jest słuszna, napiszę o tym w kolejnej części kursu.
Co do czyszczenia ekranu, jest ono i tak tymczasowe (mam zamiar pokazać inny sposób), ale warto wiedzieć, że są szybsze metody dla prostego czyszczenia.
Pozostałe uwagi są również wartościowe, więc dzięki :).

@DawiDS4: Trzeba zacząć od podstaw, żeby później móc tworzyć bardziej skomplikowane rzeczy :). W kolejnych częściach mam zamiar przybliżać kolejne elementy, przy okazji tworząc prostą grę ;).

Dzięki za komentarze :).
Pozdrawiam,

Łukasz

wszerad   5 #13 29.12.2010 22:11

Ja myślę, że w kwestii wydajności canvas nie powiedziano ostatniego słowa i jeszcze stanie się realną konkurencją dla flasha. Na początek mogli by przystosować webworkers do obróbki grafiki bo jednoczesne rendowanie grafiki i reakcja na zdarzenia to największy problem tej technologii.

fenixproductions   6 #14 29.12.2010 23:13

@ŁukaszPL

JS wykrywa obsługę, ale nie sprawdzi się, jeśli ktoś używa NoScripta (znam wiele takich osób).

ŁukaszPL   3 #15 31.12.2010 10:19

@fenixproductions:
Masz rację, jeśli ktoś ma wyłączoną obsługę JS nie pojawi mu się żadna informacja jeśli canvas nie jest obsługiwany. Dodałem do kodu przykładowego.

Pozdrawiam,

Łukasz

Ryan   15 #16 03.01.2011 12:02

1. IE9 obsługuje Canvas.
2. IE6 i nowsze mają warstwę emulacji podaną w jednym z komentarz. Niedoskonałą, bo m.in. bez obsługi tekstu, ale jest. Używałem jej w jednym z zadań z polowania na diodę (to z bramkami). Dodałem nawet do tego, co oferuje Google, prostą obsługę tekstu.

przemo_li   11 #17 09.01.2011 18:38

Tak IE9 obsługuje Canvas, ale tylko 2D.
WebGL ciągle nie jest obługiwany.

  #18 26.03.2012 20:22

Treść merytoryczna ok ale opisanie i składnia poradnika to jest masakra!

  #19 26.05.2013 12:57

nic nie rozumiem

kacpx123   1 #20 01.02.2015 18:41

Dodawałem wszystkie wasze zalecenia i i tak nie działa.
PS. Jak komuś działa proszę o przesłanie pliku skryptów.